npm - @sdcorejs/angular - Versions diffs - 21.0.1 → 21.0.4 - Mend

@sdcorejs/angular 21.0.1 → 21.0.4

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 (142) hide show

package/fesm2022/sdcorejs-angular-components-splitter.mjs CHANGED Viewed

@@ -98,10 +98,10 @@ class SdSplitterHandleComponent {
         }
         this.dragEnd.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdSplitterHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: SdSplitterHandleComponent, isStandalone: true, selector: "sd-splitter-handle", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMin: { classPropertyName: "ariaValueMin", publicName: "ariaValueMin", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMax: { classPropertyName: "ariaValueMax", publicName: "ariaValueMax", isSignal: true, isRequired: false, transformFunction: null }, ariaValueNow: { classPropertyName: "ariaValueNow", publicName: "ariaValueNow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd", toggleRequest: "toggleRequest" }, host: { listeners: { "dblclick": "onDblClick()", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" }, properties: { "class.sd-splitter__handle--horizontal": "orientation() === \"horizontal\"", "class.sd-splitter__handle--vertical": "orientation() === \"vertical\"", "class.sd-splitter__handle--disabled": "disabled()", "attr.tabindex": "disabled() ? -1 : 0", "attr.role": "\"separator\"", "attr.aria-orientation": "orientation() === \"horizontal\" ? \"vertical\" : \"horizontal\"", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-valuemin": "ariaValueMin() ?? null", "attr.aria-valuemax": "ariaValueMax() ?? null", "attr.aria-valuenow": "ariaValueNow() ?? null" }, classAttribute: "sd-splitter__handle" }, ngImport: i0, template: "<span class=\"sd-splitter__handle-bar\"></span>\n", styles: [":host{--sd-splitter-handle-size: 4px;--sd-splitter-handle-color: var(--sd-color-primary-light, #b0bec5);--sd-splitter-handle-hover-color: var(--sd-color-primary, #1976d2);--sd-splitter-handle-active-color: var(--sd-color-primary, #1976d2);--sd-splitter-handle-hit-area: 8px;--sd-splitter-handle-radius: 0;--sd-splitter-disabled-opacity: .5;display:flex;align-items:center;justify-content:center;flex:0 0 var(--sd-splitter-handle-hit-area);-webkit-user-select:none;user-select:none;outline:none}:host.sd-splitter__handle--horizontal{cursor:col-resize}:host.sd-splitter__handle--horizontal .sd-splitter__handle-bar{width:var(--sd-splitter-handle-size);height:100%}:host.sd-splitter__handle--vertical{cursor:row-resize;flex-direction:column}:host.sd-splitter__handle--vertical .sd-splitter__handle-bar{width:100%;height:var(--sd-splitter-handle-size)}:host .sd-splitter__handle-bar{background:var(--sd-splitter-handle-color);border-radius:var(--sd-splitter-handle-radius);transition:background-color .12s ease}:host:hover .sd-splitter__handle-bar{background:var(--sd-splitter-handle-hover-color)}:host:focus-visible{outline:2px solid var(--sd-splitter-handle-active-color);outline-offset:1px}:host.sd-splitter__handle--disabled{cursor:default;opacity:var(--sd-splitter-disabled-opacity);pointer-events:none}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdSplitterHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: SdSplitterHandleComponent, isStandalone: true, selector: "sd-splitter-handle", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMin: { classPropertyName: "ariaValueMin", publicName: "ariaValueMin", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMax: { classPropertyName: "ariaValueMax", publicName: "ariaValueMax", isSignal: true, isRequired: false, transformFunction: null }, ariaValueNow: { classPropertyName: "ariaValueNow", publicName: "ariaValueNow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd", toggleRequest: "toggleRequest" }, host: { listeners: { "dblclick": "onDblClick()", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" }, properties: { "class.sd-splitter__handle--horizontal": "orientation() === \"horizontal\"", "class.sd-splitter__handle--vertical": "orientation() === \"vertical\"", "class.sd-splitter__handle--disabled": "disabled()", "attr.tabindex": "disabled() ? -1 : 0", "attr.role": "\"separator\"", "attr.aria-orientation": "orientation() === \"horizontal\" ? \"vertical\" : \"horizontal\"", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-valuemin": "ariaValueMin() ?? null", "attr.aria-valuemax": "ariaValueMax() ?? null", "attr.aria-valuenow": "ariaValueNow() ?? null" }, classAttribute: "sd-splitter__handle" }, ngImport: i0, template: "<span class=\"sd-splitter__handle-bar\"></span>\n", styles: [":host{--sd-splitter-handle-size: 4px;--sd-splitter-handle-color: var(--sd-color-primary-light, #b0bec5);--sd-splitter-handle-hover-color: var(--sd-color-primary, #1976d2);--sd-splitter-handle-active-color: var(--sd-color-primary, #1976d2);--sd-splitter-handle-hit-area: 8px;--sd-splitter-handle-radius: 0;--sd-splitter-disabled-opacity: .5;display:flex;align-items:center;justify-content:center;flex:0 0 var(--sd-splitter-handle-hit-area);-webkit-user-select:none;user-select:none;outline:none}:host.sd-splitter__handle--horizontal{cursor:col-resize}:host.sd-splitter__handle--horizontal .sd-splitter__handle-bar{width:var(--sd-splitter-handle-size);height:100%}:host.sd-splitter__handle--vertical{cursor:row-resize;flex-direction:column}:host.sd-splitter__handle--vertical .sd-splitter__handle-bar{width:100%;height:var(--sd-splitter-handle-size)}:host .sd-splitter__handle-bar{background:var(--sd-splitter-handle-color);border-radius:var(--sd-splitter-handle-radius);transition:background-color .12s ease}:host:hover .sd-splitter__handle-bar{background:var(--sd-splitter-handle-hover-color)}:host:focus-visible{outline:2px solid var(--sd-splitter-handle-active-color);outline-offset:1px}:host.sd-splitter__handle--disabled{cursor:default;opacity:var(--sd-splitter-disabled-opacity);pointer-events:none}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdSplitterHandleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdSplitterHandleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-splitter-handle', standalone: true, host: {
                         'class': 'sd-splitter__handle',
@@ -146,10 +146,10 @@ class SdSplitterPanelComponent {
     collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdSplitterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: SdSplitterPanelComponent, isStandalone: true, selector: "sd-splitter-panel", inputs: { panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.sd-splitter__panel--flex": "unit() === \"flex\"", "class.sd-splitter__panel--px": "unit() === \"px\"", "class.sd-splitter__panel--collapsed": "collapsed()" }, classAttribute: "sd-splitter__panel" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow:hidden;box-sizing:border-box;min-width:0;min-height:0;transition:flex var(--sd-splitter-transition-duration, .2s) ease}:host.sd-splitter__panel--collapsed{flex:0 0 0!important}:host-context(.sd-splitter--dragging){transition:none!important}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdSplitterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: SdSplitterPanelComponent, isStandalone: true, selector: "sd-splitter-panel", inputs: { panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.sd-splitter__panel--flex": "unit() === \"flex\"", "class.sd-splitter__panel--px": "unit() === \"px\"", "class.sd-splitter__panel--collapsed": "collapsed()" }, classAttribute: "sd-splitter__panel" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow:hidden;box-sizing:border-box;min-width:0;min-height:0;transition:flex var(--sd-splitter-transition-duration, .2s) ease}:host.sd-splitter__panel--collapsed{flex:0 0 0!important}:host-context(.sd-splitter--dragging){transition:none!important}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdSplitterPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdSplitterPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-splitter-panel', standalone: true, host: {
                         'class': 'sd-splitter__panel',
@@ -350,10 +350,10 @@ class SplitterStateService {
         }));
         this.committedLayout.set({ v: 1, panels });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SplitterStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SplitterStateService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SplitterStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SplitterStateService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SplitterStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SplitterStateService, decorators: [{
             type: Injectable
         }] });
