@educarehq/solaris-ui 0.2.0 → 0.3.0

package/esm2022/lib/components/navigation/stepper/actions/stepper-actions.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-actions.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/navigation/stepper/actions/stepper-actions.component.ts","../../../../../../../../../packages/angular/src/lib/components/navigation/stepper/actions/stepper-actions.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;;AAc1E,MAAM,OAAO,8BAA8B;IAChC,KAAK,GAAG,KAAK,CAA6B,KAAK,4EAAC,CAAC;wGAD/C,8BAA8B;4FAA9B,8BAA8B,0TCd3C,kBACA;;4FDaa,8BAA8B;kBAX1C,SAAS;+BACE,yBAAyB,cACvB,IAAI,mBAGC,uBAAuB,CAAC,MAAM,QACzC;wBACJ,mBAAmB,EAAE,SAAS;wBAC9B,KAAK,EAAE,yBAAyB;qBACjC","sourcesContent":["import { Component, input, ChangeDetectionStrategy } from '@angular/core';\nimport type { SolarisStepperActionsAlign } from '../model/stepper.types';\n\n@Component({\n  selector: 'solaris-stepper-actions',\n  standalone: true,\n  templateUrl: './stepper-actions.component.html',\n  styleUrls: ['./stepper-actions.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-align]': 'align()',\n    class: 'solaris-stepper-actions',\n  },\n})\nexport class SolarisStepperActionsComponent {\n  readonly align = input<SolarisStepperActionsAlign>('end');\n}\n","<ng-content />\n"]}

package/esm2022/lib/components/navigation/stepper/component/stepper.component.js

