@kms-ngx-ui/presentational 20.2.2 → 20.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/fesm2022/kms-ngx-ui-presentational.mjs +53 -6
  2. package/fesm2022/kms-ngx-ui-presentational.mjs.map +1 -1
  3. package/index.d.ts +17 -4
  4. package/package.json +1 -1
  5. package/src/assets/llms.txt +8 -0
  6. package/src/lib/ui/atoms/card/card.component.scss +11 -11
  7. package/src/lib/ui/atoms/dropdown-from-data/dropdown-from-data.component.scss +2 -2
  8. package/src/lib/ui/molecules/button/button.component.scss +3 -3
  9. package/src/lib/ui/molecules/confirmation-dialog/confirmation-dialog.component.scss +3 -3
  10. package/src/lib/ui/molecules/inline-alert/inline-alert.component.scss +81 -0
  11. package/src/lib/ui/molecules/kms-accordion-item/kms-accordion-item.component.scss +2 -2
  12. package/src/lib/ui/molecules/numeric-input/numeric-input.component.scss +2 -2
  13. package/src/lib/ui/molecules/password/password.component.scss +1 -1
  14. package/src/lib/ui/molecules/radiogroup/radiogroup.component.scss +1 -1
  15. package/src/lib/ui/molecules/text-input/text-input.component.scss +2 -2
  16. package/src/lib/ui/molecules/time-input/time-input.component.scss +1 -1
  17. package/src/lib/ui/molecules/yes-no-radiogroup/yes-no-radiogroup.component.scss +2 -2
  18. package/src/lib/ui/organisms/generic-form/components/form-actions/form-actions.component.scss +3 -1
  19. package/src/lib/ui/organisms/generic-form/components/form-field/form-field.component.scss +9 -7
  20. package/src/lib/ui/organisms/generic-form/components/form-section/form-section.component.scss +4 -2
  21. package/src/styles/_tokens.scss +4 -0
  22. package/src/styles/default-values.scss +2 -7
  23. package/src/styles/styles.scss +3 -0
  24. package/src/styles/tooltip.scss +1 -1
package/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
  import { OnInit, EventEmitter, DoCheck, Renderer2, ElementRef, ApplicationRef, ChangeDetectorRef, NgZone, OnChanges, AfterViewInit, WritableSignal, Signal, SimpleChanges, TemplateRef, OnDestroy, PipeTransform, AfterContentChecked, InputSignal, Type } from '@angular/core';
3
3
  import * as i39 from '@angular/forms';
4
- import { ControlValueAccessor, UntypedFormGroup, NgControl, UntypedFormControl, FormControl, FormArray, Validator, ValidationErrors, AsyncValidatorFn, ValidatorFn, FormGroup } from '@angular/forms';
4
+ import { ControlValueAccessor, UntypedFormGroup, NgControl, AbstractControl, UntypedFormControl, FormControl, FormArray, Validator, ValidationErrors, AsyncValidatorFn, ValidatorFn, FormGroup } from '@angular/forms';
5
5
  import * as i35 from '@angular/material/checkbox';
6
6
  import { MatCheckboxChange } from '@angular/material/checkbox';
7
7
  import { Subscription, Observable } from 'rxjs';
@@ -137,7 +137,10 @@ declare class FormControlParentComponent extends FormParentComponent implements
137
137
  internalValue: string;
138
138
  private injector;
139
139
  private _ngControl;
140
+ private readonly _externalControl;
140
141
  get ngControl(): NgControl | null;
142
+ /** The external FormControl — from NgControl (template usage) or the injection token (dynamic creation). */
143
+ get parentControl(): AbstractControl | null;
141
144
  constructor(renderer: Renderer2);
142
145
  ngOnInit(): void;
143
146
  ngDoCheck(): void;
@@ -189,6 +192,8 @@ declare class DropdownFromDataComponent extends FormControlParentComponent imple
189
192
  label: _angular_core.InputSignal<string>;
190
193
  required: _angular_core.InputSignal<boolean>;
