@kms-ngx-ui/presentational 20.4.4 → 20.5.0

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, EventEmitter, DoCheck, Renderer2, ElementRef, ApplicationRef, ChangeDetectorRef, NgZone, OnChanges, AfterViewInit, WritableSignal, Signal, SimpleChanges, TemplateRef, OnDestroy, PipeTransform, AfterContentChecked, InputSignal, Type } from '@angular/core';
+import { OnInit, EventEmitter, DoCheck, Renderer2, ElementRef, ApplicationRef, ChangeDetectorRef, NgZone, OnChanges, AfterViewInit, WritableSignal, Signal, SimpleChanges, TemplateRef, OnDestroy, PipeTransform, AfterContentChecked, InputSignal, AfterContentInit, QueryList, Type } from '@angular/core';
 import * as i52 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
 import * as i40 from '@angular/forms';
@@ -1669,10 +1669,40 @@ declare class DateInputComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateInputComponent, "kms-date-input", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "monthPicker": { "alias": "monthPicker"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; "rangeChange": "rangeChange"; }, never, never, true, never>;
 }
 
+interface KmsTab {
+    /** Text displayed in the tab label. */
+    label: string;
+    /** Optional count badge displayed next to the label. */
+    count?: number;
+}
+
+declare class KmsTabContentDirective {
+    templateRef: TemplateRef<unknown>;
+    constructor(templateRef: TemplateRef<unknown>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KmsTabContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KmsTabContentDirective, "ng-template[kmsTabContent]", never, {}, {}, never, never, true, never>;
+}
+declare class TabGroupComponent implements AfterContentInit {
+    /** Tab definitions with label and optional count. When omitted, mat-tab children are projected directly. */
+    tabs: _angular_core.InputSignal<KmsTab[]>;
+    /** Index of the initially selected tab. */
+    selectedIndex: _angular_core.InputSignal<number>;
+    /** Emits the new index whenever the user switches tabs. */
+    selectedIndexChange: _angular_core.OutputEmitterRef<number>;
+    /** Whether to disable the Material ripple effect on tabs. */
+    disableRipple: _angular_core.InputSignal<boolean>;
+    tabContents: QueryList<KmsTabContentDirective>;
+    contentTemplates: TemplateRef<unknown>[];
+    ngAfterContentInit(): void;
+    onTabChange(index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabGroupComponent, "kms-tab-group", never, { "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; }, { "selectedIndexChange": "selectedIndexChange"; }, ["tabContents"], ["*"], true, never>;
+}
+
 declare class KmsUiPresentationalModule {
     constructor(translate: TranslateService);
     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 ImageUploadComponent, 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 i35.DragDropModule, typeof i36.MatCheckboxModule, typeof i37.MatButtonModule, typeof i38.MatRadioModule, typeof i39.MatDialogModule, typeof i40.FormsModule, typeof i40.ReactiveFormsModule, typeof i41.MatFormFieldModule, typeof i42.MatInputModule, typeof i43.MatMenuModule, typeof CustomPipesModule, typeof i45.GoogleMapsModule, typeof i46.MatExpansionModule, typeof i47.MatSelectModule, typeof i48.NgxMatSelectSearchModule, typeof i49.MatProgressSpinnerModule, typeof DirectivesModule, typeof i51.MatSlideToggleModule, typeof i52.TranslateModule, typeof i53.MatTooltipModule, typeof i54.NgxSliderModule, typeof i55.MatAutocompleteModule, typeof i56.MatListModule, typeof i57.MatCardModule, typeof i58.MatDatepickerModule, typeof i59.MatNativeDateModule, typeof IconComponent, typeof InlineAlertComponent, typeof DateInputComponent], [typeof BackToTopComponent, typeof CheckboxComponent, typeof ColorInputComponent, typeof DropdownFromDataComponent, typeof EnumRadiogroupComponent, typeof RadioGroupComponent, typeof FileInputComponent, typeof ImageUploadComponent, 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 ɵmod: _angular_core.ɵɵNgModuleDeclaration<KmsUiPresentationalModule, [typeof BackToTopComponent, typeof CheckboxComponent, typeof ColorInputComponent, typeof DropdownFromDataComponent, typeof EnumRadiogroupComponent, typeof FileInputComponent, typeof ImageUploadComponent, 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 i35.DragDropModule, typeof i36.MatCheckboxModule, typeof i37.MatButtonModule, typeof i38.MatRadioModule, typeof i39.MatDialogModule, typeof i40.FormsModule, typeof i40.ReactiveFormsModule, typeof i41.MatFormFieldModule, typeof i42.MatInputModule, typeof i43.MatMenuModule, typeof CustomPipesModule, typeof i45.GoogleMapsModule, typeof i46.MatExpansionModule, typeof i47.MatSelectModule, typeof i48.NgxMatSelectSearchModule, typeof i49.MatProgressSpinnerModule, typeof DirectivesModule, typeof i51.MatSlideToggleModule, typeof i52.TranslateModule, typeof i53.MatTooltipModule, typeof i54.NgxSliderModule, typeof i55.MatAutocompleteModule, typeof i56.MatListModule, typeof i57.MatCardModule, typeof i58.MatDatepickerModule, typeof i59.MatNativeDateModule, typeof IconComponent, typeof InlineAlertComponent, typeof DateInputComponent, typeof TabGroupComponent, typeof KmsTabContentDirective], [typeof BackToTopComponent, typeof CheckboxComponent, typeof ColorInputComponent, typeof DropdownFromDataComponent, typeof EnumRadiogroupComponent, typeof RadioGroupComponent, typeof FileInputComponent, typeof ImageUploadComponent, 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, typeof TabGroupComponent, typeof KmsTabContentDirective]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KmsUiPresentationalModule>;
 }
 
@@ -1908,5 +1938,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, 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 type { AsyncValidatorConfig, AutocompleteFieldOptions, CounterFieldOptions, DateFieldOptions, DateRangeFieldOptions, DateRangeValue, DialogConfig, DialogData, DisabledConfig, ErrorDisplayConfig, ErrorDisplayStrategy, FieldAffixConfig, FieldConfig, FieldTypeOptions, FormActionsConfig, FormSectionConfig, GenericFormConfig, GenericFormState, GridAlign, GridVerticalAlign, ImagePosition, ImageUploadFieldOptions, InlineAlertType, 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, 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 };
+export type { AsyncValidatorConfig, AutocompleteFieldOptions, CounterFieldOptions, DateFieldOptions, DateRangeFieldOptions, DateRangeValue, DialogConfig, DialogData, DisabledConfig, ErrorDisplayConfig, ErrorDisplayStrategy, FieldAffixConfig, FieldConfig, FieldTypeOptions, FormActionsConfig, FormSectionConfig, GenericFormConfig, GenericFormState, GridAlign, GridVerticalAlign, ImagePosition, ImageUploadFieldOptions, InlineAlertType, KmsTab, NullAble, NumberFieldOptions, PasswordFieldOptions, RadioGroupFieldOptions, RadiobuttonInterface, SelectFieldOptions, SelectTranslation, TextareaFieldOptions, TimeFieldOptions, ValidatorConfig };

package/package.json

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

package/src/assets/llms.txt

@@ -389,6 +389,20 @@ A generic dialog component
 | `onSelectItemEmitter` | `EventEmitter` |
 | `formDataChanged` | `EventEmitter<UntypedFormGroup>` |
 
+### `<kms-tab-group>` — TabGroupComponent
+
+**Inputs:**
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `disableRipple` | `any` | `true` | Whether to disable the Material ripple effect on tabs. |
+| `selectedIndex` | `number` | `0` | Index of the initially selected tab. |
+| `tabs` | `KmsTab[]` | `-` | Tab definitions with label and optional count. When omitted, mat-tab children are projected directly. |
+
+**Outputs:**
+| Name | Type |
+|------|------|
+| `selectedIndexChange` | `number` |
+
 ### `<kms-text-input>` — TextInputComponent
 
 **Inputs:**
@@ -528,6 +542,9 @@ Directive to calc the height of all inner elements
 | `getMaxHeight` | `string` | `''` | CSS class name of the child items (markup elements) that should be checked for their height. This is mandatory. |
 
 
+### `[ng-template[kmsTabContent]]` — KmsTabContentDirective
+
+
 ### `[[swipeDirective]]` — SwipeDirective
 
 **Inputs:**
@@ -847,6 +864,10 @@ Usage: `value | kmsTypeOf`
 - `service`: `any`
 - `useKeyAsValue`: `boolean` (optional)
 
+### KmsTab
+- `count`: `number` (optional)
+- `label`: `string`
+
 ### NumberFieldOptions
 - `max`: `number` (optional)
 - `min`: `number` (optional)

package/src/lib/ui/molecules/tab-group/tab-group.component.scss

@@ -0,0 +1,41 @@
+@mixin tab-group-theme() {
+  kms-tab-group {
+    display: block;
+
+    .mat-mdc-tab {
+      flex-grow: 0 !important;
+      --mat-tab-header-label-text-tracking: normal;
+    }
+
+    .mat-mdc-tab-body .mat-mdc-tab-body-content {
+      overflow-y: hidden;
+    }
+
+    .mat-mdc-tab-body-wrapper {
+      margin-top: $base-spacing * 2;
+    }
+
+    .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label,
+    .mdc-tab-indicator--active {
+      color: var(--kms-tab-active-color, var(--kms-accent));
+      --mat-tab-header-active-hover-indicator-color: var(
+        --kms-tab-active-color,
+        var(--kms-accent)
+      );
+      --mdc-tab-indicator-active-indicator-color: var(
+        --kms-tab-active-color,
+        var(--kms-accent)
+      );
+    }
+
+    &__count {
+      font-size: 0.85em;
+      font-weight: 400;
+      margin-left: 2px;
+
+      .mdc-tab--active & {
+        color: var(--kms-tab-active-color, var(--kms-accent));
+      }
+    }
+  }
+}

package/src/styles/styles.scss

@@ -38,6 +38,7 @@
 @import '../lib/ui/molecules/text-input/text-input.component';
 @import '../lib/ui/molecules/date-input/date-input.component';
 @import '../lib/ui/molecules/flyout/flyout.component';
+@import '../lib/ui/molecules/tab-group/tab-group.component';
 
 // Organisms
 
@@ -66,3 +67,4 @@
 @include text-input-theme();
 @include date-input-theme();
 @include flyout-theme();
+@include tab-group-theme();