@@ -624,10 +624,10 @@ class SdSplitterComponent {
             throw new Error(`Splitter: no panel with id "${target}"`);
         return meta.id;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.15", type: SdSplitterComponent, isStandalone: true, selector: "sd-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, snapThreshold: { classPropertyName: "snapThreshold", publicName: "snapThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeEnd: "resizeEnd", collapsedChange: "collapsedChange", layoutChange: "layoutChange" }, host: { properties: { "class.sd-splitter--horizontal": "orientation() === \"horizontal\"", "class.sd-splitter--vertical": "orientation() === \"vertical\"", "class.sd-splitter--disabled": "disabled()" }, classAttribute: "sd-splitter" }, providers: [SplitterStateService], queries: [{ propertyName: "panels", predicate: SdSplitterPanelComponent, isSignal: true }], ngImport: i0, template: "<ng-content select=\"sd-splitter-panel\"></ng-content>\n", styles: [":host{display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}:host.sd-splitter--horizontal{flex-direction:row}:host.sd-splitter--vertical{flex-direction:column}:host.sd-splitter--disabled .sd-splitter__handle{pointer-events:none}:host.sd-splitter--dragging{-webkit-user-select:none;user-select:none}:host.sd-splitter--dragging .sd-splitter__panel{transition:none!important}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: SdSplitterComponent, isStandalone: true, selector: "sd-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, snapThreshold: { classPropertyName: "snapThreshold", publicName: "snapThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeEnd: "resizeEnd", collapsedChange: "collapsedChange", layoutChange: "layoutChange" }, host: { properties: { "class.sd-splitter--horizontal": "orientation() === \"horizontal\"", "class.sd-splitter--vertical": "orientation() === \"vertical\"", "class.sd-splitter--disabled": "disabled()" }, classAttribute: "sd-splitter" }, providers: [SplitterStateService], queries: [{ propertyName: "panels", predicate: SdSplitterPanelComponent, isSignal: true }], ngImport: i0, template: "<ng-content select=\"sd-splitter-panel\"></ng-content>\n", styles: [":host{display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}:host.sd-splitter--horizontal{flex-direction:row}:host.sd-splitter--vertical{flex-direction:column}:host.sd-splitter--disabled .sd-splitter__handle{pointer-events:none}:host.sd-splitter--dragging{-webkit-user-select:none;user-select:none}:host.sd-splitter--dragging .sd-splitter__panel{transition:none!important}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdSplitterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdSplitterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-splitter', standalone: true, providers: [SplitterStateService], host: {
                         'class': 'sd-splitter',

package/fesm2022/sdcorejs-angular-components-stepper.mjs CHANGED Viewed

@@ -5,7 +5,6 @@ import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1 from '@angular/material/stepper';
 import { MatStepper, MatStepperModule } from '@angular/material/stepper';
-import { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';
 class SdStep {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -27,10 +26,10 @@ class SdStep {
     selectChange = output();
     // Body template captured from projected <ng-content>.
     bodyTpl = viewChild.required('body');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.15", type: SdStep, isStandalone: true, selector: "sd-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, stepControl: { classPropertyName: "stepControl", publicName: "stepControl", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectChange: "selectChange" }, viewQueries: [{ propertyName: "bodyTpl", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #body><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: SdStep, isStandalone: true, selector: "sd-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, stepControl: { classPropertyName: "stepControl", publicName: "stepControl", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectChange: "selectChange" }, viewQueries: [{ propertyName: "bodyTpl", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #body><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdStep, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdStep, decorators: [{
             type: Component,
             args: [{
                     selector: 'sd-step',
@@ -43,7 +42,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], stepControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepControl", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], bodyTpl: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }] } });
-class SdStepper extends SdBaseSecureComponent {
+class SdStepper {
     steps = contentChildren(SdStep, ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
     selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
     // why: enforce sequential gating — only valid steps unlock the next.
@@ -76,7 +75,6 @@ class SdStepper extends SdBaseSecureComponent {
         return `var(--sd-${this.color()})`;
     }
     constructor() {
-        super();
         // why: clamp selectedIndex when a step is removed past the active one.
         effect(() => {
             const len = this.steps().length;
@@ -109,10 +107,10 @@ class SdStepper extends SdBaseSecureComponent {
         const step = this.steps()[ev.selectedIndex];
         step?.selectChange.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: SdStepper, isStandalone: true, selector: "sd-stepper", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectionChange: "selectionChange" }, host: { properties: { "attr.data-autoId": "this.autoIdAttr", "style.--sd-stepper-active-color": "this.cssActive", "style.--sd-stepper-active-bg": "this.cssActiveBg", "style.--sd-stepper-completed-color": "this.cssCompleted", "style.--sd-stepper-line-active-color": "this.cssLine" } }, queries: [{ propertyName: "steps", predicate: SdStep, isSignal: true }], viewQueries: [{ propertyName: "matStepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-stepper\n  class=\"sd-stepper\"\n  [(selectedIndex)]=\"selectedIndex\"\n  [linear]=\"linear()\"\n  [orientation]=\"orientation()\"\n  [labelPosition]=\"labelPosition()\"\n  [headerPosition]=\"headerPosition()\"\n  [animationDuration]=\"animationDuration()\"\n  [disableRipple]=\"disableRipple()\"\n  (selectionChange)=\"onSelectionChange($event)\">\n  @for (step of steps(); track step; let i = $index) {\n    <mat-step\n      [stepControl]=\"step.stepControl() ?? undefined!\"\n      [optional]=\"step.optional()\"\n      [editable]=\"step.editable()\"\n      [state]=\"step.state() ?? ''\"\n      [errorMessage]=\"step.errorMessage() ?? ''\">\n      <ng-template matStepLabel>\n        <span class=\"sd-step__label\">\n          @if (step.icon(); as ic) {\n            <mat-icon class=\"sd-step__icon\">{{ ic }}</mat-icon>\n          }\n          <span class=\"sd-step__text\">{{ step.label() }}</span>\n        </span>\n      </ng-template>\n\n      <ng-template matStepContent>\n        <ng-container [ngTemplateOutlet]=\"step.bodyTpl()\"></ng-container>\n      </ng-template>\n    </mat-step>\n  }\n</mat-stepper>\n", styles: [":host{display:block;--sd-stepper-active-color: var(--sd-primary, #1565c0);--sd-stepper-active-bg: var(--sd-primary, #1565c0);--sd-stepper-completed-color: var(--sd-primary, #1565c0);--sd-stepper-line-active-color: var(--sd-primary, #1565c0);--sd-stepper-error-color: var(--sd-error, #f44336);--sd-stepper-pending-bg: #e0e0e0;--sd-stepper-pending-color: rgba(0, 0, 0, .54);--sd-stepper-text-color: var(--sd-text-primary, #1a1a1a)}.sd-step__label{display:inline-flex;align-items:center;gap:4px}.sd-step__icon{font-size:18px;width:18px;height:18px;line-height:18px}.sd-step__text{white-space:nowrap}:host ::ng-deep .mat-step-icon{background-color:var(--sd-stepper-pending-bg);color:var(--sd-stepper-pending-color)}:host ::ng-deep .mat-step-icon-selected{background-color:var(--sd-stepper-active-bg)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-done,:host ::ng-deep .mat-step-icon-state-edit{background-color:var(--sd-stepper-completed-color)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-error{background-color:var(--sd-stepper-error-color)!important;color:#fff!important}:host ::ng-deep .mat-step-label.mat-step-label-active .mat-step-text-label{color:var(--sd-stepper-text-color);font-weight:500}:host ::ng-deep .mat-step-label-selected .mat-step-text-label{color:var(--sd-stepper-active-color);font-weight:600}:host ::ng-deep .mat-stepper-horizontal-line,:host ::ng-deep .mat-stepper-vertical-line:before{border-color:#0000001f}:host ::ng-deep .mat-step-header.cdk-program-focused,:host ::ng-deep .mat-step-header:hover{background-color:#00000005}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i1.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SdStepper, isStandalone: true, selector: "sd-stepper", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectionChange: "selectionChange" }, host: { properties: { "attr.data-autoId": "this.autoIdAttr", "style.--sd-stepper-active-color": "this.cssActive", "style.--sd-stepper-active-bg": "this.cssActiveBg", "style.--sd-stepper-completed-color": "this.cssCompleted", "style.--sd-stepper-line-active-color": "this.cssLine" } }, queries: [{ propertyName: "steps", predicate: SdStep, isSignal: true }], viewQueries: [{ propertyName: "matStepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-stepper\n  class=\"sd-stepper\"\n  [(selectedIndex)]=\"selectedIndex\"\n  [linear]=\"linear()\"\n  [orientation]=\"orientation()\"\n  [labelPosition]=\"labelPosition()\"\n  [headerPosition]=\"headerPosition()\"\n  [animationDuration]=\"animationDuration()\"\n  [disableRipple]=\"disableRipple()\"\n  (selectionChange)=\"onSelectionChange($event)\">\n  @for (step of steps(); track step; let i = $index) {\n    <mat-step\n      [stepControl]=\"step.stepControl() ?? undefined!\"\n      [optional]=\"step.optional()\"\n      [editable]=\"step.editable()\"\n      [state]=\"step.state() ?? ''\"\n      [errorMessage]=\"step.errorMessage() ?? ''\">\n      <ng-template matStepLabel>\n        <span class=\"sd-step__label\">\n          @if (step.icon(); as ic) {\n            <mat-icon class=\"sd-step__icon\">{{ ic }}</mat-icon>\n          }\n          <span class=\"sd-step__text\">{{ step.label() }}</span>\n        </span>\n      </ng-template>\n\n      <ng-template matStepContent>\n        <ng-container [ngTemplateOutlet]=\"step.bodyTpl()\"></ng-container>\n      </ng-template>\n    </mat-step>\n  }\n</mat-stepper>\n", styles: [":host{display:block;--sd-stepper-active-color: var(--sd-primary, #1565c0);--sd-stepper-active-bg: var(--sd-primary, #1565c0);--sd-stepper-completed-color: var(--sd-primary, #1565c0);--sd-stepper-line-active-color: var(--sd-primary, #1565c0);--sd-stepper-error-color: var(--sd-error, #f44336);--sd-stepper-pending-bg: #e0e0e0;--sd-stepper-pending-color: rgba(0, 0, 0, .54);--sd-stepper-text-color: var(--sd-text-primary, #1a1a1a)}.sd-step__label{display:inline-flex;align-items:center;gap:4px}.sd-step__icon{font-size:18px;width:18px;height:18px;line-height:18px}.sd-step__text{white-space:nowrap}:host ::ng-deep .mat-step-icon{background-color:var(--sd-stepper-pending-bg);color:var(--sd-stepper-pending-color)}:host ::ng-deep .mat-step-icon-selected{background-color:var(--sd-stepper-active-bg)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-done,:host ::ng-deep .mat-step-icon-state-edit{background-color:var(--sd-stepper-completed-color)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-error{background-color:var(--sd-stepper-error-color)!important;color:#fff!important}:host ::ng-deep .mat-step-label.mat-step-label-active .mat-step-text-label{color:var(--sd-stepper-text-color);font-weight:500}:host ::ng-deep .mat-step-label-selected .mat-step-text-label{color:var(--sd-stepper-active-color);font-weight:600}:host ::ng-deep .mat-stepper-horizontal-line,:host ::ng-deep .mat-stepper-vertical-line:before{border-color:#0000001f}:host ::ng-deep .mat-step-header.cdk-program-focused,:host ::ng-deep .mat-step-header:hover{background-color:#00000005}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i1.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdStepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdStepper, decorators: [{
             type: Component,
             args: [{ selector: 'sd-stepper', standalone: true, imports: [MatStepperModule, MatIconModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-stepper\n  class=\"sd-stepper\"\n  [(selectedIndex)]=\"selectedIndex\"\n  [linear]=\"linear()\"\n  [orientation]=\"orientation()\"\n  [labelPosition]=\"labelPosition()\"\n  [headerPosition]=\"headerPosition()\"\n  [animationDuration]=\"animationDuration()\"\n  [disableRipple]=\"disableRipple()\"\n  (selectionChange)=\"onSelectionChange($event)\">\n  @for (step of steps(); track step; let i = $index) {\n    <mat-step\n      [stepControl]=\"step.stepControl() ?? undefined!\"\n      [optional]=\"step.optional()\"\n      [editable]=\"step.editable()\"\n      [state]=\"step.state() ?? ''\"\n      [errorMessage]=\"step.errorMessage() ?? ''\">\n      <ng-template matStepLabel>\n        <span class=\"sd-step__label\">\n          @if (step.icon(); as ic) {\n            <mat-icon class=\"sd-step__icon\">{{ ic }}</mat-icon>\n          }\n          <span class=\"sd-step__text\">{{ step.label() }}</span>\n        </span>\n      </ng-template>\n\n      <ng-template matStepContent>\n        <ng-container [ngTemplateOutlet]=\"step.bodyTpl()\"></ng-container>\n      </ng-template>\n    </mat-step>\n  }\n</mat-stepper>\n", styles: [":host{display:block;--sd-stepper-active-color: var(--sd-primary, #1565c0);--sd-stepper-active-bg: var(--sd-primary, #1565c0);--sd-stepper-completed-color: var(--sd-primary, #1565c0);--sd-stepper-line-active-color: var(--sd-primary, #1565c0);--sd-stepper-error-color: var(--sd-error, #f44336);--sd-stepper-pending-bg: #e0e0e0;--sd-stepper-pending-color: rgba(0, 0, 0, .54);--sd-stepper-text-color: var(--sd-text-primary, #1a1a1a)}.sd-step__label{display:inline-flex;align-items:center;gap:4px}.sd-step__icon{font-size:18px;width:18px;height:18px;line-height:18px}.sd-step__text{white-space:nowrap}:host ::ng-deep .mat-step-icon{background-color:var(--sd-stepper-pending-bg);color:var(--sd-stepper-pending-color)}:host ::ng-deep .mat-step-icon-selected{background-color:var(--sd-stepper-active-bg)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-done,:host ::ng-deep .mat-step-icon-state-edit{background-color:var(--sd-stepper-completed-color)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-error{background-color:var(--sd-stepper-error-color)!important;color:#fff!important}:host ::ng-deep .mat-step-label.mat-step-label-active .mat-step-text-label{color:var(--sd-stepper-text-color);font-weight:500}:host ::ng-deep .mat-step-label-selected .mat-step-text-label{color:var(--sd-stepper-active-color);font-weight:600}:host ::ng-deep .mat-stepper-horizontal-line,:host ::ng-deep .mat-stepper-vertical-line:before{border-color:#0000001f}:host ::ng-deep .mat-step-header.cdk-program-focused,:host ::ng-deep .mat-step-header:hover{background-color:#00000005}\n"] }]
         }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdStep), { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], matStepper: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatStepper), { isSignal: true }] }], autoIdAttr: [{

package/fesm2022/sdcorejs-angular-components-stepper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-stepper.mjs","sources":["../../../projects/sdcorejs-angular/components/stepper/src/step.component.ts","../../../projects/sdcorejs-angular/components/stepper/src/stepper.component.ts","../../../projects/sdcorejs-angular/components/stepper/src/stepper.component.html","../../../projects/sdcorejs-angular/components/stepper/sdcorejs-angular-components-stepper.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n input,\n output,\n TemplateRef,\n viewChild,\n} from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\n\nexport type SdStepState = 'pending' \| 'active' \| 'completed' \| 'error' \| string;\n\n@Component({\n selector: 'sd-step',\n standalone: true,\n // why: identical pattern to <sd-tab> — capture projected content via #body\n // template ref so <sd-stepper> can render it inside mat-step's matStepContent\n // (lazy mount + animation-friendly).\n template: `<ng-template #body><ng-content></ng-content></ng-template>`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdStep {\n label = input.required<string>();\n // Optional Material icon name shown when the step is in 'pending' state\n // (overrides the default numbered indicator).\n icon = input<string \| null \| undefined>(undefined);\n // Set true to mark the step skippable in linear mode.\n optional = input(false, { transform: booleanAttribute });\n // When false, user cannot return to this step after it's been completed.\n editable = input(true, { transform: booleanAttribute });\n // Reactive form / control. When the stepper is linear, the user can only\n // proceed past this step once stepControl.valid is true.\n stepControl = input<AbstractControl \| null \| undefined>(undefined);\n // Override the auto-derived state (eg force 'error' from outside on async validation).\n state = input<SdStepState \| undefined>(undefined);\n // Error message rendered next to the step header when state is 'error'.\n errorMessage = input<string \| undefined>(undefined);\n\n // Emitted when this step transitions to selected.\n selectChange = output<void>();\n\n // Body template captured from projected <ng-content>.\n bodyTpl = viewChild.required<TemplateRef<unknown>>('body');\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n effect,\n HostBinding,\n input,\n model,\n output,\n untracked,\n viewChild,\n} from '@angular/core';\nimport { StepperSelectionEvent } from '@angular/cdk/stepper';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatStepperModule, MatStepper } from '@angular/material/stepper';\nimport { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';\nimport { Color } from '@sdcorejs/utils/models';\nimport { SdStep } from './step.component';\n\n@Component({\n selector: 'sd-stepper',\n standalone: true,\n imports: [MatStepperModule, MatIconModule, NgTemplateOutlet],\n templateUrl: './stepper.component.html',\n styleUrls: ['./stepper.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdStepper extends SdBaseSecureComponent {\n steps = contentChildren(SdStep);\n\n selectedIndex = model<number>(0);\n // why: enforce sequential gating — only valid steps unlock the next.\n linear = input(false, { transform: booleanAttribute });\n orientation = input<'horizontal' \| 'vertical'>('horizontal');\n labelPosition = input<'end' \| 'bottom'>('end');\n headerPosition = input<'top' \| 'bottom'>('top');\n animationDuration = input<string>('500ms');\n disableRipple = input(false, { transform: booleanAttribute });\n // Drives the Core color CSS vars on indicators / connector / line.\n color = input<Color>('primary');\n autoId = input<string \| undefined>(undefined);\n\n // Emits {previousIndex, selectedIndex, previousStep, selectedStep}.\n selectionChange = output<StepperSelectionEvent>();\n\n protected matStepper = viewChild(MatStepper);\n\n @HostBinding('attr.data-autoId') get autoIdAttr(): string \| null {\n return this.autoId() ?? null;\n }\n\n // Core color CSS vars — same mechanism as <sd-tab-group>.\n @HostBinding('style.--sd-stepper-active-color') get cssActive(): string {\n return `var(--sd-${this.color()})`;\n }\n @HostBinding('style.--sd-stepper-active-bg') get cssActiveBg(): string {\n return `var(--sd-${this.color()})`;\n }\n @HostBinding('style.--sd-stepper-completed-color') get cssCompleted(): string {\n return `var(--sd-${this.color()})`;\n }\n @HostBinding('style.--sd-stepper-line-active-color') get cssLine(): string {\n return `var(--sd-${this.color()})`;\n }\n\n constructor() {\n super();\n // why: clamp selectedIndex when a step is removed past the active one.\n effect(() => {\n const len = this.steps().length;\n const cur = untracked(() => this.selectedIndex());\n if (len > 0 && cur >= len) {\n this.selectedIndex.set(Math.max(0, len - 1));\n }\n });\n }\n\n next(): void {\n this.matStepper()?.next();\n }\n\n previous(): void {\n this.matStepper()?.previous();\n }\n\n reset(): void {\n this.matStepper()?.reset();\n }\n\n goTo(index: number): void {\n const len = this.steps().length;\n if (len === 0) {\n this.selectedIndex.set(0);\n return;\n }\n this.selectedIndex.set(Math.max(0, Math.min(index, len - 1)));\n }\n\n protected onSelectionChange(ev: StepperSelectionEvent): void {\n this.selectionChange.emit(ev);\n // Forward to each step that just became selected so consumer can react.\n const step = this.steps()[ev.selectedIndex];\n step?.selectChange.emit();\n }\n}\n","<mat-stepper\n class=\"sd-stepper\"\n [(selectedIndex)]=\"selectedIndex\"\n [linear]=\"linear()\"\n [orientation]=\"orientation()\"\n [labelPosition]=\"labelPosition()\"\n [headerPosition]=\"headerPosition()\"\n [animationDuration]=\"animationDuration()\"\n [disableRipple]=\"disableRipple()\"\n (selectionChange)=\"onSelectionChange($event)\">\n @for (step of steps(); track step; let i = $index) {\n <mat-step\n [stepControl]=\"step.stepControl() ?? undefined!\"\n [optional]=\"step.optional()\"\n [editable]=\"step.editable()\"\n [state]=\"step.state() ?? ''\"\n [errorMessage]=\"step.errorMessage() ?? ''\">\n <ng-template matStepLabel>\n <span class=\"sd-step__label\">\n @if (step.icon(); as ic) {\n <mat-icon class=\"sd-step__icon\">{{ ic }}</mat-icon>\n }\n <span class=\"sd-step__text\">{{ step.label() }}</span>\n </span>\n </ng-template>\n\n <ng-template matStepContent>\n <ng-container [ngTemplateOutlet]=\"step.bodyTpl()\"></ng-container>\n </ng-template>\n </mat-step>\n }\n</mat-stepper>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sdcorejs-angular-components-stepper.mjs","sources":["../../../projects/sdcorejs-angular/components/stepper/src/step.component.ts","../../../projects/sdcorejs-angular/components/stepper/src/stepper.component.ts","../../../projects/sdcorejs-angular/components/stepper/src/stepper.component.html","../../../projects/sdcorejs-angular/components/stepper/sdcorejs-angular-components-stepper.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n input,\n output,\n TemplateRef,\n viewChild,\n} from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\n\nexport type SdStepState = 'pending' \| 'active' \| 'completed' \| 'error' \| string;\n\n@Component({\n selector: 'sd-step',\n standalone: true,\n // why: identical pattern to <sd-tab> — capture projected content via #body\n // template ref so <sd-stepper> can render it inside mat-step's matStepContent\n // (lazy mount + animation-friendly).\n template: `<ng-template #body><ng-content></ng-content></ng-template>`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdStep {\n label = input.required<string>();\n // Optional Material icon name shown when the step is in 'pending' state\n // (overrides the default numbered indicator).\n icon = input<string \| null \| undefined>(undefined);\n // Set true to mark the step skippable in linear mode.\n optional = input(false, { transform: booleanAttribute });\n // When false, user cannot return to this step after it's been completed.\n editable = input(true, { transform: booleanAttribute });\n // Reactive form / control. When the stepper is linear, the user can only\n // proceed past this step once stepControl.valid is true.\n stepControl = input<AbstractControl \| null \| undefined>(undefined);\n // Override the auto-derived state (eg force 'error' from outside on async validation).\n state = input<SdStepState \| undefined>(undefined);\n // Error message rendered next to the step header when state is 'error'.\n errorMessage = input<string \| undefined>(undefined);\n\n // Emitted when this step transitions to selected.\n selectChange = output<void>();\n\n // Body template captured from projected <ng-content>.\n bodyTpl = viewChild.required<TemplateRef<unknown>>('body');\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n effect,\n HostBinding,\n input,\n model,\n output,\n untracked,\n viewChild,\n} from '@angular/core';\nimport { StepperSelectionEvent } from '@angular/cdk/stepper';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatStepperModule, MatStepper } from '@angular/material/stepper';\nimport { Color } from '@sdcorejs/utils/models';\nimport { SdStep } from './step.component';\n\n@Component({\n selector: 'sd-stepper',\n standalone: true,\n imports: [MatStepperModule, MatIconModule, NgTemplateOutlet],\n templateUrl: './stepper.component.html',\n styleUrls: ['./stepper.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdStepper {\n steps = contentChildren(SdStep);\n\n selectedIndex = model<number>(0);\n // why: enforce sequential gating — only valid steps unlock the next.\n linear = input(false, { transform: booleanAttribute });\n orientation = input<'horizontal' \| 'vertical'>('horizontal');\n labelPosition = input<'end' \| 'bottom'>('end');\n headerPosition = input<'top' \| 'bottom'>('top');\n animationDuration = input<string>('500ms');\n disableRipple = input(false, { transform: booleanAttribute });\n // Drives the Core color CSS vars on indicators / connector / line.\n color = input<Color>('primary');\n autoId = input<string \| undefined>(undefined);\n\n // Emits {previousIndex, selectedIndex, previousStep, selectedStep}.\n selectionChange = output<StepperSelectionEvent>();\n\n protected matStepper = viewChild(MatStepper);\n\n @HostBinding('attr.data-autoId') get autoIdAttr(): string \| null {\n return this.autoId() ?? null;\n }\n\n // Core color CSS vars — same mechanism as <sd-tab-group>.\n @HostBinding('style.--sd-stepper-active-color') get cssActive(): string {\n return `var(--sd-${this.color()})`;\n }\n @HostBinding('style.--sd-stepper-active-bg') get cssActiveBg(): string {\n return `var(--sd-${this.color()})`;\n }\n @HostBinding('style.--sd-stepper-completed-color') get cssCompleted(): string {\n return `var(--sd-${this.color()})`;\n }\n @HostBinding('style.--sd-stepper-line-active-color') get cssLine(): string {\n return `var(--sd-${this.color()})`;\n }\n\n constructor() {\n // why: clamp selectedIndex when a step is removed past the active one.\n effect(() => {\n const len = this.steps().length;\n const cur = untracked(() => this.selectedIndex());\n if (len > 0 && cur >= len) {\n this.selectedIndex.set(Math.max(0, len - 1));\n }\n });\n }\n\n next(): void {\n this.matStepper()?.next();\n }\n\n previous(): void {\n this.matStepper()?.previous();\n }\n\n reset(): void {\n this.matStepper()?.reset();\n }\n\n goTo(index: number): void {\n const len = this.steps().length;\n if (len === 0) {\n this.selectedIndex.set(0);\n return;\n }\n this.selectedIndex.set(Math.max(0, Math.min(index, len - 1)));\n }\n\n protected onSelectionChange(ev: StepperSelectionEvent): void {\n this.selectionChange.emit(ev);\n // Forward to each step that just became selected so consumer can react.\n const step = this.steps()[ev.selectedIndex];\n step?.selectChange.emit();\n }\n}\n","<mat-stepper\n class=\"sd-stepper\"\n [(selectedIndex)]=\"selectedIndex\"\n [linear]=\"linear()\"\n [orientation]=\"orientation()\"\n [labelPosition]=\"labelPosition()\"\n [headerPosition]=\"headerPosition()\"\n [animationDuration]=\"animationDuration()\"\n [disableRipple]=\"disableRipple()\"\n (selectionChange)=\"onSelectionChange($event)\">\n @for (step of steps(); track step; let i = $index) {\n <mat-step\n [stepControl]=\"step.stepControl() ?? undefined!\"\n [optional]=\"step.optional()\"\n [editable]=\"step.editable()\"\n [state]=\"step.state() ?? ''\"\n [errorMessage]=\"step.errorMessage() ?? ''\">\n <ng-template matStepLabel>\n <span class=\"sd-step__label\">\n @if (step.icon(); as ic) {\n <mat-icon class=\"sd-step__icon\">{{ ic }}</mat-icon>\n }\n <span class=\"sd-step__text\">{{ step.label() }}</span>\n </span>\n </ng-template>\n\n <ng-template matStepContent>\n <ng-container [ngTemplateOutlet]=\"step.bodyTpl()\"></ng-container>\n </ng-template>\n </mat-step>\n }\n</mat-stepper>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-tab-router.mjs CHANGED Viewed

@@ -105,10 +105,10 @@ class SdTabRouterService {
     };
     // Gọi hàm này để thực hiện update tab
     updateTab = (tab) => { };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabRouterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabRouterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabRouterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabRouterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -120,10 +120,10 @@ class SdTabDecoratorService {
     constructor(tabRouterService) {
         SdTabDecoratorService.tabRouterService.next(tabRouterService);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabDecoratorService, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabDecoratorService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabDecoratorService, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabDecoratorService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabDecoratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabDecoratorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -155,10 +155,10 @@ class SdTabInfoPipe {
             icon: undefined,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabInfoPipe, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: SdTabInfoPipe, isStandalone: true, name: "sdTabInfo" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabInfoPipe, deps: [{ token: SdTabRouterService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: SdTabInfoPipe, isStandalone: true, name: "sdTabInfo" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabInfoPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabInfoPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sdTabInfo',
@@ -237,10 +237,10 @@ class SdTabRouterItemComponent {
             this.tabRouterService.close(this.tab);
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabRouterItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdTabRouterService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: SdTabRouterItemComponent, isStandalone: true, selector: "sd-tab-router-item", inputs: { tab: "tab" }, ngImport: i0, template: "<a\n  [href]=\"[tab.url]\"\n  class=\"tab-router__item d-flex align-items-center gap-8\"\n  [class.tab-router__item--active]=\"tab.isActive\"\n  (click)=\"onTabClick($event)\"\n  (mousedown)=\"onMousedown($event)\"\n  (mouseup)=\"onMouseup($event)\">\n  @let info = tabInfo | sdTabInfo: tab;\n  @if (info) {\n    <sd-badge\n      style=\"overflow: hidden;white-space: nowrap;\"\n      [icon]=\"info.icon\"\n      [title]=\"info.icon\"\n      [tooltip]=\"info.tooltip || info.name\"\n      [title]=\"info.name\"\n      [color]=\"info.color\"\n      (click)=\"onTabClick($event)\"></sd-badge>\n    <button\n      aria-hidden=\"true\"\n      class=\"tab-router__close d-flex align-items-center justify-content-center ml-auto p-0\"\n      (click)=\"close($event)\"\n      (mousedown)=\"$event.stopPropagation()\">\n      <mat-icon aria-hidden=\"true\" fontIcon=\"close\"></mat-icon>\n    </button>\n  }\n</a>\n", styles: [":host{display:block;overflow:hidden;position:relative;flex:1 1 64px;max-width:240px}:host:after{content:\"\";position:absolute;right:0;top:0;bottom:0;height:16px;width:1px;background:#dde0e5;margin:auto}:host:last-child:after{content:none}:host::ng-deep .tab-router__item sd-badge .c-badge-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:184px}.flex-1{flex:1}.tab-router__icon{background-color:#5c6bc0;width:16px;height:16px;line-height:16px;text-align:center;font-size:10px;color:#fff;border-radius:2px;text-transform:uppercase}.tab-router__icon .mat-icon{height:10px;width:10px;font-size:10px}.tab-router__close{color:#757575;outline:none;border:0;background:none;border-radius:50%;height:16px;width:16px}.tab-router__close:hover{background-color:#0000001f}.tab-router__close .mat-icon{font-size:12px;height:12px;width:12px}.tab-router__item{background:#f2f3f4;padding:8px;color:inherit;text-decoration:none;font-size:12px;line-height:16px;overflow:hidden}.tab-router__item:hover{background-color:#fff}.tab-router__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-router__item--active{border-radius:8px 8px 0 0;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: SdTabInfoPipe, name: "sdTabInfo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabRouterItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdTabRouterService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SdTabRouterItemComponent, isStandalone: true, selector: "sd-tab-router-item", inputs: { tab: "tab" }, ngImport: i0, template: "<a\n  [href]=\"[tab.url]\"\n  class=\"tab-router__item d-flex align-items-center gap-8\"\n  [class.tab-router__item--active]=\"tab.isActive\"\n  (click)=\"onTabClick($event)\"\n  (mousedown)=\"onMousedown($event)\"\n  (mouseup)=\"onMouseup($event)\">\n  @let info = tabInfo | sdTabInfo: tab;\n  @if (info) {\n    <sd-badge\n      style=\"overflow: hidden;white-space: nowrap;\"\n      [icon]=\"info.icon\"\n      [title]=\"info.icon\"\n      [tooltip]=\"info.tooltip || info.name\"\n      [title]=\"info.name\"\n      [color]=\"info.color\"\n      (click)=\"onTabClick($event)\"></sd-badge>\n    <button\n      aria-hidden=\"true\"\n      class=\"tab-router__close d-flex align-items-center justify-content-center ml-auto p-0\"\n      (click)=\"close($event)\"\n      (mousedown)=\"$event.stopPropagation()\">\n      <mat-icon aria-hidden=\"true\" fontIcon=\"close\"></mat-icon>\n    </button>\n  }\n</a>\n", styles: [":host{display:block;overflow:hidden;position:relative;flex:1 1 64px;max-width:240px}:host:after{content:\"\";position:absolute;right:0;top:0;bottom:0;height:16px;width:1px;background:#dde0e5;margin:auto}:host:last-child:after{content:none}:host::ng-deep .tab-router__item sd-badge .c-badge-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:184px}.flex-1{flex:1}.tab-router__icon{background-color:#5c6bc0;width:16px;height:16px;line-height:16px;text-align:center;font-size:10px;color:#fff;border-radius:2px;text-transform:uppercase}.tab-router__icon .mat-icon{height:10px;width:10px;font-size:10px}.tab-router__close{color:#757575;outline:none;border:0;background:none;border-radius:50%;height:16px;width:16px}.tab-router__close:hover{background-color:#0000001f}.tab-router__close .mat-icon{font-size:12px;height:12px;width:12px}.tab-router__item{background:#f2f3f4;padding:8px;color:inherit;text-decoration:none;font-size:12px;line-height:16px;overflow:hidden}.tab-router__item:hover{background-color:#fff}.tab-router__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-router__item--active{border-radius:8px 8px 0 0;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: SdTabInfoPipe, name: "sdTabInfo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabRouterItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabRouterItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-tab-router-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, SdBadge, SdTabInfoPipe], template: "<a\n  [href]=\"[tab.url]\"\n  class=\"tab-router__item d-flex align-items-center gap-8\"\n  [class.tab-router__item--active]=\"tab.isActive\"\n  (click)=\"onTabClick($event)\"\n  (mousedown)=\"onMousedown($event)\"\n  (mouseup)=\"onMouseup($event)\">\n  @let info = tabInfo | sdTabInfo: tab;\n  @if (info) {\n    <sd-badge\n      style=\"overflow: hidden;white-space: nowrap;\"\n      [icon]=\"info.icon\"\n      [title]=\"info.icon\"\n      [tooltip]=\"info.tooltip || info.name\"\n      [title]=\"info.name\"\n      [color]=\"info.color\"\n      (click)=\"onTabClick($event)\"></sd-badge>\n    <button\n      aria-hidden=\"true\"\n      class=\"tab-router__close d-flex align-items-center justify-content-center ml-auto p-0\"\n      (click)=\"close($event)\"\n      (mousedown)=\"$event.stopPropagation()\">\n      <mat-icon aria-hidden=\"true\" fontIcon=\"close\"></mat-icon>\n    </button>\n  }\n</a>\n", styles: [":host{display:block;overflow:hidden;position:relative;flex:1 1 64px;max-width:240px}:host:after{content:\"\";position:absolute;right:0;top:0;bottom:0;height:16px;width:1px;background:#dde0e5;margin:auto}:host:last-child:after{content:none}:host::ng-deep .tab-router__item sd-badge .c-badge-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:184px}.flex-1{flex:1}.tab-router__icon{background-color:#5c6bc0;width:16px;height:16px;line-height:16px;text-align:center;font-size:10px;color:#fff;border-radius:2px;text-transform:uppercase}.tab-router__icon .mat-icon{height:10px;width:10px;font-size:10px}.tab-router__close{color:#757575;outline:none;border:0;background:none;border-radius:50%;height:16px;width:16px}.tab-router__close:hover{background-color:#0000001f}.tab-router__close .mat-icon{font-size:12px;height:12px;width:12px}.tab-router__item{background:#f2f3f4;padding:8px;color:inherit;text-decoration:none;font-size:12px;line-height:16px;overflow:hidden}.tab-router__item:hover{background-color:#fff}.tab-router__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-router__item--active{border-radius:8px 8px 0 0;background-color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SdTabRouterService }, { type: i2.Router }], propDecorators: { tab: [{
@@ -277,10 +277,10 @@ class SdTabRouterNavComponent {
     onDrop = (event) => {
         moveItemInArray(this.tabs(), event.previousIndex, event.currentIndex);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabRouterNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: SdTabRouterNavComponent, isStandalone: true, selector: "sd-tab-router-nav", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabRouterNav", first: true, predicate: ["tabRouterNav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #tabRouterNav\n  cdkDropList\n  cdkDropListLockAxis=\"x\"\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  class=\"tab-router__nav tab-router__nav--{{ mode }} d-flex align-items-center flex-nowrap\"\n  [class.d-none]=\"tabs().length > 1\">\n  @for (tab of tabs(); track tab.key) {\n    <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef.nativeElement\"></sd-tab-router-item>\n  }\n</div>\n", styles: [".tab-router__nav{background:#f9f9f9;overflow:hidden}.tab-router__nav--compact::ng-deep .tab-router__name{display:none}.tab-router__nav--compact::ng-deep .tab-router__icon{margin:0!important}.tab-router__nav--compact::ng-deep .tab-router__item--active{min-width:240px}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__icon{margin-right:8px!important}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__name{display:-webkit-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SdTabRouterItemComponent, selector: "sd-tab-router-item", inputs: ["tab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabRouterNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SdTabRouterNavComponent, isStandalone: true, selector: "sd-tab-router-nav", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabRouterNav", first: true, predicate: ["tabRouterNav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #tabRouterNav\n  cdkDropList\n  cdkDropListLockAxis=\"x\"\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  class=\"tab-router__nav tab-router__nav--{{ mode }} d-flex align-items-center flex-nowrap\"\n  [class.d-none]=\"tabs().length > 1\">\n  @for (tab of tabs(); track tab.key) {\n    <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef.nativeElement\"></sd-tab-router-item>\n  }\n</div>\n", styles: [".tab-router__nav{background:#f9f9f9;overflow:hidden}.tab-router__nav--compact::ng-deep .tab-router__name{display:none}.tab-router__nav--compact::ng-deep .tab-router__icon{margin:0!important}.tab-router__nav--compact::ng-deep .tab-router__item--active{min-width:240px}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__icon{margin-right:8px!important}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__name{display:-webkit-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SdTabRouterItemComponent, selector: "sd-tab-router-item", inputs: ["tab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabRouterNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabRouterNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-tab-router-nav', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, DragDropModule, SdTabRouterItemComponent], template: "<div\n  #tabRouterNav\n  cdkDropList\n  cdkDropListLockAxis=\"x\"\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  class=\"tab-router__nav tab-router__nav--{{ mode }} d-flex align-items-center flex-nowrap\"\n  [class.d-none]=\"tabs().length > 1\">\n  @for (tab of tabs(); track tab.key) {\n    <sd-tab-router-item [tab]=\"tab\" cdkDrag [cdkDragBoundary]=\"elementRef.nativeElement\"></sd-tab-router-item>\n  }\n</div>\n", styles: [".tab-router__nav{background:#f9f9f9;overflow:hidden}.tab-router__nav--compact::ng-deep .tab-router__name{display:none}.tab-router__nav--compact::ng-deep .tab-router__icon{margin:0!important}.tab-router__nav--compact::ng-deep .tab-router__item--active{min-width:240px}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__icon{margin-right:8px!important}.tab-router__nav--compact::ng-deep .tab-router__item--active .tab-router__name{display:-webkit-box}\n"] }]
         }], propDecorators: { tabRouterNav: [{ type: i0.ViewChild, args: ['tabRouterNav', { isSignal: true }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], onResize: [{
@@ -562,10 +562,10 @@ class SdTabRouterOutletComponent {
         }
         return null;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabRouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: SdTabRouterOutletComponent, isStandalone: true, selector: "sd-tab-router-outlet", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tabRouterNav", first: true, predicate: ["tabRouterNav"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (disabled()) {\n  <div class=\"tab-router__disabled-outlet\">\n    <router-outlet></router-outlet>\n  </div>\n} @else {\n  <sd-tab-router-nav [tabs]=\"tabs()\" #tabRouterNav></sd-tab-router-nav>\n  <div class=\"tab-router__list\">\n    @for (tab of tabs(); track tab.key) {\n      <div class=\"tab-router__pane\" [class.active]=\"tab.isActive\" [id]=\"tab.key\">\n        <div class=\"tab-router__content\">\n          <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n        </div>\n      </div>\n    } @empty {\n      <div class=\"tab-router__empty\">\n      </div>\n    }\n  </div>\n}", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;height:100vh}:host ::ng-deep .sd-loading{max-width:100%;max-height:100%}.tab-router__list{flex:1;min-height:0}.tab-router__disabled-outlet{flex:1;width:100%;min-height:0;overflow:auto}.tab-router__pane{display:none;position:relative;height:100%;width:100%}.tab-router__pane.active{display:block}.tab-router__content{position:absolute;inset:0;overflow:auto;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SdTabRouterNavComponent, selector: "sd-tab-router-nav", inputs: ["tabs"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabRouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SdTabRouterOutletComponent, isStandalone: true, selector: "sd-tab-router-outlet", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tabRouterNav", first: true, predicate: ["tabRouterNav"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (disabled()) {\n  <div class=\"tab-router__disabled-outlet\">\n    <router-outlet></router-outlet>\n  </div>\n} @else {\n  <sd-tab-router-nav [tabs]=\"tabs()\" #tabRouterNav></sd-tab-router-nav>\n  <div class=\"tab-router__list\">\n    @for (tab of tabs(); track tab.key) {\n      <div class=\"tab-router__pane\" [class.active]=\"tab.isActive\" [id]=\"tab.key\">\n        <div class=\"tab-router__content\">\n          <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n        </div>\n      </div>\n    } @empty {\n      <div class=\"tab-router__empty\">\n      </div>\n    }\n  </div>\n}", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;height:100vh}:host ::ng-deep .sd-loading{max-width:100%;max-height:100%}.tab-router__list{flex:1;min-height:0}.tab-router__disabled-outlet{flex:1;width:100%;min-height:0;overflow:auto}.tab-router__pane{display:none;position:relative;height:100%;width:100%}.tab-router__pane.active{display:block}.tab-router__content{position:absolute;inset:0;overflow:auto;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SdTabRouterNavComponent, selector: "sd-tab-router-nav", inputs: ["tabs"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabRouterOutletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabRouterOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-tab-router-outlet', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule, RouterOutlet, SdTabRouterNavComponent], template: "@if (disabled()) {\n  <div class=\"tab-router__disabled-outlet\">\n    <router-outlet></router-outlet>\n  </div>\n} @else {\n  <sd-tab-router-nav [tabs]=\"tabs()\" #tabRouterNav></sd-tab-router-nav>\n  <div class=\"tab-router__list\">\n    @for (tab of tabs(); track tab.key) {\n      <div class=\"tab-router__pane\" [class.active]=\"tab.isActive\" [id]=\"tab.key\">\n        <div class=\"tab-router__content\">\n          <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n        </div>\n      </div>\n    } @empty {\n      <div class=\"tab-router__empty\">\n      </div>\n    }\n  </div>\n}", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;height:100vh}:host ::ng-deep .sd-loading{max-width:100%;max-height:100%}.tab-router__list{flex:1;min-height:0}.tab-router__disabled-outlet{flex:1;width:100%;min-height:0;overflow:auto}.tab-router__pane{display:none;position:relative;height:100%;width:100%}.tab-router__pane.active{display:block}.tab-router__content{position:absolute;inset:0;overflow:auto;height:100%;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabRouterNav: [{ type: i0.ViewChild, args: ['tabRouterNav', { isSignal: true }] }] } });

package/fesm2022/sdcorejs-angular-components-tab.mjs CHANGED Viewed

@@ -5,7 +5,6 @@ import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1 from '@angular/material/tabs';
 import { MatTabGroup, MatTabsModule } from '@angular/material/tabs';
-import { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';
 class SdTab {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -19,10 +18,10 @@ class SdTab {
     // If we projected raw ng-content into <mat-tab> directly, mat-tab would render
     // eagerly and lose the lazy-load behavior.
     bodyTpl = viewChild.required('body');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.15", type: SdTab, isStandalone: true, selector: "sd-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "bodyTpl", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #body><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: SdTab, isStandalone: true, selector: "sd-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "bodyTpl", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #body><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'sd-tab',
@@ -32,7 +31,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], bodyTpl: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }] } });
-class SdTabGroup extends SdBaseSecureComponent {
+class SdTabGroup {
     tabs = contentChildren(SdTab, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
     // why: visual style preset. 'line' = Material default (underline ink-bar);
@@ -78,7 +77,6 @@ class SdTabGroup extends SdBaseSecureComponent {
         return `var(--sd-${this.color()})`;
     }
     constructor() {
-        super();
         // why: when the active tab is removed (e.g. parent splices the tabs array),
         // selectedIndex may point past the end. Clamp it back to the last valid index
         // so MatTabGroup doesn't render with a stale selection.
@@ -108,10 +106,10 @@ class SdTabGroup extends SdBaseSecureComponent {
         tab.close.emit();
         this.tabClosed.emit({ index, tab });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: SdTabGroup, isStandalone: true, selector: "sd-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "alignTabs", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, dynamicHeight: { classPropertyName: "dynamicHeight", publicName: "dynamicHeight", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", tabClosed: "tabClosed" }, host: { properties: { "attr.data-autoId": "this.autoIdAttr", "class.sd-tab-group--pills": "this.isPills", "class.sd-tab-group--segmented": "this.isSegmented", "style.--sd-tab-indicator-color": "this.cssIndicator", "style.--sd-tab-label-active-color": "this.cssActive", "style.--sd-tab-badge-bg": "this.cssBadgeBg", "style.--sd-tab-badge-color": "this.cssBadgeColor" } }, queries: [{ propertyName: "tabs", predicate: SdTab, isSignal: true }], viewQueries: [{ propertyName: "matTabGroup", first: true, predicate: MatTabGroup, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group\n  class=\"sd-tab-group\"\n  [(selectedIndex)]=\"selectedIndex\"\n  [headerPosition]=\"headerPosition()\"\n  [mat-align-tabs]=\"alignTabs()\"\n  [mat-stretch-tabs]=\"stretchTabs()\"\n  [animationDuration]=\"animationDuration()\"\n  [disableRipple]=\"disableRipple()\"\n  [dynamicHeight]=\"dynamicHeight()\">\n  @for (tab of tabs(); track tab; let i = $index) {\n    <mat-tab [disabled]=\"tab.disabled()\">\n      <ng-template mat-tab-label>\n        <span class=\"sd-tab__label\">\n          @if (tab.icon(); as ic) {\n            <mat-icon class=\"sd-tab__icon\">{{ ic }}</mat-icon>\n          }\n          <span class=\"sd-tab__text\">{{ tab.label() }}</span>\n          @let _badge = tab.badge();\n          @if (_badge !== null && _badge !== undefined) {\n            <span class=\"sd-tab__badge\">{{ _badge }}</span>\n          }\n          @if (tab.closable()) {\n            <mat-icon\n              class=\"sd-tab__close\"\n              role=\"button\"\n              aria-label=\"Close tab\"\n              (click)=\"onClose(tab, i, $event)\">\n              close\n            </mat-icon>\n          }\n        </span>\n      </ng-template>\n\n      <ng-template matTabContent>\n        <ng-container [ngTemplateOutlet]=\"tab.bodyTpl()\"></ng-container>\n      </ng-template>\n    </mat-tab>\n  }\n</mat-tab-group>\n", styles: [":host{display:block;--sd-tab-label-color: var(--sd-text-primary, #1a1a1a);--sd-tab-label-active-color: var(--sd-color-primary, #1565c0);--sd-tab-indicator-color: var(--sd-color-primary, #1565c0);--sd-tab-disabled-opacity: .5;--sd-tab-badge-bg: var(--sd-color-primary-light, #e8f0ff);--sd-tab-badge-color: var(--sd-color-primary, #1565c0);--sd-tab-badge-radius: 10px;--sd-tab-badge-padding: 0 6px;--sd-tab-badge-min-width: 18px;--sd-tab-close-color: var(--sd-text-secondary, #6b6b6b);--sd-tab-close-hover-color: var(--sd-color-error, #d32f2f)}.sd-tab__label{display:inline-flex;align-items:center;gap:4px}.sd-tab__icon{font-size:18px;width:18px;height:18px;line-height:18px}.sd-tab__text{white-space:nowrap}.sd-tab__badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sd-tab-badge-min-width);height:18px;padding:var(--sd-tab-badge-padding);font-size:11px;font-weight:500;line-height:1;color:var(--sd-tab-badge-color);background:var(--sd-tab-badge-bg);border-radius:var(--sd-tab-badge-radius);margin-left:2px}.sd-tab__close{font-size:16px;width:16px;height:16px;line-height:16px;color:var(--sd-tab-close-color);cursor:pointer;opacity:.6;margin-left:4px;transition:opacity .12s ease,color .12s ease}.sd-tab__close:hover{opacity:1;color:var(--sd-tab-close-hover-color)}:host ::ng-deep .mat-mdc-tab .mdc-tab-indicator__content--underline{border-color:var(--sd-tab-indicator-color)}:host ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__ripple:before,:host ::ng-deep .mat-mdc-tab.mdc-tab--active:before{background-color:transparent!important;opacity:0!important}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mdc-tab-indicator{display:none}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-label-container,:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-header{border-bottom:none!important}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-header{min-height:36px}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-labels{gap:4px;padding:2px 0}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab{min-width:0;height:32px;padding:0 14px;border-radius:999px;flex-grow:0!important;flex-basis:auto!important;background:transparent;transition:background-color .12s ease,color .12s ease}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab:hover:not(.mat-mdc-tab-disabled){background:var(--sd-tab-badge-bg)}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:var(--sd-tab-label-color);font-weight:500}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mdc-tab__content{height:100%}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab.mdc-tab--active{background:var(--sd-tab-label-active-color)}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:#fff}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab.mdc-tab--active:hover:not(.mat-mdc-tab-disabled){box-shadow:inset 0 0 0 9999px #0000001f}:host(.sd-tab-group--pills) ::ng-deep .sd-tab__label .sd-tab__icon{color:inherit}:host(.sd-tab-group--pills) ::ng-deep .sd-tab__label .sd-tab__badge{background:#ffffff40;color:inherit}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab:not(.mdc-tab--active) .sd-tab__label .sd-tab__badge{background:var(--sd-tab-badge-bg);color:var(--sd-tab-badge-color)}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab .mdc-tab-indicator{display:none}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-label-container,:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-header{border-bottom:none!important}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-header{display:inline-flex;min-height:34px;background:#f0f3f7;border-radius:8px;padding:3px}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-labels{gap:0}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab{min-width:0;height:28px;padding:0 14px;border-radius:6px;flex-grow:0!important;flex-basis:auto!important;background:transparent;transition:background-color .12s ease,box-shadow .12s ease}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab:hover:not(.mat-mdc-tab-disabled):not(.mdc-tab--active){background:#0000000a}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:var(--sd-tab-label-color);font-weight:500;font-size:13px}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab.mdc-tab--active{background:#fff;box-shadow:0 1px 3px #00000014}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--sd-tab-label-active-color);font-weight:600}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab.mdc-tab--active:hover:not(.mat-mdc-tab-disabled){background:#fff;box-shadow:0 1px 4px #0000001f}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i1.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SdTabGroup, isStandalone: true, selector: "sd-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "alignTabs", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, dynamicHeight: { classPropertyName: "dynamicHeight", publicName: "dynamicHeight", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", tabClosed: "tabClosed" }, host: { properties: { "attr.data-autoId": "this.autoIdAttr", "class.sd-tab-group--pills": "this.isPills", "class.sd-tab-group--segmented": "this.isSegmented", "style.--sd-tab-indicator-color": "this.cssIndicator", "style.--sd-tab-label-active-color": "this.cssActive", "style.--sd-tab-badge-bg": "this.cssBadgeBg", "style.--sd-tab-badge-color": "this.cssBadgeColor" } }, queries: [{ propertyName: "tabs", predicate: SdTab, isSignal: true }], viewQueries: [{ propertyName: "matTabGroup", first: true, predicate: MatTabGroup, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n  class=\"sd-tab-group\"\n  [(selectedIndex)]=\"selectedIndex\"\n  [headerPosition]=\"headerPosition()\"\n  [mat-align-tabs]=\"alignTabs()\"\n  [mat-stretch-tabs]=\"stretchTabs()\"\n  [animationDuration]=\"animationDuration()\"\n  [disableRipple]=\"disableRipple()\"\n  [dynamicHeight]=\"dynamicHeight()\">\n  @for (tab of tabs(); track tab; let i = $index) {\n    <mat-tab [disabled]=\"tab.disabled()\">\n      <ng-template mat-tab-label>\n        <span class=\"sd-tab__label\">\n          @if (tab.icon(); as ic) {\n            <mat-icon class=\"sd-tab__icon\">{{ ic }}</mat-icon>\n          }\n          <span class=\"sd-tab__text\">{{ tab.label() }}</span>\n          @let _badge = tab.badge();\n          @if (_badge !== null && _badge !== undefined) {\n            <span class=\"sd-tab__badge\">{{ _badge }}</span>\n          }\n          @if (tab.closable()) {\n            <mat-icon\n              class=\"sd-tab__close\"\n              role=\"button\"\n              aria-label=\"Close tab\"\n              (click)=\"onClose(tab, i, $event)\">\n              close\n            </mat-icon>\n          }\n        </span>\n      </ng-template>\n\n      <ng-template matTabContent>\n        <ng-container [ngTemplateOutlet]=\"tab.bodyTpl()\"></ng-container>\n      </ng-template>\n    </mat-tab>\n  }\n</mat-tab-group>\n", styles: [":host{display:block;--sd-tab-label-color: var(--sd-text-primary, #1a1a1a);--sd-tab-label-active-color: var(--sd-color-primary, #1565c0);--sd-tab-indicator-color: var(--sd-color-primary, #1565c0);--sd-tab-disabled-opacity: .5;--sd-tab-badge-bg: var(--sd-color-primary-light, #e8f0ff);--sd-tab-badge-color: var(--sd-color-primary, #1565c0);--sd-tab-badge-radius: 10px;--sd-tab-badge-padding: 0 6px;--sd-tab-badge-min-width: 18px;--sd-tab-close-color: var(--sd-text-secondary, #6b6b6b);--sd-tab-close-hover-color: var(--sd-color-error, #d32f2f)}.sd-tab__label{display:inline-flex;align-items:center;gap:4px}.sd-tab__icon{font-size:18px;width:18px;height:18px;line-height:18px}.sd-tab__text{white-space:nowrap}.sd-tab__badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sd-tab-badge-min-width);height:18px;padding:var(--sd-tab-badge-padding);font-size:11px;font-weight:500;line-height:1;color:var(--sd-tab-badge-color);background:var(--sd-tab-badge-bg);border-radius:var(--sd-tab-badge-radius);margin-left:2px}.sd-tab__close{font-size:16px;width:16px;height:16px;line-height:16px;color:var(--sd-tab-close-color);cursor:pointer;opacity:.6;margin-left:4px;transition:opacity .12s ease,color .12s ease}.sd-tab__close:hover{opacity:1;color:var(--sd-tab-close-hover-color)}:host ::ng-deep .mat-mdc-tab .mdc-tab-indicator__content--underline{border-color:var(--sd-tab-indicator-color)}:host ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__ripple:before,:host ::ng-deep .mat-mdc-tab.mdc-tab--active:before{background-color:transparent!important;opacity:0!important}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mdc-tab-indicator{display:none}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-label-container,:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-header{border-bottom:none!important}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-header{min-height:36px}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-labels{gap:4px;padding:2px 0}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab{min-width:0;height:32px;padding:0 14px;border-radius:999px;flex-grow:0!important;flex-basis:auto!important;background:transparent;transition:background-color .12s ease,color .12s ease}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab:hover:not(.mat-mdc-tab-disabled){background:var(--sd-tab-badge-bg)}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:var(--sd-tab-label-color);font-weight:500}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mdc-tab__content{height:100%}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab.mdc-tab--active{background:var(--sd-tab-label-active-color)}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:#fff}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab.mdc-tab--active:hover:not(.mat-mdc-tab-disabled){box-shadow:inset 0 0 0 9999px #0000001f}:host(.sd-tab-group--pills) ::ng-deep .sd-tab__label .sd-tab__icon{color:inherit}:host(.sd-tab-group--pills) ::ng-deep .sd-tab__label .sd-tab__badge{background:#ffffff40;color:inherit}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab:not(.mdc-tab--active) .sd-tab__label .sd-tab__badge{background:var(--sd-tab-badge-bg);color:var(--sd-tab-badge-color)}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab .mdc-tab-indicator{display:none}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-label-container,:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-header{border-bottom:none!important}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-header{display:inline-flex;min-height:34px;background:#f0f3f7;border-radius:8px;padding:3px}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-labels{gap:0}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab{min-width:0;height:28px;padding:0 14px;border-radius:6px;flex-grow:0!important;flex-basis:auto!important;background:transparent;transition:background-color .12s ease,box-shadow .12s ease}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab:hover:not(.mat-mdc-tab-disabled):not(.mdc-tab--active){background:#0000000a}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:var(--sd-tab-label-color);font-weight:500;font-size:13px}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab.mdc-tab--active{background:#fff;box-shadow:0 1px 3px #00000014}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--sd-tab-label-active-color);font-weight:600}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab.mdc-tab--active:hover:not(.mat-mdc-tab-disabled){background:#fff;box-shadow:0 1px 4px #0000001f}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i1.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: SdTabGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdTabGroup, decorators: [{
             type: Component,
             args: [{ selector: 'sd-tab-group', standalone: true, imports: [MatTabsModule, MatIconModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group\n  class=\"sd-tab-group\"\n  [(selectedIndex)]=\"selectedIndex\"\n  [headerPosition]=\"headerPosition()\"\n  [mat-align-tabs]=\"alignTabs()\"\n  [mat-stretch-tabs]=\"stretchTabs()\"\n  [animationDuration]=\"animationDuration()\"\n  [disableRipple]=\"disableRipple()\"\n  [dynamicHeight]=\"dynamicHeight()\">\n  @for (tab of tabs(); track tab; let i = $index) {\n    <mat-tab [disabled]=\"tab.disabled()\">\n      <ng-template mat-tab-label>\n        <span class=\"sd-tab__label\">\n          @if (tab.icon(); as ic) {\n            <mat-icon class=\"sd-tab__icon\">{{ ic }}</mat-icon>\n          }\n          <span class=\"sd-tab__text\">{{ tab.label() }}</span>\n          @let _badge = tab.badge();\n          @if (_badge !== null && _badge !== undefined) {\n            <span class=\"sd-tab__badge\">{{ _badge }}</span>\n          }\n          @if (tab.closable()) {\n            <mat-icon\n              class=\"sd-tab__close\"\n              role=\"button\"\n              aria-label=\"Close tab\"\n              (click)=\"onClose(tab, i, $event)\">\n              close\n            </mat-icon>\n          }\n        </span>\n      </ng-template>\n\n      <ng-template matTabContent>\n        <ng-container [ngTemplateOutlet]=\"tab.bodyTpl()\"></ng-container>\n      </ng-template>\n    </mat-tab>\n  }\n</mat-tab-group>\n", styles: [":host{display:block;--sd-tab-label-color: var(--sd-text-primary, #1a1a1a);--sd-tab-label-active-color: var(--sd-color-primary, #1565c0);--sd-tab-indicator-color: var(--sd-color-primary, #1565c0);--sd-tab-disabled-opacity: .5;--sd-tab-badge-bg: var(--sd-color-primary-light, #e8f0ff);--sd-tab-badge-color: var(--sd-color-primary, #1565c0);--sd-tab-badge-radius: 10px;--sd-tab-badge-padding: 0 6px;--sd-tab-badge-min-width: 18px;--sd-tab-close-color: var(--sd-text-secondary, #6b6b6b);--sd-tab-close-hover-color: var(--sd-color-error, #d32f2f)}.sd-tab__label{display:inline-flex;align-items:center;gap:4px}.sd-tab__icon{font-size:18px;width:18px;height:18px;line-height:18px}.sd-tab__text{white-space:nowrap}.sd-tab__badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sd-tab-badge-min-width);height:18px;padding:var(--sd-tab-badge-padding);font-size:11px;font-weight:500;line-height:1;color:var(--sd-tab-badge-color);background:var(--sd-tab-badge-bg);border-radius:var(--sd-tab-badge-radius);margin-left:2px}.sd-tab__close{font-size:16px;width:16px;height:16px;line-height:16px;color:var(--sd-tab-close-color);cursor:pointer;opacity:.6;margin-left:4px;transition:opacity .12s ease,color .12s ease}.sd-tab__close:hover{opacity:1;color:var(--sd-tab-close-hover-color)}:host ::ng-deep .mat-mdc-tab .mdc-tab-indicator__content--underline{border-color:var(--sd-tab-indicator-color)}:host ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__ripple:before,:host ::ng-deep .mat-mdc-tab.mdc-tab--active:before{background-color:transparent!important;opacity:0!important}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mdc-tab-indicator{display:none}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-label-container,:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-header{border-bottom:none!important}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-header{min-height:36px}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab-labels{gap:4px;padding:2px 0}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab{min-width:0;height:32px;padding:0 14px;border-radius:999px;flex-grow:0!important;flex-basis:auto!important;background:transparent;transition:background-color .12s ease,color .12s ease}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab:hover:not(.mat-mdc-tab-disabled){background:var(--sd-tab-badge-bg)}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:var(--sd-tab-label-color);font-weight:500}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab .mdc-tab__content{height:100%}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab.mdc-tab--active{background:var(--sd-tab-label-active-color)}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:#fff}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab.mdc-tab--active:hover:not(.mat-mdc-tab-disabled){box-shadow:inset 0 0 0 9999px #0000001f}:host(.sd-tab-group--pills) ::ng-deep .sd-tab__label .sd-tab__icon{color:inherit}:host(.sd-tab-group--pills) ::ng-deep .sd-tab__label .sd-tab__badge{background:#ffffff40;color:inherit}:host(.sd-tab-group--pills) ::ng-deep .mat-mdc-tab:not(.mdc-tab--active) .sd-tab__label .sd-tab__badge{background:var(--sd-tab-badge-bg);color:var(--sd-tab-badge-color)}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab .mdc-tab-indicator{display:none}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-label-container,:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-header{border-bottom:none!important}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-header{display:inline-flex;min-height:34px;background:#f0f3f7;border-radius:8px;padding:3px}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab-labels{gap:0}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab{min-width:0;height:28px;padding:0 14px;border-radius:6px;flex-grow:0!important;flex-basis:auto!important;background:transparent;transition:background-color .12s ease,box-shadow .12s ease}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab:hover:not(.mat-mdc-tab-disabled):not(.mdc-tab--active){background:#0000000a}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:var(--sd-tab-label-color);font-weight:500;font-size:13px}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab.mdc-tab--active{background:#fff;box-shadow:0 1px 3px #00000014}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--sd-tab-label-active-color);font-weight:600}:host(.sd-tab-group--segmented) ::ng-deep .mat-mdc-tab.mdc-tab--active:hover:not(.mat-mdc-tab-disabled){background:#fff;box-shadow:0 1px 4px #0000001f}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdTab), { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], alignTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignTabs", required: false }] }], stretchTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretchTabs", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], dynamicHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicHeight", required: false }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], tabClosed: [{ type: i0.Output, args: ["tabClosed"] }], matTabGroup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTabGroup), { isSignal: true }] }], autoIdAttr: [{