@kms-ngx-ui/presentational 20.4.3 → 20.5.0

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, InjectionToken, inject, Injector, ViewChild, computed, HostBinding, output, signal, effect, ChangeDetectionStrategy, model, ChangeDetectorRef, ViewContainerRef, untracked, DestroyRef, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, InjectionToken, inject, Injector, ViewChild, computed, HostBinding, output, signal, effect, ChangeDetectionStrategy, model, ChangeDetectorRef, ViewContainerRef, untracked, DestroyRef, ElementRef, ContentChildren, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, CurrencyPipe, isPlatformBrowser, NgClass, NgStyle } from '@angular/common';
+import { CommonModule, CurrencyPipe, isPlatformBrowser, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormControl, NG_VALUE_ACCESSOR, NgControl, UntypedFormGroup, UntypedFormControl, FormGroup, ReactiveFormsModule, NG_VALIDATORS, ValueChangeEvent, FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/material/checkbox';
@@ -56,6 +56,8 @@ import { trigger, state, style } from '@angular/animations';
 import { register } from 'swiper/element/bundle';
 import { isEmpty } from 'lodash';
 import moment from 'moment';
+import * as i1$a from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 
 class KmsUiPresentationalComponent {
     constructor() { }
@@ -5065,6 +5067,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     ], template: "<form class=\"kms-generic-form\"\n      [class.kms-generic-form--loading]=\"loading()\"\n      [class.kms-generic-form--disabled]=\"disabled()\"\n      [attr.aria-busy]=\"loading() || null\"\n      [attr.aria-disabled]=\"disabled() || null\"\n      (submit)=\"onFormSubmit($event)\"\n      (keydown.enter)=\"onEnterKey($event)\">\n\n  @if (showActionsTop()) {\n    <kms-form-actions\n      [actionsConfig]=\"config().submitAction!\"\n      [disabled]=\"loading()\"\n      (submitClick)=\"submit()\">\n    </kms-form-actions>\n  }\n\n  @for (section of visibleSections(); track section.key) {\n    <kms-form-section\n      [sectionConfig]=\"section\"\n      [formGroup]=\"form()\"\n      [formId]=\"config().formId\"\n      [formErrorDisplay]=\"config().errorDisplay\"\n      [formDisabledConfig]=\"config().disabledConfig\"\n      [submitted]=\"submitted()\">\n    </kms-form-section>\n  }\n\n  @if (showActionsBottom()) {\n    <kms-form-actions\n      [actionsConfig]=\"config().submitAction!\"\n      [disabled]=\"loading()\"\n      (submitClick)=\"submit()\">\n    </kms-form-actions>\n  }\n\n  @if (loading()) {\n    <div class=\"kms-generic-form__loading-overlay\"></div>\n  }\n\n  <output class=\"kms-generic-form__sr-only\" aria-live=\"polite\">\n    {{ errorAnnouncement() }}\n  </output>\n</form>\n", styles: [":host{display:block}.kms-generic-form{position:relative}.kms-generic-form--loading{pointer-events:none}.kms-generic-form__loading-overlay{position:absolute;inset:0;background:#fff9;z-index:1}.kms-generic-form__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formStateChange: [{ type: i0.Output, args: ["formStateChange"] }], formReady: [{ type: i0.Output, args: ["formReady"] }], fieldValueChange: [{ type: i0.Output, args: ["fieldValueChange"] }] } });
 
+/**
+ * @copyright KMS GmbH
+ */
+class KmsTabContentDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsTabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: KmsTabContentDirective, isStandalone: true, selector: "ng-template[kmsTabContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsTabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[kmsTabContent]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class TabGroupComponent {
+    constructor() {
+        /** Tab definitions with label and optional count. When omitted, mat-tab children are projected directly. */
+        this.tabs = input(...(ngDevMode ? [undefined, { debugName: "tabs" }] : []));
+        /** Index of the initially selected tab. */
+        this.selectedIndex = input(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+        /** Emits the new index whenever the user switches tabs. */
+        this.selectedIndexChange = output();
+        /** Whether to disable the Material ripple effect on tabs. */
+        this.disableRipple = input(true, ...(ngDevMode ? [{ debugName: "disableRipple" }] : []));
+        this.contentTemplates = [];
+    }
+    ngAfterContentInit() {
+        this.contentTemplates = this.tabContents.map((d) => d.templateRef);
+    }
+    onTabChange(index) {
+        this.selectedIndexChange.emit(index);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TabGroupComponent, isStandalone: true, selector: "kms-tab-group", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "tabContents", predicate: KmsTabContentDirective }], ngImport: i0, template: "<mat-tab-group\n  mat-align-tabs=\"start\"\n  mat-stretch-tabs=\"false\"\n  [disableRipple]=\"disableRipple()\"\n  [selectedIndex]=\"selectedIndex()\"\n  (selectedIndexChange)=\"onTabChange($event)\"\n>\n  @if (tabs(); as tabDefs) {\n    @for (tab of tabDefs; track tab.label; let i = $index) {\n      <mat-tab>\n        <ng-template mat-tab-label>\n          <span>{{ tab.label }}</span>\n          @if (tab.count !== undefined) {\n            <span class=\"kms-tab-group__count\">({{ tab.count }})</span>\n          }\n        </ng-template>\n        <ng-template matTabContent>\n          @if (contentTemplates[i]) {\n            <ng-container *ngTemplateOutlet=\"contentTemplates[i]\"></ng-container>\n          }\n        </ng-template>\n      </mat-tab>\n    }\n  } @else {\n    <ng-content></ng-content>\n  }\n</mat-tab-group>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i1$a.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i1$a.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i1$a.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$a.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-tab-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTabsModule, NgTemplateOutlet], template: "<mat-tab-group\n  mat-align-tabs=\"start\"\n  mat-stretch-tabs=\"false\"\n  [disableRipple]=\"disableRipple()\"\n  [selectedIndex]=\"selectedIndex()\"\n  (selectedIndexChange)=\"onTabChange($event)\"\n>\n  @if (tabs(); as tabDefs) {\n    @for (tab of tabDefs; track tab.label; let i = $index) {\n      <mat-tab>\n        <ng-template mat-tab-label>\n          <span>{{ tab.label }}</span>\n          @if (tab.count !== undefined) {\n            <span class=\"kms-tab-group__count\">({{ tab.count }})</span>\n          }\n        </ng-template>\n        <ng-template matTabContent>\n          @if (contentTemplates[i]) {\n            <ng-container *ngTemplateOutlet=\"contentTemplates[i]\"></ng-container>\n          }\n        </ng-template>\n      </mat-tab>\n    }\n  } @else {\n    <ng-content></ng-content>\n  }\n</mat-tab-group>\n" }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], tabContents: [{
+                type: ContentChildren,
+                args: [KmsTabContentDirective]
+            }] } });
+
 class KmsUiPresentationalModule {
     constructor(translate) {
         // Merge all bundled library strings (validator messages, date-input
@@ -5075,7 +5123,10 @@ class KmsUiPresentationalModule {
         if (currentLang) {
             mergeKmsLibMessages(translate, currentLang);
         }
-        translate.onLangChange.subscribe((event) => {
+        // Optional chain: ng-mocks mocks of TranslateService don't expose
+        // `onLangChange`, and we don't want module instantiation in unit tests
+        // to crash on `undefined.subscribe(...)`.
+        translate.onLangChange?.subscribe((event) => {
             mergeKmsLibMessages(translate, event.lang);
         });
     }
@@ -5141,7 +5192,9 @@ class KmsUiPresentationalModule {
             MatNativeDateModule,
             IconComponent,
             InlineAlertComponent,
-            DateInputComponent], exports: [BackToTopComponent,
+            DateInputComponent,
+            TabGroupComponent,
+            KmsTabContentDirective], exports: [BackToTopComponent,
             CheckboxComponent,
             ColorInputComponent,
             DropdownFromDataComponent,
@@ -5175,7 +5228,9 @@ class KmsUiPresentationalModule {
             FormActionsComponent,
             DynamicFieldDirective,
             DateInputComponent,
-            TextInputComponent] }); }
+            TextInputComponent,
+            TabGroupComponent,
+            KmsTabContentDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsUiPresentationalModule, providers: [ViewportService], imports: [CommonModule,
             DragDropModule,
             MatCheckboxModule,
@@ -5203,7 +5258,8 @@ class KmsUiPresentationalModule {
             MatCardModule,
             MatDatepickerModule,
             MatNativeDateModule,
-            DateInputComponent] }); }
+            DateInputComponent,
+            TabGroupComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsUiPresentationalModule, decorators: [{
             type: NgModule,
@@ -5274,6 +5330,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IconComponent,
                         InlineAlertComponent,
                         DateInputComponent,
+                        TabGroupComponent,
+                        KmsTabContentDirective,
                     ],
                     exports: [
                         BackToTopComponent,
@@ -5311,6 +5369,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DynamicFieldDirective,
                         DateInputComponent,
                         TextInputComponent,
+                        TabGroupComponent,
+                        KmsTabContentDirective,
                     ],
                     providers: [ViewportService],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -5400,5 +5460,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, ImageUploadComponent, 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 { 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, ImageUploadComponent, InlineAlertComponent, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, KmsTabContentDirective, 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, TabGroupComponent, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
 //# sourceMappingURL=kms-ngx-ui-presentational.mjs.map