@kms-ngx-ui/presentational 20.2.1 → 20.3.0

package/fesm2022/kms-ngx-ui-presentational.mjs

@@ -1590,15 +1590,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class LoaderComponent {
     constructor() {
         this.loading = false;
+        /**
+         * Accessible name for the spinner. Required to satisfy WCAG 1.1.1
+         * (aria-progressbar-name) when the loader is visible.
+         */
+        this.ariaLabel = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LoaderComponent, isStandalone: false, selector: "kms-loader", inputs: { loading: "loading" }, ngImport: i0, template: "@if (loading) {\n  <div class=\"loading-spinner-shade\">\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LoaderComponent, isStandalone: false, selector: "kms-loader", inputs: { loading: "loading", ariaLabel: "ariaLabel" }, ngImport: i0, template: "@if (loading) {\n  <div class=\"loading-spinner-shade\">\n    <mat-spinner\n      class=\"spinnerMargin\"\n      color=\"accent\"\n      diameter=\"44\"\n      [attr.aria-label]=\"ariaLabel || null\"\n    ></mat-spinner>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-loader', standalone: false, template: "@if (loading) {\n  <div class=\"loading-spinner-shade\">\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n  </div>\n}\n" }]
+            args: [{ selector: 'kms-loader', standalone: false, template: "@if (loading) {\n  <div class=\"loading-spinner-shade\">\n    <mat-spinner\n      class=\"spinnerMargin\"\n      color=\"accent\"\n      diameter=\"44\"\n      [attr.aria-label]=\"ariaLabel || null\"\n    ></mat-spinner>\n  </div>\n}\n" }]
         }], propDecorators: { loading: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -2698,6 +2705,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class InlineAlertComponent {
+    constructor() {
+        this.type = input('warning', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.icon = input('warning', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InlineAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: InlineAlertComponent, isStandalone: true, selector: "kms-inline-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"inline-alert inline-alert--{{ type() }}\"\n  role=\"alert\"\n  [attr.aria-live]=\"type() === 'error' ? 'assertive' : 'polite'\"\n>\n  <kms-icon class=\"inline-alert__icon\" [icon]=\"icon()\"></kms-icon>\n  <span class=\"inline-alert__content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InlineAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-inline-alert', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], template: "<div\n  class=\"inline-alert inline-alert--{{ type() }}\"\n  role=\"alert\"\n  [attr.aria-live]=\"type() === 'error' ? 'assertive' : 'polite'\"\n>\n  <kms-icon class=\"inline-alert__icon\" [icon]=\"icon()\"></kms-icon>\n  <span class=\"inline-alert__content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n" }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+
 /**
  * @copyright KMS GmbH
  */
@@ -4603,6 +4623,7 @@ class KmsUiPresentationalModule {
             MatDatepickerModule,
             MatNativeDateModule,
             IconComponent,
+            InlineAlertComponent,
             DateInputComponent], exports: [BackToTopComponent,
             CheckboxComponent,
             ColorInputComponent,
@@ -4614,6 +4635,7 @@ class KmsUiPresentationalModule {
             ConfirmationDialogComponent,
             IconComponent,
             ImageSliderComponent,
+            InlineAlertComponent,
             KMSAccordionItemComponent,
             KmsUiPresentationalComponent,
             LoaderComponent,
@@ -4731,6 +4753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MatDatepickerModule,
                         MatNativeDateModule,
                         IconComponent,
+                        InlineAlertComponent,
                         DateInputComponent,
                     ],
                     exports: [
@@ -4745,6 +4768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         ConfirmationDialogComponent,
                         IconComponent,
                         ImageSliderComponent,
+                        InlineAlertComponent,
                         KMSAccordionItemComponent,
                         KmsUiPresentationalComponent,
                         LoaderComponent,
@@ -4949,5 +4973,5 @@ var FormLayout;
  * Generated bundle index. Do not edit.
  */
 
-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, 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 { 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, 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 };
 //# sourceMappingURL=kms-ngx-ui-presentational.mjs.map