@tekus/design-system 5.33.1 → 5.35.0

package/fesm2022/tekus-design-system-components-process-steps.mjs

@@ -0,0 +1,111 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ProgressSpinner } from 'primeng/progressspinner';
+import { IconComponent } from '@tekus/design-system/components/icon';
+import { MessageComponent } from '@tekus/design-system/components/message';
+
+class ProcessStepsComponent {
+    constructor() {
+        this.steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+        this.icon = input('gears', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.status = input('progress', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        /** Specific problems to list inside the result message box (ignored when `status` is `success`). */
+        this.errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        /** Seconds until the countdown finishes; omit to disable it. */
+        this.countdownSeconds = input(...(ngDevMode ? [undefined, { debugName: "countdownSeconds" }] : /* istanbul ignore next */ []));
+        /**
+         * Countdown text; `{seconds}` is replaced with the seconds left. Defaults to a "closing"
+         * message, but the countdown isn't only for closing — override it to match what
+         * `(countdownFinished)` actually does.
+         */
+        this.countdownLabel = input('Closing in {seconds}s…', ...(ngDevMode ? [{ debugName: "countdownLabel" }] : /* istanbul ignore next */ []));
+        /** Emitted once when the countdown reaches zero — the consumer decides what happens next (close a modal, show a toast, etc.). */
+        this.countdownFinished = output();
+        /** Seconds left in the countdown, or `undefined` while it's disabled. */
+        this.remainingSeconds = signal(undefined, ...(ngDevMode ? [{ debugName: "remainingSeconds" }] : /* istanbul ignore next */ []));
+        this.resultIcon = computed(() => {
+            switch (this.status()) {
+                case 'error':
+                    return 'xmark';
+                case 'warning':
+                    return 'triangle-exclamation';
+                default:
+                    return 'check';
+            }
+        }, ...(ngDevMode ? [{ debugName: "resultIcon" }] : /* istanbul ignore next */ []));
+        this.resultColor = computed(() => {
+            switch (this.status()) {
+                case 'error':
+                    return 'danger';
+                case 'warning':
+                    return 'warning';
+                default:
+                    return 'success';
+            }
+        }, ...(ngDevMode ? [{ debugName: "resultColor" }] : /* istanbul ignore next */ []));
+        /** Severity for the message box wrapping `description`/`errors` (success has no box). */
+        this.resultMessageSeverity = computed(() => this.status() === 'error' ? 'error' : 'warn', ...(ngDevMode ? [{ debugName: "resultMessageSeverity" }] : /* istanbul ignore next */ []));
+        /** `countdownLabel` with `{seconds}` filled in, or `undefined` while the countdown is disabled. */
+        this.countdownText = computed(() => {
+            const seconds = this.remainingSeconds();
+            if (seconds === undefined) {
+                return undefined;
+            }
+            return this.countdownLabel().replace('{seconds}', String(seconds));
+        }, ...(ngDevMode ? [{ debugName: "countdownText" }] : /* istanbul ignore next */ []));
+        effect(onCleanup => this.runCountdown(onCleanup));
+    }
+    /** Starts (or disables) the countdown whenever `status`/`countdownSeconds` change. */
+    runCountdown(onCleanup) {
+        const total = this.countdownSeconds();
+        if (this.status() === 'progress' || !total) {
+            this.remainingSeconds.set(undefined);
+            return;
+        }
+        this.remainingSeconds.set(total);
+        const intervalId = setInterval(() => this.tickCountdown(intervalId), 1000);
+        onCleanup(() => clearInterval(intervalId));
+    }
+    /** Decrements `remainingSeconds` by one and emits `countdownFinished` once it bottoms out. */
+    tickCountdown(intervalId) {
+        const next = (this.remainingSeconds() ?? 1) - 1;
+        this.remainingSeconds.set(Math.max(next, 0));
+        if (next <= 0) {
+            clearInterval(intervalId);
+            this.countdownFinished.emit();
+        }
+    }
+    /**
+     * Accessible suffix announced per step since state is otherwise
+     * conveyed only through color/icon.
+     */
+    stepStatusLabel(state) {
+        switch (state) {
+            case 'done':
+                return 'completed';
+            case 'active':
+                return 'in progress';
+            case 'error':
+                return 'failed';
+            case 'warning':
+                return 'needs attention';
+            default:
+                return 'pending';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProcessStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ProcessStepsComponent, isStandalone: true, selector: "tk-process-steps", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, countdownSeconds: { classPropertyName: "countdownSeconds", publicName: "countdownSeconds", isSignal: true, isRequired: false, transformFunction: null }, countdownLabel: { classPropertyName: "countdownLabel", publicName: "countdownLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { countdownFinished: "countdownFinished" }, ngImport: i0, template: "<output class=\"tk-process-steps\">\n  @if (status() === 'progress') {\n    <div class=\"tk-process-steps__spinner-wrapper\" aria-hidden=\"true\">\n      <p-progressSpinner\n        class=\"tk-process-steps__spinner-progress\"\n        strokeWidth=\"3\"\n        animationDuration=\"1s\" />\n      <tk-icon\n        [icon]=\"icon()\"\n        styleIcon=\"fal\"\n        size=\"lg\"\n        class=\"tk-process-steps__spinner-icon\" />\n    </div>\n    <h3 class=\"tk-process-steps__title\">{{ title() }}</h3>\n    @if (description()) {\n      <p class=\"tk-process-steps__description\">{{ description() }}</p>\n    }\n    <ul class=\"tk-process-steps__steps\">\n      @for (step of steps(); track step.label) {\n        <li\n          class=\"tk-process-steps__step\"\n          [class.tk-process-steps__step--active]=\"step.state === 'active'\"\n          [class.tk-process-steps__step--done]=\"step.state === 'done'\"\n          [class.tk-process-steps__step--error]=\"step.state === 'error'\"\n          [class.tk-process-steps__step--warning]=\"step.state === 'warning'\"\n          [attr.aria-current]=\"step.state === 'active' ? 'step' : null\">\n          @switch (step.state) {\n            @case ('done') {\n              <tk-icon\n                icon=\"circle-check\"\n                styleIcon=\"fal\"\n                size=\"1x\"\n                color=\"success\"\n                class=\"tk-process-steps__step-icon--done\"\n                aria-hidden=\"true\" />\n            }\n            @case ('error') {\n              <tk-icon\n                icon=\"circle-xmark\"\n                styleIcon=\"fal\"\n                size=\"1x\"\n                color=\"danger\"\n                class=\"tk-process-steps__step-icon--error\"\n                aria-hidden=\"true\" />\n            }\n            @case ('warning') {\n              <tk-icon\n                icon=\"triangle-exclamation\"\n                styleIcon=\"fal\"\n                size=\"1x\"\n                color=\"warning\"\n                class=\"tk-process-steps__step-icon--warning\"\n                aria-hidden=\"true\" />\n            }\n            @case ('active') {\n              <span class=\"tk-process-steps__step-spinner\" aria-hidden=\"true\">\n                <p-progressSpinner strokeWidth=\"5\" animationDuration=\"0.8s\" />\n              </span>\n            }\n            @default {\n              <span class=\"tk-process-steps__step-dot\" aria-hidden=\"true\"></span>\n            }\n          }\n          <span class=\"tk-process-steps__step-label\">\n            {{ step.label }}\n            <span class=\"tk-process-steps__sr-only\">({{ stepStatusLabel(step.state) }})</span>\n          </span>\n        </li>\n      }\n    </ul>\n  } @else {\n    <div\n      class=\"tk-process-steps__result-circle\"\n      [class.tk-process-steps__result-circle--success]=\"status() === 'success'\"\n      [class.tk-process-steps__result-circle--error]=\"status() === 'error'\"\n      [class.tk-process-steps__result-circle--warning]=\"status() === 'warning'\">\n      <tk-icon\n        [icon]=\"resultIcon()\"\n        styleIcon=\"fal\"\n        size=\"2x\"\n        [color]=\"resultColor()\"\n        aria-hidden=\"true\" />\n    </div>\n    <h3\n      class=\"tk-process-steps__result-title\"\n      [class.tk-process-steps__result-title--success]=\"status() === 'success'\"\n      [class.tk-process-steps__result-title--error]=\"status() === 'error'\"\n      [class.tk-process-steps__result-title--warning]=\"status() === 'warning'\">\n      {{ title() }}\n    </h3>\n\n    @if (status() === 'success') {\n      @if (description()) {\n        <p class=\"tk-process-steps__result-description\">{{ description() }}</p>\n      }\n    } @else if (errors().length || description()) {\n      <tk-message [severity]=\"resultMessageSeverity()\" class=\"tk-process-steps__result-message\">\n        @if (errors().length) {\n          <ul class=\"tk-process-steps__result-errors\">\n            @for (error of errors(); track error) {\n              <li>{{ error }}</li>\n            }\n          </ul>\n        } @else {\n          {{ description() }}\n        }\n      </tk-message>\n    }\n\n    @if (countdownText(); as countdownText) {\n      <p\n        class=\"tk-process-steps__result-countdown\"\n        [class.tk-process-steps__result-countdown--success]=\"status() === 'success'\"\n        [class.tk-process-steps__result-countdown--error]=\"status() === 'error'\"\n        [class.tk-process-steps__result-countdown--warning]=\"status() === 'warning'\">\n        {{ countdownText }}\n      </p>\n    }\n  }\n</output>\n", styles: [":host{display:block}.tk-process-steps{display:flex;flex-direction:column;align-items:center;padding:var(--tk-spacing-padding-xl);gap:var(--tk-spacing-gap-m);text-align:center}.tk-process-steps__spinner-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}.tk-process-steps__spinner-progress{width:var(--tk-size-base-500);height:var(--tk-size-base-500)}.tk-process-steps__spinner-icon{position:absolute;pointer-events:none;color:var(--tk-color-primary-strong)}.tk-process-steps__title{font-size:var(--tk-font-size-base-125);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);margin:0}.tk-process-steps__description{font-size:var(--tk-font-size-base-88);color:var(--tk-color-text-subtle);max-width:28rem;margin:0;line-height:1.6}.tk-process-steps__steps{width:100%;max-width:28rem;margin:0 auto;display:flex;flex-direction:column;gap:var(--tk-spacing-gap-m, 1rem);text-align:left;list-style:none;padding:0}.tk-process-steps__step{display:flex;align-items:center;gap:var(--tk-spacing-gap-s);font-size:var(--tk-font-size-base-88)}.tk-process-steps__step-icon--done,.tk-process-steps__step-icon--error,.tk-process-steps__step-icon--warning{flex-shrink:0}.tk-process-steps__step-spinner{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;flex-shrink:0}.tk-process-steps__step-spinner ::ng-deep .p-progressspinner{width:1.1rem;height:1.1rem;margin:0}.tk-process-steps__step-spinner ::ng-deep svg{width:1.1rem!important;height:1.1rem!important}.tk-process-steps__step-dot{width:var(--tk-size-base-50);height:var(--tk-size-base-50);border-radius:50%;background:var(--tk-color-text-subtle);flex-shrink:0;opacity:.4}.tk-process-steps__step-label{color:var(--tk-color-text-subtle)}.tk-process-steps__step--active .tk-process-steps__step-label{color:var(--tk-color-primary-default);font-weight:var(--tk-font-weight-600)}.tk-process-steps__step--done .tk-process-steps__step-label{color:var(--tk-color-feedback-success-strong)}.tk-process-steps__step--error .tk-process-steps__step-label{color:var(--tk-color-feedback-danger-strong)}.tk-process-steps__step--warning .tk-process-steps__step-label{color:var(--tk-color-feedback-warn-strong)}.tk-process-steps__result-circle{width:var(--tk-size-base-500);height:var(--tk-size-base-500);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.tk-process-steps__result-circle--success{background:var(--tk-color-feedback-success-muted)}.tk-process-steps__result-circle--error{background:var(--tk-color-feedback-danger-muted)}.tk-process-steps__result-circle--warning{background:var(--tk-color-feedback-warn-muted)}.tk-process-steps__result-title{font-size:var(--tk-font-size-base-125);font-weight:var(--tk-font-weight-600);margin:0}.tk-process-steps__result-title--success{color:var(--tk-color-feedback-success-strong)}.tk-process-steps__result-title--error{color:var(--tk-color-feedback-danger-strong)}.tk-process-steps__result-title--warning{color:var(--tk-color-feedback-warn-strong)}.tk-process-steps__result-description{font-size:var(--tk-font-size-base-100);color:var(--tk-color-text-subtle);max-width:22rem;margin:0;line-height:1.6}.tk-process-steps__result-message{text-align:left}.tk-process-steps__result-errors{margin:0;padding-left:var(--tk-spacing-padding-l);display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs)}.tk-process-steps__result-countdown{font-size:var(--tk-font-size-base-88);color:var(--tk-color-text-subtle);margin:0}.tk-process-steps__result-countdown--success{color:var(--tk-color-feedback-success-strong)}.tk-process-steps__result-countdown--error{color:var(--tk-color-feedback-danger-strong)}.tk-process-steps__result-countdown--warning{color:var(--tk-color-feedback-warn-strong)}.tk-process-steps__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: MessageComponent, selector: "tk-message", inputs: ["severity", "closable"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ProcessStepsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-process-steps', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ProgressSpinner, IconComponent, MessageComponent], template: "<output class=\"tk-process-steps\">\n  @if (status() === 'progress') {\n    <div class=\"tk-process-steps__spinner-wrapper\" aria-hidden=\"true\">\n      <p-progressSpinner\n        class=\"tk-process-steps__spinner-progress\"\n        strokeWidth=\"3\"\n        animationDuration=\"1s\" />\n      <tk-icon\n        [icon]=\"icon()\"\n        styleIcon=\"fal\"\n        size=\"lg\"\n        class=\"tk-process-steps__spinner-icon\" />\n    </div>\n    <h3 class=\"tk-process-steps__title\">{{ title() }}</h3>\n    @if (description()) {\n      <p class=\"tk-process-steps__description\">{{ description() }}</p>\n    }\n    <ul class=\"tk-process-steps__steps\">\n      @for (step of steps(); track step.label) {\n        <li\n          class=\"tk-process-steps__step\"\n          [class.tk-process-steps__step--active]=\"step.state === 'active'\"\n          [class.tk-process-steps__step--done]=\"step.state === 'done'\"\n          [class.tk-process-steps__step--error]=\"step.state === 'error'\"\n          [class.tk-process-steps__step--warning]=\"step.state === 'warning'\"\n          [attr.aria-current]=\"step.state === 'active' ? 'step' : null\">\n          @switch (step.state) {\n            @case ('done') {\n              <tk-icon\n                icon=\"circle-check\"\n                styleIcon=\"fal\"\n                size=\"1x\"\n                color=\"success\"\n                class=\"tk-process-steps__step-icon--done\"\n                aria-hidden=\"true\" />\n            }\n            @case ('error') {\n              <tk-icon\n                icon=\"circle-xmark\"\n                styleIcon=\"fal\"\n                size=\"1x\"\n                color=\"danger\"\n                class=\"tk-process-steps__step-icon--error\"\n                aria-hidden=\"true\" />\n            }\n            @case ('warning') {\n              <tk-icon\n                icon=\"triangle-exclamation\"\n                styleIcon=\"fal\"\n                size=\"1x\"\n                color=\"warning\"\n                class=\"tk-process-steps__step-icon--warning\"\n                aria-hidden=\"true\" />\n            }\n            @case ('active') {\n              <span class=\"tk-process-steps__step-spinner\" aria-hidden=\"true\">\n                <p-progressSpinner strokeWidth=\"5\" animationDuration=\"0.8s\" />\n              </span>\n            }\n            @default {\n              <span class=\"tk-process-steps__step-dot\" aria-hidden=\"true\"></span>\n            }\n          }\n          <span class=\"tk-process-steps__step-label\">\n            {{ step.label }}\n            <span class=\"tk-process-steps__sr-only\">({{ stepStatusLabel(step.state) }})</span>\n          </span>\n        </li>\n      }\n    </ul>\n  } @else {\n    <div\n      class=\"tk-process-steps__result-circle\"\n      [class.tk-process-steps__result-circle--success]=\"status() === 'success'\"\n      [class.tk-process-steps__result-circle--error]=\"status() === 'error'\"\n      [class.tk-process-steps__result-circle--warning]=\"status() === 'warning'\">\n      <tk-icon\n        [icon]=\"resultIcon()\"\n        styleIcon=\"fal\"\n        size=\"2x\"\n        [color]=\"resultColor()\"\n        aria-hidden=\"true\" />\n    </div>\n    <h3\n      class=\"tk-process-steps__result-title\"\n      [class.tk-process-steps__result-title--success]=\"status() === 'success'\"\n      [class.tk-process-steps__result-title--error]=\"status() === 'error'\"\n      [class.tk-process-steps__result-title--warning]=\"status() === 'warning'\">\n      {{ title() }}\n    </h3>\n\n    @if (status() === 'success') {\n      @if (description()) {\n        <p class=\"tk-process-steps__result-description\">{{ description() }}</p>\n      }\n    } @else if (errors().length || description()) {\n      <tk-message [severity]=\"resultMessageSeverity()\" class=\"tk-process-steps__result-message\">\n        @if (errors().length) {\n          <ul class=\"tk-process-steps__result-errors\">\n            @for (error of errors(); track error) {\n              <li>{{ error }}</li>\n            }\n          </ul>\n        } @else {\n          {{ description() }}\n        }\n      </tk-message>\n    }\n\n    @if (countdownText(); as countdownText) {\n      <p\n        class=\"tk-process-steps__result-countdown\"\n        [class.tk-process-steps__result-countdown--success]=\"status() === 'success'\"\n        [class.tk-process-steps__result-countdown--error]=\"status() === 'error'\"\n        [class.tk-process-steps__result-countdown--warning]=\"status() === 'warning'\">\n        {{ countdownText }}\n      </p>\n    }\n  }\n</output>\n", styles: [":host{display:block}.tk-process-steps{display:flex;flex-direction:column;align-items:center;padding:var(--tk-spacing-padding-xl);gap:var(--tk-spacing-gap-m);text-align:center}.tk-process-steps__spinner-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}.tk-process-steps__spinner-progress{width:var(--tk-size-base-500);height:var(--tk-size-base-500)}.tk-process-steps__spinner-icon{position:absolute;pointer-events:none;color:var(--tk-color-primary-strong)}.tk-process-steps__title{font-size:var(--tk-font-size-base-125);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);margin:0}.tk-process-steps__description{font-size:var(--tk-font-size-base-88);color:var(--tk-color-text-subtle);max-width:28rem;margin:0;line-height:1.6}.tk-process-steps__steps{width:100%;max-width:28rem;margin:0 auto;display:flex;flex-direction:column;gap:var(--tk-spacing-gap-m, 1rem);text-align:left;list-style:none;padding:0}.tk-process-steps__step{display:flex;align-items:center;gap:var(--tk-spacing-gap-s);font-size:var(--tk-font-size-base-88)}.tk-process-steps__step-icon--done,.tk-process-steps__step-icon--error,.tk-process-steps__step-icon--warning{flex-shrink:0}.tk-process-steps__step-spinner{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;flex-shrink:0}.tk-process-steps__step-spinner ::ng-deep .p-progressspinner{width:1.1rem;height:1.1rem;margin:0}.tk-process-steps__step-spinner ::ng-deep svg{width:1.1rem!important;height:1.1rem!important}.tk-process-steps__step-dot{width:var(--tk-size-base-50);height:var(--tk-size-base-50);border-radius:50%;background:var(--tk-color-text-subtle);flex-shrink:0;opacity:.4}.tk-process-steps__step-label{color:var(--tk-color-text-subtle)}.tk-process-steps__step--active .tk-process-steps__step-label{color:var(--tk-color-primary-default);font-weight:var(--tk-font-weight-600)}.tk-process-steps__step--done .tk-process-steps__step-label{color:var(--tk-color-feedback-success-strong)}.tk-process-steps__step--error .tk-process-steps__step-label{color:var(--tk-color-feedback-danger-strong)}.tk-process-steps__step--warning .tk-process-steps__step-label{color:var(--tk-color-feedback-warn-strong)}.tk-process-steps__result-circle{width:var(--tk-size-base-500);height:var(--tk-size-base-500);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.tk-process-steps__result-circle--success{background:var(--tk-color-feedback-success-muted)}.tk-process-steps__result-circle--error{background:var(--tk-color-feedback-danger-muted)}.tk-process-steps__result-circle--warning{background:var(--tk-color-feedback-warn-muted)}.tk-process-steps__result-title{font-size:var(--tk-font-size-base-125);font-weight:var(--tk-font-weight-600);margin:0}.tk-process-steps__result-title--success{color:var(--tk-color-feedback-success-strong)}.tk-process-steps__result-title--error{color:var(--tk-color-feedback-danger-strong)}.tk-process-steps__result-title--warning{color:var(--tk-color-feedback-warn-strong)}.tk-process-steps__result-description{font-size:var(--tk-font-size-base-100);color:var(--tk-color-text-subtle);max-width:22rem;margin:0;line-height:1.6}.tk-process-steps__result-message{text-align:left}.tk-process-steps__result-errors{margin:0;padding-left:var(--tk-spacing-padding-l);display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs)}.tk-process-steps__result-countdown{font-size:var(--tk-font-size-base-88);color:var(--tk-color-text-subtle);margin:0}.tk-process-steps__result-countdown--success{color:var(--tk-color-feedback-success-strong)}.tk-process-steps__result-countdown--error{color:var(--tk-color-feedback-danger-strong)}.tk-process-steps__result-countdown--warning{color:var(--tk-color-feedback-warn-strong)}.tk-process-steps__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], countdownSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "countdownSeconds", required: false }] }], countdownLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countdownLabel", required: false }] }], countdownFinished: [{ type: i0.Output, args: ["countdownFinished"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ProcessStepsComponent };
+//# sourceMappingURL=tekus-design-system-components-process-steps.mjs.map

package/fesm2022/tekus-design-system-components-process-steps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-process-steps.mjs","sources":["../../../projects/design-system/components/process-steps/src/process-steps.component.ts","../../../projects/design-system/components/process-steps/src/process-steps.component.html","../../../projects/design-system/components/process-steps/tekus-design-system-components-process-steps.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  EffectCleanupRegisterFn,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { ProgressSpinner } from 'primeng/progressspinner';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { MessageComponent } from '@tekus/design-system/components/message';\nimport { ProcessStep, ProcessStepsStatus, StepState } from './process-steps.types';\n\n@Component({\n  selector: 'tk-process-steps',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [ProgressSpinner, IconComponent, MessageComponent],\n  templateUrl: './process-steps.component.html',\n  styleUrl: './process-steps.component.scss'\n})\nexport class ProcessStepsComponent {\n  readonly steps = input<ProcessStep[]>([]);\n  readonly title = input.required<string>();\n  readonly description = input<string>();\n  readonly icon = input<string>('gears');\n  readonly status = input<ProcessStepsStatus>('progress');\n\n  /** Specific problems to list inside the result message box (ignored when `status` is `success`). */\n  readonly errors = input<string[]>([]);\n\n  /** Seconds until the countdown finishes; omit to disable it. */\n  readonly countdownSeconds = input<number>();\n\n  /**\n   * Countdown text; `{seconds}` is replaced with the seconds left. Defaults to a \"closing\"\n   * message, but the countdown isn't only for closing — override it to match what\n   * `(countdownFinished)` actually does.\n   */\n  readonly countdownLabel = input<string>('Closing in {seconds}s…');\n\n  /** Emitted once when the countdown reaches zero — the consumer decides what happens next (close a modal, show a toast, etc.). */\n  readonly countdownFinished = output<void>();\n\n  /** Seconds left in the countdown, or `undefined` while it's disabled. */\n  readonly remainingSeconds = signal<number | undefined>(undefined);\n\n  constructor() {\n    effect(onCleanup => this.runCountdown(onCleanup));\n  }\n\n  /** Starts (or disables) the countdown whenever `status`/`countdownSeconds` change. */\n  private runCountdown(onCleanup: EffectCleanupRegisterFn): void {\n    const total = this.countdownSeconds();\n    if (this.status() === 'progress' || !total) {\n      this.remainingSeconds.set(undefined);\n      return;\n    }\n\n    this.remainingSeconds.set(total);\n    const intervalId = setInterval(() => this.tickCountdown(intervalId), 1000);\n    onCleanup(() => clearInterval(intervalId));\n  }\n\n  /** Decrements `remainingSeconds` by one and emits `countdownFinished` once it bottoms out. */\n  private tickCountdown(intervalId: ReturnType<typeof setInterval>): void {\n    const next = (this.remainingSeconds() ?? 1) - 1;\n    this.remainingSeconds.set(Math.max(next, 0));\n    if (next <= 0) {\n      clearInterval(intervalId);\n      this.countdownFinished.emit();\n    }\n  }\n\n  /**\n   * Accessible suffix announced per step since state is otherwise\n   * conveyed only through color/icon.\n   */\n  stepStatusLabel(state: StepState): string {\n    switch (state) {\n      case 'done':\n        return 'completed';\n      case 'active':\n        return 'in progress';\n      case 'error':\n        return 'failed';\n      case 'warning':\n        return 'needs attention';\n      default:\n        return 'pending';\n    }\n  }\n\n  readonly resultIcon = computed<string>(() => {\n    switch (this.status()) {\n      case 'error':\n        return 'xmark';\n      case 'warning':\n        return 'triangle-exclamation';\n      default:\n        return 'check';\n    }\n  });\n\n  readonly resultColor = computed<'success' | 'danger' | 'warning'>(() => {\n    switch (this.status()) {\n      case 'error':\n        return 'danger';\n      case 'warning':\n        return 'warning';\n      default:\n        return 'success';\n    }\n  });\n\n  /** Severity for the message box wrapping `description`/`errors` (success has no box). */\n  readonly resultMessageSeverity = computed<'error' | 'warn'>(() =>\n    this.status() === 'error' ? 'error' : 'warn'\n  );\n\n  /** `countdownLabel` with `{seconds}` filled in, or `undefined` while the countdown is disabled. */\n  readonly countdownText = computed<string | undefined>(() => {\n    const seconds = this.remainingSeconds();\n    if (seconds === undefined) {\n      return undefined;\n    }\n    return this.countdownLabel().replace('{seconds}', String(seconds));\n  });\n}\n","<output class=\"tk-process-steps\">\n  @if (status() === 'progress') {\n    <div class=\"tk-process-steps__spinner-wrapper\" aria-hidden=\"true\">\n      <p-progressSpinner\n        class=\"tk-process-steps__spinner-progress\"\n        strokeWidth=\"3\"\n        animationDuration=\"1s\" />\n      <tk-icon\n        [icon]=\"icon()\"\n        styleIcon=\"fal\"\n        size=\"lg\"\n        class=\"tk-process-steps__spinner-icon\" />\n    </div>\n    <h3 class=\"tk-process-steps__title\">{{ title() }}</h3>\n    @if (description()) {\n      <p class=\"tk-process-steps__description\">{{ description() }}</p>\n    }\n    <ul class=\"tk-process-steps__steps\">\n      @for (step of steps(); track step.label) {\n        <li\n          class=\"tk-process-steps__step\"\n          [class.tk-process-steps__step--active]=\"step.state === 'active'\"\n          [class.tk-process-steps__step--done]=\"step.state === 'done'\"\n          [class.tk-process-steps__step--error]=\"step.state === 'error'\"\n          [class.tk-process-steps__step--warning]=\"step.state === 'warning'\"\n          [attr.aria-current]=\"step.state === 'active' ? 'step' : null\">\n          @switch (step.state) {\n            @case ('done') {\n              <tk-icon\n                icon=\"circle-check\"\n                styleIcon=\"fal\"\n                size=\"1x\"\n                color=\"success\"\n                class=\"tk-process-steps__step-icon--done\"\n                aria-hidden=\"true\" />\n            }\n            @case ('error') {\n              <tk-icon\n                icon=\"circle-xmark\"\n                styleIcon=\"fal\"\n                size=\"1x\"\n                color=\"danger\"\n                class=\"tk-process-steps__step-icon--error\"\n                aria-hidden=\"true\" />\n            }\n            @case ('warning') {\n              <tk-icon\n                icon=\"triangle-exclamation\"\n                styleIcon=\"fal\"\n                size=\"1x\"\n                color=\"warning\"\n                class=\"tk-process-steps__step-icon--warning\"\n                aria-hidden=\"true\" />\n            }\n            @case ('active') {\n              <span class=\"tk-process-steps__step-spinner\" aria-hidden=\"true\">\n                <p-progressSpinner strokeWidth=\"5\" animationDuration=\"0.8s\" />\n              </span>\n            }\n            @default {\n              <span class=\"tk-process-steps__step-dot\" aria-hidden=\"true\"></span>\n            }\n          }\n          <span class=\"tk-process-steps__step-label\">\n            {{ step.label }}\n            <span class=\"tk-process-steps__sr-only\">({{ stepStatusLabel(step.state) }})</span>\n          </span>\n        </li>\n      }\n    </ul>\n  } @else {\n    <div\n      class=\"tk-process-steps__result-circle\"\n      [class.tk-process-steps__result-circle--success]=\"status() === 'success'\"\n      [class.tk-process-steps__result-circle--error]=\"status() === 'error'\"\n      [class.tk-process-steps__result-circle--warning]=\"status() === 'warning'\">\n      <tk-icon\n        [icon]=\"resultIcon()\"\n        styleIcon=\"fal\"\n        size=\"2x\"\n        [color]=\"resultColor()\"\n        aria-hidden=\"true\" />\n    </div>\n    <h3\n      class=\"tk-process-steps__result-title\"\n      [class.tk-process-steps__result-title--success]=\"status() === 'success'\"\n      [class.tk-process-steps__result-title--error]=\"status() === 'error'\"\n      [class.tk-process-steps__result-title--warning]=\"status() === 'warning'\">\n      {{ title() }}\n    </h3>\n\n    @if (status() === 'success') {\n      @if (description()) {\n        <p class=\"tk-process-steps__result-description\">{{ description() }}</p>\n      }\n    } @else if (errors().length || description()) {\n      <tk-message [severity]=\"resultMessageSeverity()\" class=\"tk-process-steps__result-message\">\n        @if (errors().length) {\n          <ul class=\"tk-process-steps__result-errors\">\n            @for (error of errors(); track error) {\n              <li>{{ error }}</li>\n            }\n          </ul>\n        } @else {\n          {{ description() }}\n        }\n      </tk-message>\n    }\n\n    @if (countdownText(); as countdownText) {\n      <p\n        class=\"tk-process-steps__result-countdown\"\n        [class.tk-process-steps__result-countdown--success]=\"status() === 'success'\"\n        [class.tk-process-steps__result-countdown--error]=\"status() === 'error'\"\n        [class.tk-process-steps__result-countdown--warning]=\"status() === 'warning'\">\n        {{ countdownText }}\n      </p>\n    }\n  }\n</output>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAsBa,qBAAqB,CAAA;AA0BhC,IAAA,WAAA,GAAA;AAzBS,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAgB,EAAE,4EAAC;AAChC,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;QAChC,IAAA,CAAA,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAC7B,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,OAAO,2EAAC;AAC7B,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAqB,UAAU,6EAAC;;AAG9C,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAW,EAAE,6EAAC;;QAG5B,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAE3C;;;;AAIG;AACM,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAS,wBAAwB,qFAAC;;QAGxD,IAAA,CAAA,iBAAiB,GAAG,MAAM,EAAQ;;AAGlC,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAqB,SAAS,uFAAC;AAgDxD,QAAA,IAAA,CAAA,UAAU,GAAG,QAAQ,CAAS,MAAK;AAC1C,YAAA,QAAQ,IAAI,CAAC,MAAM,EAAE;AACnB,gBAAA,KAAK,OAAO;AACV,oBAAA,OAAO,OAAO;AAChB,gBAAA,KAAK,SAAS;AACZ,oBAAA,OAAO,sBAAsB;AAC/B,gBAAA;AACE,oBAAA,OAAO,OAAO;;AAEpB,QAAA,CAAC,iFAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAmC,MAAK;AACrE,YAAA,QAAQ,IAAI,CAAC,MAAM,EAAE;AACnB,gBAAA,KAAK,OAAO;AACV,oBAAA,OAAO,QAAQ;AACjB,gBAAA,KAAK,SAAS;AACZ,oBAAA,OAAO,SAAS;AAClB,gBAAA;AACE,oBAAA,OAAO,SAAS;;AAEtB,QAAA,CAAC,kFAAC;;QAGO,IAAA,CAAA,qBAAqB,GAAG,QAAQ,CAAmB,MAC1D,IAAI,CAAC,MAAM,EAAE,KAAK,OAAO,GAAG,OAAO,GAAG,MAAM,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAC7C;;AAGQ,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAqB,MAAK;AACzD,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE;AACvC,YAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,gBAAA,OAAO,SAAS;YAClB;AACA,YAAA,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;AACpE,QAAA,CAAC,oFAAC;AA/EA,QAAA,MAAM,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACnD;;AAGQ,IAAA,YAAY,CAAC,SAAkC,EAAA;AACrD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE;QACrC,IAAI,IAAI,CAAC,MAAM,EAAE,KAAK,UAAU,IAAI,CAAC,KAAK,EAAE;AAC1C,YAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC;YACpC;QACF;AAEA,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC;AAChC,QAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC;QAC1E,SAAS,CAAC,MAAM,aAAa,CAAC,UAAU,CAAC,CAAC;IAC5C;;AAGQ,IAAA,aAAa,CAAC,UAA0C,EAAA;AAC9D,QAAA,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,CAAC;AAC/C,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AAC5C,QAAA,IAAI,IAAI,IAAI,CAAC,EAAE;YACb,aAAa,CAAC,UAAU,CAAC;AACzB,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE;QAC/B;IACF;AAEA;;;AAGG;AACH,IAAA,eAAe,CAAC,KAAgB,EAAA;QAC9B,QAAQ,KAAK;AACX,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,WAAW;AACpB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,aAAa;AACtB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,QAAQ;AACjB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,iBAAiB;AAC1B,YAAA;AACE,gBAAA,OAAO,SAAS;;IAEtB;+GAtEW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,6pCCtBlC,mhJAwHA,EAAA,MAAA,EAAA,CAAA,41HAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDtGY,eAAe,EAAA,QAAA,EAAA,0DAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,aAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,gHAAE,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAI/C,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;+BACE,kBAAkB,EAAA,eAAA,EACX,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,eAAe,EAAE,aAAa,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,mhJAAA,EAAA,MAAA,EAAA,CAAA,41HAAA,CAAA,EAAA;;;AElB7D;;AAEG;;;;"}

package/fesm2022/tekus-design-system-components-sidebar-layout.mjs

@@ -158,7 +158,7 @@ class SidebarLayoutComponent {
         this.closeSidebar();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarLayoutComponent, isStandalone: true, selector: "tk-sidebar-layout", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "handleSidebarContentClick($event)" } }, ngImport: i0, template: "<div\n  class=\"tk-sidebar-layout\"\n  [class.collapsed]=\"displayCollapsed\"\n  [class.is-tablet]=\"isTablet\"\n  [class.is-mobile]=\"isMobile\"\n>\n  <!-- Backdrop for overlay mode -->\n  @if (!displayCollapsed && isTablet) {\n    <tk-button\n      class=\"tk-sidebar-backdrop\"\n      (clicked)=\"handleBackdropClick()\"\n      aria-label=\"Close sidebar\"\n    ></tk-button>\n  }\n\n  <!-- Sidebar -->\n  <aside class=\"tk-sidebar\">\n    @if (!displayCollapsed) {\n      <div class=\"tk-sidebar-header\">\n        <img\n          src=\"assets/img/tk-logo-normal-light.svg\"\n          alt=\"Tekus Logo\"\n          class=\"tk-logo-expanded\"\n        />\n        <tk-button\n          class=\"tk-sidebar-toggle is-sidebar\"\n          (clicked)=\"toggleSidebar()\"\n          severity=\"secondary\"\n          variant=\"text\"\n          icon=\"arrow-left\"\n        ></tk-button>\n      </div>\n    }\n\n    <ng-content select=\"[sidebar-content]\"></ng-content>\n  </aside>\n\n  <!-- Main Content -->\n  <div class=\"tk-main-container\">\n    <header class=\"tk-nav-header\">\n      <div class=\"tk-nav-left\">\n        @if (displayCollapsed || isTablet) {\n          <tk-button\n            class=\"tk-sidebar-toggle\"\n            (clicked)=\"toggleSidebar()\"\n            severity=\"secondary\"\n            variant=\"text\"\n            icon=\"bars\"\n          ></tk-button>\n          <img\n            src=\"assets/img/tk-logo-normal-dark.svg\"\n            alt=\"Tekus Logo\"\n            class=\"tk-logo-header\"\n          />\n        }\n      </div>\n\n      <div class=\"tk-nav-right\">\n        <div class=\"tk-header-actions\">\n          <ng-content select=\"[header-actions]\"></ng-content>\n        </div>\n      </div>\n    </header>\n\n    <main class=\"tk-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n</div>\n", styles: [":host{display:block;height:100vh;width:100%}.tk-sidebar-layout{display:flex;height:100%;width:100%;overflow:hidden;position:relative}.tk-sidebar-layout .tk-sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999;cursor:pointer;animation:fadeIn .3s ease-in-out;display:block}.tk-sidebar-layout .tk-sidebar-backdrop::ng-deep .p-button{width:100%!important;height:100%!important;background-color:#00000080!important;border:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tk-sidebar-layout .tk-sidebar{background-color:var(--tk-color-background-inverse, #191a1b);color:var(--tk-color-text-inverse, #ffffff);width:var(--tk-sidebar-width, 17.5rem);height:100%;display:flex;flex-direction:column;transition:width .3s ease-in-out,transform .3s ease-in-out;flex-shrink:0;overflow-y:auto;overflow-x:hidden}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar{width:.25rem}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar-thumb{background:var(--tk-color-base-surface-700, #424243);border-radius:.125rem}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header{padding:0 var(--tk-spacing-padding-m, 1rem);display:flex;align-items:center;justify-content:space-between;height:3.5rem;flex-shrink:0}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-expanded{height:1.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-collapsed{height:2.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-menu{flex:1;padding:var(--tk-spacing-padding-m, 1rem)}.tk-sidebar-layout .tk-main-container{flex:1;display:flex;flex-direction:column;min-width:0;background-color:var(--tk-color-background-default, #ffffff)}.tk-sidebar-layout .tk-sidebar-toggle{appearance:none;background:none;border:none;box-shadow:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--tk-color-text-default, #191a1b);border-radius:var(--tk-borderRadius-s, .5rem);transition:all .2s;min-width:unset}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button{background:none!important;border:none!important;padding:var(--tk-spacing-padding-xs, .25rem)!important;min-width:unset!important;height:auto!important;color:inherit!important;box-shadow:none!important}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button:hover{background-color:var(--tk-color-background-soft, #f2f1f1)!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar{color:#fff!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button{color:#fff!important;background:transparent!important;padding:0!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button:hover{background-color:transparent!important;opacity:.7}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep svg,.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep path{fill:currentColor!important;stroke:currentColor!important}.tk-sidebar-layout .tk-nav-header{height:3.5rem;background-color:var(--tk-color-background-default, #ffffff);display:flex;align-items:center;justify-content:space-between;padding:0 var(--tk-spacing-padding-m, 1rem);border-bottom:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-sidebar-layout .tk-nav-header .tk-nav-left{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem)}.tk-sidebar-layout .tk-nav-header .tk-logo-header{height:1.75rem;width:auto;margin-left:var(--tk-spacing-padding-s, .5rem)}.tk-sidebar-layout .tk-nav-header .tk-nav-right{display:flex;align-items:center}.tk-sidebar-layout .tk-nav-header .tk-header-actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:var(--tk-spacing-padding-s, .5rem);color:var(--tk-color-primary-default, #16006f);border-radius:50%;transition:background-color .2s}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn:hover{background-color:var(--tk-color-background-soft, #f2f1f1)}.tk-sidebar-layout .tk-content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-l, 1.25rem)}.tk-sidebar-layout.collapsed:not(.is-tablet) .tk-sidebar{width:0;border-right:none}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-chevron,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-icon{display:none!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-link,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header{justify-content:center;padding-left:0!important;padding-right:0!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-content{justify-content:center}.tk-sidebar-layout.is-tablet .tk-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;width:var(--tk-sidebar-width, 17.5rem)!important;transform:translate(0);box-shadow:4px 0 10px #0000001a}.tk-sidebar-layout.is-tablet.collapsed .tk-sidebar{transform:translate(-100%)}.tk-sidebar-layout.is-tablet .tk-main-container{width:100%;flex:1}.tk-sidebar-layout.is-mobile .tk-sidebar{width:100%!important;max-width:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarLayoutComponent, isStandalone: true, selector: "tk-sidebar-layout", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "handleSidebarContentClick($event)" } }, ngImport: i0, template: "<div\n  class=\"tk-sidebar-layout\"\n  [class.collapsed]=\"displayCollapsed\"\n  [class.is-tablet]=\"isTablet\"\n  [class.is-mobile]=\"isMobile\"\n>\n  <!-- Backdrop for overlay mode -->\n  @if (!displayCollapsed && isTablet) {\n    <tk-button\n      class=\"tk-sidebar-backdrop\"\n      (clicked)=\"handleBackdropClick()\"\n      aria-label=\"Close sidebar\"\n    ></tk-button>\n  }\n\n  <!-- Sidebar -->\n  <aside class=\"tk-sidebar\">\n    @if (!displayCollapsed) {\n      <div class=\"tk-sidebar-header\">\n        <img\n          src=\"assets/img/tk-logo-normal-light.svg\"\n          alt=\"Tekus Logo\"\n          class=\"tk-logo-expanded\"\n        />\n        <tk-button\n          class=\"tk-sidebar-toggle is-sidebar\"\n          (clicked)=\"toggleSidebar()\"\n          severity=\"secondary\"\n          variant=\"text\"\n          icon=\"arrow-left\"\n        ></tk-button>\n      </div>\n    }\n\n    <ng-content select=\"[sidebar-content]\"></ng-content>\n  </aside>\n\n  <!-- Main Content -->\n  <div class=\"tk-main-container\">\n    <header class=\"tk-nav-header\">\n      <div class=\"tk-nav-left\">\n        @if (displayCollapsed || isTablet) {\n          <tk-button\n            class=\"tk-sidebar-toggle\"\n            (clicked)=\"toggleSidebar()\"\n            severity=\"secondary\"\n            variant=\"text\"\n            icon=\"bars\"\n          ></tk-button>\n          <img\n            src=\"assets/img/tk-logo-normal-dark.svg\"\n            alt=\"Tekus Logo\"\n            class=\"tk-logo-header\"\n          />\n        }\n      </div>\n\n      <div class=\"tk-nav-right\">\n        <div class=\"tk-header-actions\">\n          <ng-content select=\"[header-actions]\"></ng-content>\n        </div>\n      </div>\n    </header>\n\n    <main class=\"tk-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n</div>\n", styles: [":host{display:block;height:100vh;width:100%}.tk-sidebar-layout{display:flex;height:100%;width:100%;overflow:hidden;position:relative}.tk-sidebar-layout .tk-sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999;cursor:pointer;animation:fadeIn .3s ease-in-out;display:block}.tk-sidebar-layout .tk-sidebar-backdrop::ng-deep .p-button{width:100%!important;height:100%!important;background-color:#00000080!important;border:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tk-sidebar-layout .tk-sidebar{background-color:var(--tk-color-background-inverse, #191a1b);color:var(--tk-color-text-inverse, #ffffff);width:var(--tk-sidebar-width, 17.5rem);height:100%;display:flex;flex-direction:column;transition:width .3s ease-in-out,transform .3s ease-in-out;flex-shrink:0;overflow-y:auto;overflow-x:hidden}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar{width:.25rem}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar-thumb{background:var(--tk-color-base-surface-700, #424243);border-radius:.125rem}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header{padding:0 var(--tk-spacing-padding-m, 1rem);display:flex;align-items:center;justify-content:space-between;height:3.5rem;flex-shrink:0}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-expanded{height:1.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-collapsed{height:2.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-menu{flex:1;padding:var(--tk-spacing-padding-m, 1rem)}.tk-sidebar-layout .tk-main-container{flex:1;display:flex;flex-direction:column;min-width:0;background-color:var(--tk-color-background-default, #ffffff)}.tk-sidebar-layout .tk-sidebar-toggle{appearance:none;background:none;border:none;box-shadow:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--tk-color-text-default, #191a1b);border-radius:var(--tk-borderRadius-s, .5rem);transition:all .2s;min-width:unset}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button{background:none!important;border:none!important;padding:var(--tk-spacing-padding-xs, .25rem)!important;min-width:unset!important;height:auto!important;color:inherit!important;box-shadow:none!important}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button:hover{background-color:var(--tk-color-background-soft, #f2f1f1)!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar{color:#fff!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button{color:#fff!important;background:transparent!important;padding:0!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button:hover{background-color:transparent!important;opacity:.7}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep svg,.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep path{fill:currentColor!important;stroke:currentColor!important}.tk-sidebar-layout .tk-nav-header{height:3.5rem;background-color:var(--tk-color-background-default, #ffffff);display:flex;align-items:center;justify-content:space-between;padding:0 var(--tk-spacing-padding-m, 1rem);border-bottom:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-sidebar-layout .tk-nav-header .tk-nav-left{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem)}.tk-sidebar-layout .tk-nav-header .tk-logo-header{height:1.75rem;width:auto;margin-left:var(--tk-spacing-padding-s, .5rem)}.tk-sidebar-layout .tk-nav-header .tk-nav-right{display:flex;align-items:center}.tk-sidebar-layout .tk-nav-header .tk-header-actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:var(--tk-spacing-padding-s, .5rem);color:var(--tk-color-primary-default, #16006f);border-radius:50%;transition:background-color .2s}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn:hover{background-color:var(--tk-color-background-soft, #f2f1f1)}.tk-sidebar-layout .tk-content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-l, 1.25rem)}.tk-sidebar-layout.collapsed:not(.is-tablet) .tk-sidebar{width:0;border-right:none}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-chevron,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-icon{display:none!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-link,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header{justify-content:center;padding-left:0!important;padding-right:0!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-content{justify-content:center}.tk-sidebar-layout.is-tablet .tk-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;width:var(--tk-sidebar-width, 17.5rem)!important;transform:translate(0);box-shadow:4px 0 10px #0000001a}.tk-sidebar-layout.is-tablet.collapsed .tk-sidebar{transform:translate(-100%)}.tk-sidebar-layout.is-tablet .tk-main-container{width:100%;flex:1}.tk-sidebar-layout.is-mobile .tk-sidebar{width:100%!important;max-width:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarLayoutComponent, decorators: [{
             type: Component,

package/fesm2022/tekus-design-system-components-sidebar-layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-sidebar-layout.mjs","sources":["../../../projects/design-system/components/sidebar-layout/src/sidebar.service.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.html","../../../projects/design-system/components/sidebar-layout/tekus-design-system-components-sidebar-layout.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SidebarService {\n  private readonly collapsedSubject = new BehaviorSubject<boolean>(false);\n  \n  /**\n   * Observable to track the collapsed state of the sidebar.\n   */\n  isCollapsed$ = this.collapsedSubject.asObservable();\n\n  /**\n   * Toggles the collapsed state of the sidebar.\n   */\n  toggle(): void {\n    this.collapsedSubject.next(!this.collapsedSubject.value);\n  }\n\n  /**\n   * Explicitly sets the collapsed state of the sidebar.\n   * @param value True to collapse, false to expand.\n   */\n  setCollapsed(value: boolean): void {\n    this.collapsedSubject.next(value);\n  }\n\n  /**\n   * Gets the current collapsed state.\n   */\n  get isCollapsed(): boolean {\n    return this.collapsedSubject.value;\n  }\n}\n","import { ChangeDetectionStrategy, Component, inject, input, output, OnInit, OnDestroy, ChangeDetectorRef, HostListener } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Subscription } from 'rxjs';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { SidebarService } from './sidebar.service';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\n\n@Component({\n  selector: 'tk-sidebar-layout',\n  imports: [\n    CommonModule,\n    ButtonComponent\n  ],\n  templateUrl: './sidebar-layout.component.html',\n  styleUrl: './sidebar-layout.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SidebarLayoutComponent implements OnInit, OnDestroy {\n  private readonly sidebarService = inject(SidebarService);\n  private readonly breakpointObserver = inject(BreakpointObserver);\n  private readonly cdr = inject(ChangeDetectorRef);\n  private readonly subscription = new Subscription();\n\n  /**\n   * Breakpoint constants\n   */\n  private readonly TABLET_BREAKPOINT = '(max-width: 1023px)';\n  private readonly MOBILE_BREAKPOINT = '(max-width: 479px)';\n\n  /**\n   * Optional manual control of the collapsed state.\n   * If provided, it overrides the service state.\n   */\n  isCollapsed = input<boolean | undefined>(undefined);\n\n\n  /**\n   * Emitted when the collapsed state changes.\n   */\n  collapsedChange = output<boolean>();\n\n  /**\n   * Internal state of the sidebar.\n   */\n  collapsed = false;\n\n  /**\n   * Responsive states\n   */\n  isTablet = false;\n  isMobile = false;\n\n  ngOnInit(): void {\n    // Sync with service\n    this.subscription.add(\n      this.sidebarService.isCollapsed$.subscribe((state) => {\n        if (this.isCollapsed() === undefined) {\n          this.collapsed = state;\n          this.collapsedChange.emit(state);\n          this.cdr.markForCheck();\n        }\n      })\n    );\n\n    // Responsive breakpoints\n    this.subscription.add(\n      this.breakpointObserver\n        .observe([this.TABLET_BREAKPOINT, this.MOBILE_BREAKPOINT])\n        .subscribe((result) => {\n          const wasTablet = this.isTablet;\n          this.isTablet = result.breakpoints[this.TABLET_BREAKPOINT];\n          this.isMobile = result.breakpoints[this.MOBILE_BREAKPOINT];\n\n          // Auto-collapse when entering tablet/mobile mode (< 1024px)\n          if (this.isTablet && !wasTablet) {\n            this.sidebarService.setCollapsed(true);\n          }\n\n          // Auto-expand when returning to desktop mode (> 1024px)\n          if (!this.isTablet && wasTablet) {\n            this.sidebarService.setCollapsed(false);\n          }\n\n          this.cdr.markForCheck();\n        })\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.subscription.unsubscribe();\n  }\n\n  /**\n   * Determines if the sidebar is currently collapsed.\n   */\n  get displayCollapsed(): boolean {\n    return this.isCollapsed() === undefined ? this.collapsed : this.isCollapsed()!;\n  }\n\n  /**\n   * Toggles the sidebar state.\n   */\n  toggleSidebar(): void {\n    if (this.isCollapsed() === undefined) {\n      this.sidebarService.toggle();\n    } else {\n      this.collapsedChange.emit(!this.isCollapsed());\n    }\n  }\n\n  /**\n   * Closes the sidebar explicitly.\n   */\n  closeSidebar(): void {\n    if (this.isCollapsed() === undefined) {\n      this.sidebarService.setCollapsed(true);\n    } else {\n      this.collapsedChange.emit(true);\n    }\n  }\n\n  /**\n   * Handles clicks in the sidebar content to auto-close on mobile.\n   * Using HostListener to avoid template accessibility linting on non-interactive aside.\n   */\n  @HostListener('click', ['$event'])\n  handleSidebarContentClick(event: MouseEvent): void {\n    if (!this.isMobile) return;\n\n    // Check if the click is inside the sidebar\n    const sidebar = (event.target as HTMLElement).closest('.tk-sidebar');\n    if (!sidebar) return;\n\n    const target = event.target as HTMLElement;\n    const navItem = target.closest('.tk-menu-item-link, .tk-pm-item-link, a, button');\n\n    if (navItem) {\n      // Check if it's a toggle for a sub-menu (has children)\n      const hasChildren = navItem.querySelector('.tk-menu-item-chevron, .tk-pm-item-chevron');\n      if (!hasChildren) {\n        this.closeSidebar();\n      }\n    }\n  }\n\n  /**\n   * Handles backdrop clicks to close the drawer.\n   */\n  handleBackdropClick(): void {\n    this.closeSidebar();\n  }\n}\n","<div\n  class=\"tk-sidebar-layout\"\n  [class.collapsed]=\"displayCollapsed\"\n  [class.is-tablet]=\"isTablet\"\n  [class.is-mobile]=\"isMobile\"\n>\n  <!-- Backdrop for overlay mode -->\n  @if (!displayCollapsed && isTablet) {\n    <tk-button\n      class=\"tk-sidebar-backdrop\"\n      (clicked)=\"handleBackdropClick()\"\n      aria-label=\"Close sidebar\"\n    ></tk-button>\n  }\n\n  <!-- Sidebar -->\n  <aside class=\"tk-sidebar\">\n    @if (!displayCollapsed) {\n      <div class=\"tk-sidebar-header\">\n        <img\n          src=\"assets/img/tk-logo-normal-light.svg\"\n          alt=\"Tekus Logo\"\n          class=\"tk-logo-expanded\"\n        />\n        <tk-button\n          class=\"tk-sidebar-toggle is-sidebar\"\n          (clicked)=\"toggleSidebar()\"\n          severity=\"secondary\"\n          variant=\"text\"\n          icon=\"arrow-left\"\n        ></tk-button>\n      </div>\n    }\n\n    <ng-content select=\"[sidebar-content]\"></ng-content>\n  </aside>\n\n  <!-- Main Content -->\n  <div class=\"tk-main-container\">\n    <header class=\"tk-nav-header\">\n      <div class=\"tk-nav-left\">\n        @if (displayCollapsed || isTablet) {\n          <tk-button\n            class=\"tk-sidebar-toggle\"\n            (clicked)=\"toggleSidebar()\"\n            severity=\"secondary\"\n            variant=\"text\"\n            icon=\"bars\"\n          ></tk-button>\n          <img\n            src=\"assets/img/tk-logo-normal-dark.svg\"\n            alt=\"Tekus Logo\"\n            class=\"tk-logo-header\"\n          />\n        }\n      </div>\n\n      <div class=\"tk-nav-right\">\n        <div class=\"tk-header-actions\">\n          <ng-content select=\"[header-actions]\"></ng-content>\n        </div>\n      </div>\n    </header>\n\n    <main class=\"tk-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-sidebar-layout.mjs","sources":["../../../projects/design-system/components/sidebar-layout/src/sidebar.service.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.html","../../../projects/design-system/components/sidebar-layout/tekus-design-system-components-sidebar-layout.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SidebarService {\n  private readonly collapsedSubject = new BehaviorSubject<boolean>(false);\n  \n  /**\n   * Observable to track the collapsed state of the sidebar.\n   */\n  isCollapsed$ = this.collapsedSubject.asObservable();\n\n  /**\n   * Toggles the collapsed state of the sidebar.\n   */\n  toggle(): void {\n    this.collapsedSubject.next(!this.collapsedSubject.value);\n  }\n\n  /**\n   * Explicitly sets the collapsed state of the sidebar.\n   * @param value True to collapse, false to expand.\n   */\n  setCollapsed(value: boolean): void {\n    this.collapsedSubject.next(value);\n  }\n\n  /**\n   * Gets the current collapsed state.\n   */\n  get isCollapsed(): boolean {\n    return this.collapsedSubject.value;\n  }\n}\n","import { ChangeDetectionStrategy, Component, inject, input, output, OnInit, OnDestroy, ChangeDetectorRef, HostListener } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Subscription } from 'rxjs';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { SidebarService } from './sidebar.service';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\n\n@Component({\n  selector: 'tk-sidebar-layout',\n  imports: [\n    CommonModule,\n    ButtonComponent\n  ],\n  templateUrl: './sidebar-layout.component.html',\n  styleUrl: './sidebar-layout.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SidebarLayoutComponent implements OnInit, OnDestroy {\n  private readonly sidebarService = inject(SidebarService);\n  private readonly breakpointObserver = inject(BreakpointObserver);\n  private readonly cdr = inject(ChangeDetectorRef);\n  private readonly subscription = new Subscription();\n\n  /**\n   * Breakpoint constants\n   */\n  private readonly TABLET_BREAKPOINT = '(max-width: 1023px)';\n  private readonly MOBILE_BREAKPOINT = '(max-width: 479px)';\n\n  /**\n   * Optional manual control of the collapsed state.\n   * If provided, it overrides the service state.\n   */\n  isCollapsed = input<boolean | undefined>(undefined);\n\n\n  /**\n   * Emitted when the collapsed state changes.\n   */\n  collapsedChange = output<boolean>();\n\n  /**\n   * Internal state of the sidebar.\n   */\n  collapsed = false;\n\n  /**\n   * Responsive states\n   */\n  isTablet = false;\n  isMobile = false;\n\n  ngOnInit(): void {\n    // Sync with service\n    this.subscription.add(\n      this.sidebarService.isCollapsed$.subscribe((state) => {\n        if (this.isCollapsed() === undefined) {\n          this.collapsed = state;\n          this.collapsedChange.emit(state);\n          this.cdr.markForCheck();\n        }\n      })\n    );\n\n    // Responsive breakpoints\n    this.subscription.add(\n      this.breakpointObserver\n        .observe([this.TABLET_BREAKPOINT, this.MOBILE_BREAKPOINT])\n        .subscribe((result) => {\n          const wasTablet = this.isTablet;\n          this.isTablet = result.breakpoints[this.TABLET_BREAKPOINT];\n          this.isMobile = result.breakpoints[this.MOBILE_BREAKPOINT];\n\n          // Auto-collapse when entering tablet/mobile mode (< 1024px)\n          if (this.isTablet && !wasTablet) {\n            this.sidebarService.setCollapsed(true);\n          }\n\n          // Auto-expand when returning to desktop mode (> 1024px)\n          if (!this.isTablet && wasTablet) {\n            this.sidebarService.setCollapsed(false);\n          }\n\n          this.cdr.markForCheck();\n        })\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.subscription.unsubscribe();\n  }\n\n  /**\n   * Determines if the sidebar is currently collapsed.\n   */\n  get displayCollapsed(): boolean {\n    return this.isCollapsed() === undefined ? this.collapsed : this.isCollapsed()!;\n  }\n\n  /**\n   * Toggles the sidebar state.\n   */\n  toggleSidebar(): void {\n    if (this.isCollapsed() === undefined) {\n      this.sidebarService.toggle();\n    } else {\n      this.collapsedChange.emit(!this.isCollapsed());\n    }\n  }\n\n  /**\n   * Closes the sidebar explicitly.\n   */\n  closeSidebar(): void {\n    if (this.isCollapsed() === undefined) {\n      this.sidebarService.setCollapsed(true);\n    } else {\n      this.collapsedChange.emit(true);\n    }\n  }\n\n  /**\n   * Handles clicks in the sidebar content to auto-close on mobile.\n   * Using HostListener to avoid template accessibility linting on non-interactive aside.\n   */\n  @HostListener('click', ['$event'])\n  handleSidebarContentClick(event: MouseEvent): void {\n    if (!this.isMobile) return;\n\n    // Check if the click is inside the sidebar\n    const sidebar = (event.target as HTMLElement).closest('.tk-sidebar');\n    if (!sidebar) return;\n\n    const target = event.target as HTMLElement;\n    const navItem = target.closest('.tk-menu-item-link, .tk-pm-item-link, a, button');\n\n    if (navItem) {\n      // Check if it's a toggle for a sub-menu (has children)\n      const hasChildren = navItem.querySelector('.tk-menu-item-chevron, .tk-pm-item-chevron');\n      if (!hasChildren) {\n        this.closeSidebar();\n      }\n    }\n  }\n\n  /**\n   * Handles backdrop clicks to close the drawer.\n   */\n  handleBackdropClick(): void {\n    this.closeSidebar();\n  }\n}\n","<div\n  class=\"tk-sidebar-layout\"\n  [class.collapsed]=\"displayCollapsed\"\n  [class.is-tablet]=\"isTablet\"\n  [class.is-mobile]=\"isMobile\"\n>\n  <!-- Backdrop for overlay mode -->\n  @if (!displayCollapsed && isTablet) {\n    <tk-button\n      class=\"tk-sidebar-backdrop\"\n      (clicked)=\"handleBackdropClick()\"\n      aria-label=\"Close sidebar\"\n    ></tk-button>\n  }\n\n  <!-- Sidebar -->\n  <aside class=\"tk-sidebar\">\n    @if (!displayCollapsed) {\n      <div class=\"tk-sidebar-header\">\n        <img\n          src=\"assets/img/tk-logo-normal-light.svg\"\n          alt=\"Tekus Logo\"\n          class=\"tk-logo-expanded\"\n        />\n        <tk-button\n          class=\"tk-sidebar-toggle is-sidebar\"\n          (clicked)=\"toggleSidebar()\"\n          severity=\"secondary\"\n          variant=\"text\"\n          icon=\"arrow-left\"\n        ></tk-button>\n      </div>\n    }\n\n    <ng-content select=\"[sidebar-content]\"></ng-content>\n  </aside>\n\n  <!-- Main Content -->\n  <div class=\"tk-main-container\">\n    <header class=\"tk-nav-header\">\n      <div class=\"tk-nav-left\">\n        @if (displayCollapsed || isTablet) {\n          <tk-button\n            class=\"tk-sidebar-toggle\"\n            (clicked)=\"toggleSidebar()\"\n            severity=\"secondary\"\n            variant=\"text\"\n            icon=\"bars\"\n          ></tk-button>\n          <img\n            src=\"assets/img/tk-logo-normal-dark.svg\"\n            alt=\"Tekus Logo\"\n            class=\"tk-logo-header\"\n          />\n        }\n      </div>\n\n      <div class=\"tk-nav-right\">\n        <div class=\"tk-header-actions\">\n          <ng-content select=\"[header-actions]\"></ng-content>\n        </div>\n      </div>\n    </header>\n\n    <main class=\"tk-content\">\n      <ng-content></ng-content>\n    </main>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-stepper.mjs

@@ -100,7 +100,7 @@ class StepperComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StepperComponent, isStandalone: true, selector: "tk-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n  @if (steps().length > 0) {\n    @if (orientation() === 'horizontal') {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        <p-step-list class=\"tk-step-list-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n          }\n        </p-step-list>\n\n        <p-step-panels class=\"tk-step-panels-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n                \n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer\">\n                    <div class=\"tk-step-actions-secondary\">\n                      @for (action of step.actionsSecondary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'secondary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                    <div class=\"tk-step-actions-primary\">\n                      @for (action of step.actionsPrimary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'primary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          }\n        </p-step-panels>\n      </p-stepper>\n    } @else {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        @for (step of steps(); track $index) {\n          <p-step-item [value]=\"$index\">\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n\n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer vertical\">\n                    @for (action of step.actionsSecondary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'secondary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                    @for (action of step.actionsPrimary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'primary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          </p-step-item>\n        }\n      </p-stepper>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-stepper-container{display:block;width:100%;box-sizing:border-box}.tk-stepper-container.tk-stepper-vertical{padding-right:1rem;padding-bottom:.5rem}:host ::ng-deep .p-stepper{display:flex;flex-direction:column;width:100%;background:transparent}:host ::ng-deep .p-steplist{display:flex;align-items:center;width:100%;background:transparent;padding:0;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}:host ::ng-deep .p-step{padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important;cursor:pointer;display:flex}:host ::ng-deep .p-step:focus,:host ::ng-deep .p-step:focus-visible,:host ::ng-deep .p-step:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step{align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .p-step-header{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important}:host ::ng-deep .p-step .p-step-header:focus,:host ::ng-deep .p-step .p-step-header:focus-visible,:host ::ng-deep .p-step .p-step-header:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step .p-step-number{display:none!important}:host ::ng-deep .p-step .tk-step-header-content{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .tk-step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-full, 50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);background-color:var(--tk-color-background-default, #ffffff);transition:all .2s ease-in-out}:host ::ng-deep .p-step .tk-step-title{color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);transition:all .2s ease-in-out}:host ::ng-deep .p-step.p-step-active .tk-step-number,:host ::ng-deep .p-step[data-p-active=true] .tk-step-number{border-color:var(--tk-color-border-default, #cecdcd);color:var(--tk-color-primary-default, #16006f);background-color:var(--tk-color-background-default, #ffffff)}:host ::ng-deep .p-step.p-step-active .tk-step-title,:host ::ng-deep .p-step[data-p-active=true] .tk-step-title{color:var(--tk-color-primary-default, #16006f);font-weight:var(--tk-font-weight-600, 600)}:host ::ng-deep .p-step.p-disabled,:host ::ng-deep .p-step[disabled],:host ::ng-deep .p-step[data-p-disabled=true]{opacity:.6;cursor:not-allowed}:host ::ng-deep .p-stepper-separator{flex:1 1 0;height:1px!important;background-color:var(--tk-color-primary-default, #16006f)!important;margin:0 var(--tk-spacing-base-100, 1rem)!important;border:none!important;transition:background-color .2s ease-in-out}:host ::ng-deep .p-steppanels{width:100%;background:transparent;padding:0}:host ::ng-deep .p-steppanel{width:100%;outline:none}:host ::ng-deep .tk-stepper-vertical .p-stepper{flex-direction:column;gap:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem{display:flex;flex-direction:column;width:calc(100% - .95rem);margin-left:.95rem;padding-left:var(--tk-spacing-base-100, 1rem);padding-bottom:var(--tk-spacing-base-150, 1.5rem);position:relative;box-sizing:border-box}:host ::ng-deep .tk-stepper-vertical .p-stepitem:before{content:\"\";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1px;background-color:transparent;transition:background-color .2s ease-in-out}:host ::ng-deep .tk-stepper-vertical .p-stepitem[data-p-active=true]:before{background-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child{padding-bottom:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child:before{display:none!important}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-step{margin-left:-2rem;background:transparent;position:relative;z-index:2;margin-bottom:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel{padding:0;width:100%}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content-wrapper,:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content{margin:0!important;padding:0!important;margin-inline-start:0!important}.tk-step-panel-content{width:100%;min-height:100px}.tk-step-actions-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--tk-spacing-base-150, 1.5rem);width:100%}.tk-step-actions-footer .tk-step-actions-secondary{display:flex;gap:var(--tk-spacing-base-50, .5rem)}.tk-step-actions-footer .tk-step-actions-primary{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-left:auto}.tk-step-actions-footer.vertical{justify-content:flex-start;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: StepperModule }, { kind: "component", type: i1.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepList, selector: "p-step-list" }, { kind: "component", type: i1.StepPanels, selector: "p-step-panels" }, { kind: "component", type: i1.StepPanel, selector: "p-step-panel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepItem, selector: "p-step-item", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StepperComponent, isStandalone: true, selector: "tk-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n  @if (steps().length > 0) {\n    @if (orientation() === 'horizontal') {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        <p-step-list class=\"tk-step-list-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n          }\n        </p-step-list>\n\n        <p-step-panels class=\"tk-step-panels-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n                \n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer\">\n                    <div class=\"tk-step-actions-secondary\">\n                      @for (action of step.actionsSecondary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'secondary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                    <div class=\"tk-step-actions-primary\">\n                      @for (action of step.actionsPrimary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'primary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          }\n        </p-step-panels>\n      </p-stepper>\n    } @else {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        @for (step of steps(); track $index) {\n          <p-step-item [value]=\"$index\">\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n\n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer vertical\">\n                    @for (action of step.actionsSecondary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'secondary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                    @for (action of step.actionsPrimary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'primary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          </p-step-item>\n        }\n      </p-stepper>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-stepper-container{display:block;width:100%;box-sizing:border-box}.tk-stepper-container.tk-stepper-vertical{padding-right:1rem;padding-bottom:.5rem}:host ::ng-deep .p-stepper{display:flex;flex-direction:column;width:100%;background:transparent}:host ::ng-deep .p-steplist{display:flex;align-items:center;width:100%;background:transparent;padding:0;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}:host ::ng-deep .p-step{padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important;cursor:pointer;display:flex}:host ::ng-deep .p-step:focus,:host ::ng-deep .p-step:focus-visible,:host ::ng-deep .p-step:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step{align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .p-step-header{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important}:host ::ng-deep .p-step .p-step-header:focus,:host ::ng-deep .p-step .p-step-header:focus-visible,:host ::ng-deep .p-step .p-step-header:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step .p-step-number{display:none!important}:host ::ng-deep .p-step .tk-step-header-content{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .tk-step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-full, 50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);background-color:var(--tk-color-background-default, #ffffff);transition:all .2s ease-in-out}:host ::ng-deep .p-step .tk-step-title{color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);transition:all .2s ease-in-out}:host ::ng-deep .p-step.p-step-active .tk-step-number,:host ::ng-deep .p-step[data-p-active=true] .tk-step-number{border-color:var(--tk-color-border-default, #cecdcd);color:var(--tk-color-primary-default, #16006f);background-color:var(--tk-color-background-default, #ffffff)}:host ::ng-deep .p-step.p-step-active .tk-step-title,:host ::ng-deep .p-step[data-p-active=true] .tk-step-title{color:var(--tk-color-primary-default, #16006f);font-weight:var(--tk-font-weight-600, 600)}:host ::ng-deep .p-step.p-disabled,:host ::ng-deep .p-step[disabled],:host ::ng-deep .p-step[data-p-disabled=true]{opacity:.6;cursor:not-allowed}:host ::ng-deep .p-stepper-separator{flex:1 1 0;height:1px!important;background-color:var(--tk-color-primary-default, #16006f)!important;margin:0 var(--tk-spacing-base-100, 1rem)!important;border:none!important;transition:background-color .2s ease-in-out}:host ::ng-deep .p-steppanels{width:100%;background:transparent;padding:0}:host ::ng-deep .p-steppanel{width:100%;outline:none}:host ::ng-deep .tk-stepper-vertical .p-stepper{flex-direction:column;gap:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem{display:flex;flex-direction:column;width:calc(100% - .95rem);margin-left:.95rem;padding-left:var(--tk-spacing-base-100, 1rem);padding-bottom:var(--tk-spacing-base-150, 1.5rem);position:relative;box-sizing:border-box}:host ::ng-deep .tk-stepper-vertical .p-stepitem:before{content:\"\";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1px;background-color:transparent;transition:background-color .2s ease-in-out}:host ::ng-deep .tk-stepper-vertical .p-stepitem[data-p-active=true]:before{background-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child{padding-bottom:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child:before{display:none!important}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-step{margin-left:-2rem;background:transparent;position:relative;z-index:2;margin-bottom:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel{padding:0;width:100%}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content-wrapper,:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content{margin:0!important;padding:0!important;margin-inline-start:0!important}.tk-step-panel-content{width:100%;min-height:100px}.tk-step-actions-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--tk-spacing-base-150, 1.5rem);width:100%}.tk-step-actions-footer .tk-step-actions-secondary{display:flex;gap:var(--tk-spacing-base-50, .5rem)}.tk-step-actions-footer .tk-step-actions-primary{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-left:auto}.tk-step-actions-footer.vertical{justify-content:flex-start;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: StepperModule }, { kind: "component", type: i1.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepList, selector: "p-step-list" }, { kind: "component", type: i1.StepPanels, selector: "p-step-panels" }, { kind: "component", type: i1.StepPanel, selector: "p-step-panel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepItem, selector: "p-step-item", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,

package/fesm2022/tekus-design-system-components-stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-stepper.mjs","sources":["../../../projects/design-system/components/stepper/src/stepper.component.ts","../../../projects/design-system/components/stepper/src/stepper.component.html","../../../projects/design-system/components/stepper/tekus-design-system-components-stepper.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { StepperModule } from 'primeng/stepper';\nimport { SharedModule } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { StepData } from './stepper.types';\n\n/**\n * @component StepperComponent\n * @description\n * Reusable stepper component that acts as a wrapper around PrimeNG's Stepper.\n * Supports horizontal and vertical orientations, linear step completion rules,\n * and automated footer action buttons.\n *\n * @usage\n * ```html\n * <tk-stepper\n *   [steps]=\"steps\"\n *   [(activeStep)]=\"currentStep\"\n *   [linear]=\"true\"\n *   orientation=\"horizontal\">\n * </tk-stepper>\n * ```\n */\n@Component({\n  selector: 'tk-stepper',\n  imports: [StepperModule, NgTemplateOutlet, ButtonComponent, SharedModule],\n  templateUrl: './stepper.component.html',\n  styleUrl: './stepper.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StepperComponent {\n  /**\n   * @property {InputSignal<StepData[]>} steps\n   * @description Array of step configurations to display.\n   */\n  steps = input<StepData[]>([]);\n\n  /**\n   * @property {ModelSignal<number>} activeStep\n   * @description The 0-based index of the currently active step. Supports two-way binding.\n   * @default 0\n   */\n  activeStep = model<number>(0);\n\n  /**\n   * @property {InputSignal<boolean>} linear\n   * @description If true, blocks navigation to steps ahead of the active step.\n   * @default true\n   */\n  linear = input<boolean>(true);\n\n  /**\n   * @property {InputSignal<'horizontal' | 'vertical'>} orientation\n   * @description Defines the layout orientation of the stepper.\n   * @default 'horizontal'\n   */\n  orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n  /**\n   * @property {InputSignal<boolean>} showFooter\n   * @description Whether to render the default footer action buttons for each step.\n   * @default true\n   */\n  showFooter = input<boolean>(true);\n\n  /**\n   * @event stepChange\n   * @description Emitted when the active step changes.\n   */\n  stepChange = output<{\n    index: number;\n    step: StepData;\n  }>();\n\n  /**\n   * Checks if a step header should be disabled.\n   * Steps ahead of the active index are disabled in linear mode.\n   */\n  isStepDisabled(index: number): boolean {\n    const step = this.steps()[index];\n    if (!step) return true;\n    if (step.disabled) return true;\n    if (this.linear() && index > this.activeStep()) return true;\n    return false;\n  }\n\n  /**\n   * Helper to evaluate button disabled states dynamically.\n   */\n  evalDisabled(disabled: boolean | (() => boolean) | undefined): boolean {\n    if (disabled === undefined) return false;\n    if (typeof disabled === 'function') return disabled();\n    return disabled;\n  }\n\n  /**\n   * Handles step transition events.\n   */\n  onStepChange(index: number) {\n    if (this.activeStep() === index) return;\n    this.activeStep.set(index);\n    if (this.steps()[index]) {\n      this.stepChange.emit({\n        index,\n        step: this.steps()[index],\n      });\n    }\n  }\n}\n\n","<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n  @if (steps().length > 0) {\n    @if (orientation() === 'horizontal') {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        <p-step-list class=\"tk-step-list-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n          }\n        </p-step-list>\n\n        <p-step-panels class=\"tk-step-panels-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n                \n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer\">\n                    <div class=\"tk-step-actions-secondary\">\n                      @for (action of step.actionsSecondary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'secondary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                    <div class=\"tk-step-actions-primary\">\n                      @for (action of step.actionsPrimary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'primary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          }\n        </p-step-panels>\n      </p-stepper>\n    } @else {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        @for (step of steps(); track $index) {\n          <p-step-item [value]=\"$index\">\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n\n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer vertical\">\n                    @for (action of step.actionsSecondary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'secondary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                    @for (action of step.actionsPrimary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'primary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          </p-step-item>\n        }\n      </p-stepper>\n    }\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-stepper.mjs","sources":["../../../projects/design-system/components/stepper/src/stepper.component.ts","../../../projects/design-system/components/stepper/src/stepper.component.html","../../../projects/design-system/components/stepper/tekus-design-system-components-stepper.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { StepperModule } from 'primeng/stepper';\nimport { SharedModule } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { StepData } from './stepper.types';\n\n/**\n * @component StepperComponent\n * @description\n * Reusable stepper component that acts as a wrapper around PrimeNG's Stepper.\n * Supports horizontal and vertical orientations, linear step completion rules,\n * and automated footer action buttons.\n *\n * @usage\n * ```html\n * <tk-stepper\n *   [steps]=\"steps\"\n *   [(activeStep)]=\"currentStep\"\n *   [linear]=\"true\"\n *   orientation=\"horizontal\">\n * </tk-stepper>\n * ```\n */\n@Component({\n  selector: 'tk-stepper',\n  imports: [StepperModule, NgTemplateOutlet, ButtonComponent, SharedModule],\n  templateUrl: './stepper.component.html',\n  styleUrl: './stepper.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StepperComponent {\n  /**\n   * @property {InputSignal<StepData[]>} steps\n   * @description Array of step configurations to display.\n   */\n  steps = input<StepData[]>([]);\n\n  /**\n   * @property {ModelSignal<number>} activeStep\n   * @description The 0-based index of the currently active step. Supports two-way binding.\n   * @default 0\n   */\n  activeStep = model<number>(0);\n\n  /**\n   * @property {InputSignal<boolean>} linear\n   * @description If true, blocks navigation to steps ahead of the active step.\n   * @default true\n   */\n  linear = input<boolean>(true);\n\n  /**\n   * @property {InputSignal<'horizontal' | 'vertical'>} orientation\n   * @description Defines the layout orientation of the stepper.\n   * @default 'horizontal'\n   */\n  orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n  /**\n   * @property {InputSignal<boolean>} showFooter\n   * @description Whether to render the default footer action buttons for each step.\n   * @default true\n   */\n  showFooter = input<boolean>(true);\n\n  /**\n   * @event stepChange\n   * @description Emitted when the active step changes.\n   */\n  stepChange = output<{\n    index: number;\n    step: StepData;\n  }>();\n\n  /**\n   * Checks if a step header should be disabled.\n   * Steps ahead of the active index are disabled in linear mode.\n   */\n  isStepDisabled(index: number): boolean {\n    const step = this.steps()[index];\n    if (!step) return true;\n    if (step.disabled) return true;\n    if (this.linear() && index > this.activeStep()) return true;\n    return false;\n  }\n\n  /**\n   * Helper to evaluate button disabled states dynamically.\n   */\n  evalDisabled(disabled: boolean | (() => boolean) | undefined): boolean {\n    if (disabled === undefined) return false;\n    if (typeof disabled === 'function') return disabled();\n    return disabled;\n  }\n\n  /**\n   * Handles step transition events.\n   */\n  onStepChange(index: number) {\n    if (this.activeStep() === index) return;\n    this.activeStep.set(index);\n    if (this.steps()[index]) {\n      this.stepChange.emit({\n        index,\n        step: this.steps()[index],\n      });\n    }\n  }\n}\n\n","<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n  @if (steps().length > 0) {\n    @if (orientation() === 'horizontal') {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        <p-step-list class=\"tk-step-list-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n          }\n        </p-step-list>\n\n        <p-step-panels class=\"tk-step-panels-horizontal\">\n          @for (step of steps(); track $index) {\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n                \n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer\">\n                    <div class=\"tk-step-actions-secondary\">\n                      @for (action of step.actionsSecondary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'secondary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                    <div class=\"tk-step-actions-primary\">\n                      @for (action of step.actionsPrimary; track $index) {\n                        <tk-button\n                          [label]=\"action.label\"\n                          [icon]=\"action.icon\"\n                          [severity]=\"action.severity || 'primary'\"\n                          [variant]=\"action.variant\"\n                          [disabled]=\"evalDisabled(action.disabled)\"\n                          (clicked)=\"action.action()\">\n                        </tk-button>\n                      }\n                    </div>\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          }\n        </p-step-panels>\n      </p-stepper>\n    } @else {\n      <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n        @for (step of steps(); track $index) {\n          <p-step-item [value]=\"$index\">\n            <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n              <div class=\"tk-step-header-content\">\n                <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n                <span class=\"tk-step-title\">{{ step.label }}</span>\n              </div>\n            </p-step>\n            <p-step-panel [value]=\"$index\">\n              <ng-template pTemplate=\"content\">\n                <div class=\"tk-step-panel-content\">\n                  <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n                </div>\n\n                @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n                  <div class=\"tk-step-actions-footer vertical\">\n                    @for (action of step.actionsSecondary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'secondary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                    @for (action of step.actionsPrimary; track $index) {\n                      <tk-button\n                        [label]=\"action.label\"\n                        [icon]=\"action.icon\"\n                        [severity]=\"action.severity || 'primary'\"\n                        [variant]=\"action.variant\"\n                        [disabled]=\"evalDisabled(action.disabled)\"\n                        (clicked)=\"action.action()\">\n                      </tk-button>\n                    }\n                  </div>\n                }\n              </ng-template>\n            </p-step-panel>\n          </p-step-item>\n        }\n      </p-stepper>\n    }\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}