@kms-ngx-ui/presentational 20.2.1 → 20.3.0

package/index.d.ts

@@ -517,8 +517,13 @@ declare class KMSAccordionItemComponent implements OnInit {
 
 declare class LoaderComponent {
     loading: boolean;
+    /**
+     * Accessible name for the spinner. Required to satisfy WCAG 1.1.1
+     * (aria-progressbar-name) when the loader is visible.
+     */
+    ariaLabel: string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoaderComponent, "kms-loader", never, { "loading": { "alias": "loading"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoaderComponent, "kms-loader", never, { "loading": { "alias": "loading"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 /**
@@ -1537,6 +1542,14 @@ declare class IconComponent {
     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>;
 }
 
+type InlineAlertType = 'warning' | 'error' | 'info' | 'success';
+declare class InlineAlertComponent {
+    type: _angular_core.InputSignal<InlineAlertType>;
+    icon: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InlineAlertComponent, never>;
+    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>;
+}
+
 type DateRangeValue = {
     start: Date | null;
     end: Date | null;
@@ -1586,7 +1599,7 @@ declare class DateInputComponent implements ControlValueAccessor {
 
 declare class KmsUiPresentationalModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KmsUiPresentationalModule, never>;
-    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]>;
+    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]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KmsUiPresentationalModule>;
 }
 
@@ -1824,5 +1837,5 @@ declare class FieldRegistryService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<FieldRegistryService>;
 }
 
-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 };
-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 };
+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 };
+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

@@ -1,6 +1,6 @@
 {
   "name": "@kms-ngx-ui/presentational",
-  "version": "20.2.1",
+  "version": "20.3.0",
   "peerDependencies": {
     "@angular/cdk": "^20.2.14",
     "@angular/common": "^20.3.15",

package/src/assets/llms.txt

@@ -90,6 +90,7 @@ Dropdown from data component {@link https://leaseplan-dev.rentoffice.de/stylegui
 **Inputs:**
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
+| `ariaLabel` | `string` | `''` | Accessible name for the spinner. Required to satisfy WCAG 1.1.1 (aria-progressbar-name) when the loader is visible. |
 | `loading` | `boolean` | `false` |  |
 
 ### `<kms-map>` — MapComponent
@@ -277,6 +278,14 @@ A confirmation dialog component
 | `deleteImageEvent` | `EventEmitter<number>` |
 | `orderChanged` | `EventEmitter<ImageSnippet[]>` |
 
+### `<kms-inline-alert>` — InlineAlertComponent
+
+**Inputs:**
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | `string` | `'warning'` |  |
+| `type` | `InlineAlertType` | `'warning'` |  |
+
 ### `<kms-accordion-item>` — KMSAccordionItemComponent
 A generic dialog component
 

package/src/lib/ui/molecules/inline-alert/inline-alert.component.scss

@@ -0,0 +1,81 @@
+@mixin inline-alert-theme() {
+  .inline-alert {
+    --kms-inline-alert-warning-bg: color-mix(
+      in srgb,
+      var(--kms-alert) 20%,
+      transparent
+    );
+    --kms-inline-alert-warning-border: var(--kms-alert);
+    --kms-inline-alert-error-bg: color-mix(
+      in srgb,
+      var(--kms-error) 10%,
+      transparent
+    );
+    --kms-inline-alert-error-border: var(--kms-error);
+    --kms-inline-alert-info-bg: color-mix(
+      in srgb,
+      var(--kms-primary-100) 10%,
+      transparent
+    );
+    --kms-inline-alert-info-border: var(--kms-primary-100);
+    --kms-inline-alert-success-bg: color-mix(
+      in srgb,
+      var(--kms-success) 10%,
+      transparent
+    );
+    --kms-inline-alert-success-border: var(--kms-success);
+
+    display: flex;
+    align-items: center;
+    gap: $base-spacing;
+    padding: $base-spacing $base-spacing * 2;
+    border-left: 3px solid;
+    border-radius: var(--kms-border-radius);
+    font-size: 14px;
+    color: var(--kms-tertiary-100);
+
+    &--warning {
+      background-color: var(--kms-inline-alert-warning-bg);
+      border-left-color: var(--kms-inline-alert-warning-border);
+    }
+
+    &--error {
+      background-color: var(--kms-inline-alert-error-bg);
+      border-left-color: var(--kms-inline-alert-error-border);
+    }
+
+    &--info {
+      background-color: var(--kms-inline-alert-info-bg);
+      border-left-color: var(--kms-inline-alert-info-border);
+    }
+
+    &--success {
+      background-color: var(--kms-inline-alert-success-bg);
+      border-left-color: var(--kms-inline-alert-success-border);
+    }
+
+    &__icon {
+      flex-shrink: 0;
+    }
+
+    &--warning &__icon .icon {
+      color: var(--kms-inline-alert-warning-border) !important;
+    }
+
+    &--error &__icon .icon {
+      color: var(--kms-inline-alert-error-border) !important;
+    }
+
+    &--info &__icon .icon {
+      color: var(--kms-inline-alert-info-border) !important;
+    }
+
+    &--success &__icon .icon {
+      color: var(--kms-inline-alert-success-border) !important;
+    }
+
+    &__content {
+      flex: 1;
+    }
+  }
+}

package/src/styles/styles.scss

@@ -26,6 +26,7 @@
 @import '../lib/ui/molecules/confirmation-dialog/confirmation-dialog.component';
 @import '../lib/ui/molecules/file-input/file-input.component';
 @import '../lib/ui/molecules/image-slider/image-slider.component';
+@import '../lib/ui/molecules/inline-alert/inline-alert.component';
 @import '../lib/ui/molecules/kms-accordion-item/kms-accordion-item.component';
 @import '../lib/ui/molecules/numeric-input/numeric-input.component';
 @import '../lib/ui/molecules/password/password.component.scss';
@@ -46,6 +47,7 @@
 @include file-input-theme();
 @include confirmation-dialog-component-theme();
 @include icon-theme();
+@include inline-alert-theme();
 @include image-slider-theme();
 @include kms-accordion-item-theme();
 @include kms-radiogroup();