@@ -0,0 +1,99 @@
+import { Component, input, output, model, contentChildren, contentChild, computed, signal, inject, ChangeDetectionStrategy, effect, } from '@angular/core';
+import { SolarisStepperActionsComponent } from '../actions/stepper-actions.component';
+import { SolarisTranslateService } from '../../../../services/translation';
+import { SolarisStepComponent } from '../step/step.component';
+import { SOLARIS_STEPPER } from '../token/stepper.tokens';
+import { SolarisIconComponent } from '../../../icon';
+import * as i0 from "@angular/core";
+export class SolarisStepperComponent {
+    translateService = inject(SolarisTranslateService, {
+        optional: true,
+    });
+    steps = contentChildren(SolarisStepComponent, ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    actions = contentChild(SolarisStepperActionsComponent, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    activeIndex = model(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    linear = input(false, ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    showConnectors = input(true, ...(ngDevMode ? [{ debugName: "showConnectors" }] : /* istanbul ignore next */ []));
+    showStepStatus = input(true, ...(ngDevMode ? [{ debugName: "showStepStatus" }] : /* istanbul ignore next */ []));
+    showStepNumbers = input(true, ...(ngDevMode ? [{ debugName: "showStepNumbers" }] : /* istanbul ignore next */ []));
+    contentTransition = input('fade', ...(ngDevMode ? [{ debugName: "contentTransition" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelKey = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
+    activeIndexChange = output();
+    stepChange = output();
+    stepClick = output();
+    stepTransitionDirection = signal('next', ...(ngDevMode ? [{ debugName: "stepTransitionDirection" }] : /* istanbul ignore next */ []));
+    previousIndex = signal(0, ...(ngDevMode ? [{ debugName: "previousIndex" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => {
+        if (this.ariaLabel())
+            return this.ariaLabel();
+        const ariaLabelKey = this.ariaLabelKey();
+        if (ariaLabelKey && this.translateService) {
+            return this.translateService.translate(ariaLabelKey);
+        }
+        return ariaLabelKey ?? 'Progress';
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const current = this.activeIndex();
+            const prev = this.previousIndex();
+            if (current !== prev) {
+                this.activeIndexChange.emit(current);
+                this.stepChange.emit({
+                    activeIndex: current,
+                    previousIndex: prev,
+                });
+                this.stepTransitionDirection.set(current > prev ? 'next' : 'previous');
+                this.previousIndex.set(current);
+            }
+        });
+    }
+    goToStep(index) {
+        const step = this.steps()[index];
+        if (!step)
+            return;
+        if (step.computedStatus() === 'disabled')
+            return;
+        if (this.linear() &&
+            step.computedStatus() !== 'completed' &&
+            index !== this.activeIndex())
+            return;
+        this.activeIndex.set(index);
+        this.stepClick.emit({
+            index,
+            label: step.resolvedLabel(),
+        });
+    }
+    isStepClickable(step) {
+        return step.computedStatus() !== 'disabled';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisStepperComponent, isStandalone: true, selector: "solaris-stepper", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showConnectors: { classPropertyName: "showConnectors", publicName: "showConnectors", isSignal: true, isRequired: false, transformFunction: null }, showStepStatus: { classPropertyName: "showStepStatus", publicName: "showStepStatus", isSignal: true, isRequired: false, transformFunction: null }, showStepNumbers: { classPropertyName: "showStepNumbers", publicName: "showStepNumbers", isSignal: true, isRequired: false, transformFunction: null }, contentTransition: { classPropertyName: "contentTransition", publicName: "contentTransition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", activeIndexChange: "activeIndexChange", stepChange: "stepChange", stepClick: "stepClick" }, host: { properties: { "attr.data-size": "size()", "attr.role": "\"navigation\"", "attr.data-density": "density()", "attr.data-appearance": "appearance()", "attr.data-orientation": "orientation()", "attr.aria-label": "resolvedAriaLabel()" }, classAttribute: "solaris-stepper" }, providers: [
+            {
+                provide: SOLARIS_STEPPER,
+                useExisting: SolarisStepperComponent,
+            },
+        ], queries: [{ propertyName: "steps", predicate: SolarisStepComponent, isSignal: true }, { propertyName: "actions", first: true, predicate: SolarisStepperActionsComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-stepper__indicators\">\n  @for (step of steps(); track step; let i = $index) {\n    @if (showConnectors() && i > 0) {\n      <div\n        class=\"solaris-stepper__connector\"\n        [class.solaris-stepper__connector--active]=\"i <= activeIndex()\"\n      ></div>\n    }\n\n    <div\n      class=\"solaris-stepper__step\"\n      [class.solaris-stepper__step--active]=\"i === activeIndex()\"\n      [class.solaris-stepper__step--clickable]=\"isStepClickable(step)\"\n      [attr.data-status]=\"step.computedStatus()\"\n    >\n      @if (isStepClickable(step)) {\n        <button\n          type=\"button\"\n          class=\"solaris-stepper__indicator-button\"\n          (click)=\"goToStep(i)\"\n          [attr.aria-current]=\"i === activeIndex() ? 'step' : undefined\"\n          [attr.aria-disabled]=\"step.computedStatus() === 'disabled'\"\n        >\n          @if (step.icon(); as iconName) {\n            <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n          } @else if (step.showCheckIcon()) {\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          } @else if (step.showErrorIcon()) {\n            <solaris-icon name=\"danger\" [decorative]=\"true\" />\n          } @else if (showStepNumbers()) {\n            <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n          }\n        </button>\n      } @else {\n        <span class=\"solaris-stepper__indicator-static\">\n          @if (step.icon(); as iconName) {\n            <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n          } @else if (step.showCheckIcon()) {\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          } @else if (step.showErrorIcon()) {\n            <solaris-icon name=\"danger\" [decorative]=\"true\" />\n          } @else if (showStepNumbers()) {\n            <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n          }\n        </span>\n      }\n\n      <div class=\"solaris-stepper__label-group\">\n        <span class=\"solaris-stepper__label\">{{ step.resolvedLabel() }}</span>\n        @if (step.resolvedDescription(); as desc) {\n          <span class=\"solaris-stepper__description\">{{ desc }}</span>\n        }\n      </div>\n\n      @if (showStepStatus()) {\n        <span class=\"solaris-stepper__status-badge\">\n          @if (step.optional()) {\n            <span class=\"solaris-stepper__optional-text\">Optional</span>\n            <!-- SOLARIS_I18N_EXCEPTION: \"Optional\" is a short static label used as a visual badge. Translation support can be added in a future iteration. -->\n          }\n        </span>\n      }\n    </div>\n  }\n</div>\n\n<div\n  class=\"solaris-stepper__content-panel\"\n  [class.solaris-stepper__content-panel--fade]=\"contentTransition() === 'fade'\"\n  [class.solaris-stepper__content-panel--slide-right]=\"\n    contentTransition() === 'slide' && stepTransitionDirection() === 'next'\n  \"\n  [class.solaris-stepper__content-panel--slide-left]=\"\n    contentTransition() === 'slide' && stepTransitionDirection() === 'previous'\n  \"\n>\n  <ng-content select=\"solaris-step\" />\n</div>\n\n<ng-content select=\"solaris-stepper-actions\" />\n", styles: [":host{--solaris-stepper-gap: var(--solaris-spacing-4);--solaris-stepper-card-shadow: var(--solaris-shadow-sm);--solaris-stepper-indicator-size: var(--solaris-spacing-8);--solaris-stepper-label-color: var(--solaris-text-default);--solaris-stepper-indicator-color: var(--solaris-text-subtle);--solaris-stepper-description-color: var(--solaris-text-muted);--solaris-stepper-card-background: var(--solaris-surface-base);--solaris-stepper-connector-color: var(--solaris-border-subtle);--solaris-stepper-connector-size: var(--solaris-border-width-md);--solaris-stepper-card-border-color: var(--solaris-border-subtle);--solaris-stepper-indicator-background: var(--solaris-surface-muted);--solaris-stepper-connector-active-color: var(--solaris-primary-base);--solaris-stepper-dashed-connector-color: var(--solaris-border-subtle);display:block}.solaris-stepper__indicators{display:flex;align-items:flex-start;gap:var(--solaris-stepper-gap)}:host([data-orientation=vertical]) .solaris-stepper__indicators{flex-direction:column}.solaris-stepper__connector{flex:1;min-width:var(--solaris-spacing-6);border-radius:var(--solaris-radius-full);height:var(--solaris-stepper-connector-size);background:var(--solaris-stepper-connector-color);margin-top:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-orientation=vertical]) .solaris-stepper__connector{flex:1;height:auto;margin-top:0;min-width:auto;min-height:var(--solaris-spacing-6);width:var(--solaris-stepper-connector-size);margin-left:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2)}.solaris-stepper__connector--active{background:var(--solaris-stepper-connector-active-color)}.solaris-stepper__step{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3)}.solaris-stepper__step--clickable{cursor:pointer}.solaris-stepper__indicator-button,.solaris-stepper__indicator-static{padding:0;border:none;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);width:var(--solaris-stepper-indicator-size);height:var(--solaris-stepper-indicator-size);color:var(--solaris-stepper-indicator-color);background:var(--solaris-stepper-indicator-background);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-stepper__indicator-button{cursor:pointer}.solaris-stepper__indicator-button:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-primary-base)}.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-static{color:var(--solaris-primary-text);background:var(--solaris-primary-base)}.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-static{color:var(--solaris-success-on-solid);background:var(--solaris-success-base)}.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-static{color:var(--solaris-danger-on-solid);background:var(--solaris-danger-base)}.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-static{opacity:.5;cursor:not-allowed}.solaris-stepper__step[data-status=disabled] .solaris-stepper__label{opacity:.5}.solaris-stepper__number{font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans)}.solaris-stepper__label-group{display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}:host([data-orientation=vertical]) .solaris-stepper__label-group{flex:1}.solaris-stepper__label{white-space:nowrap;color:var(--solaris-stepper-label-color);font:var(--solaris-font-weight-medium) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__description{white-space:nowrap;color:var(--solaris-stepper-description-color);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__status-badge{display:flex;align-items:center}.solaris-stepper__optional-text{color:var(--solaris-text-muted);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-subtle);padding:var(--solaris-spacing-1) var(--solaris-spacing-2);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/1 var(--solaris-font-family-sans)}.solaris-stepper__content-panel{padding-top:var(--solaris-spacing-6)}:host([data-orientation=horizontal]) .solaris-stepper__content-panel{max-width:100%}.solaris-stepper__content-panel--fade{animation:solaris-stepper-fade-in var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-right{animation:solaris-stepper-slide-in-right var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-left{animation:solaris-stepper-slide-in-left var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__connector{display:none}:host([data-appearance=card]) .solaris-stepper__step{flex:1;text-align:center;align-items:center;flex-direction:column;padding:var(--solaris-spacing-4);border-radius:var(--solaris-radius-lg);box-shadow:var(--solaris-stepper-card-shadow);background:var(--solaris-stepper-card-background);border:.1rem solid var(--solaris-stepper-card-border-color);transition:box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__step--active{border-color:var(--solaris-primary-base);box-shadow:var(--solaris-shadow-focus, 0 0 0 .1rem var(--solaris-primary-base))}:host([data-appearance=card]) .solaris-stepper__indicators{gap:var(--solaris-stepper-gap)}:host([data-appearance=dashed]){--solaris-stepper-gap: 0}:host([data-appearance=dashed]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed]) .solaris-stepper__connector,:host([data-appearance=dashed]) .solaris-stepper__indicator-button,:host([data-appearance=dashed]) .solaris-stepper__indicator-static,:host([data-appearance=dashed]) .solaris-stepper__label-group,:host([data-appearance=dashed]) .solaris-stepper__status-badge{display:none}:host([data-appearance=dashed]) .solaris-stepper__step{flex:1;height:var(--solaris-spacing-2);min-width:var(--solaris-spacing-4);border-radius:var(--solaris-radius-full);background:var(--solaris-stepper-connector-color)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=completed]{background:var(--solaris-success-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=active]{background:var(--solaris-primary-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=error]{background:var(--solaris-danger-base)}:host([data-appearance=dashed]) .solaris-stepper__step--clickable{cursor:pointer}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__step{flex:none;height:auto;min-width:auto;width:var(--solaris-spacing-2);min-height:var(--solaris-spacing-4)}:host([data-size=sm]){--solaris-stepper-gap: var(--solaris-spacing-3);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-size=sm]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-size=lg]){--solaris-stepper-gap: var(--solaris-spacing-6);--solaris-stepper-indicator-size: var(--solaris-spacing-10)}:host([data-size=lg]) .solaris-stepper__label{font-size:var(--solaris-font-size-md)}:host([data-density=compact]){--solaris-stepper-gap: var(--solaris-spacing-2);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-density=compact]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-density=compact]) .solaris-stepper__description{display:none}:host([data-density=compact]) .solaris-stepper__content-panel{padding-top:var(--solaris-spacing-3)}@media(prefers-reduced-motion:reduce){.solaris-stepper__content-panel--fade,.solaris-stepper__content-panel--slide-right,.solaris-stepper__content-panel--slide-left{animation:none}}@keyframes solaris-stepper-fade-in{0%{opacity:0}to{opacity:1}}@keyframes solaris-stepper-slide-in-right{0%{opacity:0;transform:translate(var(--solaris-spacing-4))}to{opacity:1;transform:translate(0)}}@keyframes solaris-stepper-slide-in-left{0%{opacity:0;transform:translate(calc(-1 * var(--solaris-spacing-4)))}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-stepper', standalone: true, imports: [SolarisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-stepper',
+                        '[attr.data-size]': 'size()',
+                        '[attr.role]': '"navigation"',
+                        '[attr.data-density]': 'density()',
+                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.aria-label]': 'resolvedAriaLabel()',
+                    }, providers: [
+                        {
+                            provide: SOLARIS_STEPPER,
+                            useExisting: SolarisStepperComponent,
+                        },
+                    ], template: "<div class=\"solaris-stepper__indicators\">\n  @for (step of steps(); track step; let i = $index) {\n    @if (showConnectors() && i > 0) {\n      <div\n        class=\"solaris-stepper__connector\"\n        [class.solaris-stepper__connector--active]=\"i <= activeIndex()\"\n      ></div>\n    }\n\n    <div\n      class=\"solaris-stepper__step\"\n      [class.solaris-stepper__step--active]=\"i === activeIndex()\"\n      [class.solaris-stepper__step--clickable]=\"isStepClickable(step)\"\n      [attr.data-status]=\"step.computedStatus()\"\n    >\n      @if (isStepClickable(step)) {\n        <button\n          type=\"button\"\n          class=\"solaris-stepper__indicator-button\"\n          (click)=\"goToStep(i)\"\n          [attr.aria-current]=\"i === activeIndex() ? 'step' : undefined\"\n          [attr.aria-disabled]=\"step.computedStatus() === 'disabled'\"\n        >\n          @if (step.icon(); as iconName) {\n            <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n          } @else if (step.showCheckIcon()) {\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          } @else if (step.showErrorIcon()) {\n            <solaris-icon name=\"danger\" [decorative]=\"true\" />\n          } @else if (showStepNumbers()) {\n            <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n          }\n        </button>\n      } @else {\n        <span class=\"solaris-stepper__indicator-static\">\n          @if (step.icon(); as iconName) {\n            <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n          } @else if (step.showCheckIcon()) {\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          } @else if (step.showErrorIcon()) {\n            <solaris-icon name=\"danger\" [decorative]=\"true\" />\n          } @else if (showStepNumbers()) {\n            <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n          }\n        </span>\n      }\n\n      <div class=\"solaris-stepper__label-group\">\n        <span class=\"solaris-stepper__label\">{{ step.resolvedLabel() }}</span>\n        @if (step.resolvedDescription(); as desc) {\n          <span class=\"solaris-stepper__description\">{{ desc }}</span>\n        }\n      </div>\n\n      @if (showStepStatus()) {\n        <span class=\"solaris-stepper__status-badge\">\n          @if (step.optional()) {\n            <span class=\"solaris-stepper__optional-text\">Optional</span>\n            <!-- SOLARIS_I18N_EXCEPTION: \"Optional\" is a short static label used as a visual badge. Translation support can be added in a future iteration. -->\n          }\n        </span>\n      }\n    </div>\n  }\n</div>\n\n<div\n  class=\"solaris-stepper__content-panel\"\n  [class.solaris-stepper__content-panel--fade]=\"contentTransition() === 'fade'\"\n  [class.solaris-stepper__content-panel--slide-right]=\"\n    contentTransition() === 'slide' && stepTransitionDirection() === 'next'\n  \"\n  [class.solaris-stepper__content-panel--slide-left]=\"\n    contentTransition() === 'slide' && stepTransitionDirection() === 'previous'\n  \"\n>\n  <ng-content select=\"solaris-step\" />\n</div>\n\n<ng-content select=\"solaris-stepper-actions\" />\n", styles: [":host{--solaris-stepper-gap: var(--solaris-spacing-4);--solaris-stepper-card-shadow: var(--solaris-shadow-sm);--solaris-stepper-indicator-size: var(--solaris-spacing-8);--solaris-stepper-label-color: var(--solaris-text-default);--solaris-stepper-indicator-color: var(--solaris-text-subtle);--solaris-stepper-description-color: var(--solaris-text-muted);--solaris-stepper-card-background: var(--solaris-surface-base);--solaris-stepper-connector-color: var(--solaris-border-subtle);--solaris-stepper-connector-size: var(--solaris-border-width-md);--solaris-stepper-card-border-color: var(--solaris-border-subtle);--solaris-stepper-indicator-background: var(--solaris-surface-muted);--solaris-stepper-connector-active-color: var(--solaris-primary-base);--solaris-stepper-dashed-connector-color: var(--solaris-border-subtle);display:block}.solaris-stepper__indicators{display:flex;align-items:flex-start;gap:var(--solaris-stepper-gap)}:host([data-orientation=vertical]) .solaris-stepper__indicators{flex-direction:column}.solaris-stepper__connector{flex:1;min-width:var(--solaris-spacing-6);border-radius:var(--solaris-radius-full);height:var(--solaris-stepper-connector-size);background:var(--solaris-stepper-connector-color);margin-top:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-orientation=vertical]) .solaris-stepper__connector{flex:1;height:auto;margin-top:0;min-width:auto;min-height:var(--solaris-spacing-6);width:var(--solaris-stepper-connector-size);margin-left:calc(var(--solaris-stepper-indicator-size) / 2 - var(--solaris-stepper-connector-size) / 2)}.solaris-stepper__connector--active{background:var(--solaris-stepper-connector-active-color)}.solaris-stepper__step{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3)}.solaris-stepper__step--clickable{cursor:pointer}.solaris-stepper__indicator-button,.solaris-stepper__indicator-static{padding:0;border:none;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);width:var(--solaris-stepper-indicator-size);height:var(--solaris-stepper-indicator-size);color:var(--solaris-stepper-indicator-color);background:var(--solaris-stepper-indicator-background);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}.solaris-stepper__indicator-button{cursor:pointer}.solaris-stepper__indicator-button:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-primary-base)}.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=active] .solaris-stepper__indicator-static{color:var(--solaris-primary-text);background:var(--solaris-primary-base)}.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=completed] .solaris-stepper__indicator-static{color:var(--solaris-success-on-solid);background:var(--solaris-success-base)}.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=error] .solaris-stepper__indicator-static{color:var(--solaris-danger-on-solid);background:var(--solaris-danger-base)}.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-button,.solaris-stepper__step[data-status=disabled] .solaris-stepper__indicator-static{opacity:.5;cursor:not-allowed}.solaris-stepper__step[data-status=disabled] .solaris-stepper__label{opacity:.5}.solaris-stepper__number{font:var(--solaris-font-weight-semibold) var(--solaris-font-size-sm)/1 var(--solaris-font-family-sans)}.solaris-stepper__label-group{display:flex;flex-direction:column;gap:var(--solaris-spacing-1)}:host([data-orientation=vertical]) .solaris-stepper__label-group{flex:1}.solaris-stepper__label{white-space:nowrap;color:var(--solaris-stepper-label-color);font:var(--solaris-font-weight-medium) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__description{white-space:nowrap;color:var(--solaris-stepper-description-color);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-stepper__status-badge{display:flex;align-items:center}.solaris-stepper__optional-text{color:var(--solaris-text-muted);border-radius:var(--solaris-radius-sm);background:var(--solaris-surface-subtle);padding:var(--solaris-spacing-1) var(--solaris-spacing-2);font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/1 var(--solaris-font-family-sans)}.solaris-stepper__content-panel{padding-top:var(--solaris-spacing-6)}:host([data-orientation=horizontal]) .solaris-stepper__content-panel{max-width:100%}.solaris-stepper__content-panel--fade{animation:solaris-stepper-fade-in var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-right{animation:solaris-stepper-slide-in-right var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-stepper__content-panel--slide-left{animation:solaris-stepper-slide-in-left var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__connector{display:none}:host([data-appearance=card]) .solaris-stepper__step{flex:1;text-align:center;align-items:center;flex-direction:column;padding:var(--solaris-spacing-4);border-radius:var(--solaris-radius-lg);box-shadow:var(--solaris-stepper-card-shadow);background:var(--solaris-stepper-card-background);border:.1rem solid var(--solaris-stepper-card-border-color);transition:box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard),border-color var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard)}:host([data-appearance=card]) .solaris-stepper__step--active{border-color:var(--solaris-primary-base);box-shadow:var(--solaris-shadow-focus, 0 0 0 .1rem var(--solaris-primary-base))}:host([data-appearance=card]) .solaris-stepper__indicators{gap:var(--solaris-stepper-gap)}:host([data-appearance=dashed]){--solaris-stepper-gap: 0}:host([data-appearance=dashed]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed]) .solaris-stepper__connector,:host([data-appearance=dashed]) .solaris-stepper__indicator-button,:host([data-appearance=dashed]) .solaris-stepper__indicator-static,:host([data-appearance=dashed]) .solaris-stepper__label-group,:host([data-appearance=dashed]) .solaris-stepper__status-badge{display:none}:host([data-appearance=dashed]) .solaris-stepper__step{flex:1;height:var(--solaris-spacing-2);min-width:var(--solaris-spacing-4);border-radius:var(--solaris-radius-full);background:var(--solaris-stepper-connector-color)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=completed]{background:var(--solaris-success-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=active]{background:var(--solaris-primary-base)}:host([data-appearance=dashed]) .solaris-stepper__step[data-status=error]{background:var(--solaris-danger-base)}:host([data-appearance=dashed]) .solaris-stepper__step--clickable{cursor:pointer}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__indicators{gap:var(--solaris-spacing-2)}:host([data-appearance=dashed][data-orientation=vertical]) .solaris-stepper__step{flex:none;height:auto;min-width:auto;width:var(--solaris-spacing-2);min-height:var(--solaris-spacing-4)}:host([data-size=sm]){--solaris-stepper-gap: var(--solaris-spacing-3);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-size=sm]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-size=lg]){--solaris-stepper-gap: var(--solaris-spacing-6);--solaris-stepper-indicator-size: var(--solaris-spacing-10)}:host([data-size=lg]) .solaris-stepper__label{font-size:var(--solaris-font-size-md)}:host([data-density=compact]){--solaris-stepper-gap: var(--solaris-spacing-2);--solaris-stepper-indicator-size: var(--solaris-spacing-6)}:host([data-density=compact]) .solaris-stepper__label{font-size:var(--solaris-font-size-xs)}:host([data-density=compact]) .solaris-stepper__description{display:none}:host([data-density=compact]) .solaris-stepper__content-panel{padding-top:var(--solaris-spacing-3)}@media(prefers-reduced-motion:reduce){.solaris-stepper__content-panel--fade,.solaris-stepper__content-panel--slide-right,.solaris-stepper__content-panel--slide-left{animation:none}}@keyframes solaris-stepper-fade-in{0%{opacity:0}to{opacity:1}}@keyframes solaris-stepper-slide-in-right{0%{opacity:0;transform:translate(var(--solaris-spacing-4))}to{opacity:1;transform:translate(0)}}@keyframes solaris-stepper-slide-in-left{0%{opacity:0;transform:translate(calc(-1 * var(--solaris-spacing-4)))}to{opacity:1;transform:translate(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisStepComponent), { isSignal: true }] }], actions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisStepperActionsComponent), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], showConnectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConnectors", required: false }] }], showStepStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStepStatus", required: false }] }], showStepNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStepNumbers", required: false }] }], contentTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTransition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], activeIndexChange: [{ type: i0.Output, args: ["activeIndexChange"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }] } });
+//# sourceMappingURL=stepper.component.js.map

package/esm2022/lib/components/navigation/stepper/component/stepper.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/navigation/stepper/component/stepper.component.ts","../../../../../../../../../packages/angular/src/lib/components/navigation/stepper/component/stepper.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  input,\n  output,\n  model,\n  contentChildren,\n  contentChild,\n  computed,\n  signal,\n  inject,\n  ChangeDetectionStrategy,\n  effect,\n} from '@angular/core';\n\nimport { SolarisStepperActionsComponent } from '../actions/stepper-actions.component';\nimport { SolarisTranslateService } from '../../../../services/translation';\nimport type { SolarisStepperControl } from '../token/stepper.tokens';\nimport { SolarisStepComponent } from '../step/step.component';\nimport { SOLARIS_STEPPER } from '../token/stepper.tokens';\nimport { SolarisIconComponent } from '../../../icon';\n\nimport type {\n  SolarisStepperOrientation,\n  SolarisStepperAppearance,\n  SolarisStepperSize,\n  SolarisStepperDensity,\n  SolarisStepperContentTransition,\n  SolarisStepperChangeEvent,\n} from '../model/stepper.types';\n\n@Component({\n  selector: 'solaris-stepper',\n  standalone: true,\n  imports: [SolarisIconComponent],\n  templateUrl: './stepper.component.html',\n  styleUrls: ['./stepper.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'solaris-stepper',\n    '[attr.data-size]': 'size()',\n    '[attr.role]': '\"navigation\"',\n    '[attr.data-density]': 'density()',\n    '[attr.data-appearance]': 'appearance()',\n    '[attr.data-orientation]': 'orientation()',\n    '[attr.aria-label]': 'resolvedAriaLabel()',\n  },\n  providers: [\n    {\n      provide: SOLARIS_STEPPER,\n      useExisting: SolarisStepperComponent,\n    },\n  ],\n})\nexport class SolarisStepperComponent implements SolarisStepperControl {\n  private readonly translateService = inject(SolarisTranslateService, {\n    optional: true,\n  });\n\n  readonly steps = contentChildren(SolarisStepComponent);\n  readonly actions = contentChild(SolarisStepperActionsComponent);\n\n  readonly activeIndex = model<number>(0);\n  readonly orientation = input<SolarisStepperOrientation>('horizontal');\n  readonly appearance = input<SolarisStepperAppearance>('default');\n  readonly linear = input<boolean>(false);\n  readonly size = input<SolarisStepperSize>('md');\n  readonly density = input<SolarisStepperDensity>('comfortable');\n  readonly showConnectors = input<boolean>(true);\n  readonly showStepStatus = input<boolean>(true);\n  readonly showStepNumbers = input<boolean>(true);\n  readonly contentTransition = input<SolarisStepperContentTransition>('fade');\n  readonly ariaLabel = input<string | undefined>(undefined);\n  readonly ariaLabelKey = input<string | undefined>(undefined);\n\n  readonly activeIndexChange = output<number>();\n  readonly stepChange = output<SolarisStepperChangeEvent>();\n  readonly stepClick = output<{ index: number; label: string | undefined }>();\n\n  protected readonly stepTransitionDirection = signal<'next' | 'previous'>(\n    'next',\n  );\n  readonly previousIndex = signal<number>(0);\n\n  readonly resolvedAriaLabel = computed(() => {\n    if (this.ariaLabel()) return this.ariaLabel();\n    const ariaLabelKey = this.ariaLabelKey();\n    if (ariaLabelKey && this.translateService) {\n      return this.translateService.translate(ariaLabelKey);\n    }\n    return ariaLabelKey ?? 'Progress';\n  });\n\n  constructor() {\n    effect(() => {\n      const current = this.activeIndex();\n      const prev = this.previousIndex();\n      if (current !== prev) {\n        this.activeIndexChange.emit(current);\n        this.stepChange.emit({\n          activeIndex: current,\n          previousIndex: prev,\n        });\n        this.stepTransitionDirection.set(current > prev ? 'next' : 'previous');\n        this.previousIndex.set(current);\n      }\n    });\n  }\n\n  goToStep(index: number): void {\n    const step = this.steps()[index];\n    if (!step) return;\n    if (step.computedStatus() === 'disabled') return;\n    if (\n      this.linear() &&\n      step.computedStatus() !== 'completed' &&\n      index !== this.activeIndex()\n    )\n      return;\n\n    this.activeIndex.set(index);\n\n    this.stepClick.emit({\n      index,\n      label: step.resolvedLabel(),\n    });\n  }\n\n  isStepClickable(step: SolarisStepComponent): boolean {\n    return step.computedStatus() !== 'disabled';\n  }\n}\n","<div class=\"solaris-stepper__indicators\">\n  @for (step of steps(); track step; let i = $index) {\n    @if (showConnectors() && i > 0) {\n      <div\n        class=\"solaris-stepper__connector\"\n        [class.solaris-stepper__connector--active]=\"i <= activeIndex()\"\n      ></div>\n    }\n\n    <div\n      class=\"solaris-stepper__step\"\n      [class.solaris-stepper__step--active]=\"i === activeIndex()\"\n      [class.solaris-stepper__step--clickable]=\"isStepClickable(step)\"\n      [attr.data-status]=\"step.computedStatus()\"\n    >\n      @if (isStepClickable(step)) {\n        <button\n          type=\"button\"\n          class=\"solaris-stepper__indicator-button\"\n          (click)=\"goToStep(i)\"\n          [attr.aria-current]=\"i === activeIndex() ? 'step' : undefined\"\n          [attr.aria-disabled]=\"step.computedStatus() === 'disabled'\"\n        >\n          @if (step.icon(); as iconName) {\n            <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n          } @else if (step.showCheckIcon()) {\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          } @else if (step.showErrorIcon()) {\n            <solaris-icon name=\"danger\" [decorative]=\"true\" />\n          } @else if (showStepNumbers()) {\n            <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n          }\n        </button>\n      } @else {\n        <span class=\"solaris-stepper__indicator-static\">\n          @if (step.icon(); as iconName) {\n            <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n          } @else if (step.showCheckIcon()) {\n            <solaris-icon name=\"check\" [decorative]=\"true\" />\n          } @else if (step.showErrorIcon()) {\n            <solaris-icon name=\"danger\" [decorative]=\"true\" />\n          } @else if (showStepNumbers()) {\n            <span class=\"solaris-stepper__number\">{{ i + 1 }}</span>\n          }\n        </span>\n      }\n\n      <div class=\"solaris-stepper__label-group\">\n        <span class=\"solaris-stepper__label\">{{ step.resolvedLabel() }}</span>\n        @if (step.resolvedDescription(); as desc) {\n          <span class=\"solaris-stepper__description\">{{ desc }}</span>\n        }\n      </div>\n\n      @if (showStepStatus()) {\n        <span class=\"solaris-stepper__status-badge\">\n          @if (step.optional()) {\n            <span class=\"solaris-stepper__optional-text\">Optional</span>\n            <!-- SOLARIS_I18N_EXCEPTION: \"Optional\" is a short static label used as a visual badge. Translation support can be added in a future iteration. -->\n          }\n        </span>\n      }\n    </div>\n  }\n</div>\n\n<div\n  class=\"solaris-stepper__content-panel\"\n  [class.solaris-stepper__content-panel--fade]=\"contentTransition() === 'fade'\"\n  [class.solaris-stepper__content-panel--slide-right]=\"\n    contentTransition() === 'slide' && stepTransitionDirection() === 'next'\n  \"\n  [class.solaris-stepper__content-panel--slide-left]=\"\n    contentTransition() === 'slide' && stepTransitionDirection() === 'previous'\n  \"\n>\n  <ng-content select=\"solaris-step\" />\n</div>\n\n<ng-content select=\"solaris-stepper-actions\" />\n"]}

package/esm2022/lib/components/navigation/stepper/content/stepper-content.component.js

@@ -0,0 +1,13 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SolarisStepperContentComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisStepperContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SolarisStepperContentComponent, isStandalone: true, selector: "solaris-stepper-content", host: { classAttribute: "solaris-stepper-content" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisStepperContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-stepper-content', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-stepper-content',
+                    }, template: "<ng-content />\n", styles: [":host{display:block}\n"] }]
+        }] });
+//# sourceMappingURL=stepper-content.component.js.map

