Kam-pickers consist of a number of generic pickers which can be used by micro frontends but only if the micro frontend is loaded into the shell application Common Workplace.
Indholdsfortegnelse
| Table of Contents |
|---|
makes it possible for other solutions to reuse the already implemented pickers. See Description Of Pickers
Indholdsfortegnelse
| Table of Contents |
|---|
Using kam-pickers in other application than Common Workplace
It is also possible to use the generic pickers in other web applications using the Angular framework.
It has been tested to be working under the following conditions:
Angular version 12.2.16
Angular Material 12.2.13
With the css class mat-typography added on the body tag in index.html
angular-architects/module-federation 12.5.3
angular-architects/module-federation-tools 12.5.3
Theming
If the theming for the pickers should be the same as for the Common Workplace. The below is the theme from Common Workplace:
| Code Block | ||
|---|---|---|
| ||
@use '~@angular/material' as mat;
$kam-primary-palette: (
50: #e4e8eb,
100: #bbc5cd,
200: #8e9eab,
300: #617789,
400: #285175,
500: #1d3c57,
600: #1a364f,
700: #162c40,
800: #11273c,
900: #132638,
A100: #ffffff,
A200: #ffffff,
A400: #ffffff,
A700: #e8eaff,
contrast: (
50: #1a1a1a,
100: #1a1a1a,
200: #1a1a1a,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #1a1a1a,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff,
),
);
$kam-accent-palette: (
50: #f2fef3,
100: #e0fee0,
200: #cbfdcb,
300: #b6fcb6,
400: #a6fba7,
500: #96fa97,
600: #8ef98f,
700: #83f984,
800: #79f87a,
900: #68f669,
A100: #ffffff,
A200: #ffffff,
A400: #ffffff,
A700: #e8ffe8,
contrast: (
50: #1a1a1a,
100: #1a1a1a,
200: #1a1a1a,
300: #1a1a1a,
400: #1a1a1a,
500: #1a1a1a,
600: #1a1a1a,
700: #1a1a1a,
800: #1a1a1a,
900: #1a1a1a,
A100: #1a1a1a,
A200: #1a1a1a,
A400: #1a1a1a,
A700: #1a1a1a,
),
);
$kam-typography: mat.define-typography-config(
$title: mat.define-typography-level(20px, 20px, 400),
$headline: mat.define-typography-level(24px, 24px, 400),
$display-4: mat.define-typography-level(34px, 34px, 400),
$display-3: mat.define-typography-level(48px, 48px, 400),
$display-2: mat.define-typography-level(60px, 60px, 200),
$display-1: mat.define-typography-level(96px, 96px, 200),
);
$kam-primary: mat.define-palette($kam-primary-palette);
$kam-accent: mat.define-palette($kam-accent-palette);
$kam-theme: mat.define-light-theme(
(
color: (
primary: $kam-primary,
accent: $kam-accent,
),
)
);
@include mat.core($kam-typography);
@include mat.core-theme($kam-theme);
@include mat.all-component-themes($kam-theme); |
Import kam-pickers
Kam-pickers is implemented as a WebComponent and can be imported by the use of WebPack and Module federation.
...
| Code Block |
|---|
...
webcomponent$ = from(
loadRemoteModule({
remoteEntry: 'http://localhost:4001/remoteEntry.js',
exposedModule: './WebComponent',
remoteName: 'kamPickers',
})
);
...
} |
| Anchor | ||||
|---|---|---|---|---|
|
Below is a technical guide for each of the pickers implemented by Kam-pickers.
...