191
194
  useEnumIndexAsValue: _angular_core.InputSignal<boolean>;
195
+ /** Derives required state from the explicit input OR the bound control's validators. */
196
+ isRequired(): boolean;
192
197
  multiple: _angular_core.InputSignal<boolean>;
193
198
  selectAllText: _angular_core.InputSignal<string>;
194
199
  disableOptions: _angular_core.InputSignal<boolean>;
@@ -1542,6 +1547,14 @@ declare class IconComponent {
1542
1547
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "kms-icon", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconClass": { "alias": "iconClass"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dontUseSprite": { "alias": "dontUseSprite"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
1543
1548
  }
1544
1549
 
1550
+ type InlineAlertType = 'warning' | 'error' | 'info' | 'success';
1551
+ declare class InlineAlertComponent {
1552
+ type: _angular_core.InputSignal<InlineAlertType>;
1553
+ icon: _angular_core.InputSignal<string>;
1554
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<InlineAlertComponent, never>;
1555
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<InlineAlertComponent, "kms-inline-alert", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
1556
+ }
1557
+
1545
1558
  type DateRangeValue = {
1546
1559
  start: Date | null;
1547
1560
  end: Date | null;
@@ -1591,7 +1604,7 @@ declare class DateInputComponent implements ControlValueAccessor {
1591
1604
 
1592
1605
  declare class KmsUiPresentationalModule {
1593
1606
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<KmsUiPresentationalModule, never>;
1594
- static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KmsUiPresentationalModule, [typeof BackToTopComponent, typeof CheckboxComponent, typeof ColorInputComponent, typeof DropdownFromDataComponent, typeof EnumRadiogroupComponent, typeof FileInputComponent, typeof FlyoutComponent, typeof ConfirmationDialogComponent, typeof ImageSliderComponent, typeof KMSAccordionItemComponent, typeof KmsUiPresentationalComponent, typeof LoaderComponent, typeof MapComponent, typeof RadioButtonComponent, typeof RadioGroupComponent, typeof SalutationDropdownComponent, typeof SalutationRadiogroupComponent, typeof SlideToggleComponent, typeof TimeInputComponent, typeof TooltipIconComponent, typeof YesNoRadiogroupComponent, typeof PasswordComponent, typeof SliderComponent, typeof CardComponent, typeof ButtonComponent, typeof NumericInputComponent, typeof GenericFormComponent, typeof FormSectionComponent, typeof FormFieldComponent, typeof FormActionsComponent, typeof DynamicFieldDirective, typeof TextInputComponent], [typeof i8.CommonModule, typeof i34.DragDropModule, typeof i35.MatCheckboxModule, typeof i36.MatButtonModule, typeof i37.MatRadioModule, typeof i38.MatDialogModule, typeof i39.FormsModule, typeof i39.ReactiveFormsModule, typeof i40.MatFormFieldModule, typeof i41.MatInputModule, typeof i42.MatMenuModule, typeof CustomPipesModule, typeof i44.GoogleMapsModule, typeof i45.MatExpansionModule, typeof i46.MatSelectModule, typeof i47.NgxMatSelectSearchModule, typeof i48.MatProgressSpinnerModule, typeof DirectivesModule, typeof i50.MatSlideToggleModule, typeof i51.TranslateModule, typeof i52.MatTooltipModule, typeof i53.NgxSliderModule, typeof i54.MatAutocompleteModule, typeof i55.MatListModule, typeof i56.MatCardModule, typeof i57.MatDatepickerModule, typeof i58.MatNativeDateModule, typeof IconComponent, typeof DateInputComponent], [typeof BackToTopComponent, typeof CheckboxComponent, typeof ColorInputComponent, typeof DropdownFromDataComponent, typeof EnumRadiogroupComponent, typeof RadioGroupComponent, typeof FileInputComponent, typeof FlyoutComponent, typeof ConfirmationDialogComponent, typeof IconComponent, typeof ImageSliderComponent, typeof KMSAccordionItemComponent, typeof KmsUiPresentationalComponent, typeof LoaderComponent, typeof MapComponent, typeof RadioButtonComponent, typeof SalutationDropdownComponent, typeof SalutationRadiogroupComponent, typeof SlideToggleComponent, typeof TimeInputComponent, typeof TooltipIconComponent, typeof YesNoRadiogroupComponent, typeof PasswordComponent, typeof SliderComponent, typeof CardComponent, typeof ButtonComponent, typeof NumericInputComponent, typeof GenericFormComponent, typeof FormSectionComponent, typeof FormActionsComponent, typeof DynamicFieldDirective, typeof DateInputComponent, typeof TextInputComponent]>;
1607
+ static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KmsUiPresentationalModule, [typeof BackToTopComponent, typeof CheckboxComponent, typeof ColorInputComponent, typeof DropdownFromDataComponent, typeof EnumRadiogroupComponent, typeof FileInputComponent, typeof FlyoutComponent, typeof ConfirmationDialogComponent, typeof ImageSliderComponent, typeof KMSAccordionItemComponent, typeof KmsUiPresentationalComponent, typeof LoaderComponent, typeof MapComponent, typeof RadioButtonComponent, typeof RadioGroupComponent, typeof SalutationDropdownComponent, typeof SalutationRadiogroupComponent, typeof SlideToggleComponent, typeof TimeInputComponent, typeof TooltipIconComponent, typeof YesNoRadiogroupComponent, typeof PasswordComponent, typeof SliderComponent, typeof CardComponent, typeof ButtonComponent, typeof NumericInputComponent, typeof GenericFormComponent, typeof FormSectionComponent, typeof FormFieldComponent, typeof FormActionsComponent, typeof DynamicFieldDirective, typeof TextInputComponent], [typeof i8.CommonModule, typeof i34.DragDropModule, typeof i35.MatCheckboxModule, typeof i36.MatButtonModule, typeof i37.MatRadioModule, typeof i38.MatDialogModule, typeof i39.FormsModule, typeof i39.ReactiveFormsModule, typeof i40.MatFormFieldModule, typeof i41.MatInputModule, typeof i42.MatMenuModule, typeof CustomPipesModule, typeof i44.GoogleMapsModule, typeof i45.MatExpansionModule, typeof i46.MatSelectModule, typeof i47.NgxMatSelectSearchModule, typeof i48.MatProgressSpinnerModule, typeof DirectivesModule, typeof i50.MatSlideToggleModule, typeof i51.TranslateModule, typeof i52.MatTooltipModule, typeof i53.NgxSliderModule, typeof i54.MatAutocompleteModule, typeof i55.MatListModule, typeof i56.MatCardModule, typeof i57.MatDatepickerModule, typeof i58.MatNativeDateModule, typeof IconComponent, typeof InlineAlertComponent, typeof DateInputComponent], [typeof BackToTopComponent, typeof CheckboxComponent, typeof ColorInputComponent, typeof DropdownFromDataComponent, typeof EnumRadiogroupComponent, typeof RadioGroupComponent, typeof FileInputComponent, typeof FlyoutComponent, typeof ConfirmationDialogComponent, typeof IconComponent, typeof ImageSliderComponent, typeof InlineAlertComponent, typeof KMSAccordionItemComponent, typeof KmsUiPresentationalComponent, typeof LoaderComponent, typeof MapComponent, typeof RadioButtonComponent, typeof SalutationDropdownComponent, typeof SalutationRadiogroupComponent, typeof SlideToggleComponent, typeof TimeInputComponent, typeof TooltipIconComponent, typeof YesNoRadiogroupComponent, typeof PasswordComponent, typeof SliderComponent, typeof CardComponent, typeof ButtonComponent, typeof NumericInputComponent, typeof GenericFormComponent, typeof FormSectionComponent, typeof FormActionsComponent, typeof DynamicFieldDirective, typeof DateInputComponent, typeof TextInputComponent]>;
1595
1608
  static ɵinj: _angular_core.ɵɵInjectorDeclaration<KmsUiPresentationalModule>;
1596
1609
  }
1597
1610
 
@@ -1829,5 +1842,5 @@ declare class FieldRegistryService {
1829
1842
  static ɵprov: _angular_core.ɵɵInjectableDeclaration<FieldRegistryService>;
1830
1843
  }
1831
1844
 
1832
- export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DateInputComponent, DirectivesModule, DropdownFromDataComponent, DynamicFieldDirective, EnumRadiogroupComponent, FieldRegistryService, FieldType, FileInputComponent, FlyoutComponent, FormActionsComponent, FormFieldComponent, FormLayout, FormParentComponent, FormSectionComponent, GenericFormComponent, GenericFormModule, GenericFormService, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet$1 as ImageSnippet, ImageSourceType$1 as ImageSourceType, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LabelValuePair, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, RadioButtonSize, RadioGroupComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SanitizeNullPipe, SimpleBreakpoint, SlideToggleComponent, SliderComponent, StylingTheme, SwipeDirective, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
1833
- export type { AsyncValidatorConfig, AutocompleteFieldOptions, CounterFieldOptions, DateFieldOptions, DateRangeFieldOptions, DateRangeValue, DialogConfig, DialogData, DisabledConfig, ErrorDisplayConfig, ErrorDisplayStrategy, FieldAffixConfig, FieldConfig, FieldTypeOptions, FormActionsConfig, FormSectionConfig, GenericFormConfig, GenericFormState, GridAlign, GridVerticalAlign, NullAble, NumberFieldOptions, PasswordFieldOptions, RadioGroupFieldOptions, RadiobuttonInterface, SelectFieldOptions, SelectTranslation, TextareaFieldOptions, TimeFieldOptions, ValidatorConfig };
1845
+ export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DateInputComponent, DirectivesModule, DropdownFromDataComponent, DynamicFieldDirective, EnumRadiogroupComponent, FieldRegistryService, FieldType, FileInputComponent, FlyoutComponent, FormActionsComponent, FormFieldComponent, FormLayout, FormParentComponent, FormSectionComponent, GenericFormComponent, GenericFormModule, GenericFormService, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet$1 as ImageSnippet, ImageSourceType$1 as ImageSourceType, InlineAlertComponent, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LabelValuePair, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, RadioButtonSize, RadioGroupComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SanitizeNullPipe, SimpleBreakpoint, SlideToggleComponent, SliderComponent, StylingTheme, SwipeDirective, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
1846
+ export type { AsyncValidatorConfig, AutocompleteFieldOptions, CounterFieldOptions, DateFieldOptions, DateRangeFieldOptions, DateRangeValue, DialogConfig, DialogData, DisabledConfig, ErrorDisplayConfig, ErrorDisplayStrategy, FieldAffixConfig, FieldConfig, FieldTypeOptions, FormActionsConfig, FormSectionConfig, GenericFormConfig, GenericFormState, GridAlign, GridVerticalAlign, InlineAlertType, NullAble, NumberFieldOptions, PasswordFieldOptions, RadioGroupFieldOptions, RadiobuttonInterface, SelectFieldOptions, SelectTranslation, TextareaFieldOptions, TimeFieldOptions, ValidatorConfig };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kms-ngx-ui/presentational",
3
- "version": "20.2.2",
3
+ "version": "20.3.1",
4
4
  "peerDependencies": {
5
5
  "@angular/cdk": "^20.2.14",
6
6
  "@angular/common": "^20.3.15",
package/src/assets/llms.txt CHANGED
@@ -278,6 +278,14 @@ A confirmation dialog component
278
278
  | `deleteImageEvent` | `EventEmitter<number>` |
279
279
  | `orderChanged` | `EventEmitter<ImageSnippet[]>` |
280
280
 
281
+ ### `<kms-inline-alert>` — InlineAlertComponent
282
+
283
+ **Inputs:**
284
+ | Name | Type | Default | Description |
285
+ |------|------|---------|-------------|
286
+ | `icon` | `string` | `'warning'` | |
287
+ | `type` | `InlineAlertType` | `'warning'` | |
288
+
281
289
  ### `<kms-accordion-item>` — KMSAccordionItemComponent
282
290
  A generic dialog component
283
291
 
package/src/lib/ui/atoms/card/card.component.scss CHANGED
@@ -1,15 +1,15 @@
1
1
  @mixin card-theme() {
2
2
  .card {
3
- --card-shadow-color: var(--kms-tertiary-500);
4
- --card-shadow: 0px 3px 4px 0px var(--card-shadow-color);
5
- --card-background-color: var(--kms-white);
6
- --card-hover-border-color: var(--kms-secondary);
7
- --card-image-height: 180px;
3
+ --kms-card-shadow-color: var(--kms-tertiary-500);
4
+ --kms-card-shadow: 0px 3px 4px 0px var(--kms-card-shadow-color);
5
+ --kms-card-background-color: var(--kms-white);
6
+ --kms-card-hover-border-color: var(--kms-secondary);
7
+ --kms-card-image-height: 180px;
8
8
 
9
9
  overflow: hidden;
10
- box-shadow: var(--card-shadow);
11
- border-radius: 8px;
12
- background-color: var(--card-background-color);
10
+ box-shadow: var(--kms-card-shadow);
11
+ border-radius: var(--kms-border-radius);
12
+ background-color: var(--kms-card-background-color);
13
13
  position: relative;
14
14
  padding: 0;
15
15
  display: flex;
@@ -18,13 +18,13 @@
18
18
 
19
19
  &.hoverEffect {
20
20
  &:hover {
21
- outline: 1px solid var(--card-hover-border-color);
21
+ outline: 1px solid var(--kms-card-hover-border-color);
22
22
  }
23
23
  }
24
24
 
25
25
  &-image {
26
26
  background-color: var(--kms-white);
27
- height: var(--card-image-height);
27
+ height: var(--kms-card-image-height);
28
28
  background-size: cover;
29
29
  justify-content: center;
30
30
  width: auto;
@@ -43,7 +43,7 @@
43
43
  font-weight: bold;
44
44
  font-size: 18px;
45
45
 
46
- margin: 0 0 16px 0px;
46
+ margin: 0 0 $base-spacing * 2 0;
47
47
  }
48
48
  }
49
49
  }
package/src/lib/ui/atoms/dropdown-from-data/dropdown-from-data.component.scss CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  .dropdown-from-data {
9
9
  &__checkbox {
10
- padding: 0 16px;
10
+ padding: 0 $base-spacing * 2;
11
11
  margin: 0;
12
12
  height: 3em;
13
13
  line-height: 3em;
@@ -41,7 +41,7 @@
41
41
  }
42
42
 
43
43
  &__arrow {
44
- margin-right: $base-spacing;
44
+ margin-right: $base-spacing * 2;
45
45
  }
46
46
  }
47
47
  }
package/src/lib/ui/molecules/button/button.component.scss CHANGED
@@ -3,11 +3,11 @@
3
3
  --mat-button-filled-container-shape: 24px;
4
4
  --mat-button-protected-container-shape: 24px;
5
5
  --mat-button-text-container-shape: 24px;
6
- --kms-button-border-radius: 24px;
6
+ --kms-button-border-radius: 4px;
7
7
  }
8
8
 
9
9
  .kms-button {
10
- border-radius: 4px !important;
10
+ border-radius: var(--kms-button-border-radius) !important;
11
11
 
12
12
  // Basic button (text button)
13
13
  &--basic-primary {
@@ -70,7 +70,7 @@
70
70
  }
71
71
 
72
72
  &--rounded {
73
- border-radius: var(--kms-button-border-radius) !important;
73
+ --kms-button-border-radius: 24px;
74
74
  }
75
75
 
76
76
  .kms-button__spinner {
package/src/lib/ui/molecules/confirmation-dialog/confirmation-dialog.component.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @mixin confirmation-dialog-component-theme() {
2
2
  .mat-mdc-dialog-surface {
3
- padding: 24px;
3
+ padding: $base-spacing * 3;
4
4
  > *:first-child,
5
5
  .dialog-container {
6
6
  height: 100%;
@@ -8,7 +8,7 @@
8
8
  flex-direction: column;
9
9
 
10
10
  .dialog-header {
11
- margin-bottom: 24px;
11
+ margin-bottom: $base-spacing * 3;
12
12
  }
13
13
 
14
14
  .dialog-content {
@@ -19,7 +19,7 @@
19
19
  .dialog-footer {
20
20
  display: flex;
21
21
  justify-content: space-between;
22
- margin-top: 24px;
22
+ margin-top: $base-spacing * 3;
23
23
  }
24
24
  }
25
25
  }
package/src/lib/ui/molecules/inline-alert/inline-alert.component.scss ADDED
@@ -0,0 +1,81 @@
1
+ @mixin inline-alert-theme() {
2
+ .inline-alert {
3
+ --kms-inline-alert-warning-bg: color-mix(
4
+ in srgb,
5
+ var(--kms-alert) 20%,
6
+ transparent
7
+ );
8
+ --kms-inline-alert-warning-border: var(--kms-alert);
9
+ --kms-inline-alert-error-bg: color-mix(
10
+ in srgb,
11
+ var(--kms-error) 10%,
12
+ transparent
13
+ );
14
+ --kms-inline-alert-error-border: var(--kms-error);
15
+ --kms-inline-alert-info-bg: color-mix(
16
+ in srgb,
17
+ var(--kms-primary-100) 10%,
18
+ transparent
19
+ );
20
+ --kms-inline-alert-info-border: var(--kms-primary-100);
21
+ --kms-inline-alert-success-bg: color-mix(
22
+ in srgb,
23
+ var(--kms-success) 10%,
24
+ transparent
25
+ );
26
+ --kms-inline-alert-success-border: var(--kms-success);
27
+
28
+ display: flex;
29
+ align-items: center;
30
+ gap: $base-spacing;
31
+ padding: $base-spacing $base-spacing * 2;
32
+ border-left: 3px solid;
33
+ border-radius: var(--kms-border-radius);
34
+ font-size: 14px;
35
+ color: var(--kms-tertiary-100);
36
+
37
+ &--warning {
38
+ background-color: var(--kms-inline-alert-warning-bg);
39
+ border-left-color: var(--kms-inline-alert-warning-border);
40
+ }
41
+
42
+ &--error {
43
+ background-color: var(--kms-inline-alert-error-bg);
44
+ border-left-color: var(--kms-inline-alert-error-border);
45
+ }
46
+
47
+ &--info {
48
+ background-color: var(--kms-inline-alert-info-bg);
49
+ border-left-color: var(--kms-inline-alert-info-border);
50
+ }
51
+
52
+ &--success {
53
+ background-color: var(--kms-inline-alert-success-bg);
54
+ border-left-color: var(--kms-inline-alert-success-border);
55
+ }
56
+
57
+ &__icon {
58
+ flex-shrink: 0;
59
+ }
60
+
61
+ &--warning &__icon .icon {
62
+ color: var(--kms-inline-alert-warning-border) !important;
63
+ }
64
+
65
+ &--error &__icon .icon {
66
+ color: var(--kms-inline-alert-error-border) !important;
67
+ }
68
+
69
+ &--info &__icon .icon {
70
+ color: var(--kms-inline-alert-info-border) !important;
71
+ }
72
+
73
+ &--success &__icon .icon {
74
+ color: var(--kms-inline-alert-success-border) !important;
75
+ }
76
+
77
+ &__content {
78
+ flex: 1;
79
+ }
80
+ }
81
+ }
package/src/lib/ui/molecules/kms-accordion-item/kms-accordion-item.component.scss CHANGED
@@ -22,8 +22,8 @@
22
22
 
23
23
  .kms-accordion__header {
24
24
  height: auto;
25
- padding-top: $base-spacing-hoz;
26
- padding-bottom: $base-spacing-hoz;
25
+ padding-top: $base-spacing * 3;
26
+ padding-bottom: $base-spacing * 3;
27
27
  }
28
28
 
29
29
  &__title {
package/src/lib/ui/molecules/numeric-input/numeric-input.component.scss CHANGED
@@ -3,10 +3,10 @@
3
3
  display: flex;
4
4
  flex-direction: row;
5
5
  align-items: center;
6
- gap: 16px;
6
+ gap: $base-spacing * 2;
7
7
  width: fit-content;
8
8
  background-color: var(--kms-tertiary-800);
9
- padding: 4px 8px;
9
+ padding: $base-spacing * 0.5 $base-spacing;
10
10
  border-radius: 24px;
11
11
 
12
12
  strong {
package/src/lib/ui/molecules/password/password.component.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  &__strength-item {
13
13
  display: flex;
14
14
  align-items: center;
15
- gap: 8px;
15
+ gap: $base-spacing;
16
16
  }
17
17
  }
18
18
  }
package/src/lib/ui/molecules/radiogroup/radiogroup.component.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @mixin radiogroup-theme() {
2
2
  .radiogroup {
3
3
  kms-tooltip-icon.margin-left {
4
- margin: 8px !important;
4
+ margin: $base-spacing !important;
5
5
  }
6
6
  .radiobutton-container {
7
7
  display: flex;
package/src/lib/ui/molecules/text-input/text-input.component.scss CHANGED
@@ -5,11 +5,11 @@
5
5
  }
6
6
 
7
7
  &__prefix {
8
- margin-left: $base-spacing;
8
+ margin-left: $base-spacing * 2;
9
9
  }
10
10
 
11
11
  &__suffix {
12
- margin-right: $base-spacing;
12
+ margin-right: $base-spacing * 2;
13
13
  }
14
14
  }
15
15
  }
package/src/lib/ui/molecules/time-input/time-input.component.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @mixin time-input-theme() {
2
2
  .kms-time-input {
3
3
  &__suffix {
4
- margin-right: 16px;
4
+ margin-right: $base-spacing * 2;
5
5
  }
6
6
  }
7
7
  }
package/src/lib/ui/molecules/yes-no-radiogroup/yes-no-radiogroup.component.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  .mat-mdc-radio-group {
3
3
  display: flex;
4
4
  .mat-mdc-radio-button {
5
- padding-right: 16px;
5
+ padding-right: $base-spacing * 2;
6
6
  color: var(--kms-primary-100);
7
7
 
8
8
  &.disabled {
@@ -11,7 +11,7 @@
11
11
  }
12
12
  .mat-radio-button-vertical {
13
13
  display: flex;
14
- padding-bottom: 16px;
14
+ padding-bottom: $base-spacing * 2;
15
15
  }
16
16
  }
17
17
  }
package/src/lib/ui/organisms/generic-form/components/form-actions/form-actions.component.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import '../../../../../../styles/default-values';
2
+
1
3
  :host {
2
4
  display: block;
3
5
  }
@@ -5,5 +7,5 @@
5
7
  .kms-form-actions {
6
8
  display: flex;
7
9
  justify-content: flex-end;
8
- padding: 8px 0;
10
+ padding: $base-spacing 0;
9
11
  }
package/src/lib/ui/organisms/generic-form/components/form-field/form-field.component.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import '../../../../../../styles/default-values';
2
+
1
3
  :host {
2
4
  display: block;
3
5
  }
@@ -10,8 +12,8 @@
10
12
  &__label-row {
11
13
  display: flex;
12
14
  align-items: center;
13
- gap: 4px;
14
- margin-bottom: 4px;
15
+ gap: $base-spacing * 0.5;
16
+ margin-bottom: $base-spacing * 0.5;
15
17
  }
16
18
 
17
19
  &__group-label {
@@ -23,7 +25,7 @@
23
25
  &__row {
24
26
  display: flex;
25
27
  align-items: flex-start;
26
- gap: 4px;
28
+ gap: $base-spacing * 0.5;
27
29
  }
28
30
 
29
31
  &__control {
@@ -34,12 +36,12 @@
34
36
  &__tooltip {
35
37
  flex-shrink: 0;
36
38
  cursor: help;
37
- padding-top: 16px;
39
+ padding-top: $base-spacing * 2;
38
40
  }
39
41
 
40
42
  &__errors {
41
- padding: 0 16px;
42
- margin-top: 4px;
43
+ padding: 0 $base-spacing * 2;
44
+ margin-top: $base-spacing * 0.5;
43
45
  }
44
46
 
45
47
  &__error {
@@ -67,7 +69,7 @@
67
69
  kms-numeric-input {
68
70
  display: flex;
69
71
  align-items: center;
70
- gap: 12px;
72
+ gap: $base-spacing * 1.5;
71
73
  }
72
74
 
73
75
  // Disabled styling via CSS custom property
package/src/lib/ui/organisms/generic-form/components/form-section/form-section.component.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import '../../../../../../styles/default-values';
2
+
1
3
  :host {
2
4
  display: block;
3
5
  }
@@ -11,10 +13,10 @@
11
13
  &__legend {
12
14
  display: flex;
13
15
  align-items: center;
14
- gap: 4px;
16
+ gap: $base-spacing * 0.5;
15
17
  font-size: 16px;
16
18
  font-weight: 500;
17
- padding: 0 0 8px;
19
+ padding: 0 0 $base-spacing;
18
20
  width: 100%;
19
21
  }
20
22
 
package/src/styles/_tokens.scss ADDED
@@ -0,0 +1,4 @@
1
+ :root {
2
+ --kms-border-radius: 8px;
3
+ --kms-shadow: 0px 3px 4px 0px var(--kms-tertiary-500);
4
+ }
package/src/styles/default-values.scss CHANGED
@@ -8,10 +8,5 @@ $responsive-breakpoint-xxxl: 1920px !default;
8
8
  $responsive-breakpoint: $responsive-breakpoint-s !default;
9
9
 
10
10
  // spacing
11
- $base-spacing: 16px !default;
12
- $base-spacing-vert: 16px !default;
13
- $base-spacing-hoz: 24px !default;
14
- $base-spacing-vert-half: 8px !default;
15
- $base-spacing-hoz-half: 12px !default;
16
- $base-spacing-vert-double: 32px !default;
17
- $base-spacing-hoz-double: 48px !default;
11
+ // Single base unit — derive other spacing values by multiplying (e.g. $base-spacing * 2, * 3).
12
+ $base-spacing: 8px !default;
package/src/styles/styles.scss CHANGED
@@ -6,6 +6,7 @@
6
6
 
7
7
  // Variables
8
8
  @import '_colors.scss';
9
+ @import '_tokens.scss';
9
10
 
10
11
  // Components
11
12
 
@@ -26,6 +27,7 @@
26
27
  @import '../lib/ui/molecules/confirmation-dialog/confirmation-dialog.component';
27
28
  @import '../lib/ui/molecules/file-input/file-input.component';
28
29
  @import '../lib/ui/molecules/image-slider/image-slider.component';
30
+ @import '../lib/ui/molecules/inline-alert/inline-alert.component';
29
31
  @import '../lib/ui/molecules/kms-accordion-item/kms-accordion-item.component';
30
32
  @import '../lib/ui/molecules/numeric-input/numeric-input.component';
31
33
  @import '../lib/ui/molecules/password/password.component.scss';
@@ -46,6 +48,7 @@
46
48
  @include file-input-theme();
47
49
  @include confirmation-dialog-component-theme();
48
50
  @include icon-theme();
51
+ @include inline-alert-theme();
49
52
  @include image-slider-theme();
50
53
  @include kms-accordion-item-theme();
51
54
  @include kms-radiogroup();
package/src/styles/tooltip.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  top: 0;
7
7
  left: 0;
8
8
  border-radius: 10px;
9
- padding: 16px;
9
+ padding: $base-spacing * 2;
10
10
  background-color: var(--kms-white);
11
11
  box-shadow: 0px 6px 4px var(--kms-tertiary-500);
12
12
  max-width: 200px;