package/esm2022/lib/components/navigation/stepper/content/stepper-content.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-content.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/navigation/stepper/content/stepper-content.component.ts","../../../../../../../../../packages/angular/src/lib/components/navigation/stepper/content/stepper-content.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;;AAYnE,MAAM,OAAO,8BAA8B;wGAA9B,8BAA8B;4FAA9B,8BAA8B,wICZ3C,kBACA;;4FDWa,8BAA8B;kBAV1C,SAAS;+BACE,yBAAyB,cACvB,IAAI,mBAGC,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,yBAAyB;qBACjC","sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n  selector: 'solaris-stepper-content',\n  standalone: true,\n  templateUrl: './stepper-content.component.html',\n  styleUrls: ['./stepper-content.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'solaris-stepper-content',\n  },\n})\nexport class SolarisStepperContentComponent {}\n","<ng-content />\n"]}

package/esm2022/lib/components/navigation/stepper/model/stepper.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=stepper.types.js.map

package/esm2022/lib/components/navigation/stepper/model/stepper.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/navigation/stepper/model/stepper.types.ts"],"names":[],"mappings":"","sourcesContent":["export type SolarisStepperOrientation = 'horizontal' | 'vertical';\n\nexport type SolarisStepperAppearance = 'default' | 'card' | 'dashed';\n\nexport type SolarisStepperSize = 'sm' | 'md' | 'lg';\n\nexport type SolarisStepperDensity = 'compact' | 'comfortable';\n\nexport type SolarisStepperStatus =\n  | 'pending'\n  | 'active'\n  | 'completed'\n  | 'error'\n  | 'disabled';\n\nexport type SolarisStepperContentTransition = 'none' | 'fade' | 'slide';\n\nexport type SolarisStepperActionsAlign =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'space-between';\n\nexport interface SolarisStepperChangeEvent {\n  activeIndex: number;\n  previousIndex: number;\n}\n\nexport interface SolarisStepClickEvent {\n  index: number;\n  label: string | undefined;\n}\n"]}

package/esm2022/lib/components/navigation/stepper/step/step.component.js

@@ -0,0 +1,91 @@
+import { Component, input, inject, computed, ChangeDetectionStrategy, } from '@angular/core';
+import { SolarisTranslateService } from '../../../../services/translation';
+import { SOLARIS_STEPPER } from '../token/stepper.tokens';
+import * as i0 from "@angular/core";
+export class SolarisStepComponent {
+    translateService = inject(SolarisTranslateService, {
+        optional: true,
+    });
+    stepper = inject(SOLARIS_STEPPER, { optional: true });
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    completed = input(false, ...(ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []));
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    labelKey = input(undefined, ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    status = input('pending', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    descriptionKey = input(undefined, ...(ngDevMode ? [{ debugName: "descriptionKey" }] : /* istanbul ignore next */ []));
+    index = computed(() => {
+        if (this.stepper) {
+            return this.stepper.steps().indexOf(this);
+        }
+        return -1;
+    }, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    isActive = computed(() => {
+        if (this.stepper) {
+            return this.stepper.activeIndex() === this.index();
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    computedStatus = computed(() => {
+        if (this.disabled())
+            return 'disabled';
+        if (this.error())
+            return 'error';
+        if (this.isActive())
+            return 'active';
+        if (this.completed())
+            return 'completed';
+        return this.status();
+    }, ...(ngDevMode ? [{ debugName: "computedStatus" }] : /* istanbul ignore next */ []));
+    isInteractive = computed(() => {
+        if (this.computedStatus() === 'disabled')
+            return false;
+        if (!this.stepper)
+            return false;
+        return !(this.stepper.linear() &&
+            this.computedStatus() !== 'completed' &&
+            !this.isActive());
+    }, ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
+    showContent = computed(() => {
+        if (!this.stepper)
+            return true;
+        return this.isActive();
+    }, ...(ngDevMode ? [{ debugName: "showContent" }] : /* istanbul ignore next */ []));
+    resolvedLabel = computed(() => {
+        if (this.label())
+            return this.label();
+        const labelKey = this.labelKey();
+        if (labelKey && this.translateService) {
+            return this.translateService.translate(labelKey);
+        }
+        return labelKey ?? '';
+    }, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    resolvedDescription = computed(() => {
+        if (this.description())
+            return this.description();
+        const descriptionKey = this.descriptionKey();
+        if (descriptionKey && this.translateService) {
+            return this.translateService.translate(descriptionKey);
+        }
+        return descriptionKey ?? '';
+    }, ...(ngDevMode ? [{ debugName: "resolvedDescription" }] : /* istanbul ignore next */ []));
+    showCheckIcon = computed(() => this.computedStatus() === 'completed' && !this.icon(), ...(ngDevMode ? [{ debugName: "showCheckIcon" }] : /* istanbul ignore next */ []));
+    showErrorIcon = computed(() => this.computedStatus() === 'error' && !this.icon(), ...(ngDevMode ? [{ debugName: "showErrorIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisStepComponent, isStandalone: true, selector: "solaris-step", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionKey: { classPropertyName: "descriptionKey", publicName: "descriptionKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "attr.data-active": "isActive()", "attr.data-status": "computedStatus()", "attr.aria-current": "isActive() ? \"step\" : undefined", "attr.aria-disabled": "computedStatus() === \"disabled\"" }, classAttribute: "solaris-step" }, ngImport: i0, template: "@if (showContent()) {\n  <div class=\"solaris-step__content-wrapper\">\n    <ng-content select=\"solaris-stepper-content\" />\n  </div>\n}\n", styles: [":host{display:block}.solaris-step__content-wrapper{padding-top:var(--solaris-spacing-4)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-step', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'listitem',
+                        class: 'solaris-step',
+                        '[attr.data-active]': 'isActive()',
+                        '[attr.data-status]': 'computedStatus()',
+                        '[attr.aria-current]': 'isActive() ? "step" : undefined',
+                        '[attr.aria-disabled]': 'computedStatus() === "disabled"',
+                    }, template: "@if (showContent()) {\n  <div class=\"solaris-step__content-wrapper\">\n    <ng-content select=\"solaris-stepper-content\" />\n  </div>\n}\n", styles: [":host{display:block}.solaris-step__content-wrapper{padding-top:var(--solaris-spacing-4)}\n"] }]
+        }], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], descriptionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionKey", required: false }] }] } });
+//# sourceMappingURL=step.component.js.map

package/esm2022/lib/components/navigation/stepper/step/step.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/navigation/stepper/step/step.component.ts","../../../../../../../../../packages/angular/src/lib/components/navigation/stepper/step/step.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  input,\n  inject,\n  computed,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { SolarisTranslateService } from '../../../../services/translation';\nimport type { SolarisStepperStatus } from '../model/stepper.types';\nimport { SOLARIS_STEPPER } from '../token/stepper.tokens';\n\n@Component({\n  selector: 'solaris-step',\n  standalone: true,\n  imports: [],\n  templateUrl: './step.component.html',\n  styleUrls: ['./step.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    role: 'listitem',\n    class: 'solaris-step',\n    '[attr.data-active]': 'isActive()',\n    '[attr.data-status]': 'computedStatus()',\n    '[attr.aria-current]': 'isActive() ? \"step\" : undefined',\n    '[attr.aria-disabled]': 'computedStatus() === \"disabled\"',\n  },\n})\nexport class SolarisStepComponent {\n  private readonly translateService = inject(SolarisTranslateService, {\n    optional: true,\n  });\n  readonly stepper = inject(SOLARIS_STEPPER, { optional: true });\n\n  readonly error = input<boolean>(false);\n  readonly optional = input<boolean>(false);\n  readonly disabled = input<boolean>(false);\n  readonly completed = input<boolean>(false);\n  readonly icon = input<string | undefined>(undefined);\n  readonly label = input<string | undefined>(undefined);\n  readonly labelKey = input<string | undefined>(undefined);\n  readonly status = input<SolarisStepperStatus>('pending');\n  readonly description = input<string | undefined>(undefined);\n  readonly descriptionKey = input<string | undefined>(undefined);\n\n  readonly index = computed(() => {\n    if (this.stepper) {\n      return this.stepper.steps().indexOf(this);\n    }\n    return -1;\n  });\n\n  readonly isActive = computed(() => {\n    if (this.stepper) {\n      return this.stepper.activeIndex() === this.index();\n    }\n    return false;\n  });\n\n  readonly computedStatus = computed<SolarisStepperStatus>(() => {\n    if (this.disabled()) return 'disabled';\n    if (this.error()) return 'error';\n    if (this.isActive()) return 'active';\n    if (this.completed()) return 'completed';\n    return this.status();\n  });\n\n  readonly isInteractive = computed(() => {\n    if (this.computedStatus() === 'disabled') return false;\n    if (!this.stepper) return false;\n    return !(\n      this.stepper.linear() &&\n      this.computedStatus() !== 'completed' &&\n      !this.isActive()\n    );\n  });\n\n  readonly showContent = computed(() => {\n    if (!this.stepper) return true;\n    return this.isActive();\n  });\n\n  readonly resolvedLabel = computed(() => {\n    if (this.label()) return this.label();\n    const labelKey = this.labelKey();\n    if (labelKey && this.translateService) {\n      return this.translateService.translate(labelKey);\n    }\n    return labelKey ?? '';\n  });\n\n  readonly resolvedDescription = computed(() => {\n    if (this.description()) return this.description();\n    const descriptionKey = this.descriptionKey();\n    if (descriptionKey && this.translateService) {\n      return this.translateService.translate(descriptionKey);\n    }\n    return descriptionKey ?? '';\n  });\n\n  readonly showCheckIcon = computed(\n    () => this.computedStatus() === 'completed' && !this.icon(),\n  );\n  readonly showErrorIcon = computed(\n    () => this.computedStatus() === 'error' && !this.icon(),\n  );\n}\n","@if (showContent()) {\n  <div class=\"solaris-step__content-wrapper\">\n    <ng-content select=\"solaris-stepper-content\" />\n  </div>\n}\n"]}

package/esm2022/lib/components/navigation/stepper/token/stepper.tokens.js

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+export const SOLARIS_STEPPER = new InjectionToken('SolarisStepper');
+//# sourceMappingURL=stepper.tokens.js.map

package/esm2022/lib/components/navigation/stepper/token/stepper.tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.tokens.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/navigation/stepper/token/stepper.tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAoB/C,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,cAAc,CAC/C,gBAAgB,CACjB,CAAC","sourcesContent":["import { InjectionToken } from '@angular/core';\n\nimport type {\n  SolarisStepperOrientation,\n  SolarisStepperAppearance,\n  SolarisStepperSize,\n  SolarisStepperDensity,\n} from '../model/stepper.types';\n\nexport interface SolarisStepperControl {\n  activeIndex: () => number;\n  steps: () => ReadonlyArray<unknown>;\n  orientation: () => SolarisStepperOrientation;\n  appearance: () => SolarisStepperAppearance;\n  linear: () => boolean;\n  size: () => SolarisStepperSize;\n  density: () => SolarisStepperDensity;\n  goToStep: (index: number) => void;\n}\n\nexport const SOLARIS_STEPPER = new InjectionToken<SolarisStepperControl>(\n  'SolarisStepper',\n);\n"]}

package/esm2022/lib/components/navigation/tabs/component/tabs.component.js

@@ -0,0 +1,169 @@
+import { Component, input, output, model, contentChildren, computed, signal, inject, ChangeDetectionStrategy, effect, ElementRef, NgZone, } from '@angular/core';
+import { SolarisTranslateService } from '../../../../services/translation';
+import { SolarisTabComponent } from '../tab/tab.component';
+import { SolarisTabPanelComponent } from '../tab-panel/tab-panel.component';
+import { SOLARIS_TABS } from '../token/tabs.tokens';
+import * as i0 from "@angular/core";
+let nextInstanceId = 0;
+export class SolarisTabsComponent {
+    translateService = inject(SolarisTranslateService, {
+        optional: true,
+    });
+    elementRef = inject(ElementRef);
+    ngZone = inject(NgZone);
+    tabs = contentChildren(SolarisTabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    panels = contentChildren(SolarisTabPanelComponent, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    appearance = input('underline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    activationMode = input('automatic', ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
+    contentTransition = input('fade', ...(ngDevMode ? [{ debugName: "contentTransition" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    fitContent = input(true, ...(ngDevMode ? [{ debugName: "fitContent" }] : /* istanbul ignore next */ []));
+    scrollable = input(true, ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    showIndicator = input(true, ...(ngDevMode ? [{ debugName: "showIndicator" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelKey = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    tabChange = output();
+    tabClick = output();
+    previousValue = signal(undefined, ...(ngDevMode ? [{ debugName: "previousValue" }] : /* istanbul ignore next */ []));
+    slideDirection = signal('right', ...(ngDevMode ? [{ debugName: "slideDirection" }] : /* istanbul ignore next */ []));
+    instanceId = `solaris-tabs-${nextInstanceId++}`;
+    indicatorReady = signal(false, ...(ngDevMode ? [{ debugName: "indicatorReady" }] : /* istanbul ignore next */ []));
+    indicatorTransformX = signal('translateX(0)', ...(ngDevMode ? [{ debugName: "indicatorTransformX" }] : /* istanbul ignore next */ []));
+    indicatorTransformY = signal('translateY(0)', ...(ngDevMode ? [{ debugName: "indicatorTransformY" }] : /* istanbul ignore next */ []));
+    indicatorSize = signal('0', ...(ngDevMode ? [{ debugName: "indicatorSize" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => {
+        if (this.ariaLabel())
+            return this.ariaLabel();
+        const ariaLabelKey = this.ariaLabelKey();
+        if (ariaLabelKey && this.translateService) {
+            return this.translateService.translate(ariaLabelKey);
+        }
+        return ariaLabelKey ?? 'Tabs';
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const defaultValue = this.defaultValue();
+            const currentValue = this.value();
+            if (currentValue === undefined && defaultValue !== undefined) {
+                this.value.set(defaultValue);
+            }
+        });
+        effect(() => {
+            const current = this.value();
+            const previous = this.previousValue();
+            if (current !== previous && previous !== undefined) {
+                this.valueChange.emit(current);
+                this.tabChange.emit({
+                    value: current,
+                    previousValue: previous,
+                });
+                this.updateSlideDirection(current, previous);
+            }
+            this.previousValue.set(current);
+        });
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => this.measureIndicator());
+        });
+        effect(() => {
+            this.value();
+            this.appearance();
+            this.orientation();
+            this.tabs();
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => this.measureIndicator());
+            });
+        });
+    }
+    activateTab(tab) {
+        if (tab.isComputedDisabled())
+            return;
+        if (this.disabled())
+            return;
+        this.value.set(tab.value());
+        const label = tab.resolvedLabel();
+        this.tabClick.emit({
+            value: tab.value(),
+            label,
+        });
+    }
+    focusTab(tab) {
+        // SECURITY_EXCEPTION: nativeElement required to query tab elements for programmatic focus. Read-only, SSR-safe.
+        const nativeElement = this.elementRef.nativeElement;
+        const tabElements = nativeElement.querySelectorAll('solaris-tab');
+        const tabArray = this.tabs();
+        const index = tabArray.indexOf(tab);
+        if (index >= 0 && tabElements[index]) {
+            tabElements[index].focus();
+        }
+    }
+    generateTabId(value) {
+        return `${this.instanceId}-tab-${value}`;
+    }
+    generatePanelId(value) {
+        return `${this.instanceId}-panel-${value}`;
+    }
+    measureIndicator() {
+        // SECURITY_EXCEPTION: nativeElement required to query tablist for indicator measurement. Read-only, SSR-safe.
+        const nativeEl = this.elementRef.nativeElement;
+        const tablist = nativeEl.querySelector('.solaris-tabs__tablist');
+        if (!tablist)
+            return;
+        const activeTab = tablist.querySelector('solaris-tab[data-active="true"]');
+        if (!activeTab)
+            return;
+        const isVertical = this.orientation() === 'vertical';
+        if (isVertical) {
+            this.indicatorTransformY.set(`translateY(${activeTab.offsetTop}px)`);
+            this.indicatorSize.set(`${activeTab.offsetHeight}px`);
+        }
+        else {
+            this.indicatorTransformX.set(`translateX(${activeTab.offsetLeft}px)`);
+            this.indicatorSize.set(`${activeTab.offsetWidth}px`);
+        }
+        if (!this.indicatorReady()) {
+            setTimeout(() => this.indicatorReady.set(true));
+        }
+    }
+    updateSlideDirection(current, previous) {
+        const tabs = this.tabs();
+        const currentIndex = tabs.findIndex((t) => t.value() === current);
+        const previousIndex = tabs.findIndex((t) => t.value() === previous);
+        if (currentIndex >= 0 && previousIndex >= 0) {
+            this.slideDirection.set(currentIndex > previousIndex ? 'right' : 'left');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisTabsComponent, isStandalone: true, selector: "solaris-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, contentTransition: { classPropertyName: "contentTransition", publicName: "contentTransition", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, fitContent: { classPropertyName: "fitContent", publicName: "fitContent", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, showIndicator: { classPropertyName: "showIndicator", publicName: "showIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tabChange: "tabChange", tabClick: "tabClick" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-size": "size()", "attr.data-density": "density()", "attr.data-full-width": "fullWidth()", "attr.data-scrollable": "scrollable()", "attr.data-show-indicator": "showIndicator()", "attr.data-content-transition": "contentTransition()" }, classAttribute: "solaris-tabs" }, providers: [
+            {
+                provide: SOLARIS_TABS,
+                useExisting: SolarisTabsComponent,
+            },
+        ], queries: [{ propertyName: "tabs", predicate: SolarisTabComponent, isSignal: true }, { propertyName: "panels", predicate: SolarisTabPanelComponent, isSignal: true }], ngImport: i0, template: "<div\n  class=\"solaris-tabs__tablist\"\n  #tablist\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n>\n  <ng-content select=\"solaris-tab\" />\n\n  @if (showIndicator() && appearance() === 'underline') {\n    <div\n      class=\"solaris-tabs__indicator\"\n      [class.solaris-tabs__indicator--animate]=\"indicatorReady()\"\n      [class.solaris-tabs__indicator--vertical]=\"orientation() === 'vertical'\"\n      [style.transform]=\"\n        orientation() === 'vertical'\n          ? indicatorTransformY()\n          : indicatorTransformX()\n      \"\n      [style.width]=\"orientation() === 'vertical' ? '' : indicatorSize()\"\n      [style.height]=\"orientation() === 'vertical' ? indicatorSize() : ''\"\n    ></div>\n  }\n</div>\n\n@if (panels().length > 0) {\n  <div\n    class=\"solaris-tabs__panels\"\n    [class.solaris-tabs__panels--fade]=\"contentTransition() === 'fade'\"\n    [class.solaris-tabs__panels--slide]=\"contentTransition() === 'slide'\"\n    [class.solaris-tabs__panels--slide-from-right]=\"\n      contentTransition() === 'slide' && slideDirection() === 'right'\n    \"\n    [class.solaris-tabs__panels--slide-from-left]=\"\n      contentTransition() === 'slide' && slideDirection() === 'left'\n    \"\n  >\n    <ng-content select=\"solaris-tab-panel\" />\n  </div>\n}\n", styles: [":host{--solaris-tabs-gap: 0;--solaris-tabs-padding: 0;--solaris-tabs-tab-height: auto;--solaris-tabs-badge-gap: var(--solaris-spacing-2);--solaris-tabs-tab-radius: var(--solaris-radius-sm);--solaris-tabs-tab-color: var(--solaris-text-default);--solaris-tabs-tab-padding-y: var(--solaris-spacing-2);--solaris-tabs-tab-padding-x: var(--solaris-spacing-3);--solaris-tabs-panel-padding: var(--solaris-spacing-4);--solaris-tabs-border-color: var(--solaris-border-subtle);--solaris-tabs-indicator-color: var(--solaris-primary-base);--solaris-tabs-tab-active-color: var(--solaris-primary-text);--solaris-tabs-indicator-size: var(--solaris-border-width-md);--solaris-tabs-tab-hover-background: var(--solaris-surface-subtle);--solaris-tabs-tab-active-background: var(--solaris-primary-surface);width:100%;display:block}:host([data-orientation=vertical]){display:flex;gap:var(--solaris-spacing-4)}.solaris-tabs__tablist{display:flex;position:relative;align-items:stretch;gap:var(--solaris-tabs-gap)}:host([data-orientation=horizontal]) .solaris-tabs__tablist{overflow-x:auto;overflow-y:hidden;flex-direction:row;scrollbar-width:thin;border-bottom:var(--solaris-border-width-sm) solid var(--solaris-tabs-border-color)}:host([data-orientation=vertical]) .solaris-tabs__tablist{flex-shrink:0;flex-direction:column;border-right:var(--solaris-border-width-sm) solid var(--solaris-tabs-border-color)}:host([data-scrollable=false][data-orientation=horizontal]) .solaris-tabs__tablist{overflow:visible}:host([data-full-width=true][data-orientation=horizontal]) .solaris-tabs__tablist{display:flex}:host([data-appearance=pills][data-orientation=horizontal]) .solaris-tabs__tablist{border-bottom:none;gap:var(--solaris-spacing-1)}:host([data-appearance=underline][data-orientation=horizontal]) .solaris-tabs__tablist{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-tabs-border-color)}:host([data-appearance=enclosed][data-orientation=horizontal]) .solaris-tabs__tablist{margin-bottom:0;border-bottom:var(--solaris-border-width-sm) solid var(--solaris-tabs-border-color)}:host([data-appearance=enclosed][data-orientation=horizontal]) .solaris-tabs__panels{border:var(--solaris-border-width-sm) solid var(--solaris-tabs-border-color);border-top:none;border-radius:0 0 var(--solaris-radius-sm) var(--solaris-radius-sm)}.solaris-tabs__panels{position:relative;overflow:hidden}:host([data-orientation=vertical]) .solaris-tabs__panels{flex:1;min-width:0}.solaris-tabs__panels--fade>::ng-deep solaris-tab-panel[data-active=true]{animation:solaris-tabs-fade-in var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-tabs__panels--slide>::ng-deep solaris-tab-panel[data-active=true]{animation:solaris-tabs-slide-in-right var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-tabs__panels--slide-from-left>::ng-deep solaris-tab-panel[data-active=true]{animation-name:solaris-tabs-slide-in-left}@keyframes solaris-tabs-fade-in{0%{opacity:0}to{opacity:1}}@keyframes solaris-tabs-slide-in-right{0%{opacity:0;transform:translate(var(--solaris-spacing-4))}to{opacity:1;transform:translate(0)}}@keyframes solaris-tabs-slide-in-left{0%{opacity:0;transform:translate(calc(-1 * var(--solaris-spacing-4)))}to{opacity:1;transform:translate(0)}}.solaris-tabs__indicator{position:absolute;bottom:0;left:0;height:var(--solaris-tabs-indicator-size);background:var(--solaris-tabs-indicator-color);border-radius:var(--solaris-radius-sm) var(--solaris-radius-sm) 0 0;transition:none;pointer-events:none;z-index:1}.solaris-tabs__indicator--vertical{inset:0 0 auto auto;width:var(--solaris-tabs-indicator-size);height:0;border-radius:var(--solaris-radius-sm) 0 0 var(--solaris-radius-sm)}.solaris-tabs__indicator--animate{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),width var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),height var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}@media(prefers-reduced-motion:reduce){.solaris-tabs__panels--fade>::ng-deep solaris-tab-panel[data-active=true],.solaris-tabs__panels--slide>::ng-deep solaris-tab-panel[data-active=true]{animation:none}.solaris-tabs__indicator{transition:none}}:host-context([data-reduced-motion=true]) .solaris-tabs__panels--fade>::ng-deep solaris-tab-panel[data-active=true],:host-context([data-reduced-motion=true]) .solaris-tabs__panels--slide>::ng-deep solaris-tab-panel[data-active=true]{animation:none}:host-context([data-reduced-motion=true]) .solaris-tabs__indicator{transition:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-tabs', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-tabs',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-density]': 'density()',
+                        '[attr.data-full-width]': 'fullWidth()',
+                        '[attr.data-scrollable]': 'scrollable()',
+                        '[attr.data-show-indicator]': 'showIndicator()',
+                        '[attr.data-content-transition]': 'contentTransition()',
+                    }, providers: [
+                        {
+                            provide: SOLARIS_TABS,
+                            useExisting: SolarisTabsComponent,
+                        },
+                    ], template: "<div\n  class=\"solaris-tabs__tablist\"\n  #tablist\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n>\n  <ng-content select=\"solaris-tab\" />\n\n  @if (showIndicator() && appearance() === 'underline') {\n    <div\n      class=\"solaris-tabs__indicator\"\n      [class.solaris-tabs__indicator--animate]=\"indicatorReady()\"\n      [class.solaris-tabs__indicator--vertical]=\"orientation() === 'vertical'\"\n      [style.transform]=\"\n        orientation() === 'vertical'\n          ? indicatorTransformY()\n          : indicatorTransformX()\n      \"\n      [style.width]=\"orientation() === 'vertical' ? '' : indicatorSize()\"\n      [style.height]=\"orientation() === 'vertical' ? indicatorSize() : ''\"\n    ></div>\n  }\n</div>\n\n@if (panels().length > 0) {\n  <div\n    class=\"solaris-tabs__panels\"\n    [class.solaris-tabs__panels--fade]=\"contentTransition() === 'fade'\"\n    [class.solaris-tabs__panels--slide]=\"contentTransition() === 'slide'\"\n    [class.solaris-tabs__panels--slide-from-right]=\"\n      contentTransition() === 'slide' && slideDirection() === 'right'\n    \"\n    [class.solaris-tabs__panels--slide-from-left]=\"\n      contentTransition() === 'slide' && slideDirection() === 'left'\n    \"\n  >\n    <ng-content select=\"solaris-tab-panel\" />\n  </div>\n}\n", styles: [":host{--solaris-tabs-gap: 0;--solaris-tabs-padding: 0;--solaris-tabs-tab-height: auto;--solaris-tabs-badge-gap: var(--solaris-spacing-2);--solaris-tabs-tab-radius: var(--solaris-radius-sm);--solaris-tabs-tab-color: var(--solaris-text-default);--solaris-tabs-tab-padding-y: var(--solaris-spacing-2);--solaris-tabs-tab-padding-x: var(--solaris-spacing-3);--solaris-tabs-panel-padding: var(--solaris-spacing-4);--solaris-tabs-border-color: var(--solaris-border-subtle);--solaris-tabs-indicator-color: var(--solaris-primary-base);--solaris-tabs-tab-active-color: var(--solaris-primary-text);--solaris-tabs-indicator-size: var(--solaris-border-width-md);--solaris-tabs-tab-hover-background: var(--solaris-surface-subtle);--solaris-tabs-tab-active-background: var(--solaris-primary-surface);width:100%;display:block}:host([data-orientation=vertical]){display:flex;gap:var(--solaris-spacing-4)}.solaris-tabs__tablist{display:flex;position:relative;align-items:stretch;gap:var(--solaris-tabs-gap)}:host([data-orientation=horizontal]) .solaris-tabs__tablist{overflow-x:auto;overflow-y:hidden;flex-direction:row;scrollbar-width:thin;border-bottom:var(--solaris-border-width-sm) solid var(--solaris-tabs-border-color)}:host([data-orientation=vertical]) .solaris-tabs__tablist{flex-shrink:0;flex-direction:column;border-right:var(--solaris-border-width-sm) solid var(--solaris-tabs-border-color)}:host([data-scrollable=false][data-orientation=horizontal]) .solaris-tabs__tablist{overflow:visible}:host([data-full-width=true][data-orientation=horizontal]) .solaris-tabs__tablist{display:flex}:host([data-appearance=pills][data-orientation=horizontal]) .solaris-tabs__tablist{border-bottom:none;gap:var(--solaris-spacing-1)}:host([data-appearance=underline][data-orientation=horizontal]) .solaris-tabs__tablist{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-tabs-border-color)}:host([data-appearance=enclosed][data-orientation=horizontal]) .solaris-tabs__tablist{margin-bottom:0;border-bottom:var(--solaris-border-width-sm) solid var(--solaris-tabs-border-color)}:host([data-appearance=enclosed][data-orientation=horizontal]) .solaris-tabs__panels{border:var(--solaris-border-width-sm) solid var(--solaris-tabs-border-color);border-top:none;border-radius:0 0 var(--solaris-radius-sm) var(--solaris-radius-sm)}.solaris-tabs__panels{position:relative;overflow:hidden}:host([data-orientation=vertical]) .solaris-tabs__panels{flex:1;min-width:0}.solaris-tabs__panels--fade>::ng-deep solaris-tab-panel[data-active=true]{animation:solaris-tabs-fade-in var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-tabs__panels--slide>::ng-deep solaris-tab-panel[data-active=true]{animation:solaris-tabs-slide-in-right var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-tabs__panels--slide-from-left>::ng-deep solaris-tab-panel[data-active=true]{animation-name:solaris-tabs-slide-in-left}@keyframes solaris-tabs-fade-in{0%{opacity:0}to{opacity:1}}@keyframes solaris-tabs-slide-in-right{0%{opacity:0;transform:translate(var(--solaris-spacing-4))}to{opacity:1;transform:translate(0)}}@keyframes solaris-tabs-slide-in-left{0%{opacity:0;transform:translate(calc(-1 * var(--solaris-spacing-4)))}to{opacity:1;transform:translate(0)}}.solaris-tabs__indicator{position:absolute;bottom:0;left:0;height:var(--solaris-tabs-indicator-size);background:var(--solaris-tabs-indicator-color);border-radius:var(--solaris-radius-sm) var(--solaris-radius-sm) 0 0;transition:none;pointer-events:none;z-index:1}.solaris-tabs__indicator--vertical{inset:0 0 auto auto;width:var(--solaris-tabs-indicator-size);height:0;border-radius:var(--solaris-radius-sm) 0 0 var(--solaris-radius-sm)}.solaris-tabs__indicator--animate{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),width var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),height var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}@media(prefers-reduced-motion:reduce){.solaris-tabs__panels--fade>::ng-deep solaris-tab-panel[data-active=true],.solaris-tabs__panels--slide>::ng-deep solaris-tab-panel[data-active=true]{animation:none}.solaris-tabs__indicator{transition:none}}:host-context([data-reduced-motion=true]) .solaris-tabs__panels--fade>::ng-deep solaris-tab-panel[data-active=true],:host-context([data-reduced-motion=true]) .solaris-tabs__panels--slide>::ng-deep solaris-tab-panel[data-active=true]{animation:none}:host-context([data-reduced-motion=true]) .solaris-tabs__indicator{transition:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisTabComponent), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisTabPanelComponent), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], contentTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTransition", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], fitContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitContent", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], showIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], tabClick: [{ type: i0.Output, args: ["tabClick"] }] } });
+//# sourceMappingURL=tabs.component.js.map

package/esm2022/lib/components/navigation/tabs/component/tabs.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/navigation/tabs/component/tabs.component.ts","../../../../../../../../../packages/angular/src/lib/components/navigation/tabs/component/tabs.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,KAAK,EACL,eAAe,EACf,QAAQ,EACR,MAAM,EACN,MAAM,EACN,uBAAuB,EACvB,MAAM,EACN,UAAU,EACV,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,YAAY,EAA2B,MAAM,sBAAsB,CAAC;;AAa7E,IAAI,cAAc,GAAG,CAAC,CAAC;AA2BvB,MAAM,OAAO,oBAAoB;IACd,gBAAgB,GAAG,MAAM,CAAC,uBAAuB,EAAE;QAClE,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IACc,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAChC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAEhC,IAAI,GAAG,eAAe,CAAC,mBAAmB,2EAAC,CAAC;IAC5C,MAAM,GAAG,eAAe,CAAC,wBAAwB,6EAAC,CAAC;IAEnD,KAAK,GAAG,KAAK,CAA8B,SAAS,4EAAC,CAAC;IACtD,YAAY,GAAG,KAAK,CAA8B,SAAS,mFAAC,CAAC;IAC7D,WAAW,GAAG,KAAK,CAAyB,YAAY,kFAAC,CAAC;IAC1D,UAAU,GAAG,KAAK,CAAwB,WAAW,iFAAC,CAAC;IACvD,IAAI,GAAG,KAAK,CAAkB,IAAI,2EAAC,CAAC;IACpC,OAAO,GAAG,KAAK,CAAqB,aAAa,8EAAC,CAAC;IACnD,cAAc,GAAG,KAAK,CAA4B,WAAW,qFAAC,CAAC;IAC/D,iBAAiB,GAAG,KAAK,CAA+B,MAAM,wFAAC,CAAC;IAChE,SAAS,GAAG,KAAK,CAAU,KAAK,gFAAC,CAAC;IAClC,UAAU,GAAG,KAAK,CAAU,IAAI,iFAAC,CAAC;IAClC,UAAU,GAAG,KAAK,CAAU,IAAI,iFAAC,CAAC;IAClC,aAAa,GAAG,KAAK,CAAU,IAAI,oFAAC,CAAC;IACrC,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC,CAAC;IACjC,SAAS,GAAG,KAAK,CAAqB,SAAS,gFAAC,CAAC;IACjD,YAAY,GAAG,KAAK,CAAqB,SAAS,mFAAC,CAAC;IAEpD,WAAW,GAAG,MAAM,EAA+B,CAAC;IACpD,SAAS,GAAG,MAAM,EAA0B,CAAC;IAC7C,QAAQ,GAAG,MAAM,EAAwB,CAAC;IAEhC,aAAa,GAAG,MAAM,CACvC,SAAS,oFACV,CAAC;IACiB,cAAc,GAAG,MAAM,CAAmB,OAAO,qFAAC,CAAC;IAEnD,UAAU,GAAG,gBAAgB,cAAc,EAAE,EAAE,CAAC;IAEhD,cAAc,GAAG,MAAM,CAAC,KAAK,qFAAC,CAAC;IAC/B,mBAAmB,GAAG,MAAM,CAAC,eAAe,0FAAC,CAAC;IAC9C,mBAAmB,GAAG,MAAM,CAAC,eAAe,0FAAC,CAAC;IAC9C,aAAa,GAAG,MAAM,CAAC,GAAG,oFAAC,CAAC;IAE5B,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE;QACnD,IAAI,IAAI,CAAC,SAAS,EAAE;YAAE,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;QAC9C,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACzC,IAAI,YAAY,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1C,OAAO,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACvD,CAAC;QACD,OAAO,YAAY,IAAI,MAAM,CAAC;IAChC,CAAC,wFAAC,CAAC;IAEH;QACE,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YACzC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAClC,IAAI,YAAY,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;gBAC7D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YACtC,IAAI,OAAO,KAAK,QAAQ,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBACnD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;oBAClB,KAAK,EAAE,OAAO;oBACd,aAAa,EAAE,QAAQ;iBACxB,CAAC,CAAC;gBACH,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;YAC/C,CAAC;YACD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,EAAE;YACjC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,GAAG,EAAE;YACV,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,EAAE;gBACjC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;YAC5C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,WAAW,CAAC,GAAwB;QAClC,IAAI,GAAG,CAAC,kBAAkB,EAAE;YAAE,OAAO;QACrC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC;QAC5B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,EAAE,CAAC;QAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE;YAClB,KAAK;SACN,CAAC,CAAC;IACL,CAAC;IAED,QAAQ,CAAC,GAAwB;QAC/B,gHAAgH;QAChH,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,aAA4B,CAAC;QACnE,MAAM,WAAW,GAAG,aAAa,CAAC,gBAAgB,CAChD,aAAa,CACa,CAAC;QAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QACpC,IAAI,KAAK,IAAI,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;YACrC,WAAW,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,aAAa,CAAC,KAAsB;QAClC,OAAO,GAAG,IAAI,CAAC,UAAU,QAAQ,KAAK,EAAE,CAAC;IAC3C,CAAC;IAED,eAAe,CAAC,KAAsB;QACpC,OAAO,GAAG,IAAI,CAAC,UAAU,UAAU,KAAK,EAAE,CAAC;IAC7C,CAAC;IAEO,gBAAgB;QACtB,8GAA8G;QAC9G,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAA4B,CAAC;QAC9D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CACpC,wBAAwB,CACH,CAAC;QACxB,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,SAAS,GAAG,OAAO,CAAC,aAAa,CACrC,iCAAiC,CACZ,CAAC;QACxB,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,KAAK,UAAU,CAAC;QAErD,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,cAAc,SAAS,CAAC,SAAS,KAAK,CAAC,CAAC;YACrE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,YAAY,IAAI,CAAC,CAAC;QACxD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,cAAc,SAAS,CAAC,UAAU,KAAK,CAAC,CAAC;YACtE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,WAAW,IAAI,CAAC,CAAC;QACvD,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;YAC3B,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QAClD,CAAC;IACH,CAAC;IAEO,oBAAoB,CAC1B,OAAoC,EACpC,QAAqC;QAErC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACzB,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,OAAO,CAAC,CAAC;QAClE,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,QAAQ,CAAC,CAAC;QACpE,IAAI,YAAY,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,EAAE,CAAC;YAC5C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC;wGA/JU,oBAAoB;4FAApB,oBAAoB,+hFAPpB;YACT;gBACE,OAAO,EAAE,YAAY;gBACrB,WAAW,EAAE,oBAAoB;aAClC;SACF,+CAS+B,mBAAmB,yDACjB,wBAAwB,6CClE5D,+0CAwCA;;4FDkBa,oBAAoB;kBAzBhC,SAAS;+BACE,cAAc,cACZ,IAAI,WACP,EAAE,mBAGM,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,cAAc;wBACrB,yBAAyB,EAAE,eAAe;wBAC1C,wBAAwB,EAAE,cAAc;wBACxC,kBAAkB,EAAE,QAAQ;wBAC5B,qBAAqB,EAAE,WAAW;wBAClC,wBAAwB,EAAE,aAAa;wBACvC,wBAAwB,EAAE,cAAc;wBACxC,4BAA4B,EAAE,iBAAiB;wBAC/C,gCAAgC,EAAE,qBAAqB;qBACxD,aACU;wBACT;4BACE,OAAO,EAAE,YAAY;4BACrB,WAAW,sBAAsB;yBAClC;qBACF;sHAS+B,mBAAmB,2FACjB,wBAAwB","sourcesContent":["import {\n  Component,\n  input,\n  output,\n  model,\n  contentChildren,\n  computed,\n  signal,\n  inject,\n  ChangeDetectionStrategy,\n  effect,\n  ElementRef,\n  NgZone,\n} from '@angular/core';\n\nimport { SolarisTranslateService } from '../../../../services/translation';\nimport { SolarisTabComponent } from '../tab/tab.component';\nimport { SolarisTabPanelComponent } from '../tab-panel/tab-panel.component';\nimport { SOLARIS_TABS, type SolarisTabsControl } from '../token/tabs.tokens';\n\nimport type {\n  SolarisTabsOrientation,\n  SolarisTabsAppearance,\n  SolarisTabsSize,\n  SolarisTabsDensity,\n  SolarisTabsActivationMode,\n  SolarisTabsContentTransition,\n  SolarisTabsChangeEvent,\n  SolarisTabClickEvent,\n} from '../model/tabs.types';\n\nlet nextInstanceId = 0;\n\n@Component({\n  selector: 'solaris-tabs',\n  standalone: true,\n  imports: [],\n  templateUrl: './tabs.component.html',\n  styleUrls: ['./tabs.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'solaris-tabs',\n    '[attr.data-orientation]': 'orientation()',\n    '[attr.data-appearance]': 'appearance()',\n    '[attr.data-size]': 'size()',\n    '[attr.data-density]': 'density()',\n    '[attr.data-full-width]': 'fullWidth()',\n    '[attr.data-scrollable]': 'scrollable()',\n    '[attr.data-show-indicator]': 'showIndicator()',\n    '[attr.data-content-transition]': 'contentTransition()',\n  },\n  providers: [\n    {\n      provide: SOLARIS_TABS,\n      useExisting: SolarisTabsComponent,\n    },\n  ],\n})\nexport class SolarisTabsComponent implements SolarisTabsControl {\n  private readonly translateService = inject(SolarisTranslateService, {\n    optional: true,\n  });\n  private readonly elementRef = inject(ElementRef);\n  private readonly ngZone = inject(NgZone);\n\n  readonly tabs = contentChildren(SolarisTabComponent);\n  readonly panels = contentChildren(SolarisTabPanelComponent);\n\n  readonly value = model<string | number | undefined>(undefined);\n  readonly defaultValue = input<string | number | undefined>(undefined);\n  readonly orientation = input<SolarisTabsOrientation>('horizontal');\n  readonly appearance = input<SolarisTabsAppearance>('underline');\n  readonly size = input<SolarisTabsSize>('md');\n  readonly density = input<SolarisTabsDensity>('comfortable');\n  readonly activationMode = input<SolarisTabsActivationMode>('automatic');\n  readonly contentTransition = input<SolarisTabsContentTransition>('fade');\n  readonly fullWidth = input<boolean>(false);\n  readonly fitContent = input<boolean>(true);\n  readonly scrollable = input<boolean>(true);\n  readonly showIndicator = input<boolean>(true);\n  readonly disabled = input<boolean>(false);\n  readonly ariaLabel = input<string | undefined>(undefined);\n  readonly ariaLabelKey = input<string | undefined>(undefined);\n\n  readonly valueChange = output<string | number | undefined>();\n  readonly tabChange = output<SolarisTabsChangeEvent>();\n  readonly tabClick = output<SolarisTabClickEvent>();\n\n  protected readonly previousValue = signal<string | number | undefined>(\n    undefined,\n  );\n  protected readonly slideDirection = signal<'left' | 'right'>('right');\n\n  protected readonly instanceId = `solaris-tabs-${nextInstanceId++}`;\n\n  protected readonly indicatorReady = signal(false);\n  protected readonly indicatorTransformX = signal('translateX(0)');\n  protected readonly indicatorTransformY = signal('translateY(0)');\n  protected readonly indicatorSize = signal('0');\n\n  protected readonly resolvedAriaLabel = computed(() => {\n    if (this.ariaLabel()) return this.ariaLabel();\n    const ariaLabelKey = this.ariaLabelKey();\n    if (ariaLabelKey && this.translateService) {\n      return this.translateService.translate(ariaLabelKey);\n    }\n    return ariaLabelKey ?? 'Tabs';\n  });\n\n  constructor() {\n    effect(() => {\n      const defaultValue = this.defaultValue();\n      const currentValue = this.value();\n      if (currentValue === undefined && defaultValue !== undefined) {\n        this.value.set(defaultValue);\n      }\n    });\n\n    effect(() => {\n      const current = this.value();\n      const previous = this.previousValue();\n      if (current !== previous && previous !== undefined) {\n        this.valueChange.emit(current);\n        this.tabChange.emit({\n          value: current,\n          previousValue: previous,\n        });\n        this.updateSlideDirection(current, previous);\n      }\n      this.previousValue.set(current);\n    });\n\n    this.ngZone.runOutsideAngular(() => {\n      setTimeout(() => this.measureIndicator());\n    });\n\n    effect(() => {\n      this.value();\n      this.appearance();\n      this.orientation();\n      this.tabs();\n      this.ngZone.runOutsideAngular(() => {\n        setTimeout(() => this.measureIndicator());\n      });\n    });\n  }\n\n  activateTab(tab: SolarisTabComponent): void {\n    if (tab.isComputedDisabled()) return;\n    if (this.disabled()) return;\n    this.value.set(tab.value());\n    const label = tab.resolvedLabel();\n    this.tabClick.emit({\n      value: tab.value(),\n      label,\n    });\n  }\n\n  focusTab(tab: SolarisTabComponent): void {\n    // SECURITY_EXCEPTION: nativeElement required to query tab elements for programmatic focus. Read-only, SSR-safe.\n    const nativeElement = this.elementRef.nativeElement as HTMLElement;\n    const tabElements = nativeElement.querySelectorAll(\n      'solaris-tab',\n    ) as NodeListOf<HTMLElement>;\n    const tabArray = this.tabs();\n    const index = tabArray.indexOf(tab);\n    if (index >= 0 && tabElements[index]) {\n      tabElements[index].focus();\n    }\n  }\n\n  generateTabId(value: string | number): string {\n    return `${this.instanceId}-tab-${value}`;\n  }\n\n  generatePanelId(value: string | number): string {\n    return `${this.instanceId}-panel-${value}`;\n  }\n\n  private measureIndicator(): void {\n    // SECURITY_EXCEPTION: nativeElement required to query tablist for indicator measurement. Read-only, SSR-safe.\n    const nativeEl = this.elementRef.nativeElement as HTMLElement;\n    const tablist = nativeEl.querySelector(\n      '.solaris-tabs__tablist',\n    ) as HTMLElement | null;\n    if (!tablist) return;\n\n    const activeTab = tablist.querySelector(\n      'solaris-tab[data-active=\"true\"]',\n    ) as HTMLElement | null;\n    if (!activeTab) return;\n\n    const isVertical = this.orientation() === 'vertical';\n\n    if (isVertical) {\n      this.indicatorTransformY.set(`translateY(${activeTab.offsetTop}px)`);\n      this.indicatorSize.set(`${activeTab.offsetHeight}px`);\n    } else {\n      this.indicatorTransformX.set(`translateX(${activeTab.offsetLeft}px)`);\n      this.indicatorSize.set(`${activeTab.offsetWidth}px`);\n    }\n\n    if (!this.indicatorReady()) {\n      setTimeout(() => this.indicatorReady.set(true));\n    }\n  }\n\n  private updateSlideDirection(\n    current: string | number | undefined,\n    previous: string | number | undefined,\n  ): void {\n    const tabs = this.tabs();\n    const currentIndex = tabs.findIndex((t) => t.value() === current);\n    const previousIndex = tabs.findIndex((t) => t.value() === previous);\n    if (currentIndex >= 0 && previousIndex >= 0) {\n      this.slideDirection.set(currentIndex > previousIndex ? 'right' : 'left');\n    }\n  }\n}\n","<div\n  class=\"solaris-tabs__tablist\"\n  #tablist\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n>\n  <ng-content select=\"solaris-tab\" />\n\n  @if (showIndicator() && appearance() === 'underline') {\n    <div\n      class=\"solaris-tabs__indicator\"\n      [class.solaris-tabs__indicator--animate]=\"indicatorReady()\"\n      [class.solaris-tabs__indicator--vertical]=\"orientation() === 'vertical'\"\n      [style.transform]=\"\n        orientation() === 'vertical'\n          ? indicatorTransformY()\n          : indicatorTransformX()\n      \"\n      [style.width]=\"orientation() === 'vertical' ? '' : indicatorSize()\"\n      [style.height]=\"orientation() === 'vertical' ? indicatorSize() : ''\"\n    ></div>\n  }\n</div>\n\n@if (panels().length > 0) {\n  <div\n    class=\"solaris-tabs__panels\"\n    [class.solaris-tabs__panels--fade]=\"contentTransition() === 'fade'\"\n    [class.solaris-tabs__panels--slide]=\"contentTransition() === 'slide'\"\n    [class.solaris-tabs__panels--slide-from-right]=\"\n      contentTransition() === 'slide' && slideDirection() === 'right'\n    \"\n    [class.solaris-tabs__panels--slide-from-left]=\"\n      contentTransition() === 'slide' && slideDirection() === 'left'\n    \"\n  >\n    <ng-content select=\"solaris-tab-panel\" />\n  </div>\n}\n"]}