@tekus/design-system 5.40.0 → 5.41.0

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

@@ -2,6 +2,8 @@ import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
+import * as i2 from 'primeng/overlaybadge';
+import { OverlayBadgeModule } from 'primeng/overlaybadge';
 
 /**
  * @component BadgeComponent
@@ -12,6 +14,7 @@ import { BadgeModule } from 'primeng/badge';
  * This component supports:
  * - `value`: The text content to be displayed in the badge
  * - `severity`: The color scheme of the badge. Options: `'primary' | 'secondary' | 'contrast' | 'danger'`
+ * - `overlay`: When `true`, projects the wrapped content and pins the badge to its top-right corner
  * - Automatically maps severity values to PrimeNG's badge styles
  *
  * @usage
@@ -19,6 +22,13 @@ import { BadgeModule } from 'primeng/badge';
  * ```html
  * <tk-badge value="5" severity="primary"></tk-badge>
  *  ```
+ *
+ * ### Overlay usage
+ * ```html
+ * <tk-badge value="3" [overlay]="true">
+ *   <img src="thumbnail.png" alt="Preview" />
+ * </tk-badge>
+ * ```
  * */
 class BadgeComponent {
     constructor() {
@@ -29,6 +39,12 @@ class BadgeComponent {
          * @default 'primary'
          */
         this.severity = input('primary', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+        /**
+         * When `true`, renders the badge pinned to the top-right corner of the
+         * projected content instead of as a standalone inline badge.
+         * @default false
+         */
+        this.overlay = input(false, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
         /**
          * Computed property that maps the custom `BadgeSeverity` to the underlying PrimeNG `severity`.
          * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.
@@ -44,12 +60,12 @@ class BadgeComponent {
         }, ...(ngDevMode ? [{ debugName: "primeSeverity" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: BadgeComponent, isStandalone: true, selector: "tk-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n", styles: [":host{display:inline-flex}:host ::ng-deep .p-badge{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-s, .625rem);border-radius:var(--tk-borderRadius-full, 50%)}:host ::ng-deep .p-badge-success{background-color:var(--tk-color-base-primary-500);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .p-badge-secondary{background-color:var(--tk-color-base-surface-300, #d2d2d2);color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .p-badge-contrast{background-color:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}\n"], dependencies: [{ kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BadgeComponent, isStandalone: true, selector: "tk-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (overlay()) {\n<p-overlaybadge [value]=\"value()\" [severity]=\"primeSeverity()\">\n  <ng-content />\n</p-overlaybadge>\n} @else {\n<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n}\n", styles: [":host{display:inline-flex}:host ::ng-deep .p-badge{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-s, .625rem);border-radius:var(--tk-borderRadius-full, 50%)}:host ::ng-deep .p-badge-success{background-color:var(--tk-color-base-primary-500);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .p-badge-secondary{background-color:var(--tk-color-base-surface-300, #d2d2d2);color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .p-badge-contrast{background-color:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}\n"], dependencies: [{ kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i2.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-badge', imports: [BadgeModule], template: "<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n", styles: [":host{display:inline-flex}:host ::ng-deep .p-badge{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-s, .625rem);border-radius:var(--tk-borderRadius-full, 50%)}:host ::ng-deep .p-badge-success{background-color:var(--tk-color-base-primary-500);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .p-badge-secondary{background-color:var(--tk-color-base-surface-300, #d2d2d2);color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .p-badge-contrast{background-color:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-badge', imports: [BadgeModule, OverlayBadgeModule], template: "@if (overlay()) {\n<p-overlaybadge [value]=\"value()\" [severity]=\"primeSeverity()\">\n  <ng-content />\n</p-overlaybadge>\n} @else {\n<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n}\n", styles: [":host{display:inline-flex}:host ::ng-deep .p-badge{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-s, .625rem);border-radius:var(--tk-borderRadius-full, 50%)}:host ::ng-deep .p-badge-success{background-color:var(--tk-color-base-primary-500);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .p-badge-secondary{background-color:var(--tk-color-base-surface-300, #d2d2d2);color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .p-badge-contrast{background-color:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-badge.mjs","sources":["../../../projects/design-system/components/badge/src/badge.component.ts","../../../projects/design-system/components/badge/src/badge.component.html","../../../projects/design-system/components/badge/tekus-design-system-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { BadgeModule } from 'primeng/badge';\n\nexport type BadgeSeverity = 'secondary' | 'primary' | 'contrast' | 'danger';\n/**\n * @component BadgeComponent\n * @description\n * A component used to display numerical or textual badges.\n * It wraps PrimeNG's `p-badge` component with custom styling and behavior.\n *\n * This component supports:\n * - `value`: The text content to be displayed in the badge\n * - `severity`: The color scheme of the badge. Options: `'primary' | 'secondary' | 'contrast' | 'danger'`\n * - Automatically maps severity values to PrimeNG's badge styles\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-badge value=\"5\" severity=\"primary\"></tk-badge>\n *  ```\n * */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-badge',\n  imports: [BadgeModule],\n  templateUrl: './badge.component.html',\n  styleUrl: './badge.component.scss',\n})\nexport class BadgeComponent {\n  /** The text content to be displayed in the badge. */\n  value = input.required<string>();\n\n  /**\n   * The severity level of the badge, which determines its color and styling.\n   * @default 'primary'\n   */\n  severity = input<BadgeSeverity>('primary');\n\n  /**\n   * Computed property that maps the custom `BadgeSeverity` to the underlying PrimeNG `severity`.\n   * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.\n   */\n  primeSeverity = computed((): 'success' | 'secondary' | 'contrast' | 'danger' => {\n    const severityMap: Record<\n      BadgeSeverity,\n      'success' | 'secondary' | 'contrast' | 'danger'\n    > = {\n      secondary: 'secondary',\n      primary: 'success',\n      contrast: 'contrast',\n      danger: 'danger',\n    };\n    return severityMap[this.severity()];\n  });\n}\n","<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAIA;;;;;;;;;;;;;;;;AAgBK;MAQQ,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAEhC;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAgB,SAAS,+EAAC;AAE1C;;;AAGG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAsD;AAC7E,YAAA,MAAM,WAAW,GAGb;AACF,gBAAA,SAAS,EAAE,WAAW;AACtB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,MAAM,EAAE,QAAQ;aACjB;AACD,YAAA,OAAO,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACrC,QAAA,CAAC,oFAAC;AACH,IAAA;+GA1BY,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5B3B,kEACA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDuBY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAIV,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,EAAA,OAAA,EACX,CAAC,WAAW,CAAC,EAAA,QAAA,EAAA,kEAAA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA;;;AExBxB;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-badge.mjs","sources":["../../../projects/design-system/components/badge/src/badge.component.ts","../../../projects/design-system/components/badge/src/badge.component.html","../../../projects/design-system/components/badge/tekus-design-system-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { BadgeModule } from 'primeng/badge';\nimport { OverlayBadgeModule } from 'primeng/overlaybadge';\n\nexport type BadgeSeverity = 'secondary' | 'primary' | 'contrast' | 'danger';\n/**\n * @component BadgeComponent\n * @description\n * A component used to display numerical or textual badges.\n * It wraps PrimeNG's `p-badge` component with custom styling and behavior.\n *\n * This component supports:\n * - `value`: The text content to be displayed in the badge\n * - `severity`: The color scheme of the badge. Options: `'primary' | 'secondary' | 'contrast' | 'danger'`\n * - `overlay`: When `true`, projects the wrapped content and pins the badge to its top-right corner\n * - Automatically maps severity values to PrimeNG's badge styles\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-badge value=\"5\" severity=\"primary\"></tk-badge>\n *  ```\n *\n * ### Overlay usage\n * ```html\n * <tk-badge value=\"3\" [overlay]=\"true\">\n *   <img src=\"thumbnail.png\" alt=\"Preview\" />\n * </tk-badge>\n * ```\n * */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-badge',\n  imports: [BadgeModule, OverlayBadgeModule],\n  templateUrl: './badge.component.html',\n  styleUrl: './badge.component.scss',\n})\nexport class BadgeComponent {\n  /** The text content to be displayed in the badge. */\n  value = input.required<string>();\n\n  /**\n   * The severity level of the badge, which determines its color and styling.\n   * @default 'primary'\n   */\n  severity = input<BadgeSeverity>('primary');\n\n  /**\n   * When `true`, renders the badge pinned to the top-right corner of the\n   * projected content instead of as a standalone inline badge.\n   * @default false\n   */\n  overlay = input<boolean>(false);\n\n  /**\n   * Computed property that maps the custom `BadgeSeverity` to the underlying PrimeNG `severity`.\n   * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.\n   */\n  primeSeverity = computed((): 'success' | 'secondary' | 'contrast' | 'danger' => {\n    const severityMap: Record<\n      BadgeSeverity,\n      'success' | 'secondary' | 'contrast' | 'danger'\n    > = {\n      secondary: 'secondary',\n      primary: 'success',\n      contrast: 'contrast',\n      danger: 'danger',\n    };\n    return severityMap[this.severity()];\n  });\n}\n","@if (overlay()) {\n<p-overlaybadge [value]=\"value()\" [severity]=\"primeSeverity()\">\n  <ng-content />\n</p-overlaybadge>\n} @else {\n<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;AAwBK;MAQQ,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAEhC;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAgB,SAAS,+EAAC;AAE1C;;;;AAIG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAU,KAAK,8EAAC;AAE/B;;;AAGG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAsD;AAC7E,YAAA,MAAM,WAAW,GAGb;AACF,gBAAA,SAAS,EAAE,WAAW;AACtB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,MAAM,EAAE,QAAQ;aACjB;AACD,YAAA,OAAO,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACrC,QAAA,CAAC,oFAAC;AACH,IAAA;+GAjCY,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrC3B,6MAOA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED0BY,WAAW,6KAAE,kBAAkB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,iDAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,OAAA,EAAA,WAAA,EAAA,UAAA,EAAA,OAAA,EAAA,eAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAI9B,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;sCACS,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,WACX,CAAC,WAAW,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,6MAAA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA;;;AEjC5C;;AAEG;;;;"}

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

@@ -42,6 +42,11 @@ class CarouselItemComponent {
         this.slide = input.required(...(ngDevMode ? [{ debugName: "slide" }] : /* istanbul ignore next */ []));
         /** Whether the slide image failed to load and the error view must be shown. */
         this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+        /**
+         * Framing mode applied to the slide's background image.
+         * @default 'cover'
+         */
+        this.imageFit = input('cover', ...(ngDevMode ? [{ debugName: "imageFit" }] : /* istanbul ignore next */ []));
         /** Emits when the call-to-action button is clicked. */
         this.actionClick = output();
         /** Emits when the background image fails to load. */
@@ -65,6 +70,12 @@ class CarouselItemComponent {
          * Plain slides without image are not clickable.
          */
         this.showZoom = computed(() => this.state() === 'error' || !!this.slide().imageSrc, ...(ngDevMode ? [{ debugName: "showZoom" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the blurred backdrop copy of the image is rendered. Only needed
+         * when `imageFit` is `'contain'`, to fill the leftover space left by the
+         * uncropped image.
+         */
+        this.showImageBackdrop = computed(() => this.imageFit() === 'contain' && !!this.slide().imageSrc, ...(ngDevMode ? [{ debugName: "showImageBackdrop" }] : /* istanbul ignore next */ []));
         /** Accessible label for the zoom control, adapted to the slide state. */
         this.zoomLabel = computed(() => this.state() === 'error'
             ? `Ver detalle de ${this.slide().title}`
@@ -90,12 +101,12 @@ class CarouselItemComponent {
         this.slideClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CarouselItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CarouselItemComponent, isStandalone: true, selector: "tk-carousel-item", inputs: { slide: { classPropertyName: "slide", publicName: "slide", isSignal: true, isRequired: true, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", imageError: "imageError", slideClick: "slideClick" }, ngImport: i0, template: "<div\n  class=\"carousel-item\"\n  [class.carousel-item--error]=\"state() === 'error'\"\n  [class.carousel-item--plain]=\"state() === 'default' && !slide().imageSrc\">\n  @if (showZoom()) {\n    <button\n      type=\"button\"\n      class=\"carousel-item__zoom\"\n      [attr.aria-label]=\"zoomLabel()\"\n      (click)=\"onSlideClick()\">\n    </button>\n  }\n  @switch (state()) {\n    @case ('error') {\n      <output class=\"carousel-item__status\" [title]=\"slide().errorDescription ?? ''\">\n        <tk-fallback-view\n          [imageSrc]=\"slide().errorImageSrc ?? ''\"\n          [illustrationAlt]=\"slide().errorTitle ?? ''\"\n          [title]=\"displayErrorTitle()\"\n          [message]=\"displayErrorDescription()\">\n        </tk-fallback-view>\n      </output>\n    }\n    @default {\n      @if (slide().imageSrc) {\n        <img\n          class=\"carousel-item__image\"\n          [src]=\"slide().imageSrc\"\n          [alt]=\"altText()\"\n          (error)=\"onImageError()\" />\n        <div class=\"carousel-item__overlay\" aria-hidden=\"true\"></div>\n      }\n      <div class=\"carousel-item__content\">\n        @if (visibleTags().length > 0) {\n          <div class=\"carousel-item__tags\">\n            @for (tag of visibleTags(); track tag.value) {\n              <tk-tag\n                [value]=\"tag.value\"\n                [severity]=\"tag.severity ?? 'primary'\"\n                [truncationLimit]=\"tagTruncationLimit\">\n              </tk-tag>\n            }\n          </div>\n        }\n        <div class=\"carousel-item__text\">\n          <h2 class=\"carousel-item__title\" [title]=\"slide().title\">{{ displayTitle() }}</h2>\n          @if (slide().description) {\n            <p class=\"carousel-item__description\" [title]=\"slide().description\">\n              {{ displayDescription() }}\n            </p>\n          }\n        </div>\n        @if (slide().actionLabel) {\n          <div class=\"carousel-item__action\">\n            <tk-button\n              [label]=\"slide().actionLabel\"\n              severity=\"primary\"\n              [icon]=\"slide().actionIcon\"\n              iconPosition=\"right\"\n              [full]=\"true\"\n              (clicked)=\"onActionClick()\">\n            </tk-button>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;height:100%}.carousel-item{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:var(--tk-carousel-height, 28.125rem);padding:var(--tk-spacing-padding-xl, 1.5rem);overflow:hidden;box-sizing:border-box}.carousel-item__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.carousel-item__overlay{position:absolute;right:0;bottom:0;left:0;height:50%;background:linear-gradient(180deg,#191a1b00,#191a1ba3)}.carousel-item__zoom{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:none;background:transparent;cursor:pointer}.carousel-item__zoom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:-2px}.carousel-item__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;width:100%}.carousel-item__tags{display:flex;gap:var(--tk-spacing-gap-xs, .25rem)}.carousel-item__text{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem);width:100%}.carousel-item__title{max-width:100%;margin:0;overflow:hidden;color:var(--tk-color-text-inverse, #ffffff);font-size:var(--tk-font-size-headers-l, 2rem);font-weight:var(--tk-font-weight-600, 600);line-height:normal;white-space:nowrap;text-overflow:ellipsis}.carousel-item__description{display:-webkit-box;max-width:100%;margin:0;overflow:hidden;color:var(--tk-color-text-inverse, #ffffff);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);line-height:normal;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.carousel-item__action{width:100%;margin-top:var(--tk-spacing-gap-s, .5rem)}.carousel-item__status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--tk-spacing-gap-s, .5rem);width:100%;text-align:center}.carousel-item--plain{background:var(--tk-color-background-inverse, #191a1b)}.carousel-item--error{align-items:center;justify-content:center;background:var(--tk-color-feedback-danger-muted, #ffddd4)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: FallbackViewComponent, selector: "tk-fallback-view", inputs: ["type", "imageSrc", "illustrationAlt", "title", "message", "buttonLabel", "linkLabel", "buttonDisabled"], outputs: ["buttonAction", "linkAction"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CarouselItemComponent, isStandalone: true, selector: "tk-carousel-item", inputs: { slide: { classPropertyName: "slide", publicName: "slide", isSignal: true, isRequired: true, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, imageFit: { classPropertyName: "imageFit", publicName: "imageFit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", imageError: "imageError", slideClick: "slideClick" }, ngImport: i0, template: "<div\n  class=\"carousel-item\"\n  [class.carousel-item--error]=\"state() === 'error'\"\n  [class.carousel-item--plain]=\"state() === 'default' && !slide().imageSrc\">\n  @if (showZoom()) {\n    <button\n      type=\"button\"\n      class=\"carousel-item__zoom\"\n      [attr.aria-label]=\"zoomLabel()\"\n      (click)=\"onSlideClick()\">\n    </button>\n  }\n  @switch (state()) {\n    @case ('error') {\n      <output class=\"carousel-item__status\" [title]=\"slide().errorDescription ?? ''\">\n        <tk-fallback-view\n          [imageSrc]=\"slide().errorImageSrc ?? ''\"\n          [illustrationAlt]=\"slide().errorTitle ?? ''\"\n          [title]=\"displayErrorTitle()\"\n          [message]=\"displayErrorDescription()\">\n        </tk-fallback-view>\n      </output>\n    }\n    @default {\n      @if (slide().imageSrc) {\n        @if (showImageBackdrop()) {\n          <img class=\"carousel-item__image-bg\" [src]=\"slide().imageSrc\" alt=\"\" aria-hidden=\"true\" />\n        }\n        <img\n          class=\"carousel-item__image\"\n          [src]=\"slide().imageSrc\"\n          [alt]=\"altText()\"\n          [style.object-fit]=\"imageFit()\"\n          (error)=\"onImageError()\" />\n        <div class=\"carousel-item__overlay\" aria-hidden=\"true\"></div>\n      }\n      <div class=\"carousel-item__content\">\n        @if (visibleTags().length > 0) {\n          <div class=\"carousel-item__tags\">\n            @for (tag of visibleTags(); track tag.value) {\n              <tk-tag\n                [value]=\"tag.value\"\n                [severity]=\"tag.severity ?? 'primary'\"\n                [truncationLimit]=\"tagTruncationLimit\">\n              </tk-tag>\n            }\n          </div>\n        }\n        <div class=\"carousel-item__text\">\n          <h2 class=\"carousel-item__title\" [title]=\"slide().title\">{{ displayTitle() }}</h2>\n          @if (slide().description) {\n            <p class=\"carousel-item__description\" [title]=\"slide().description\">\n              {{ displayDescription() }}\n            </p>\n          }\n        </div>\n        @if (slide().actionLabel) {\n          <div class=\"carousel-item__action\">\n            <tk-button\n              [label]=\"slide().actionLabel\"\n              severity=\"primary\"\n              [icon]=\"slide().actionIcon\"\n              iconPosition=\"right\"\n              [full]=\"true\"\n              (clicked)=\"onActionClick()\">\n            </tk-button>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;height:100%}.carousel-item{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:var(--tk-carousel-height, 28.125rem);padding:var(--tk-spacing-padding-xl, 1.5rem);overflow:hidden;box-sizing:border-box}.carousel-item__image-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(1.5rem);transform:scale(1.1)}.carousel-item__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.carousel-item__overlay{position:absolute;right:0;bottom:0;left:0;height:50%;background:linear-gradient(180deg,#191a1b00,#191a1ba3)}.carousel-item__zoom{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:none;background:transparent;cursor:pointer}.carousel-item__zoom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:-2px}.carousel-item__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;width:100%}.carousel-item__tags{display:flex;gap:var(--tk-spacing-gap-xs, .25rem)}.carousel-item__text{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem);width:100%}.carousel-item__title{max-width:100%;margin:0;overflow:hidden;color:var(--tk-color-text-inverse, #ffffff);font-size:var(--tk-font-size-headers-l, 2rem);font-weight:var(--tk-font-weight-600, 600);line-height:normal;white-space:nowrap;text-overflow:ellipsis}.carousel-item__description{display:-webkit-box;max-width:100%;margin:0;overflow:hidden;color:var(--tk-color-text-inverse, #ffffff);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);line-height:normal;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.carousel-item__action{width:100%;margin-top:var(--tk-spacing-gap-s, .5rem)}.carousel-item__status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--tk-spacing-gap-s, .5rem);width:100%;text-align:center}.carousel-item--plain{background:var(--tk-color-background-inverse, #191a1b)}.carousel-item--error{align-items:center;justify-content:center;background:var(--tk-color-feedback-danger-muted, #ffddd4)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: FallbackViewComponent, selector: "tk-fallback-view", inputs: ["type", "imageSrc", "illustrationAlt", "title", "message", "buttonLabel", "linkLabel", "buttonDisabled"], outputs: ["buttonAction", "linkAction"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CarouselItemComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-carousel-item', imports: [ButtonComponent, FallbackViewComponent, TagComponent], template: "<div\n  class=\"carousel-item\"\n  [class.carousel-item--error]=\"state() === 'error'\"\n  [class.carousel-item--plain]=\"state() === 'default' && !slide().imageSrc\">\n  @if (showZoom()) {\n    <button\n      type=\"button\"\n      class=\"carousel-item__zoom\"\n      [attr.aria-label]=\"zoomLabel()\"\n      (click)=\"onSlideClick()\">\n    </button>\n  }\n  @switch (state()) {\n    @case ('error') {\n      <output class=\"carousel-item__status\" [title]=\"slide().errorDescription ?? ''\">\n        <tk-fallback-view\n          [imageSrc]=\"slide().errorImageSrc ?? ''\"\n          [illustrationAlt]=\"slide().errorTitle ?? ''\"\n          [title]=\"displayErrorTitle()\"\n          [message]=\"displayErrorDescription()\">\n        </tk-fallback-view>\n      </output>\n    }\n    @default {\n      @if (slide().imageSrc) {\n        <img\n          class=\"carousel-item__image\"\n          [src]=\"slide().imageSrc\"\n          [alt]=\"altText()\"\n          (error)=\"onImageError()\" />\n        <div class=\"carousel-item__overlay\" aria-hidden=\"true\"></div>\n      }\n      <div class=\"carousel-item__content\">\n        @if (visibleTags().length > 0) {\n          <div class=\"carousel-item__tags\">\n            @for (tag of visibleTags(); track tag.value) {\n              <tk-tag\n                [value]=\"tag.value\"\n                [severity]=\"tag.severity ?? 'primary'\"\n                [truncationLimit]=\"tagTruncationLimit\">\n              </tk-tag>\n            }\n          </div>\n        }\n        <div class=\"carousel-item__text\">\n          <h2 class=\"carousel-item__title\" [title]=\"slide().title\">{{ displayTitle() }}</h2>\n          @if (slide().description) {\n            <p class=\"carousel-item__description\" [title]=\"slide().description\">\n              {{ displayDescription() }}\n            </p>\n          }\n        </div>\n        @if (slide().actionLabel) {\n          <div class=\"carousel-item__action\">\n            <tk-button\n              [label]=\"slide().actionLabel\"\n              severity=\"primary\"\n              [icon]=\"slide().actionIcon\"\n              iconPosition=\"right\"\n              [full]=\"true\"\n              (clicked)=\"onActionClick()\">\n            </tk-button>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;height:100%}.carousel-item{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:var(--tk-carousel-height, 28.125rem);padding:var(--tk-spacing-padding-xl, 1.5rem);overflow:hidden;box-sizing:border-box}.carousel-item__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.carousel-item__overlay{position:absolute;right:0;bottom:0;left:0;height:50%;background:linear-gradient(180deg,#191a1b00,#191a1ba3)}.carousel-item__zoom{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:none;background:transparent;cursor:pointer}.carousel-item__zoom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:-2px}.carousel-item__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;width:100%}.carousel-item__tags{display:flex;gap:var(--tk-spacing-gap-xs, .25rem)}.carousel-item__text{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem);width:100%}.carousel-item__title{max-width:100%;margin:0;overflow:hidden;color:var(--tk-color-text-inverse, #ffffff);font-size:var(--tk-font-size-headers-l, 2rem);font-weight:var(--tk-font-weight-600, 600);line-height:normal;white-space:nowrap;text-overflow:ellipsis}.carousel-item__description{display:-webkit-box;max-width:100%;margin:0;overflow:hidden;color:var(--tk-color-text-inverse, #ffffff);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);line-height:normal;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.carousel-item__action{width:100%;margin-top:var(--tk-spacing-gap-s, .5rem)}.carousel-item__status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--tk-spacing-gap-s, .5rem);width:100%;text-align:center}.carousel-item--plain{background:var(--tk-color-background-inverse, #191a1b)}.carousel-item--error{align-items:center;justify-content:center;background:var(--tk-color-feedback-danger-muted, #ffddd4)}\n"] }]
-        }], propDecorators: { slide: [{ type: i0.Input, args: [{ isSignal: true, alias: "slide", required: true }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], imageError: [{ type: i0.Output, args: ["imageError"] }], slideClick: [{ type: i0.Output, args: ["slideClick"] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-carousel-item', imports: [ButtonComponent, FallbackViewComponent, TagComponent], template: "<div\n  class=\"carousel-item\"\n  [class.carousel-item--error]=\"state() === 'error'\"\n  [class.carousel-item--plain]=\"state() === 'default' && !slide().imageSrc\">\n  @if (showZoom()) {\n    <button\n      type=\"button\"\n      class=\"carousel-item__zoom\"\n      [attr.aria-label]=\"zoomLabel()\"\n      (click)=\"onSlideClick()\">\n    </button>\n  }\n  @switch (state()) {\n    @case ('error') {\n      <output class=\"carousel-item__status\" [title]=\"slide().errorDescription ?? ''\">\n        <tk-fallback-view\n          [imageSrc]=\"slide().errorImageSrc ?? ''\"\n          [illustrationAlt]=\"slide().errorTitle ?? ''\"\n          [title]=\"displayErrorTitle()\"\n          [message]=\"displayErrorDescription()\">\n        </tk-fallback-view>\n      </output>\n    }\n    @default {\n      @if (slide().imageSrc) {\n        @if (showImageBackdrop()) {\n          <img class=\"carousel-item__image-bg\" [src]=\"slide().imageSrc\" alt=\"\" aria-hidden=\"true\" />\n        }\n        <img\n          class=\"carousel-item__image\"\n          [src]=\"slide().imageSrc\"\n          [alt]=\"altText()\"\n          [style.object-fit]=\"imageFit()\"\n          (error)=\"onImageError()\" />\n        <div class=\"carousel-item__overlay\" aria-hidden=\"true\"></div>\n      }\n      <div class=\"carousel-item__content\">\n        @if (visibleTags().length > 0) {\n          <div class=\"carousel-item__tags\">\n            @for (tag of visibleTags(); track tag.value) {\n              <tk-tag\n                [value]=\"tag.value\"\n                [severity]=\"tag.severity ?? 'primary'\"\n                [truncationLimit]=\"tagTruncationLimit\">\n              </tk-tag>\n            }\n          </div>\n        }\n        <div class=\"carousel-item__text\">\n          <h2 class=\"carousel-item__title\" [title]=\"slide().title\">{{ displayTitle() }}</h2>\n          @if (slide().description) {\n            <p class=\"carousel-item__description\" [title]=\"slide().description\">\n              {{ displayDescription() }}\n            </p>\n          }\n        </div>\n        @if (slide().actionLabel) {\n          <div class=\"carousel-item__action\">\n            <tk-button\n              [label]=\"slide().actionLabel\"\n              severity=\"primary\"\n              [icon]=\"slide().actionIcon\"\n              iconPosition=\"right\"\n              [full]=\"true\"\n              (clicked)=\"onActionClick()\">\n            </tk-button>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;height:100%}.carousel-item{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:var(--tk-carousel-height, 28.125rem);padding:var(--tk-spacing-padding-xl, 1.5rem);overflow:hidden;box-sizing:border-box}.carousel-item__image-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(1.5rem);transform:scale(1.1)}.carousel-item__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.carousel-item__overlay{position:absolute;right:0;bottom:0;left:0;height:50%;background:linear-gradient(180deg,#191a1b00,#191a1ba3)}.carousel-item__zoom{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:none;background:transparent;cursor:pointer}.carousel-item__zoom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:-2px}.carousel-item__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;width:100%}.carousel-item__tags{display:flex;gap:var(--tk-spacing-gap-xs, .25rem)}.carousel-item__text{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem);width:100%}.carousel-item__title{max-width:100%;margin:0;overflow:hidden;color:var(--tk-color-text-inverse, #ffffff);font-size:var(--tk-font-size-headers-l, 2rem);font-weight:var(--tk-font-weight-600, 600);line-height:normal;white-space:nowrap;text-overflow:ellipsis}.carousel-item__description{display:-webkit-box;max-width:100%;margin:0;overflow:hidden;color:var(--tk-color-text-inverse, #ffffff);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);line-height:normal;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.carousel-item__action{width:100%;margin-top:var(--tk-spacing-gap-s, .5rem)}.carousel-item__status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--tk-spacing-gap-s, .5rem);width:100%;text-align:center}.carousel-item--plain{background:var(--tk-color-background-inverse, #191a1b)}.carousel-item--error{align-items:center;justify-content:center;background:var(--tk-color-feedback-danger-muted, #ffddd4)}\n"] }]
+        }], propDecorators: { slide: [{ type: i0.Input, args: [{ isSignal: true, alias: "slide", required: true }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], imageFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFit", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], imageError: [{ type: i0.Output, args: ["imageError"] }], slideClick: [{ type: i0.Output, args: ["slideClick"] }] } });
 
 /**
  * @component CarouselComponent
@@ -122,6 +133,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * The slide height can be customized with the `--tk-carousel-height` CSS
  * variable (defaults to `28.125rem`).
  *
+ * Image framing (`imageFit` input):
+ * - `'cover'` (default): the image fills the slide frame, cropping overflow.
+ * - `'contain'`: the full image is shown without cropping; leftover space is
+ *   filled with a blurred, scaled copy of the same image.
+ *
  * @usage
  * ### Manual navigation (default)
  * ```html
@@ -156,6 +172,11 @@ class CarouselComponent {
          * @default 'dots'
          */
         this.indicator = input('dots', ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
+        /**
+         * Framing mode applied to every slide's background image.
+         * @default 'cover'
+         */
+        this.imageFit = input('cover', ...(ngDevMode ? [{ debugName: "imageFit" }] : /* istanbul ignore next */ []));
         /** Emits when the active slide changes, via arrows, indicator, swipe, or autoplay. */
         this.slideChange = output();
         /** Emits the slide whose call-to-action button was clicked. */
@@ -219,12 +240,12 @@ class CarouselComponent {
         return slide.state === 'error' || this.failedSlideIds().has(slide.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CarouselComponent, isStandalone: true, selector: "tk-carousel", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slideChange: "slideChange", actionClick: "actionClick", slideClick: "slideClick" }, viewQueries: [{ propertyName: "primeCarousel", first: true, predicate: Carousel, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"carousel\">\n  <p-carousel\n    [value]=\"visibleSlides()\"\n    [numVisible]=\"1\"\n    [numScroll]=\"1\"\n    [circular]=\"showNavigation()\"\n    [autoplayInterval]=\"autoplayInterval()\"\n    [showIndicators]=\"showDots()\"\n    [showNavigators]=\"showNavigation()\"\n    (onPage)=\"onPage($event)\">\n    <ng-template pTemplate=\"item\" let-slide>\n      <tk-carousel-item\n        [slide]=\"slide\"\n        [hasError]=\"failedSlideIds().has(slide.id)\"\n        (imageError)=\"onImageError(slide)\"\n        (actionClick)=\"onActionClick(slide)\"\n        (slideClick)=\"onSlideClick(slide)\">\n      </tk-carousel-item>\n    </ng-template>\n    <ng-template pTemplate=\"previousicon\">\n      <tk-icon icon=\"angle-left\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n    <ng-template pTemplate=\"nexticon\">\n      <tk-icon icon=\"angle-right\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n  </p-carousel>\n\n  @if (showThumbnails()) {\n    <div class=\"carousel__thumbnails\" role=\"tablist\">\n      @for (slide of visibleSlides(); track slide.id) {\n        <button\n          type=\"button\"\n          class=\"carousel__thumbnail\"\n          [class.carousel__thumbnail--active]=\"currentIndex() === $index\"\n          role=\"tab\"\n          [attr.aria-selected]=\"currentIndex() === $index\"\n          [attr.aria-label]=\"slide.title\"\n          (click)=\"onThumbnailClick($event, $index)\">\n          @if (hasSlideError(slide)) {\n            <span class=\"carousel__thumbnail-placeholder carousel__thumbnail-placeholder--error\">\n              <tk-icon icon=\"triangle-exclamation\" styleIcon=\"regular\"></tk-icon>\n            </span>\n          } @else if (!slide.imageSrc) {\n            <span class=\"carousel__thumbnail-placeholder\"></span>\n          } @else {\n            <img class=\"carousel__thumbnail-image\" [src]=\"slide.imageSrc\" alt=\"\" />\n          }\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.carousel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-s, .5rem);width:100%}.carousel__thumbnails{display:flex;gap:var(--tk-spacing-gap-xs, .25rem);width:100%;overflow-x:auto}.carousel__thumbnail{flex-shrink:0;width:3.75rem;height:2.5rem;padding:0;border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:transparent;overflow:hidden;cursor:pointer}.carousel__thumbnail--active{outline:2px solid var(--tk-color-primary-default, #16006f);outline-offset:-2px}.carousel__thumbnail:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:-2px}.carousel__thumbnail-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--tk-borderRadius-xs, .25rem)}.carousel__thumbnail-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--tk-borderRadius-xs, .25rem);background:var(--tk-color-background-medium, #d2d2d2)}.carousel__thumbnail-placeholder--error{background:var(--tk-color-feedback-danger-muted, #ffddd4);color:var(--tk-color-feedback-danger-default, #dc362e)}:host ::ng-deep .carousel .p-carousel{width:100%}:host ::ng-deep .carousel .p-carousel-content-container{position:relative;border-radius:var(--tk-borderRadius-m, 1rem) var(--tk-borderRadius-m, 1rem) 0 0;overflow:hidden}:host ::ng-deep .carousel .p-carousel-content{position:relative;gap:0}:host ::ng-deep .carousel .p-carousel-viewport{width:100%}:host ::ng-deep .carousel .p-carousel-prev-button,:host ::ng-deep .carousel .p-carousel-next-button{position:absolute;top:50%;z-index:1;width:2.5rem;height:2.5rem;transform:translateY(-50%);border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:#f2f1f166;color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .carousel .p-carousel-prev-button tk-icon,:host ::ng-deep .carousel .p-carousel-prev-button svg,:host ::ng-deep .carousel .p-carousel-next-button tk-icon,:host ::ng-deep .carousel .p-carousel-next-button svg{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .carousel .p-carousel-prev-button .p-button,:host ::ng-deep .carousel .p-carousel-next-button .p-button{width:100%;height:100%;padding:0;border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:transparent;color:inherit;box-shadow:none}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:not(:disabled):hover,:host ::ng-deep .carousel .p-carousel-prev-button .p-button:not(:disabled):active,:host ::ng-deep .carousel .p-carousel-next-button .p-button:not(:disabled):hover,:host ::ng-deep .carousel .p-carousel-next-button .p-button:not(:disabled):active{border:none;background:transparent;color:inherit}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus,:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus-visible,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus-visible{border:none;box-shadow:none;outline:none}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus-visible,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:2px}:host ::ng-deep .carousel .p-carousel-prev-button:hover,:host ::ng-deep .carousel .p-carousel-next-button:hover{background:#f2f1f199}:host ::ng-deep .carousel .p-carousel-prev-button.p-disabled,:host ::ng-deep .carousel .p-carousel-next-button.p-disabled{opacity:.4}:host ::ng-deep .carousel .p-carousel-prev-button{left:var(--tk-spacing-padding-m, 1rem)}:host ::ng-deep .carousel .p-carousel-next-button{right:var(--tk-spacing-padding-m, 1rem)}:host ::ng-deep .carousel .p-carousel-indicator-list{position:absolute;right:0;bottom:var(--tk-spacing-padding-s, .5rem);left:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:var(--tk-spacing-gap-xs, .25rem);margin:0;padding:0}:host ::ng-deep .carousel .p-carousel-indicator-button{width:.5rem;height:.5rem;border-radius:var(--tk-borderRadius-full, 62.4375rem);background:var(--tk-color-background-medium, #d2d2d2);transition:width .2s ease,background .2s ease}:host ::ng-deep .carousel .p-carousel-indicator-button:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:2px}:host ::ng-deep .carousel .p-carousel-indicator-active .p-carousel-indicator-button{width:1rem;background:var(--tk-color-background-strong, #8a8a8b)}\n"], dependencies: [{ kind: "ngmodule", type: CarouselModule }, { kind: "component", type: i1.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "styleClass", "prevButtonProps", "nextButtonProps"], outputs: ["onPage"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CarouselItemComponent, selector: "tk-carousel-item", inputs: ["slide", "hasError"], outputs: ["actionClick", "imageError", "slideClick"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CarouselComponent, isStandalone: true, selector: "tk-carousel", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, imageFit: { classPropertyName: "imageFit", publicName: "imageFit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slideChange: "slideChange", actionClick: "actionClick", slideClick: "slideClick" }, viewQueries: [{ propertyName: "primeCarousel", first: true, predicate: Carousel, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"carousel\">\n  <p-carousel\n    [value]=\"visibleSlides()\"\n    [numVisible]=\"1\"\n    [numScroll]=\"1\"\n    [circular]=\"showNavigation()\"\n    [autoplayInterval]=\"autoplayInterval()\"\n    [showIndicators]=\"showDots()\"\n    [showNavigators]=\"showNavigation()\"\n    (onPage)=\"onPage($event)\">\n    <ng-template pTemplate=\"item\" let-slide>\n      <tk-carousel-item\n        [slide]=\"slide\"\n        [hasError]=\"failedSlideIds().has(slide.id)\"\n        [imageFit]=\"imageFit()\"\n        (imageError)=\"onImageError(slide)\"\n        (actionClick)=\"onActionClick(slide)\"\n        (slideClick)=\"onSlideClick(slide)\">\n      </tk-carousel-item>\n    </ng-template>\n    <ng-template pTemplate=\"previousicon\">\n      <tk-icon icon=\"angle-left\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n    <ng-template pTemplate=\"nexticon\">\n      <tk-icon icon=\"angle-right\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n  </p-carousel>\n\n  @if (showThumbnails()) {\n    <div class=\"carousel__thumbnails\" role=\"tablist\">\n      @for (slide of visibleSlides(); track slide.id) {\n        <button\n          type=\"button\"\n          class=\"carousel__thumbnail\"\n          [class.carousel__thumbnail--active]=\"currentIndex() === $index\"\n          role=\"tab\"\n          [attr.aria-selected]=\"currentIndex() === $index\"\n          [attr.aria-label]=\"slide.title\"\n          (click)=\"onThumbnailClick($event, $index)\">\n          @if (hasSlideError(slide)) {\n            <span class=\"carousel__thumbnail-placeholder carousel__thumbnail-placeholder--error\">\n              <tk-icon icon=\"triangle-exclamation\" styleIcon=\"regular\"></tk-icon>\n            </span>\n          } @else if (!slide.imageSrc) {\n            <span class=\"carousel__thumbnail-placeholder\"></span>\n          } @else {\n            <img class=\"carousel__thumbnail-image\" [src]=\"slide.imageSrc\" alt=\"\" />\n          }\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.carousel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-s, .5rem);width:100%}.carousel__thumbnails{display:flex;gap:var(--tk-spacing-gap-xs, .25rem);width:100%;overflow-x:auto}.carousel__thumbnail{flex-shrink:0;width:3.75rem;height:2.5rem;padding:0;border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:transparent;overflow:hidden;cursor:pointer}.carousel__thumbnail--active{outline:2px solid var(--tk-color-primary-default, #16006f);outline-offset:-2px}.carousel__thumbnail:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:-2px}.carousel__thumbnail-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--tk-borderRadius-xs, .25rem)}.carousel__thumbnail-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--tk-borderRadius-xs, .25rem);background:var(--tk-color-background-medium, #d2d2d2)}.carousel__thumbnail-placeholder--error{background:var(--tk-color-feedback-danger-muted, #ffddd4);color:var(--tk-color-feedback-danger-default, #dc362e)}:host ::ng-deep .carousel .p-carousel{width:100%}:host ::ng-deep .carousel .p-carousel-content-container{position:relative;border-radius:var(--tk-borderRadius-m, 1rem) var(--tk-borderRadius-m, 1rem) 0 0;overflow:hidden}:host ::ng-deep .carousel .p-carousel-content{position:relative;gap:0}:host ::ng-deep .carousel .p-carousel-viewport{width:100%}:host ::ng-deep .carousel .p-carousel-item{min-width:0}:host ::ng-deep .carousel .p-carousel-prev-button,:host ::ng-deep .carousel .p-carousel-next-button{position:absolute;top:50%;z-index:1;width:2.5rem;height:2.5rem;transform:translateY(-50%);border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:#f2f1f166;color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .carousel .p-carousel-prev-button tk-icon,:host ::ng-deep .carousel .p-carousel-prev-button svg,:host ::ng-deep .carousel .p-carousel-next-button tk-icon,:host ::ng-deep .carousel .p-carousel-next-button svg{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .carousel .p-carousel-prev-button .p-button,:host ::ng-deep .carousel .p-carousel-next-button .p-button{width:100%;height:100%;padding:0;border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:transparent;color:inherit;box-shadow:none}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:not(:disabled):hover,:host ::ng-deep .carousel .p-carousel-prev-button .p-button:not(:disabled):active,:host ::ng-deep .carousel .p-carousel-next-button .p-button:not(:disabled):hover,:host ::ng-deep .carousel .p-carousel-next-button .p-button:not(:disabled):active{border:none;background:transparent;color:inherit}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus,:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus-visible,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus-visible{border:none;box-shadow:none;outline:none}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus-visible,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:2px}:host ::ng-deep .carousel .p-carousel-prev-button:hover,:host ::ng-deep .carousel .p-carousel-next-button:hover{background:#f2f1f199}:host ::ng-deep .carousel .p-carousel-prev-button.p-disabled,:host ::ng-deep .carousel .p-carousel-next-button.p-disabled{opacity:.4}:host ::ng-deep .carousel .p-carousel-prev-button{left:var(--tk-spacing-padding-m, 1rem)}:host ::ng-deep .carousel .p-carousel-next-button{right:var(--tk-spacing-padding-m, 1rem)}:host ::ng-deep .carousel .p-carousel-indicator-list{position:absolute;right:0;bottom:var(--tk-spacing-padding-s, .5rem);left:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:var(--tk-spacing-gap-xs, .25rem);margin:0;padding:0}:host ::ng-deep .carousel .p-carousel-indicator-button{width:.5rem;height:.5rem;border-radius:var(--tk-borderRadius-full, 62.4375rem);background:var(--tk-color-background-medium, #d2d2d2);transition:width .2s ease,background .2s ease}:host ::ng-deep .carousel .p-carousel-indicator-button:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:2px}:host ::ng-deep .carousel .p-carousel-indicator-active .p-carousel-indicator-button{width:1rem;background:var(--tk-color-background-strong, #8a8a8b)}\n"], dependencies: [{ kind: "ngmodule", type: CarouselModule }, { kind: "component", type: i1.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "styleClass", "prevButtonProps", "nextButtonProps"], outputs: ["onPage"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CarouselItemComponent, selector: "tk-carousel-item", inputs: ["slide", "hasError", "imageFit"], outputs: ["actionClick", "imageError", "slideClick"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-carousel', imports: [CarouselModule, CarouselItemComponent, IconComponent], template: "<div class=\"carousel\">\n  <p-carousel\n    [value]=\"visibleSlides()\"\n    [numVisible]=\"1\"\n    [numScroll]=\"1\"\n    [circular]=\"showNavigation()\"\n    [autoplayInterval]=\"autoplayInterval()\"\n    [showIndicators]=\"showDots()\"\n    [showNavigators]=\"showNavigation()\"\n    (onPage)=\"onPage($event)\">\n    <ng-template pTemplate=\"item\" let-slide>\n      <tk-carousel-item\n        [slide]=\"slide\"\n        [hasError]=\"failedSlideIds().has(slide.id)\"\n        (imageError)=\"onImageError(slide)\"\n        (actionClick)=\"onActionClick(slide)\"\n        (slideClick)=\"onSlideClick(slide)\">\n      </tk-carousel-item>\n    </ng-template>\n    <ng-template pTemplate=\"previousicon\">\n      <tk-icon icon=\"angle-left\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n    <ng-template pTemplate=\"nexticon\">\n      <tk-icon icon=\"angle-right\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n  </p-carousel>\n\n  @if (showThumbnails()) {\n    <div class=\"carousel__thumbnails\" role=\"tablist\">\n      @for (slide of visibleSlides(); track slide.id) {\n        <button\n          type=\"button\"\n          class=\"carousel__thumbnail\"\n          [class.carousel__thumbnail--active]=\"currentIndex() === $index\"\n          role=\"tab\"\n          [attr.aria-selected]=\"currentIndex() === $index\"\n          [attr.aria-label]=\"slide.title\"\n          (click)=\"onThumbnailClick($event, $index)\">\n          @if (hasSlideError(slide)) {\n            <span class=\"carousel__thumbnail-placeholder carousel__thumbnail-placeholder--error\">\n              <tk-icon icon=\"triangle-exclamation\" styleIcon=\"regular\"></tk-icon>\n            </span>\n          } @else if (!slide.imageSrc) {\n            <span class=\"carousel__thumbnail-placeholder\"></span>\n          } @else {\n            <img class=\"carousel__thumbnail-image\" [src]=\"slide.imageSrc\" alt=\"\" />\n          }\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.carousel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-s, .5rem);width:100%}.carousel__thumbnails{display:flex;gap:var(--tk-spacing-gap-xs, .25rem);width:100%;overflow-x:auto}.carousel__thumbnail{flex-shrink:0;width:3.75rem;height:2.5rem;padding:0;border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:transparent;overflow:hidden;cursor:pointer}.carousel__thumbnail--active{outline:2px solid var(--tk-color-primary-default, #16006f);outline-offset:-2px}.carousel__thumbnail:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:-2px}.carousel__thumbnail-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--tk-borderRadius-xs, .25rem)}.carousel__thumbnail-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--tk-borderRadius-xs, .25rem);background:var(--tk-color-background-medium, #d2d2d2)}.carousel__thumbnail-placeholder--error{background:var(--tk-color-feedback-danger-muted, #ffddd4);color:var(--tk-color-feedback-danger-default, #dc362e)}:host ::ng-deep .carousel .p-carousel{width:100%}:host ::ng-deep .carousel .p-carousel-content-container{position:relative;border-radius:var(--tk-borderRadius-m, 1rem) var(--tk-borderRadius-m, 1rem) 0 0;overflow:hidden}:host ::ng-deep .carousel .p-carousel-content{position:relative;gap:0}:host ::ng-deep .carousel .p-carousel-viewport{width:100%}:host ::ng-deep .carousel .p-carousel-prev-button,:host ::ng-deep .carousel .p-carousel-next-button{position:absolute;top:50%;z-index:1;width:2.5rem;height:2.5rem;transform:translateY(-50%);border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:#f2f1f166;color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .carousel .p-carousel-prev-button tk-icon,:host ::ng-deep .carousel .p-carousel-prev-button svg,:host ::ng-deep .carousel .p-carousel-next-button tk-icon,:host ::ng-deep .carousel .p-carousel-next-button svg{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .carousel .p-carousel-prev-button .p-button,:host ::ng-deep .carousel .p-carousel-next-button .p-button{width:100%;height:100%;padding:0;border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:transparent;color:inherit;box-shadow:none}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:not(:disabled):hover,:host ::ng-deep .carousel .p-carousel-prev-button .p-button:not(:disabled):active,:host ::ng-deep .carousel .p-carousel-next-button .p-button:not(:disabled):hover,:host ::ng-deep .carousel .p-carousel-next-button .p-button:not(:disabled):active{border:none;background:transparent;color:inherit}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus,:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus-visible,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus-visible{border:none;box-shadow:none;outline:none}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus-visible,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:2px}:host ::ng-deep .carousel .p-carousel-prev-button:hover,:host ::ng-deep .carousel .p-carousel-next-button:hover{background:#f2f1f199}:host ::ng-deep .carousel .p-carousel-prev-button.p-disabled,:host ::ng-deep .carousel .p-carousel-next-button.p-disabled{opacity:.4}:host ::ng-deep .carousel .p-carousel-prev-button{left:var(--tk-spacing-padding-m, 1rem)}:host ::ng-deep .carousel .p-carousel-next-button{right:var(--tk-spacing-padding-m, 1rem)}:host ::ng-deep .carousel .p-carousel-indicator-list{position:absolute;right:0;bottom:var(--tk-spacing-padding-s, .5rem);left:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:var(--tk-spacing-gap-xs, .25rem);margin:0;padding:0}:host ::ng-deep .carousel .p-carousel-indicator-button{width:.5rem;height:.5rem;border-radius:var(--tk-borderRadius-full, 62.4375rem);background:var(--tk-color-background-medium, #d2d2d2);transition:width .2s ease,background .2s ease}:host ::ng-deep .carousel .p-carousel-indicator-button:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:2px}:host ::ng-deep .carousel .p-carousel-indicator-active .p-carousel-indicator-button{width:1rem;background:var(--tk-color-background-strong, #8a8a8b)}\n"] }]
-        }], propDecorators: { slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], slideClick: [{ type: i0.Output, args: ["slideClick"] }], primeCarousel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Carousel), { isSignal: true }] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-carousel', imports: [CarouselModule, CarouselItemComponent, IconComponent], template: "<div class=\"carousel\">\n  <p-carousel\n    [value]=\"visibleSlides()\"\n    [numVisible]=\"1\"\n    [numScroll]=\"1\"\n    [circular]=\"showNavigation()\"\n    [autoplayInterval]=\"autoplayInterval()\"\n    [showIndicators]=\"showDots()\"\n    [showNavigators]=\"showNavigation()\"\n    (onPage)=\"onPage($event)\">\n    <ng-template pTemplate=\"item\" let-slide>\n      <tk-carousel-item\n        [slide]=\"slide\"\n        [hasError]=\"failedSlideIds().has(slide.id)\"\n        [imageFit]=\"imageFit()\"\n        (imageError)=\"onImageError(slide)\"\n        (actionClick)=\"onActionClick(slide)\"\n        (slideClick)=\"onSlideClick(slide)\">\n      </tk-carousel-item>\n    </ng-template>\n    <ng-template pTemplate=\"previousicon\">\n      <tk-icon icon=\"angle-left\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n    <ng-template pTemplate=\"nexticon\">\n      <tk-icon icon=\"angle-right\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n  </p-carousel>\n\n  @if (showThumbnails()) {\n    <div class=\"carousel__thumbnails\" role=\"tablist\">\n      @for (slide of visibleSlides(); track slide.id) {\n        <button\n          type=\"button\"\n          class=\"carousel__thumbnail\"\n          [class.carousel__thumbnail--active]=\"currentIndex() === $index\"\n          role=\"tab\"\n          [attr.aria-selected]=\"currentIndex() === $index\"\n          [attr.aria-label]=\"slide.title\"\n          (click)=\"onThumbnailClick($event, $index)\">\n          @if (hasSlideError(slide)) {\n            <span class=\"carousel__thumbnail-placeholder carousel__thumbnail-placeholder--error\">\n              <tk-icon icon=\"triangle-exclamation\" styleIcon=\"regular\"></tk-icon>\n            </span>\n          } @else if (!slide.imageSrc) {\n            <span class=\"carousel__thumbnail-placeholder\"></span>\n          } @else {\n            <img class=\"carousel__thumbnail-image\" [src]=\"slide.imageSrc\" alt=\"\" />\n          }\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.carousel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-s, .5rem);width:100%}.carousel__thumbnails{display:flex;gap:var(--tk-spacing-gap-xs, .25rem);width:100%;overflow-x:auto}.carousel__thumbnail{flex-shrink:0;width:3.75rem;height:2.5rem;padding:0;border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:transparent;overflow:hidden;cursor:pointer}.carousel__thumbnail--active{outline:2px solid var(--tk-color-primary-default, #16006f);outline-offset:-2px}.carousel__thumbnail:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:-2px}.carousel__thumbnail-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--tk-borderRadius-xs, .25rem)}.carousel__thumbnail-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:var(--tk-borderRadius-xs, .25rem);background:var(--tk-color-background-medium, #d2d2d2)}.carousel__thumbnail-placeholder--error{background:var(--tk-color-feedback-danger-muted, #ffddd4);color:var(--tk-color-feedback-danger-default, #dc362e)}:host ::ng-deep .carousel .p-carousel{width:100%}:host ::ng-deep .carousel .p-carousel-content-container{position:relative;border-radius:var(--tk-borderRadius-m, 1rem) var(--tk-borderRadius-m, 1rem) 0 0;overflow:hidden}:host ::ng-deep .carousel .p-carousel-content{position:relative;gap:0}:host ::ng-deep .carousel .p-carousel-viewport{width:100%}:host ::ng-deep .carousel .p-carousel-item{min-width:0}:host ::ng-deep .carousel .p-carousel-prev-button,:host ::ng-deep .carousel .p-carousel-next-button{position:absolute;top:50%;z-index:1;width:2.5rem;height:2.5rem;transform:translateY(-50%);border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:#f2f1f166;color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .carousel .p-carousel-prev-button tk-icon,:host ::ng-deep .carousel .p-carousel-prev-button svg,:host ::ng-deep .carousel .p-carousel-next-button tk-icon,:host ::ng-deep .carousel .p-carousel-next-button svg{color:var(--tk-color-text-default, #191a1b)}:host ::ng-deep .carousel .p-carousel-prev-button .p-button,:host ::ng-deep .carousel .p-carousel-next-button .p-button{width:100%;height:100%;padding:0;border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:transparent;color:inherit;box-shadow:none}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:not(:disabled):hover,:host ::ng-deep .carousel .p-carousel-prev-button .p-button:not(:disabled):active,:host ::ng-deep .carousel .p-carousel-next-button .p-button:not(:disabled):hover,:host ::ng-deep .carousel .p-carousel-next-button .p-button:not(:disabled):active{border:none;background:transparent;color:inherit}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus,:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus-visible,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus-visible{border:none;box-shadow:none;outline:none}:host ::ng-deep .carousel .p-carousel-prev-button .p-button:focus-visible,:host ::ng-deep .carousel .p-carousel-next-button .p-button:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:2px}:host ::ng-deep .carousel .p-carousel-prev-button:hover,:host ::ng-deep .carousel .p-carousel-next-button:hover{background:#f2f1f199}:host ::ng-deep .carousel .p-carousel-prev-button.p-disabled,:host ::ng-deep .carousel .p-carousel-next-button.p-disabled{opacity:.4}:host ::ng-deep .carousel .p-carousel-prev-button{left:var(--tk-spacing-padding-m, 1rem)}:host ::ng-deep .carousel .p-carousel-next-button{right:var(--tk-spacing-padding-m, 1rem)}:host ::ng-deep .carousel .p-carousel-indicator-list{position:absolute;right:0;bottom:var(--tk-spacing-padding-s, .5rem);left:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:var(--tk-spacing-gap-xs, .25rem);margin:0;padding:0}:host ::ng-deep .carousel .p-carousel-indicator-button{width:.5rem;height:.5rem;border-radius:var(--tk-borderRadius-full, 62.4375rem);background:var(--tk-color-background-medium, #d2d2d2);transition:width .2s ease,background .2s ease}:host ::ng-deep .carousel .p-carousel-indicator-button:focus-visible{outline:2px solid var(--tk-color-border-focus, #6ad0bc);outline-offset:2px}:host ::ng-deep .carousel .p-carousel-indicator-active .p-carousel-indicator-button{width:1rem;background:var(--tk-color-background-strong, #8a8a8b)}\n"] }]
+        }], propDecorators: { slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], imageFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFit", required: false }] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], slideClick: [{ type: i0.Output, args: ["slideClick"] }], primeCarousel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Carousel), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-carousel.mjs","sources":["../../../projects/design-system/components/carousel/src/carousel.types.ts","../../../projects/design-system/components/carousel/src/carousel-item.component.ts","../../../projects/design-system/components/carousel/src/carousel-item.component.html","../../../projects/design-system/components/carousel/src/carousel.component.ts","../../../projects/design-system/components/carousel/src/carousel.component.html","../../../projects/design-system/components/carousel/tekus-design-system-components-carousel.ts"],"sourcesContent":["import { TagSeverity } from '@tekus/design-system/components/tag';\n\n/**\n * Behavioral preset of the carousel. The rotation is always an infinite\n * loop: after the last slide, next returns to the first one.\n * - `'manual'`: the user navigates with arrows and indicator; failed slide\n *   images show an error fallback in place.\n * - `'autoplay'`: the rotation advances automatically every 7 seconds with\n *   swipe gestures enabled; failed slide images remove the slide from the\n *   rotation without any error message (unattended usage).\n */\nexport type CarouselVariant = 'manual' | 'autoplay';\n\n/**\n * Type of position indicator rendered by the carousel.\n * - `'dots'`: dot indicators overlaid at the bottom of the slide.\n * - `'thumbnails'`: clickable image thumbnails rendered below the slide.\n */\nexport type CarouselIndicatorType = 'dots' | 'thumbnails';\n\n/**\n * Presentation state of a slide.\n * - `'default'`: regular slide with image and content.\n * - `'error'`: error view rendered with `tk-fallback-view`.\n *\n * Independently of this consumer-driven state, a slide whose image fails to\n * load is switched to the error view automatically.\n */\nexport type CarouselSlideState = 'default' | 'error';\n\n/**\n * Tag displayed over a slide, with an optional color scheme.\n * The severity accepts the same values as `tk-tag`\n * (`'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'`).\n */\nexport interface CarouselSlideTag {\n  /** Text of the tag. */\n  value: string;\n  /**\n   * Color scheme of the tag, forwarded to `tk-tag`.\n   * @default 'primary'\n   */\n  severity?: TagSeverity;\n}\n\n/**\n * Data contract for a single carousel slide.\n */\nexport interface CarouselSlide {\n  /** Stable unique identifier, used for tracking and error handling. */\n  id: string | number;\n  /** URL of the slide background image. When omitted, the content is rendered over a dark background. */\n  imageSrc?: string;\n  /** Alternative text for the background image. Falls back to `title`. */\n  imageAlt?: string;\n  /** Main heading displayed over the image. */\n  title: string;\n  /** Supporting text displayed below the title. */\n  description?: string;\n  /**\n   * Short labels displayed above the title. Only the first two are rendered.\n   * Plain strings render with the default color scheme; use `CarouselSlideTag`\n   * objects to set a severity per tag.\n   */\n  tags?: (string | CarouselSlideTag)[];\n  /** Label of the call-to-action button. When omitted, no button is rendered. */\n  actionLabel?: string;\n  /** Icon name (from the design system IconCatalog) shown in the action button. */\n  actionIcon?: string;\n  /**\n   * Consumer-driven presentation state of the slide.\n   * @default 'default'\n   */\n  state?: CarouselSlideState;\n  /** Illustration URL for the error view, forwarded to `tk-fallback-view`. */\n  errorImageSrc?: string;\n  /** Title of the error view (manual variant only). */\n  errorTitle?: string;\n  /** Message of the error view (manual variant only). */\n  errorDescription?: string;\n}\n\n/**\n * Payload emitted when the active slide changes.\n */\nexport interface CarouselSlideChangeEvent {\n  /** Zero-based index of the active slide within the visible slides. */\n  index: number;\n  /** The slide that became active. */\n  slide: CarouselSlide;\n}\n\n/** Autoplay interval, in milliseconds, applied by the autoplay variant. */\nexport const AUTOPLAY_INTERVAL_MS = 7000;\n\n/** Maximum number of tags rendered per slide. */\nexport const MAX_VISIBLE_TAGS = 2;\n\n/** Maximum number of characters of the slide title before truncation. */\nexport const MAX_TITLE_LENGTH = 50;\n\n/** Maximum number of characters of the slide description before truncation. */\nexport const MAX_DESCRIPTION_LENGTH = 140;\n\n/** Maximum number of characters per tag before truncation. */\nexport const MAX_TAG_LENGTH = 20;\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n} from '@angular/core';\n\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { FallbackViewComponent } from '@tekus/design-system/components/fallback-view';\nimport { TagComponent } from '@tekus/design-system/components/tag';\n\nimport {\n  CarouselSlide,\n  CarouselSlideState,\n  CarouselSlideTag,\n  MAX_DESCRIPTION_LENGTH,\n  MAX_TAG_LENGTH,\n  MAX_TITLE_LENGTH,\n  MAX_VISIBLE_TAGS,\n} from './carousel.types';\n\nconst truncateWithEllipsis = (text: string, maxLength: number): string =>\n  text.length > maxLength ? text.substring(0, maxLength) + '…' : text;\n\n/**\n * @component CarouselItemComponent\n * @description\n * Internal slide renderer for `tk-carousel`. It is not part of the public API\n * of the design system and must only be used by `CarouselComponent`.\n *\n * Renders one of two views depending on the slide state:\n * - `default`: background image with a bottom gradient overlay, up to two\n *   tags, a title, a description, and an optional call-to-action button.\n * - `error`: `tk-fallback-view` with an illustration and error messages.\n *   Also used when the background image fails to load.\n *\n * Both image and error slides expose a transparent zoom control that emits\n * `slideClick` so the host can open a lightbox (the full-resolution image, or\n * the failure detail for error slides). Plain slides without image are not clickable.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-carousel-item',\n  imports: [ButtonComponent, FallbackViewComponent, TagComponent],\n  templateUrl: './carousel-item.component.html',\n  styleUrl: './carousel-item.component.scss',\n})\nexport class CarouselItemComponent {\n  /** Slide data to render. */\n  slide = input.required<CarouselSlide>();\n\n  /** Whether the slide image failed to load and the error view must be shown. */\n  hasError = input<boolean>(false);\n\n  /** Emits when the call-to-action button is clicked. */\n  actionClick = output<void>();\n\n  /** Emits when the background image fails to load. */\n  imageError = output<void>();\n\n  /** Emits when the slide image is clicked (default state with an image only). */\n  slideClick = output<void>();\n\n  /** Effective presentation state, combining the slide state and image load failures. */\n  state = computed<CarouselSlideState>(() =>\n    this.hasError() || this.slide().state === 'error' ? 'error' : 'default'\n  );\n\n  /** Tags normalized to `CarouselSlideTag` and limited to the maximum allowed by the design. */\n  visibleTags = computed<CarouselSlideTag[]>(() => {\n    const tags = this.slide().tags ?? [];\n    return tags\n      .slice(0, MAX_VISIBLE_TAGS)\n      .map((tag) => (typeof tag === 'string' ? { value: tag } : tag));\n  });\n\n  /** Alternative text for the background image, falling back to the title. */\n  altText = computed(() => this.slide().imageAlt ?? this.slide().title);\n\n  /**\n   * Whether the clickable zoom control is rendered. It is shown for slides with\n   * an image (to enlarge it) and for error slides (to open the failure detail).\n   * Plain slides without image are not clickable.\n   */\n  showZoom = computed(() => this.state() === 'error' || !!this.slide().imageSrc);\n\n  /** Accessible label for the zoom control, adapted to the slide state. */\n  zoomLabel = computed(() =>\n    this.state() === 'error'\n      ? `Ver detalle de ${this.slide().title}`\n      : `Ampliar ${this.slide().title}`\n  );\n\n  /** Title truncated with an ellipsis when it exceeds the maximum length. */\n  displayTitle = computed(() =>\n    truncateWithEllipsis(this.slide().title, MAX_TITLE_LENGTH)\n  );\n\n  /** Description truncated with an ellipsis when it exceeds the maximum length. */\n  displayDescription = computed(() =>\n    truncateWithEllipsis(this.slide().description ?? '', MAX_DESCRIPTION_LENGTH)\n  );\n\n  /** Error title truncated with an ellipsis, using the same limit as the title. */\n  displayErrorTitle = computed(() =>\n    truncateWithEllipsis(this.slide().errorTitle ?? '', MAX_TITLE_LENGTH)\n  );\n\n  /** Error message truncated with an ellipsis, using the same limit as the description. */\n  displayErrorDescription = computed(() =>\n    truncateWithEllipsis(this.slide().errorDescription ?? '', MAX_DESCRIPTION_LENGTH)\n  );\n\n  /** Maximum characters per tag, forwarded to `tk-tag`. */\n  readonly tagTruncationLimit = MAX_TAG_LENGTH;\n\n  onImageError(): void {\n    this.imageError.emit();\n  }\n\n  onActionClick(): void {\n    this.actionClick.emit();\n  }\n\n  onSlideClick(): void {\n    this.slideClick.emit();\n  }\n}\n","<div\n  class=\"carousel-item\"\n  [class.carousel-item--error]=\"state() === 'error'\"\n  [class.carousel-item--plain]=\"state() === 'default' && !slide().imageSrc\">\n  @if (showZoom()) {\n    <button\n      type=\"button\"\n      class=\"carousel-item__zoom\"\n      [attr.aria-label]=\"zoomLabel()\"\n      (click)=\"onSlideClick()\">\n    </button>\n  }\n  @switch (state()) {\n    @case ('error') {\n      <output class=\"carousel-item__status\" [title]=\"slide().errorDescription ?? ''\">\n        <tk-fallback-view\n          [imageSrc]=\"slide().errorImageSrc ?? ''\"\n          [illustrationAlt]=\"slide().errorTitle ?? ''\"\n          [title]=\"displayErrorTitle()\"\n          [message]=\"displayErrorDescription()\">\n        </tk-fallback-view>\n      </output>\n    }\n    @default {\n      @if (slide().imageSrc) {\n        <img\n          class=\"carousel-item__image\"\n          [src]=\"slide().imageSrc\"\n          [alt]=\"altText()\"\n          (error)=\"onImageError()\" />\n        <div class=\"carousel-item__overlay\" aria-hidden=\"true\"></div>\n      }\n      <div class=\"carousel-item__content\">\n        @if (visibleTags().length > 0) {\n          <div class=\"carousel-item__tags\">\n            @for (tag of visibleTags(); track tag.value) {\n              <tk-tag\n                [value]=\"tag.value\"\n                [severity]=\"tag.severity ?? 'primary'\"\n                [truncationLimit]=\"tagTruncationLimit\">\n              </tk-tag>\n            }\n          </div>\n        }\n        <div class=\"carousel-item__text\">\n          <h2 class=\"carousel-item__title\" [title]=\"slide().title\">{{ displayTitle() }}</h2>\n          @if (slide().description) {\n            <p class=\"carousel-item__description\" [title]=\"slide().description\">\n              {{ displayDescription() }}\n            </p>\n          }\n        </div>\n        @if (slide().actionLabel) {\n          <div class=\"carousel-item__action\">\n            <tk-button\n              [label]=\"slide().actionLabel\"\n              severity=\"primary\"\n              [icon]=\"slide().actionIcon\"\n              iconPosition=\"right\"\n              [full]=\"true\"\n              (clicked)=\"onActionClick()\">\n            </tk-button>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\n\nimport { Carousel, CarouselModule, CarouselPageEvent } from 'primeng/carousel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\nimport { CarouselItemComponent } from './carousel-item.component';\nimport {\n  AUTOPLAY_INTERVAL_MS,\n  CarouselIndicatorType,\n  CarouselSlide,\n  CarouselSlideChangeEvent,\n  CarouselVariant,\n} from './carousel.types';\n\n/**\n * @component CarouselComponent\n * @description\n * Adaptive carousel that displays a sequence of slides one at a time, each\n * with a background image, up to two tags, a title, a description, and an\n * optional call-to-action button. It wraps PrimeNG's `p-carousel` with the\n * Tekus design system look.\n *\n * The rotation is always an infinite loop: after the last slide, next returns\n * to the first one.\n *\n * Variants (`variant` input):\n * - `'manual'` (default): the user navigates with arrows and indicator; if a\n *   slide image fails to load, an error fallback is shown in its place.\n * - `'autoplay'`: the rotation advances automatically every 7 seconds with\n *   swipe gestures enabled; slides whose image fails to load are removed\n *   from the rotation silently (unattended usage).\n *\n * Indicators (`indicator` input):\n * - `'dots'` (default): dot indicators overlaid at the bottom of the slide.\n * - `'thumbnails'`: clickable image thumbnails rendered below the slide.\n *\n * The slide height can be customized with the `--tk-carousel-height` CSS\n * variable (defaults to `28.125rem`).\n *\n * @usage\n * ### Manual navigation (default)\n * ```html\n * <tk-carousel\n *   [slides]=\"slides\"\n *   (slideChange)=\"onSlideChange($event)\"\n *   (actionClick)=\"onActionClick($event)\"\n *   (slideClick)=\"openLightbox($event)\">\n * </tk-carousel>\n * ```\n *\n * ### Autoplay with thumbnails\n * ```html\n * <tk-carousel\n *   [slides]=\"slides\"\n *   variant=\"autoplay\"\n *   indicator=\"thumbnails\">\n * </tk-carousel>\n * ```\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-carousel',\n  imports: [CarouselModule, CarouselItemComponent, IconComponent],\n  templateUrl: './carousel.component.html',\n  styleUrl: './carousel.component.scss',\n})\nexport class CarouselComponent {\n  /** Slides to display. Each slide must have a stable unique `id`. */\n  slides = input.required<CarouselSlide[]>();\n\n  /**\n   * Behavioral preset of the carousel.\n   * @default 'manual'\n   */\n  variant = input<CarouselVariant>('manual');\n\n  /**\n   * Type of position indicator.\n   * @default 'dots'\n   */\n  indicator = input<CarouselIndicatorType>('dots');\n\n  /** Emits when the active slide changes, via arrows, indicator, swipe, or autoplay. */\n  slideChange = output<CarouselSlideChangeEvent>();\n\n  /** Emits the slide whose call-to-action button was clicked. */\n  actionClick = output<CarouselSlide>();\n\n  /** Emits the slide whose image was clicked, so consumers can open a lightbox. */\n  slideClick = output<CarouselSlide>();\n\n  /** Reference to the underlying PrimeNG carousel, used for thumbnail navigation. */\n  primeCarousel = viewChild(Carousel);\n\n  /** Zero-based index of the active slide within the visible slides. */\n  currentIndex = signal(0);\n\n  /** Ids of the slides whose image failed to load. */\n  failedSlideIds = signal<ReadonlySet<CarouselSlide['id']>>(new Set());\n\n  /** Whether the autoplay preset is active. */\n  isAutoplay = computed(() => this.variant() === 'autoplay');\n\n  /** Autoplay interval mapped from the variant preset. `0` disables autoplay. */\n  autoplayInterval = computed(() =>\n    this.isAutoplay() ? AUTOPLAY_INTERVAL_MS : 0\n  );\n\n  /**\n   * Slides currently part of the rotation. The autoplay variant excludes\n   * slides whose image failed to load; the manual variant keeps them and\n   * shows an error fallback instead.\n   */\n  visibleSlides = computed(() => {\n    const failed = this.failedSlideIds();\n    const slides = this.slides();\n    if (!this.isAutoplay() || failed.size === 0) {\n      return slides;\n    }\n    return slides.filter((slide) => !failed.has(slide.id));\n  });\n\n  /**\n   * Whether the navigation controls (arrows and indicators) are rendered.\n   * With a single visible slide there is nowhere to navigate, so they are hidden.\n   */\n  showNavigation = computed(() => this.visibleSlides().length > 1);\n\n  /** Whether the dot indicator is rendered. */\n  showDots = computed(() => this.indicator() === 'dots' && this.showNavigation());\n\n  /** Whether the thumbnail indicator is rendered. */\n  showThumbnails = computed(\n    () => this.indicator() === 'thumbnails' && this.showNavigation()\n  );\n\n  onPage(event: CarouselPageEvent): void {\n    const index = event.page ?? 0;\n    this.currentIndex.set(index);\n    const slide = this.visibleSlides()[index];\n    if (slide) {\n      this.slideChange.emit({ index, slide });\n    }\n  }\n\n  onThumbnailClick(event: MouseEvent, index: number): void {\n    this.primeCarousel()?.onDotClick(event, index);\n  }\n\n  onImageError(slide: CarouselSlide): void {\n    this.failedSlideIds.update((failed) => new Set(failed).add(slide.id));\n  }\n\n  onActionClick(slide: CarouselSlide): void {\n    this.actionClick.emit(slide);\n  }\n\n  onSlideClick(slide: CarouselSlide): void {\n    this.slideClick.emit(slide);\n  }\n\n  hasSlideError(slide: CarouselSlide): boolean {\n    return slide.state === 'error' || this.failedSlideIds().has(slide.id);\n  }\n}\n","<div class=\"carousel\">\n  <p-carousel\n    [value]=\"visibleSlides()\"\n    [numVisible]=\"1\"\n    [numScroll]=\"1\"\n    [circular]=\"showNavigation()\"\n    [autoplayInterval]=\"autoplayInterval()\"\n    [showIndicators]=\"showDots()\"\n    [showNavigators]=\"showNavigation()\"\n    (onPage)=\"onPage($event)\">\n    <ng-template pTemplate=\"item\" let-slide>\n      <tk-carousel-item\n        [slide]=\"slide\"\n        [hasError]=\"failedSlideIds().has(slide.id)\"\n        (imageError)=\"onImageError(slide)\"\n        (actionClick)=\"onActionClick(slide)\"\n        (slideClick)=\"onSlideClick(slide)\">\n      </tk-carousel-item>\n    </ng-template>\n    <ng-template pTemplate=\"previousicon\">\n      <tk-icon icon=\"angle-left\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n    <ng-template pTemplate=\"nexticon\">\n      <tk-icon icon=\"angle-right\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n  </p-carousel>\n\n  @if (showThumbnails()) {\n    <div class=\"carousel__thumbnails\" role=\"tablist\">\n      @for (slide of visibleSlides(); track slide.id) {\n        <button\n          type=\"button\"\n          class=\"carousel__thumbnail\"\n          [class.carousel__thumbnail--active]=\"currentIndex() === $index\"\n          role=\"tab\"\n          [attr.aria-selected]=\"currentIndex() === $index\"\n          [attr.aria-label]=\"slide.title\"\n          (click)=\"onThumbnailClick($event, $index)\">\n          @if (hasSlideError(slide)) {\n            <span class=\"carousel__thumbnail-placeholder carousel__thumbnail-placeholder--error\">\n              <tk-icon icon=\"triangle-exclamation\" styleIcon=\"regular\"></tk-icon>\n            </span>\n          } @else if (!slide.imageSrc) {\n            <span class=\"carousel__thumbnail-placeholder\"></span>\n          } @else {\n            <img class=\"carousel__thumbnail-image\" [src]=\"slide.imageSrc\" alt=\"\" />\n          }\n        </button>\n      }\n    </div>\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-carousel.mjs","sources":["../../../projects/design-system/components/carousel/src/carousel.types.ts","../../../projects/design-system/components/carousel/src/carousel-item.component.ts","../../../projects/design-system/components/carousel/src/carousel-item.component.html","../../../projects/design-system/components/carousel/src/carousel.component.ts","../../../projects/design-system/components/carousel/src/carousel.component.html","../../../projects/design-system/components/carousel/tekus-design-system-components-carousel.ts"],"sourcesContent":["import { TagSeverity } from '@tekus/design-system/components/tag';\n\n/**\n * Behavioral preset of the carousel. The rotation is always an infinite\n * loop: after the last slide, next returns to the first one.\n * - `'manual'`: the user navigates with arrows and indicator; failed slide\n *   images show an error fallback in place.\n * - `'autoplay'`: the rotation advances automatically every 7 seconds with\n *   swipe gestures enabled; failed slide images remove the slide from the\n *   rotation without any error message (unattended usage).\n */\nexport type CarouselVariant = 'manual' | 'autoplay';\n\n/**\n * Type of position indicator rendered by the carousel.\n * - `'dots'`: dot indicators overlaid at the bottom of the slide.\n * - `'thumbnails'`: clickable image thumbnails rendered below the slide.\n */\nexport type CarouselIndicatorType = 'dots' | 'thumbnails';\n\n/**\n * Framing mode applied to each slide's background image.\n * - `'cover'` (default): the image fills the slide frame, cropping any\n *   overflow to preserve the aspect ratio.\n * - `'contain'`: the full image is shown without cropping. Leftover space is\n *   filled with a blurred, scaled copy of the same image so no empty bars\n *   are left.\n */\nexport type CarouselImageFit = 'cover' | 'contain';\n\n/**\n * Presentation state of a slide.\n * - `'default'`: regular slide with image and content.\n * - `'error'`: error view rendered with `tk-fallback-view`.\n *\n * Independently of this consumer-driven state, a slide whose image fails to\n * load is switched to the error view automatically.\n */\nexport type CarouselSlideState = 'default' | 'error';\n\n/**\n * Tag displayed over a slide, with an optional color scheme.\n * The severity accepts the same values as `tk-tag`\n * (`'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'`).\n */\nexport interface CarouselSlideTag {\n  /** Text of the tag. */\n  value: string;\n  /**\n   * Color scheme of the tag, forwarded to `tk-tag`.\n   * @default 'primary'\n   */\n  severity?: TagSeverity;\n}\n\n/**\n * Data contract for a single carousel slide.\n */\nexport interface CarouselSlide {\n  /** Stable unique identifier, used for tracking and error handling. */\n  id: string | number;\n  /** URL of the slide background image. When omitted, the content is rendered over a dark background. */\n  imageSrc?: string;\n  /** Alternative text for the background image. Falls back to `title`. */\n  imageAlt?: string;\n  /** Main heading displayed over the image. */\n  title: string;\n  /** Supporting text displayed below the title. */\n  description?: string;\n  /**\n   * Short labels displayed above the title. Only the first two are rendered.\n   * Plain strings render with the default color scheme; use `CarouselSlideTag`\n   * objects to set a severity per tag.\n   */\n  tags?: (string | CarouselSlideTag)[];\n  /** Label of the call-to-action button. When omitted, no button is rendered. */\n  actionLabel?: string;\n  /** Icon name (from the design system IconCatalog) shown in the action button. */\n  actionIcon?: string;\n  /**\n   * Consumer-driven presentation state of the slide.\n   * @default 'default'\n   */\n  state?: CarouselSlideState;\n  /** Illustration URL for the error view, forwarded to `tk-fallback-view`. */\n  errorImageSrc?: string;\n  /** Title of the error view (manual variant only). */\n  errorTitle?: string;\n  /** Message of the error view (manual variant only). */\n  errorDescription?: string;\n}\n\n/**\n * Payload emitted when the active slide changes.\n */\nexport interface CarouselSlideChangeEvent {\n  /** Zero-based index of the active slide within the visible slides. */\n  index: number;\n  /** The slide that became active. */\n  slide: CarouselSlide;\n}\n\n/** Autoplay interval, in milliseconds, applied by the autoplay variant. */\nexport const AUTOPLAY_INTERVAL_MS = 7000;\n\n/** Maximum number of tags rendered per slide. */\nexport const MAX_VISIBLE_TAGS = 2;\n\n/** Maximum number of characters of the slide title before truncation. */\nexport const MAX_TITLE_LENGTH = 50;\n\n/** Maximum number of characters of the slide description before truncation. */\nexport const MAX_DESCRIPTION_LENGTH = 140;\n\n/** Maximum number of characters per tag before truncation. */\nexport const MAX_TAG_LENGTH = 20;\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n} from '@angular/core';\n\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { FallbackViewComponent } from '@tekus/design-system/components/fallback-view';\nimport { TagComponent } from '@tekus/design-system/components/tag';\n\nimport {\n  CarouselImageFit,\n  CarouselSlide,\n  CarouselSlideState,\n  CarouselSlideTag,\n  MAX_DESCRIPTION_LENGTH,\n  MAX_TAG_LENGTH,\n  MAX_TITLE_LENGTH,\n  MAX_VISIBLE_TAGS,\n} from './carousel.types';\n\nconst truncateWithEllipsis = (text: string, maxLength: number): string =>\n  text.length > maxLength ? text.substring(0, maxLength) + '…' : text;\n\n/**\n * @component CarouselItemComponent\n * @description\n * Internal slide renderer for `tk-carousel`. It is not part of the public API\n * of the design system and must only be used by `CarouselComponent`.\n *\n * Renders one of two views depending on the slide state:\n * - `default`: background image with a bottom gradient overlay, up to two\n *   tags, a title, a description, and an optional call-to-action button.\n * - `error`: `tk-fallback-view` with an illustration and error messages.\n *   Also used when the background image fails to load.\n *\n * Both image and error slides expose a transparent zoom control that emits\n * `slideClick` so the host can open a lightbox (the full-resolution image, or\n * the failure detail for error slides). Plain slides without image are not clickable.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-carousel-item',\n  imports: [ButtonComponent, FallbackViewComponent, TagComponent],\n  templateUrl: './carousel-item.component.html',\n  styleUrl: './carousel-item.component.scss',\n})\nexport class CarouselItemComponent {\n  /** Slide data to render. */\n  slide = input.required<CarouselSlide>();\n\n  /** Whether the slide image failed to load and the error view must be shown. */\n  hasError = input<boolean>(false);\n\n  /**\n   * Framing mode applied to the slide's background image.\n   * @default 'cover'\n   */\n  imageFit = input<CarouselImageFit>('cover');\n\n  /** Emits when the call-to-action button is clicked. */\n  actionClick = output<void>();\n\n  /** Emits when the background image fails to load. */\n  imageError = output<void>();\n\n  /** Emits when the slide image is clicked (default state with an image only). */\n  slideClick = output<void>();\n\n  /** Effective presentation state, combining the slide state and image load failures. */\n  state = computed<CarouselSlideState>(() =>\n    this.hasError() || this.slide().state === 'error' ? 'error' : 'default'\n  );\n\n  /** Tags normalized to `CarouselSlideTag` and limited to the maximum allowed by the design. */\n  visibleTags = computed<CarouselSlideTag[]>(() => {\n    const tags = this.slide().tags ?? [];\n    return tags\n      .slice(0, MAX_VISIBLE_TAGS)\n      .map((tag) => (typeof tag === 'string' ? { value: tag } : tag));\n  });\n\n  /** Alternative text for the background image, falling back to the title. */\n  altText = computed(() => this.slide().imageAlt ?? this.slide().title);\n\n  /**\n   * Whether the clickable zoom control is rendered. It is shown for slides with\n   * an image (to enlarge it) and for error slides (to open the failure detail).\n   * Plain slides without image are not clickable.\n   */\n  showZoom = computed(() => this.state() === 'error' || !!this.slide().imageSrc);\n\n  /**\n   * Whether the blurred backdrop copy of the image is rendered. Only needed\n   * when `imageFit` is `'contain'`, to fill the leftover space left by the\n   * uncropped image.\n   */\n  showImageBackdrop = computed(\n    () => this.imageFit() === 'contain' && !!this.slide().imageSrc\n  );\n\n  /** Accessible label for the zoom control, adapted to the slide state. */\n  zoomLabel = computed(() =>\n    this.state() === 'error'\n      ? `Ver detalle de ${this.slide().title}`\n      : `Ampliar ${this.slide().title}`\n  );\n\n  /** Title truncated with an ellipsis when it exceeds the maximum length. */\n  displayTitle = computed(() =>\n    truncateWithEllipsis(this.slide().title, MAX_TITLE_LENGTH)\n  );\n\n  /** Description truncated with an ellipsis when it exceeds the maximum length. */\n  displayDescription = computed(() =>\n    truncateWithEllipsis(this.slide().description ?? '', MAX_DESCRIPTION_LENGTH)\n  );\n\n  /** Error title truncated with an ellipsis, using the same limit as the title. */\n  displayErrorTitle = computed(() =>\n    truncateWithEllipsis(this.slide().errorTitle ?? '', MAX_TITLE_LENGTH)\n  );\n\n  /** Error message truncated with an ellipsis, using the same limit as the description. */\n  displayErrorDescription = computed(() =>\n    truncateWithEllipsis(this.slide().errorDescription ?? '', MAX_DESCRIPTION_LENGTH)\n  );\n\n  /** Maximum characters per tag, forwarded to `tk-tag`. */\n  readonly tagTruncationLimit = MAX_TAG_LENGTH;\n\n  onImageError(): void {\n    this.imageError.emit();\n  }\n\n  onActionClick(): void {\n    this.actionClick.emit();\n  }\n\n  onSlideClick(): void {\n    this.slideClick.emit();\n  }\n}\n","<div\n  class=\"carousel-item\"\n  [class.carousel-item--error]=\"state() === 'error'\"\n  [class.carousel-item--plain]=\"state() === 'default' && !slide().imageSrc\">\n  @if (showZoom()) {\n    <button\n      type=\"button\"\n      class=\"carousel-item__zoom\"\n      [attr.aria-label]=\"zoomLabel()\"\n      (click)=\"onSlideClick()\">\n    </button>\n  }\n  @switch (state()) {\n    @case ('error') {\n      <output class=\"carousel-item__status\" [title]=\"slide().errorDescription ?? ''\">\n        <tk-fallback-view\n          [imageSrc]=\"slide().errorImageSrc ?? ''\"\n          [illustrationAlt]=\"slide().errorTitle ?? ''\"\n          [title]=\"displayErrorTitle()\"\n          [message]=\"displayErrorDescription()\">\n        </tk-fallback-view>\n      </output>\n    }\n    @default {\n      @if (slide().imageSrc) {\n        @if (showImageBackdrop()) {\n          <img class=\"carousel-item__image-bg\" [src]=\"slide().imageSrc\" alt=\"\" aria-hidden=\"true\" />\n        }\n        <img\n          class=\"carousel-item__image\"\n          [src]=\"slide().imageSrc\"\n          [alt]=\"altText()\"\n          [style.object-fit]=\"imageFit()\"\n          (error)=\"onImageError()\" />\n        <div class=\"carousel-item__overlay\" aria-hidden=\"true\"></div>\n      }\n      <div class=\"carousel-item__content\">\n        @if (visibleTags().length > 0) {\n          <div class=\"carousel-item__tags\">\n            @for (tag of visibleTags(); track tag.value) {\n              <tk-tag\n                [value]=\"tag.value\"\n                [severity]=\"tag.severity ?? 'primary'\"\n                [truncationLimit]=\"tagTruncationLimit\">\n              </tk-tag>\n            }\n          </div>\n        }\n        <div class=\"carousel-item__text\">\n          <h2 class=\"carousel-item__title\" [title]=\"slide().title\">{{ displayTitle() }}</h2>\n          @if (slide().description) {\n            <p class=\"carousel-item__description\" [title]=\"slide().description\">\n              {{ displayDescription() }}\n            </p>\n          }\n        </div>\n        @if (slide().actionLabel) {\n          <div class=\"carousel-item__action\">\n            <tk-button\n              [label]=\"slide().actionLabel\"\n              severity=\"primary\"\n              [icon]=\"slide().actionIcon\"\n              iconPosition=\"right\"\n              [full]=\"true\"\n              (clicked)=\"onActionClick()\">\n            </tk-button>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\n\nimport { Carousel, CarouselModule, CarouselPageEvent } from 'primeng/carousel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\nimport { CarouselItemComponent } from './carousel-item.component';\nimport {\n  AUTOPLAY_INTERVAL_MS,\n  CarouselImageFit,\n  CarouselIndicatorType,\n  CarouselSlide,\n  CarouselSlideChangeEvent,\n  CarouselVariant,\n} from './carousel.types';\n\n/**\n * @component CarouselComponent\n * @description\n * Adaptive carousel that displays a sequence of slides one at a time, each\n * with a background image, up to two tags, a title, a description, and an\n * optional call-to-action button. It wraps PrimeNG's `p-carousel` with the\n * Tekus design system look.\n *\n * The rotation is always an infinite loop: after the last slide, next returns\n * to the first one.\n *\n * Variants (`variant` input):\n * - `'manual'` (default): the user navigates with arrows and indicator; if a\n *   slide image fails to load, an error fallback is shown in its place.\n * - `'autoplay'`: the rotation advances automatically every 7 seconds with\n *   swipe gestures enabled; slides whose image fails to load are removed\n *   from the rotation silently (unattended usage).\n *\n * Indicators (`indicator` input):\n * - `'dots'` (default): dot indicators overlaid at the bottom of the slide.\n * - `'thumbnails'`: clickable image thumbnails rendered below the slide.\n *\n * The slide height can be customized with the `--tk-carousel-height` CSS\n * variable (defaults to `28.125rem`).\n *\n * Image framing (`imageFit` input):\n * - `'cover'` (default): the image fills the slide frame, cropping overflow.\n * - `'contain'`: the full image is shown without cropping; leftover space is\n *   filled with a blurred, scaled copy of the same image.\n *\n * @usage\n * ### Manual navigation (default)\n * ```html\n * <tk-carousel\n *   [slides]=\"slides\"\n *   (slideChange)=\"onSlideChange($event)\"\n *   (actionClick)=\"onActionClick($event)\"\n *   (slideClick)=\"openLightbox($event)\">\n * </tk-carousel>\n * ```\n *\n * ### Autoplay with thumbnails\n * ```html\n * <tk-carousel\n *   [slides]=\"slides\"\n *   variant=\"autoplay\"\n *   indicator=\"thumbnails\">\n * </tk-carousel>\n * ```\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-carousel',\n  imports: [CarouselModule, CarouselItemComponent, IconComponent],\n  templateUrl: './carousel.component.html',\n  styleUrl: './carousel.component.scss',\n})\nexport class CarouselComponent {\n  /** Slides to display. Each slide must have a stable unique `id`. */\n  slides = input.required<CarouselSlide[]>();\n\n  /**\n   * Behavioral preset of the carousel.\n   * @default 'manual'\n   */\n  variant = input<CarouselVariant>('manual');\n\n  /**\n   * Type of position indicator.\n   * @default 'dots'\n   */\n  indicator = input<CarouselIndicatorType>('dots');\n\n  /**\n   * Framing mode applied to every slide's background image.\n   * @default 'cover'\n   */\n  imageFit = input<CarouselImageFit>('cover');\n\n  /** Emits when the active slide changes, via arrows, indicator, swipe, or autoplay. */\n  slideChange = output<CarouselSlideChangeEvent>();\n\n  /** Emits the slide whose call-to-action button was clicked. */\n  actionClick = output<CarouselSlide>();\n\n  /** Emits the slide whose image was clicked, so consumers can open a lightbox. */\n  slideClick = output<CarouselSlide>();\n\n  /** Reference to the underlying PrimeNG carousel, used for thumbnail navigation. */\n  primeCarousel = viewChild(Carousel);\n\n  /** Zero-based index of the active slide within the visible slides. */\n  currentIndex = signal(0);\n\n  /** Ids of the slides whose image failed to load. */\n  failedSlideIds = signal<ReadonlySet<CarouselSlide['id']>>(new Set());\n\n  /** Whether the autoplay preset is active. */\n  isAutoplay = computed(() => this.variant() === 'autoplay');\n\n  /** Autoplay interval mapped from the variant preset. `0` disables autoplay. */\n  autoplayInterval = computed(() =>\n    this.isAutoplay() ? AUTOPLAY_INTERVAL_MS : 0\n  );\n\n  /**\n   * Slides currently part of the rotation. The autoplay variant excludes\n   * slides whose image failed to load; the manual variant keeps them and\n   * shows an error fallback instead.\n   */\n  visibleSlides = computed(() => {\n    const failed = this.failedSlideIds();\n    const slides = this.slides();\n    if (!this.isAutoplay() || failed.size === 0) {\n      return slides;\n    }\n    return slides.filter((slide) => !failed.has(slide.id));\n  });\n\n  /**\n   * Whether the navigation controls (arrows and indicators) are rendered.\n   * With a single visible slide there is nowhere to navigate, so they are hidden.\n   */\n  showNavigation = computed(() => this.visibleSlides().length > 1);\n\n  /** Whether the dot indicator is rendered. */\n  showDots = computed(() => this.indicator() === 'dots' && this.showNavigation());\n\n  /** Whether the thumbnail indicator is rendered. */\n  showThumbnails = computed(\n    () => this.indicator() === 'thumbnails' && this.showNavigation()\n  );\n\n  onPage(event: CarouselPageEvent): void {\n    const index = event.page ?? 0;\n    this.currentIndex.set(index);\n    const slide = this.visibleSlides()[index];\n    if (slide) {\n      this.slideChange.emit({ index, slide });\n    }\n  }\n\n  onThumbnailClick(event: MouseEvent, index: number): void {\n    this.primeCarousel()?.onDotClick(event, index);\n  }\n\n  onImageError(slide: CarouselSlide): void {\n    this.failedSlideIds.update((failed) => new Set(failed).add(slide.id));\n  }\n\n  onActionClick(slide: CarouselSlide): void {\n    this.actionClick.emit(slide);\n  }\n\n  onSlideClick(slide: CarouselSlide): void {\n    this.slideClick.emit(slide);\n  }\n\n  hasSlideError(slide: CarouselSlide): boolean {\n    return slide.state === 'error' || this.failedSlideIds().has(slide.id);\n  }\n}\n","<div class=\"carousel\">\n  <p-carousel\n    [value]=\"visibleSlides()\"\n    [numVisible]=\"1\"\n    [numScroll]=\"1\"\n    [circular]=\"showNavigation()\"\n    [autoplayInterval]=\"autoplayInterval()\"\n    [showIndicators]=\"showDots()\"\n    [showNavigators]=\"showNavigation()\"\n    (onPage)=\"onPage($event)\">\n    <ng-template pTemplate=\"item\" let-slide>\n      <tk-carousel-item\n        [slide]=\"slide\"\n        [hasError]=\"failedSlideIds().has(slide.id)\"\n        [imageFit]=\"imageFit()\"\n        (imageError)=\"onImageError(slide)\"\n        (actionClick)=\"onActionClick(slide)\"\n        (slideClick)=\"onSlideClick(slide)\">\n      </tk-carousel-item>\n    </ng-template>\n    <ng-template pTemplate=\"previousicon\">\n      <tk-icon icon=\"angle-left\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n    <ng-template pTemplate=\"nexticon\">\n      <tk-icon icon=\"angle-right\" styleIcon=\"solid\"></tk-icon>\n    </ng-template>\n  </p-carousel>\n\n  @if (showThumbnails()) {\n    <div class=\"carousel__thumbnails\" role=\"tablist\">\n      @for (slide of visibleSlides(); track slide.id) {\n        <button\n          type=\"button\"\n          class=\"carousel__thumbnail\"\n          [class.carousel__thumbnail--active]=\"currentIndex() === $index\"\n          role=\"tab\"\n          [attr.aria-selected]=\"currentIndex() === $index\"\n          [attr.aria-label]=\"slide.title\"\n          (click)=\"onThumbnailClick($event, $index)\">\n          @if (hasSlideError(slide)) {\n            <span class=\"carousel__thumbnail-placeholder carousel__thumbnail-placeholder--error\">\n              <tk-icon icon=\"triangle-exclamation\" styleIcon=\"regular\"></tk-icon>\n            </span>\n          } @else if (!slide.imageSrc) {\n            <span class=\"carousel__thumbnail-placeholder\"></span>\n          } @else {\n            <img class=\"carousel__thumbnail-image\" [src]=\"slide.imageSrc\" alt=\"\" />\n          }\n        </button>\n      }\n    </div>\n  }\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-panel.mjs

@@ -111,11 +111,11 @@ class PanelComponent {
         this.toggled.emit({ collapsed: newState });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, helpIcon: { classPropertyName: "helpIcon", publicName: "helpIcon", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "component", type: i1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, helpIcon: { classPropertyName: "helpIcon", publicName: "helpIcon", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content-wrapper{min-width:0}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "component", type: i1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity", "overlay"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-panel', imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"] }]
+            args: [{ selector: 'tk-panel', imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content-wrapper{min-width:0}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"] }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSeverity", required: false }] }], helpIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpIcon", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-panel.mjs","sources":["../../../projects/design-system/components/panel/src/panel.component.ts","../../../projects/design-system/components/panel/src/panel.component.html","../../../projects/design-system/components/panel/tekus-design-system-components-panel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { BadgeComponent, BadgeSeverity } from '@tekus/design-system/components/badge';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\n\n/**\n * @component PanelComponent\n * @description\n * Panel is a container component with an optional content toggle feature.\n * It wraps PrimeNG's Panel component and provides a consistent design across the application.\n *\n * The panel can be toggled between expanded and collapsed states using the chevron icon\n * in the header. The component uses custom tk-icon for the toggle icons.\n *\n * @usage\n * ```html\n * <tk-panel\n *   header=\"Panel Title\"\n *   [toggleable]=\"true\"\n *   [(collapsed)]=\"isCollapsed\">\n *   <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n */\n@Component({\n  selector: 'tk-panel',\n  imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent],\n  templateUrl: './panel.component.html',\n  styleUrl: './panel.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelComponent {\n  /**\n   * @property {string} header\n   * @description\n   * Header text displayed at the top of the panel.\n   *\n   * @default undefined\n   */\n  header = input<string>();\n\n  /**\n   * @property {string | number} badge\n   * @description\n   * Optional badge value to display in the header.\n   *\n   * @default undefined\n   */\n  badge = input<string | number>();\n\n  /**\n   * @property {BadgeSeverity} badgeSeverity\n   * @description\n   * Severity of the badge.\n   *\n   * @default 'danger'\n   */\n  badgeSeverity = input<BadgeSeverity>('danger');\n\n  /**\n   * @property {string} helpIcon\n   * @description\n   * The name of the icon to display for information/help.\n   *\n   * @default 'circle-question'\n   */\n  helpIcon = input<string>('circle-question');\n\n  /**\n   * @property {string} helpText\n   * @description\n   * Optional help text to display as a tooltip on a help icon in the header.\n   *\n   * @default undefined\n   */\n  helpText = input<string>();\n\n  /**\n   * @property {boolean} toggleable\n   * @description\n   * When enabled, the panel content can be expanded and collapsed.\n   *\n   * @default false\n   */\n  toggleable = input<boolean>(false);\n\n  /**\n   * @property {ModelSignal<boolean>} collapsed\n   * @description\n   * Defines whether the panel is collapsed or expanded.\n   * Supports two-way binding via [(collapsed)].\n   *\n   * @default false\n   */\n  collapsed = model<boolean>(false);\n\n  /**\n   * @event toggled\n   * @description\n   * Callback to invoke when the panel is toggled.\n   * Emits an object with the collapsed state.\n   *\n   * @example\n   * ```html\n   * <tk-panel (toggled)=\"handleToggle($event)\"></tk-panel>\n   * ```\n   */\n  toggled = output<{ collapsed: boolean }>();\n\n  /**\n   * @method handleToggle\n   * @description\n   * Handles the toggle event from the PrimeNG panel.\n   * Updates the collapsed state and emits the appropriate events.\n   *\n   * @param event - The toggle event from PrimeNG panel\n   */\n  handleToggle(event: { collapsed?: boolean }): void {\n    const newState = event.collapsed ?? this.collapsed();\n    this.toggled.emit({ collapsed: newState });\n  }\n}\n","<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\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-panel.mjs","sources":["../../../projects/design-system/components/panel/src/panel.component.ts","../../../projects/design-system/components/panel/src/panel.component.html","../../../projects/design-system/components/panel/tekus-design-system-components-panel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { BadgeComponent, BadgeSeverity } from '@tekus/design-system/components/badge';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\n\n/**\n * @component PanelComponent\n * @description\n * Panel is a container component with an optional content toggle feature.\n * It wraps PrimeNG's Panel component and provides a consistent design across the application.\n *\n * The panel can be toggled between expanded and collapsed states using the chevron icon\n * in the header. The component uses custom tk-icon for the toggle icons.\n *\n * @usage\n * ```html\n * <tk-panel\n *   header=\"Panel Title\"\n *   [toggleable]=\"true\"\n *   [(collapsed)]=\"isCollapsed\">\n *   <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n */\n@Component({\n  selector: 'tk-panel',\n  imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent],\n  templateUrl: './panel.component.html',\n  styleUrl: './panel.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelComponent {\n  /**\n   * @property {string} header\n   * @description\n   * Header text displayed at the top of the panel.\n   *\n   * @default undefined\n   */\n  header = input<string>();\n\n  /**\n   * @property {string | number} badge\n   * @description\n   * Optional badge value to display in the header.\n   *\n   * @default undefined\n   */\n  badge = input<string | number>();\n\n  /**\n   * @property {BadgeSeverity} badgeSeverity\n   * @description\n   * Severity of the badge.\n   *\n   * @default 'danger'\n   */\n  badgeSeverity = input<BadgeSeverity>('danger');\n\n  /**\n   * @property {string} helpIcon\n   * @description\n   * The name of the icon to display for information/help.\n   *\n   * @default 'circle-question'\n   */\n  helpIcon = input<string>('circle-question');\n\n  /**\n   * @property {string} helpText\n   * @description\n   * Optional help text to display as a tooltip on a help icon in the header.\n   *\n   * @default undefined\n   */\n  helpText = input<string>();\n\n  /**\n   * @property {boolean} toggleable\n   * @description\n   * When enabled, the panel content can be expanded and collapsed.\n   *\n   * @default false\n   */\n  toggleable = input<boolean>(false);\n\n  /**\n   * @property {ModelSignal<boolean>} collapsed\n   * @description\n   * Defines whether the panel is collapsed or expanded.\n   * Supports two-way binding via [(collapsed)].\n   *\n   * @default false\n   */\n  collapsed = model<boolean>(false);\n\n  /**\n   * @event toggled\n   * @description\n   * Callback to invoke when the panel is toggled.\n   * Emits an object with the collapsed state.\n   *\n   * @example\n   * ```html\n   * <tk-panel (toggled)=\"handleToggle($event)\"></tk-panel>\n   * ```\n   */\n  toggled = output<{ collapsed: boolean }>();\n\n  /**\n   * @method handleToggle\n   * @description\n   * Handles the toggle event from the PrimeNG panel.\n   * Updates the collapsed state and emits the appropriate events.\n   *\n   * @param event - The toggle event from PrimeNG panel\n   */\n  handleToggle(event: { collapsed?: boolean }): void {\n    const newState = event.collapsed ?? this.collapsed();\n    this.toggled.emit({ collapsed: newState });\n  }\n}\n","<p-panel\n  class=\"tk-panel\"\n  [toggleable]=\"toggleable()\"\n  [(collapsed)]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-panel-header-container\">\n      @if (header()) {\n        <span class=\"p-panel-title\">{{ header() }}</span>\n      }\n\n      @if (helpText(); as text) {\n        <tk-tooltip [content]=\"text\">\n          <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n        </tk-tooltip>\n      }\n\n      @if (badge() !== undefined) {\n        <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;MAQU,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;AAQE;;;;;;AAMG;QACH,IAAA,CAAA,MAAM,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAExB;;;;;;AAMG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAmB;AAEhC;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAgB,QAAQ,oFAAC;AAE9C;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,iBAAiB,+EAAC;AAE3C;;;;;;AAMG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAE1B;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC;AAElC;;;;;;;AAOG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,KAAK,gFAAC;AAEjC;;;;;;;;;;AAUG;QACH,IAAA,CAAA,OAAO,GAAG,MAAM,EAA0B;AAc3C,IAAA;AAZC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAA8B,EAAA;QACzC,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE;QACpD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;IAC5C;+GAzFW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChC3B,ojCAsCA,EAAA,MAAA,EAAA,CAAA,8zEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDXY,WAAW,qaAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAK3D,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,OAAA,EACX,CAAC,WAAW,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAGtD,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ojCAAA,EAAA,MAAA,EAAA,CAAA,8zEAAA,CAAA,EAAA;;;AE9BjD;;AAEG;;;;"}