@tekus/design-system 5.28.0 → 5.29.0

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-dropdown.mjs","sources":["../../../projects/design-system/components/dropdown/src/dropdown.component.ts","../../../projects/design-system/components/dropdown/src/dropdown.component.html","../../../projects/design-system/components/dropdown/tekus-design-system-components-dropdown.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, viewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PopoverModule, Popover } from 'primeng/popover';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { MenuComponent } from '@tekus/design-system/components/menu';\nimport { TooltipComponent, TooltipPosition } from '@tekus/design-system/components/tooltip';\n\n/**\n * @component DropdownComponent\n * @description\n * A dropdown component that acts as a context menu or \"more options\" button.\n * It uses a `tk-button` as a trigger, a PrimeNG `p-popover` for the overlay,\n * and a `tk-menu` for the list of options.\n *\n * @usage\n * ```html\n * <tk-dropdown [model]=\"items\"></tk-dropdown>\n * ```\n */\n@Component({\n  selector: 'tk-dropdown',\n  standalone: true,\n  imports: [CommonModule, PopoverModule, ButtonComponent, MenuComponent, TooltipComponent],\n  templateUrl: './dropdown.component.html',\n  styleUrl: './dropdown.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DropdownComponent {\n  /**\n   * Reference to the PrimeNG Popover component instance.\n   */\n  popover = viewChild<Popover>('op');\n\n  /**\n   * An array of menu items to display.\n   */\n  model = input<MenuItem[]>([]);\n\n  /**\n   * Icon for the trigger button.\n   * @default 'ellipsis-vertical'\n   */\n  icon = input<string>('ellipsis-vertical');\n\n  /**\n   * Size of the trigger button.\n   * @default undefined\n   */\n  size = input<'small' | 'large' | undefined>();\n\n  /**\n   * Optional tooltip text for the trigger button.\n   */\n  tooltip = input<string | undefined>();\n\n  /**\n   * Position of the tooltip.\n   * @default 'top'\n   */\n  tooltipPosition = input<TooltipPosition>('top');\n\n  /**\n   * Toggles the popover visibility.\n   * @param event The event that triggered the toggle.\n   */\n  toggle(event: Event) {\n    this.popover()?.toggle(event);\n  }\n\n  /**\n   * Closes the popover when an item is clicked.\n   */\n  onItemClick() {\n    this.popover()?.hide();\n  }\n}\n","<ng-template #trigger>\n  <tk-button\n    [icon]=\"icon()\"\n    [size]=\"size()\"\n    severity=\"secondary\"\n    variant=\"text\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.space)=\"toggle($event); $event.preventDefault()\"\n  ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n  <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n    <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n  </tk-tooltip>\n} @else {\n  <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n  <tk-menu\n    [model]=\"model()\"\n    (itemClick)=\"onItemClick()\"\n  ></tk-menu>\n</p-popover>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;AAQA;;;;;;;;;;;AAWG;MASU,iBAAiB,CAAA;AAR9B,IAAA,WAAA,GAAA;AASE;;AAEG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,SAAS,CAAU,IAAI,8EAAC;AAElC;;AAEG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAa,EAAE,4EAAC;AAE7B;;;AAGG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,mBAAmB,2EAAC;AAEzC;;;AAGG;QACH,IAAA,CAAA,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAiC;AAE7C;;AAEG;QACH,IAAA,CAAA,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAsB;AAErC;;;AAGG;AACH,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAkB,KAAK,sFAAC;AAgBhD,IAAA;AAdC;;;AAGG;AACH,IAAA,MAAM,CAAC,KAAY,EAAA;QACjB,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;IAC/B;AAEA;;AAEG;IACH,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE;IACxB;8GA/CW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,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,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,IAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5B9B,2sBA0BA,EAAA,MAAA,EAAA,CAAA,kNAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDHY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,OAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,aAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,UAAA,EAAA,SAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,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;;2FAK5E,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,cACX,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAGvE,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2sBAAA,EAAA,MAAA,EAAA,CAAA,kNAAA,CAAA,EAAA;qEAMlB,IAAI,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEhCnC;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-dropdown.mjs","sources":["../../../projects/design-system/components/dropdown/src/dropdown.component.ts","../../../projects/design-system/components/dropdown/src/dropdown.component.html","../../../projects/design-system/components/dropdown/tekus-design-system-components-dropdown.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, viewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PopoverModule, Popover } from 'primeng/popover';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { MenuComponent } from '@tekus/design-system/components/menu';\nimport { TooltipComponent, TooltipPosition } from '@tekus/design-system/components/tooltip';\n\n/**\n * @component DropdownComponent\n * @description\n * A dropdown component that acts as a context menu or \"more options\" button.\n * It uses a `tk-button` as a trigger, a PrimeNG `p-popover` for the overlay,\n * and a `tk-menu` for the list of options.\n *\n * @usage\n * ```html\n * <tk-dropdown [model]=\"items\"></tk-dropdown>\n * ```\n */\n@Component({\n  selector: 'tk-dropdown',\n  standalone: true,\n  imports: [CommonModule, PopoverModule, ButtonComponent, MenuComponent, TooltipComponent],\n  templateUrl: './dropdown.component.html',\n  styleUrl: './dropdown.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DropdownComponent {\n  /**\n   * Reference to the PrimeNG Popover component instance.\n   */\n  popover = viewChild<Popover>('op');\n\n  /**\n   * An array of menu items to display.\n   */\n  model = input<MenuItem[]>([]);\n\n  /**\n   * Icon for the trigger button.\n   * @default 'ellipsis-vertical'\n   */\n  icon = input<string>('ellipsis-vertical');\n\n  /**\n   * Text for the trigger button.\n   * If provided, it will be displayed alongside the icon (if any).\n   */\n  label = input<string | undefined>();\n\n  /**\n   * Position of the icon relative to the label.\n   * @default 'left'\n   */\n  iconPosition = input<'left' | 'right'>('left');\n\n  /**\n   * Size of the trigger button.\n   * @default undefined\n   */\n  size = input<'small' | 'large' | undefined>();\n\n  /**\n   * Optional tooltip text for the trigger button.\n   */\n  tooltip = input<string | undefined>();\n\n  /**\n   * Position of the tooltip.\n   * @default 'top'\n   */\n  tooltipPosition = input<TooltipPosition>('top');\n\n  /**\n   * Toggles the popover visibility.\n   * @param event The event that triggered the toggle.\n   */\n  toggle(event: Event) {\n    this.popover()?.toggle(event);\n  }\n\n  /**\n   * Closes the popover when an item is clicked.\n   */\n  onItemClick() {\n    this.popover()?.hide();\n  }\n}\n","<ng-template #trigger>\n  <tk-button\n    [icon]=\"icon()\"\n    [label]=\"label()\"\n    [size]=\"size()\"\n    [iconPosition]=\"iconPosition()\"\n    severity=\"secondary\"\n    variant=\"text\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.space)=\"toggle($event); $event.preventDefault()\"\n  ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n  <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n    <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n  </tk-tooltip>\n} @else {\n  <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n  <tk-menu\n    [model]=\"model()\"\n    (itemClick)=\"onItemClick()\"\n  ></tk-menu>\n</p-popover>\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-fallback-view.mjs

@@ -162,7 +162,7 @@ class FallbackViewComponent {
         this.linkAction.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: FallbackViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: FallbackViewComponent, isStandalone: true, selector: "tk-fallback-view", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, illustrationAlt: { classPropertyName: "illustrationAlt", publicName: "illustrationAlt", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, linkLabel: { classPropertyName: "linkLabel", publicName: "linkLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "buttonDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonAction: "buttonAction", linkAction: "linkAction" }, ngImport: i0, template: "<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type() === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc()) {\n  <img\n    [src]=\"imageSrc()\"\n    [alt]=\"illustrationAlt() || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title() && type() === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title() }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message()) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message()\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type() === 'content' && (buttonLabel() || linkLabel())) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel()) {\n    <tk-button\n      [label]=\"buttonLabel()\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled()\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel()) {\n    <tk-button\n      [label]=\"linkLabel()\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\n    }\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-gap-m, 1rem);padding:var(--tk-spacing-padding-xl, 1.5rem) var(--tk-spacing-padding-m, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-base-150, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-75, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-gap-m, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-padding-xl, 1.5rem) var(--tk-spacing-padding-m, 1rem);background-color:var(--tk-color-base-surface-0, #ffffff);color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "ngmodule", type: CardModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: FallbackViewComponent, isStandalone: true, selector: "tk-fallback-view", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, illustrationAlt: { classPropertyName: "illustrationAlt", publicName: "illustrationAlt", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, linkLabel: { classPropertyName: "linkLabel", publicName: "linkLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "buttonDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonAction: "buttonAction", linkAction: "linkAction" }, ngImport: i0, template: "<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type() === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc()) {\n  <img\n    [src]=\"imageSrc()\"\n    [alt]=\"illustrationAlt() || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title() && type() === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title() }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message()) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message()\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type() === 'content' && (buttonLabel() || linkLabel())) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel()) {\n    <tk-button\n      [label]=\"buttonLabel()\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled()\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel()) {\n    <tk-button\n      [label]=\"linkLabel()\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\n    }\n  </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-gap-m, 1rem);padding:var(--tk-spacing-padding-xl, 1.5rem) var(--tk-spacing-padding-m, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-base-150, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-75, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-gap-m, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-padding-xl, 1.5rem) var(--tk-spacing-padding-m, 1rem);background-color:var(--tk-color-base-surface-0, #ffffff);color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "ngmodule", type: CardModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: FallbackViewComponent, decorators: [{
             type: Component,

package/fesm2022/tekus-design-system-components-fallback-view.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-fallback-view.mjs","sources":["../../../projects/design-system/components/fallback-view/src/fallback-view.component.ts","../../../projects/design-system/components/fallback-view/src/fallback-view.component.html","../../../projects/design-system/components/fallback-view/tekus-design-system-components-fallback-view.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n  output,\n} from '@angular/core';\n\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CardModule } from 'primeng/card';\n\nexport type FallbackViewType = 'content' | 'section';\n\n/**\n * @component FallbackViewComponent\n * @description\n * A reusable component for displaying fallback or empty states such as\n * \"no results found\", \"error loading data\", or \"content not available\".\n * It provides a consistent structure with support for an image, title,\n * message, and optional action buttons.\n *\n * The component can be used in two ways:\n * 1. **Via Inputs:** Pass data directly through component inputs (`imageSrc`, `title`, `message`, etc.).\n * 2. **Via Content Projection (`ng-content`):** Use your own HTML structure for full customization.\n *\n * @usage\n * ### Basic Usage (via Inputs)\n * ```html\n * <tk-fallback-view\n *   imageSrc=\"assets/img/empty-state.svg\"\n *   title=\"No Items Found\"\n *   message=\"There are currently no items to display. Try adding one.\"\n *   buttonLabel=\"Add New Item\"\n *   linkLabel=\"Learn More\"\n *   (buttonAction)=\"handleAddNewItem()\"\n *   (linkAction)=\"handleLearnMore()\">\n * </tk-fallback-view>\n * ```\n *\n * ### Compact Variant (Section type)\n * ```html\n * <tk-fallback-view\n *   [type]=\"'section'\"\n *   imageSrc=\"assets/img/check.svg\"\n *   message=\"Saved successfully\">\n * </tk-fallback-view>\n * ```\n *\n * ### Advanced Usage (via ng-content)\n * ```html\n * <tk-fallback-view [type]=\"'content'\">\n *   <img image src=\"assets/img/empty-state.svg\" alt=\"Tekus logo\">\n *   <h2 title>Custom Title</h2>\n *   <p message>\n *     This is a <b>custom message</b> with <strong>HTML content</strong>.\n *   </p>\n *   <div actions>\n *     <tk-button\n *       label=\"Primary Action\"\n *       severity=\"primary\"\n *       (click)=\"onPrimaryAction()\">\n *     </tk-button>\n *     <tk-button\n *       label=\"Secondary Action\"\n *       [link]=\"true\"\n *       (click)=\"onSecondaryAction()\">\n *     </tk-button>\n *   </div>\n * </tk-fallback-view>\n * ```\n */\n\n@Component({\n  selector: 'tk-fallback-view',\n  imports: [ButtonComponent, CardModule],\n  templateUrl: './fallback-view.component.html',\n  styleUrl: './fallback-view.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FallbackViewComponent {\n  /**\n   * @property {FallbackViewType} type\n   * @description\n   * Controls the overall type and spacing of the component.\n   * - `'content'`: Standard size.\n   * - `'section'`: A more compact version.\n   *\n   * @default `'content'`\n   */\n  type = input<FallbackViewType>('content');\n\n  /**\n   * @property {string} imageSrc\n   * @description\n   * The URL for the illustrative image to be displayed at the top.\n   *\n   * @default `''`\n   */\n  imageSrc = input<string>('');\n\n  /**\n   * @property {string} illustrationAlt\n   * Descriptive alternative text for the image. Improves accessibility.\n   */\n  illustrationAlt = input<string>('');\n\n  /**\n   * @property {string} title\n   * @description\n   * The main title or heading of the fallback view.\n   *\n   * @default `''`\n   */\n  title = input<string>('');\n\n  /**\n   * @property {string} message\n   * @description\n   * The descriptive text or message displayed below the title.\n   *\n   * @default `''`\n   */\n  message = input<string>('');\n\n  /**\n   * @property {string} buttonLabel\n   * @description\n   * Text for the primary action button. If left empty, the button is not rendered.\n   *\n   * @default `''`\n   */\n  buttonLabel = input<string>('');\n\n  /**\n   * @property {string} linkLabel\n   * @description\n   * Text for the secondary action, which is styled as a link.\n   * If left empty, the link is not rendered.\n   *\n   * @default `''`\n   */\n  linkLabel = input<string>('');\n\n  /**\n   * @property {boolean} buttonDisabled\n   * @description\n   * Controls whether the primary action button is disabled.\n   * When true, the button is visually disabled and cannot be clicked.\n   *\n   * @default false\n   */\n  buttonDisabled = input<boolean>(false);\n\n  /**\n   * @event buttonAction\n   * @description\n   * Emits when the main action button is clicked. Listen to this event\n   * to handle the primary call-to-action.\n   */\n  buttonAction = output<void>();\n\n  /**\n   * @event linkAction\n   * @description\n   * Emits when the link-styled button is clicked. Use for secondary\n   * or alternative actions.\n   */\n  linkAction = output<void>();\n\n  /**\n   * @method onButtonActionClick\n   * @description\n   * Internal handler that emits the `buttonAction` event when the\n   * main button is clicked.\n   */\n  onButtonActionClick(): void {\n    this.buttonAction.emit();\n  }\n\n  /**\n   * @method onLinkActionClick\n   * @description\n   * Internal handler that emits the `linkAction` event when the\n   * link button is clicked.\n   */\n  onLinkActionClick(): void {\n    this.linkAction.emit();\n  }\n}\n","<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type() === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc()) {\n  <img\n    [src]=\"imageSrc()\"\n    [alt]=\"illustrationAlt() || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title() && type() === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title() }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message()) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message()\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type() === 'content' && (buttonLabel() || linkLabel())) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel()) {\n    <tk-button\n      [label]=\"buttonLabel()\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled()\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel()) {\n    <tk-button\n      [label]=\"linkLabel()\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\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-fallback-view.mjs","sources":["../../../projects/design-system/components/fallback-view/src/fallback-view.component.ts","../../../projects/design-system/components/fallback-view/src/fallback-view.component.html","../../../projects/design-system/components/fallback-view/tekus-design-system-components-fallback-view.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n  output,\n} from '@angular/core';\n\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CardModule } from 'primeng/card';\n\nexport type FallbackViewType = 'content' | 'section';\n\n/**\n * @component FallbackViewComponent\n * @description\n * A reusable component for displaying fallback or empty states such as\n * \"no results found\", \"error loading data\", or \"content not available\".\n * It provides a consistent structure with support for an image, title,\n * message, and optional action buttons.\n *\n * The component can be used in two ways:\n * 1. **Via Inputs:** Pass data directly through component inputs (`imageSrc`, `title`, `message`, etc.).\n * 2. **Via Content Projection (`ng-content`):** Use your own HTML structure for full customization.\n *\n * @usage\n * ### Basic Usage (via Inputs)\n * ```html\n * <tk-fallback-view\n *   imageSrc=\"assets/img/empty-state.svg\"\n *   title=\"No Items Found\"\n *   message=\"There are currently no items to display. Try adding one.\"\n *   buttonLabel=\"Add New Item\"\n *   linkLabel=\"Learn More\"\n *   (buttonAction)=\"handleAddNewItem()\"\n *   (linkAction)=\"handleLearnMore()\">\n * </tk-fallback-view>\n * ```\n *\n * ### Compact Variant (Section type)\n * ```html\n * <tk-fallback-view\n *   [type]=\"'section'\"\n *   imageSrc=\"assets/img/check.svg\"\n *   message=\"Saved successfully\">\n * </tk-fallback-view>\n * ```\n *\n * ### Advanced Usage (via ng-content)\n * ```html\n * <tk-fallback-view [type]=\"'content'\">\n *   <img image src=\"assets/img/empty-state.svg\" alt=\"Tekus logo\">\n *   <h2 title>Custom Title</h2>\n *   <p message>\n *     This is a <b>custom message</b> with <strong>HTML content</strong>.\n *   </p>\n *   <div actions>\n *     <tk-button\n *       label=\"Primary Action\"\n *       severity=\"primary\"\n *       (click)=\"onPrimaryAction()\">\n *     </tk-button>\n *     <tk-button\n *       label=\"Secondary Action\"\n *       [link]=\"true\"\n *       (click)=\"onSecondaryAction()\">\n *     </tk-button>\n *   </div>\n * </tk-fallback-view>\n * ```\n */\n\n@Component({\n  selector: 'tk-fallback-view',\n  imports: [ButtonComponent, CardModule],\n  templateUrl: './fallback-view.component.html',\n  styleUrl: './fallback-view.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FallbackViewComponent {\n  /**\n   * @property {FallbackViewType} type\n   * @description\n   * Controls the overall type and spacing of the component.\n   * - `'content'`: Standard size.\n   * - `'section'`: A more compact version.\n   *\n   * @default `'content'`\n   */\n  type = input<FallbackViewType>('content');\n\n  /**\n   * @property {string} imageSrc\n   * @description\n   * The URL for the illustrative image to be displayed at the top.\n   *\n   * @default `''`\n   */\n  imageSrc = input<string>('');\n\n  /**\n   * @property {string} illustrationAlt\n   * Descriptive alternative text for the image. Improves accessibility.\n   */\n  illustrationAlt = input<string>('');\n\n  /**\n   * @property {string} title\n   * @description\n   * The main title or heading of the fallback view.\n   *\n   * @default `''`\n   */\n  title = input<string>('');\n\n  /**\n   * @property {string} message\n   * @description\n   * The descriptive text or message displayed below the title.\n   *\n   * @default `''`\n   */\n  message = input<string>('');\n\n  /**\n   * @property {string} buttonLabel\n   * @description\n   * Text for the primary action button. If left empty, the button is not rendered.\n   *\n   * @default `''`\n   */\n  buttonLabel = input<string>('');\n\n  /**\n   * @property {string} linkLabel\n   * @description\n   * Text for the secondary action, which is styled as a link.\n   * If left empty, the link is not rendered.\n   *\n   * @default `''`\n   */\n  linkLabel = input<string>('');\n\n  /**\n   * @property {boolean} buttonDisabled\n   * @description\n   * Controls whether the primary action button is disabled.\n   * When true, the button is visually disabled and cannot be clicked.\n   *\n   * @default false\n   */\n  buttonDisabled = input<boolean>(false);\n\n  /**\n   * @event buttonAction\n   * @description\n   * Emits when the main action button is clicked. Listen to this event\n   * to handle the primary call-to-action.\n   */\n  buttonAction = output<void>();\n\n  /**\n   * @event linkAction\n   * @description\n   * Emits when the link-styled button is clicked. Use for secondary\n   * or alternative actions.\n   */\n  linkAction = output<void>();\n\n  /**\n   * @method onButtonActionClick\n   * @description\n   * Internal handler that emits the `buttonAction` event when the\n   * main button is clicked.\n   */\n  onButtonActionClick(): void {\n    this.buttonAction.emit();\n  }\n\n  /**\n   * @method onLinkActionClick\n   * @description\n   * Internal handler that emits the `linkAction` event when the\n   * link button is clicked.\n   */\n  onLinkActionClick(): void {\n    this.linkAction.emit();\n  }\n}\n","<div\n  class=\"tk-fallback-view\"\n  [class.tk-fallback-view--section]=\"type() === 'section'\">\n  <ng-content select=\"[image]\"></ng-content>\n  @if (imageSrc()) {\n  <img\n    [src]=\"imageSrc()\"\n    [alt]=\"illustrationAlt() || 'fallback illustration'\"\n    class=\"tk-fallback-view__image\" />\n  }\n\n  <ng-content select=\"[title]\"></ng-content>\n  @if (title() && type() === 'content') {\n  <h2 class=\"tk-fallback-view__title\">{{ title() }}</h2>\n  }\n\n  <ng-content select=\"[message]\"></ng-content>\n  @if (message()) {\n  <p class=\"tk-fallback-view__message\" [innerHTML]=\"message()\"></p>\n  }\n\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (type() === 'content' && (buttonLabel() || linkLabel())) {\n  <div class=\"tk-fallback-view__actions\">\n    @if (buttonLabel()) {\n    <tk-button\n      [label]=\"buttonLabel()\"\n      severity=\"primary\"\n      [disabled]=\"buttonDisabled()\"\n      (clicked)=\"onButtonActionClick()\" />\n    } @if (linkLabel()) {\n    <tk-button\n      [label]=\"linkLabel()\"\n      [link]=\"true\"\n      (clicked)=\"onLinkActionClick()\" />\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-icon.mjs

@@ -1012,6 +1012,19 @@ const gridVerticalIcon = {
     }
 };
 
+const loadingIcons = {
+    'ramp-loading': {
+        name: 'faRampLoading',
+        tags: ['loading', 'status', 'spin', 'ramp', 'kiosk'],
+        source: 'Font awesome',
+        styles: {
+            light: import('@fortawesome/pro-light-svg-icons').then(m => m.faRampLoading),
+            regular: import('@fortawesome/pro-regular-svg-icons').then(m => m.faRampLoading),
+            solid: import('@fortawesome/pro-solid-svg-icons').then(m => m.faRampLoading),
+        },
+    },
+};
+
 /**
  * iconsStylesLight is an array of available light styles for each icon in the IconCatalog.
  * It allows for easy access and iteration over the light styles.
@@ -1082,7 +1095,8 @@ const IconCatalog = {
     ...arrowsRotateIcon,
     ...editIcon,
     ...globePointerIcon,
-    ...gridVerticalIcon
+    ...gridVerticalIcon,
+    ...loadingIcons
 };
 
 class IconComponent {