@tekus/design-system 5.41.0 → 5.42.1

package/fesm2022/tekus-design-system-components-link-group.mjs

@@ -0,0 +1,74 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { IconComponent } from '@tekus/design-system/components/icon';
+import { TooltipComponent } from '@tekus/design-system/components/tooltip';
+
+/** Maximum number of links `tk-link-group` renders. Extra items are ignored. */
+const TK_LINK_GROUP_MAX_LINKS = 2;
+
+/**
+ * @component LinkGroupComponent
+ * @description
+ * Renders one or two links separated by "/". Each link has a label plus a
+ * `url` (`<a href>`) or a `routerLink` (in-app route, no reload), an `action`
+ * (rendered as a button) or both; with none of them it is plain text,
+ * and an optional prefix icon with its own color and tooltip.
+ *
+ * Responsive in at most 2 lines: both links share a line when they fit;
+ * otherwise the second one moves to the next line, keeping the "/" at the end
+ * of the first. A label that does not fit its own line ends with an ellipsis
+ * and shows its full text in a tooltip.
+ *
+ * @usage
+ * ```html
+ * <tk-link-group [links]="[
+ *   { label: 'Promociones septiembre', routerLink: ['/playlists', 12], prefixIcon: 'video' },
+ *   { label: 'Música ambiente', routerLink: ['/audiolists', 7], prefixIcon: 'list-music' }
+ * ]" />
+ * ```
+ */
+class LinkGroupComponent {
+    constructor() {
+        /**
+         * @property {TkLinkItem[]} links
+         * @description
+         * Links to render. Only the first two are shown.
+         *
+         * @required
+         */
+        this.links = input.required(...(ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []));
+        /**
+         * @computed visibleLinks
+         * @description The first {@link TK_LINK_GROUP_MAX_LINKS} links.
+         */
+        this.visibleLinks = computed(() => this.links().slice(0, TK_LINK_GROUP_MAX_LINKS), ...(ngDevMode ? [{ debugName: "visibleLinks" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * @method onLinkClick
+     * @description
+     * Runs the link's `action`, if any. A link with `url` still navigates.
+     * Does nothing for a disabled link.
+     * @param link {TkLinkItem} - The clicked link.
+     */
+    onLinkClick(link) {
+        if (link.disabled) {
+            return;
+        }
+        link.action?.();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LinkGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LinkGroupComponent, isStandalone: true, selector: "tk-link-group", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"tk-link-group\">\n  @for (link of visibleLinks(); track $index) {\n  @let isText = !link.url && !link.routerLink && !link.action;\n  <span class=\"tk-link-group__item\" [class.tk-link-group__item--text]=\"isText\">\n    @if (link.prefixIcon) {\n    @if (link.iconTooltip) {\n    <tk-tooltip class=\"tk-link-group__icon-tooltip\" [content]=\"link.iconTooltip\">\n      <span class=\"tk-link-group__icon\">\n        <tk-icon aria-hidden=\"true\" [icon]=\"link.prefixIcon\" [color]=\"link.prefixIconSeverity\" />\n        <span class=\"tk-link-group__sr-only\">{{ link.iconTooltip }}</span>\n      </span>\n    </tk-tooltip>\n    } @else {\n    <span class=\"tk-link-group__icon\" aria-hidden=\"true\">\n      <tk-icon [icon]=\"link.prefixIcon\" [color]=\"link.prefixIconSeverity\" />\n    </span>\n    }\n    }\n\n    @if (link.routerLink && !link.disabled) {\n    <a\n      class=\"tk-link-group__link\"\n      [routerLink]=\"link.routerLink\"\n      [target]=\"link.target\"\n      [attr.rel]=\"link.target === '_blank' ? 'noopener noreferrer' : null\"\n      (click)=\"onLinkClick(link)\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </a>\n    } @else if (link.url || link.routerLink) {\n    <!-- Disabled: no href (not focusable, does not navigate), still named as a link -->\n    <a\n      class=\"tk-link-group__link\"\n      [class.tk-link-group__link--disabled]=\"link.disabled\"\n      [attr.href]=\"link.disabled ? null : link.url\"\n      [attr.target]=\"link.disabled ? null : (link.target ?? null)\"\n      [attr.rel]=\"!link.disabled && link.target === '_blank' ? 'noopener noreferrer' : null\"\n      [attr.role]=\"link.disabled ? 'link' : null\"\n      [attr.aria-disabled]=\"link.disabled ? 'true' : null\"\n      (click)=\"onLinkClick(link)\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </a>\n    } @else if (link.action) {\n    <button\n      type=\"button\"\n      class=\"tk-link-group__link\"\n      [class.tk-link-group__link--disabled]=\"link.disabled\"\n      [disabled]=\"!!link.disabled\"\n      (click)=\"onLinkClick(link)\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </button>\n    } @else {\n    <span class=\"tk-link-group__text\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </span>\n    }\n\n    @if (!$last) {\n    <span class=\"tk-link-group__separator\" aria-hidden=\"true\">/</span>\n    }\n  </span>\n  }\n</div>\n\n<ng-template #label let-text>\n  <tk-tooltip class=\"tk-link-group__label\" [content]=\"text\" [lineClamp]=\"1\">{{ text }}</tk-tooltip>\n</ng-template>\n", styles: [":host{display:block;min-width:0}.tk-link-group{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--tk-spacing-gap-xs, .25rem);row-gap:var(--tk-spacing-gap-xs, .25rem);min-width:0}.tk-link-group__item{display:inline-flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);min-width:0;max-width:100%}.tk-link-group__icon,.tk-link-group__icon-tooltip,.tk-link-group__separator{flex-shrink:0}.tk-link-group__icon{position:relative;display:inline-flex;align-items:center;color:var(--tk-color-base-primary-500, #16006f)}.tk-link-group__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tk-link-group__link{display:inline-flex;min-width:0;max-width:100%;padding:0;border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:transparent;color:var(--tk-color-text-default, #191a1b);font:inherit;text-align:left;text-decoration:underline;cursor:pointer}.tk-link-group__link:hover{color:var(--tk-color-text-subtle, #5d5d5e)}.tk-link-group__link:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:2px}.tk-link-group__link--disabled,.tk-link-group__link--disabled:hover{color:var(--tk-color-text-muted, #8a8a8b);text-decoration:none;cursor:not-allowed}.tk-link-group__label{min-width:0}.tk-link-group__text{display:inline-flex;min-width:0;max-width:100%;color:var(--tk-color-text-default, #191a1b)}.tk-link-group__item--text .tk-link-group__icon{color:var(--tk-color-text-default, #191a1b)}.tk-link-group__separator{color:var(--tk-color-text-muted, #8a8a8b)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position", "lineClamp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LinkGroupComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-link-group', imports: [IconComponent, NgTemplateOutlet, RouterLink, TooltipComponent], template: "<div class=\"tk-link-group\">\n  @for (link of visibleLinks(); track $index) {\n  @let isText = !link.url && !link.routerLink && !link.action;\n  <span class=\"tk-link-group__item\" [class.tk-link-group__item--text]=\"isText\">\n    @if (link.prefixIcon) {\n    @if (link.iconTooltip) {\n    <tk-tooltip class=\"tk-link-group__icon-tooltip\" [content]=\"link.iconTooltip\">\n      <span class=\"tk-link-group__icon\">\n        <tk-icon aria-hidden=\"true\" [icon]=\"link.prefixIcon\" [color]=\"link.prefixIconSeverity\" />\n        <span class=\"tk-link-group__sr-only\">{{ link.iconTooltip }}</span>\n      </span>\n    </tk-tooltip>\n    } @else {\n    <span class=\"tk-link-group__icon\" aria-hidden=\"true\">\n      <tk-icon [icon]=\"link.prefixIcon\" [color]=\"link.prefixIconSeverity\" />\n    </span>\n    }\n    }\n\n    @if (link.routerLink && !link.disabled) {\n    <a\n      class=\"tk-link-group__link\"\n      [routerLink]=\"link.routerLink\"\n      [target]=\"link.target\"\n      [attr.rel]=\"link.target === '_blank' ? 'noopener noreferrer' : null\"\n      (click)=\"onLinkClick(link)\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </a>\n    } @else if (link.url || link.routerLink) {\n    <!-- Disabled: no href (not focusable, does not navigate), still named as a link -->\n    <a\n      class=\"tk-link-group__link\"\n      [class.tk-link-group__link--disabled]=\"link.disabled\"\n      [attr.href]=\"link.disabled ? null : link.url\"\n      [attr.target]=\"link.disabled ? null : (link.target ?? null)\"\n      [attr.rel]=\"!link.disabled && link.target === '_blank' ? 'noopener noreferrer' : null\"\n      [attr.role]=\"link.disabled ? 'link' : null\"\n      [attr.aria-disabled]=\"link.disabled ? 'true' : null\"\n      (click)=\"onLinkClick(link)\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </a>\n    } @else if (link.action) {\n    <button\n      type=\"button\"\n      class=\"tk-link-group__link\"\n      [class.tk-link-group__link--disabled]=\"link.disabled\"\n      [disabled]=\"!!link.disabled\"\n      (click)=\"onLinkClick(link)\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </button>\n    } @else {\n    <span class=\"tk-link-group__text\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </span>\n    }\n\n    @if (!$last) {\n    <span class=\"tk-link-group__separator\" aria-hidden=\"true\">/</span>\n    }\n  </span>\n  }\n</div>\n\n<ng-template #label let-text>\n  <tk-tooltip class=\"tk-link-group__label\" [content]=\"text\" [lineClamp]=\"1\">{{ text }}</tk-tooltip>\n</ng-template>\n", styles: [":host{display:block;min-width:0}.tk-link-group{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--tk-spacing-gap-xs, .25rem);row-gap:var(--tk-spacing-gap-xs, .25rem);min-width:0}.tk-link-group__item{display:inline-flex;align-items:center;gap:var(--tk-spacing-gap-xs, .25rem);min-width:0;max-width:100%}.tk-link-group__icon,.tk-link-group__icon-tooltip,.tk-link-group__separator{flex-shrink:0}.tk-link-group__icon{position:relative;display:inline-flex;align-items:center;color:var(--tk-color-base-primary-500, #16006f)}.tk-link-group__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tk-link-group__link{display:inline-flex;min-width:0;max-width:100%;padding:0;border:none;border-radius:var(--tk-borderRadius-xs, .25rem);background:transparent;color:var(--tk-color-text-default, #191a1b);font:inherit;text-align:left;text-decoration:underline;cursor:pointer}.tk-link-group__link:hover{color:var(--tk-color-text-subtle, #5d5d5e)}.tk-link-group__link:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:2px}.tk-link-group__link--disabled,.tk-link-group__link--disabled:hover{color:var(--tk-color-text-muted, #8a8a8b);text-decoration:none;cursor:not-allowed}.tk-link-group__label{min-width:0}.tk-link-group__text{display:inline-flex;min-width:0;max-width:100%;color:var(--tk-color-text-default, #191a1b)}.tk-link-group__item--text .tk-link-group__icon{color:var(--tk-color-text-default, #191a1b)}.tk-link-group__separator{color:var(--tk-color-text-muted, #8a8a8b)}\n"] }]
+        }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LinkGroupComponent, TK_LINK_GROUP_MAX_LINKS };
+//# sourceMappingURL=tekus-design-system-components-link-group.mjs.map

package/fesm2022/tekus-design-system-components-link-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-link-group.mjs","sources":["../../../projects/design-system/components/link-group/src/link-group.types.ts","../../../projects/design-system/components/link-group/src/link-group.component.ts","../../../projects/design-system/components/link-group/src/link-group.component.html","../../../projects/design-system/components/link-group/tekus-design-system-components-link-group.ts"],"sourcesContent":["import { IconColors } from '@tekus/design-system/components/icon';\n\n/** Maximum number of links `tk-link-group` renders. Extra items are ignored. */\nexport const TK_LINK_GROUP_MAX_LINKS = 2;\n\n/**\n * Optional icon rendered before the label. `prefixIconSeverity` and\n * `iconTooltip` are only allowed together with `prefixIcon`.\n */\ntype TkLinkIcon =\n  | {\n      /** Icon name from the design system's IconCatalog (same as `tk-icon`). */\n      prefixIcon: string;\n      /** Color of the icon. Falls back to the link color. */\n      prefixIconSeverity?: IconColors;\n      /** Tooltip shown on hover of the icon. Also its accessible name. */\n      iconTooltip?: string;\n    }\n  | {\n      prefixIcon?: never;\n      prefixIconSeverity?: never;\n      iconTooltip?: never;\n    };\n\n/**\n * What the item does: navigate (`url` or `routerLink`), run a callback\n * (`action`), or navigate and run the callback. `url` and `routerLink` are\n * mutually exclusive. With none of them the item is plain text.\n */\ntype TkLinkTarget =\n  | {\n      /** Destination outside the Angular router (full page load). Renders an `<a href>`. */\n      url: string;\n      routerLink?: never;\n      /** Where to open the link. `_blank` adds `rel=\"noopener noreferrer\"`. */\n      target?: '_self' | '_blank';\n      /** Also called on click, e.g. for tracking. Navigation still happens. */\n      action?: () => void;\n    }\n  | {\n      url?: never;\n      /** In-app route, navigated with Angular's `RouterLink` (no page reload). Requires the router. */\n      routerLink: string | readonly unknown[];\n      /** Where to open the link. `_blank` adds `rel=\"noopener noreferrer\"`. */\n      target?: '_self' | '_blank';\n      /** Also called on click, e.g. for tracking. Navigation still happens. */\n      action?: () => void;\n    }\n  | {\n      url?: never;\n      routerLink?: never;\n      target?: never;\n      /** Called on click. The link renders as a `<button type=\"button\">`. */\n      action: () => void;\n    }\n  | {\n      /** Plain text item (e.g. \"Sin lista\"): not a link, not focusable. */\n      url?: never;\n      routerLink?: never;\n      target?: never;\n      action?: never;\n    };\n\n/**\n * An item rendered by `tk-link-group`: a label plus a `url` or `routerLink`,\n * an `action`, or both (or none, for plain text), and an optional prefix icon\n * with its own color and tooltip.\n */\nexport type TkLinkItem = {\n  /** Visible text. Truncated with an ellipsis (and a tooltip) when it does not fit. */\n  label: string;\n  /**\n   * Shows the link but does not navigate nor run `action`, and takes it out of\n   * the tab order. The icon and its tooltip stay available (e.g. to explain why).\n   */\n  disabled?: boolean;\n} & TkLinkIcon &\n  TkLinkTarget;\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\nimport { TK_LINK_GROUP_MAX_LINKS, TkLinkItem } from './link-group.types';\n\n/**\n * @component LinkGroupComponent\n * @description\n * Renders one or two links separated by \"/\". Each link has a label plus a\n * `url` (`<a href>`) or a `routerLink` (in-app route, no reload), an `action`\n * (rendered as a button) or both; with none of them it is plain text,\n * and an optional prefix icon with its own color and tooltip.\n *\n * Responsive in at most 2 lines: both links share a line when they fit;\n * otherwise the second one moves to the next line, keeping the \"/\" at the end\n * of the first. A label that does not fit its own line ends with an ellipsis\n * and shows its full text in a tooltip.\n *\n * @usage\n * ```html\n * <tk-link-group [links]=\"[\n *   { label: 'Promociones septiembre', routerLink: ['/playlists', 12], prefixIcon: 'video' },\n *   { label: 'Música ambiente', routerLink: ['/audiolists', 7], prefixIcon: 'list-music' }\n * ]\" />\n * ```\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-link-group',\n  imports: [IconComponent, NgTemplateOutlet, RouterLink, TooltipComponent],\n  templateUrl: './link-group.component.html',\n  styleUrl: './link-group.component.scss',\n})\nexport class LinkGroupComponent {\n  /**\n   * @property {TkLinkItem[]} links\n   * @description\n   * Links to render. Only the first two are shown.\n   *\n   * @required\n   */\n  readonly links = input.required<TkLinkItem[]>();\n\n  /**\n   * @computed visibleLinks\n   * @description The first {@link TK_LINK_GROUP_MAX_LINKS} links.\n   */\n  readonly visibleLinks = computed(() =>\n    this.links().slice(0, TK_LINK_GROUP_MAX_LINKS)\n  );\n\n  /**\n   * @method onLinkClick\n   * @description\n   * Runs the link's `action`, if any. A link with `url` still navigates.\n   * Does nothing for a disabled link.\n   * @param link {TkLinkItem} - The clicked link.\n   */\n  onLinkClick(link: TkLinkItem): void {\n    if (link.disabled) {\n      return;\n    }\n    link.action?.();\n  }\n}\n","<div class=\"tk-link-group\">\n  @for (link of visibleLinks(); track $index) {\n  @let isText = !link.url && !link.routerLink && !link.action;\n  <span class=\"tk-link-group__item\" [class.tk-link-group__item--text]=\"isText\">\n    @if (link.prefixIcon) {\n    @if (link.iconTooltip) {\n    <tk-tooltip class=\"tk-link-group__icon-tooltip\" [content]=\"link.iconTooltip\">\n      <span class=\"tk-link-group__icon\">\n        <tk-icon aria-hidden=\"true\" [icon]=\"link.prefixIcon\" [color]=\"link.prefixIconSeverity\" />\n        <span class=\"tk-link-group__sr-only\">{{ link.iconTooltip }}</span>\n      </span>\n    </tk-tooltip>\n    } @else {\n    <span class=\"tk-link-group__icon\" aria-hidden=\"true\">\n      <tk-icon [icon]=\"link.prefixIcon\" [color]=\"link.prefixIconSeverity\" />\n    </span>\n    }\n    }\n\n    @if (link.routerLink && !link.disabled) {\n    <a\n      class=\"tk-link-group__link\"\n      [routerLink]=\"link.routerLink\"\n      [target]=\"link.target\"\n      [attr.rel]=\"link.target === '_blank' ? 'noopener noreferrer' : null\"\n      (click)=\"onLinkClick(link)\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </a>\n    } @else if (link.url || link.routerLink) {\n    <!-- Disabled: no href (not focusable, does not navigate), still named as a link -->\n    <a\n      class=\"tk-link-group__link\"\n      [class.tk-link-group__link--disabled]=\"link.disabled\"\n      [attr.href]=\"link.disabled ? null : link.url\"\n      [attr.target]=\"link.disabled ? null : (link.target ?? null)\"\n      [attr.rel]=\"!link.disabled && link.target === '_blank' ? 'noopener noreferrer' : null\"\n      [attr.role]=\"link.disabled ? 'link' : null\"\n      [attr.aria-disabled]=\"link.disabled ? 'true' : null\"\n      (click)=\"onLinkClick(link)\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </a>\n    } @else if (link.action) {\n    <button\n      type=\"button\"\n      class=\"tk-link-group__link\"\n      [class.tk-link-group__link--disabled]=\"link.disabled\"\n      [disabled]=\"!!link.disabled\"\n      (click)=\"onLinkClick(link)\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </button>\n    } @else {\n    <span class=\"tk-link-group__text\">\n      <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: link.label }\" />\n    </span>\n    }\n\n    @if (!$last) {\n    <span class=\"tk-link-group__separator\" aria-hidden=\"true\">/</span>\n    }\n  </span>\n  }\n</div>\n\n<ng-template #label let-text>\n  <tk-tooltip class=\"tk-link-group__label\" [content]=\"text\" [lineClamp]=\"1\">{{ text }}</tk-tooltip>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAEA;AACO,MAAM,uBAAuB,GAAG;;ACSvC;;;;;;;;;;;;;;;;;;;;AAoBG;MAQU,kBAAkB,CAAA;AAP/B,IAAA,WAAA,GAAA;AAQE;;;;;;AAMG;AACM,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAgB;AAE/C;;;AAGG;AACM,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MAC/B,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,uBAAuB,CAAC,mFAC/C;AAeF,IAAA;AAbC;;;;;;AAMG;AACH,IAAA,WAAW,CAAC,IAAgB,EAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB;QACF;AACA,QAAA,IAAI,CAAC,MAAM,IAAI;IACjB;+GA9BW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,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,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxC/B,ovFAkEA,EAAA,MAAA,EAAA,CAAA,0jDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED9BY,aAAa,gHAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,UAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAI5D,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,eAAe,EAAA,OAAA,EAChB,CAAC,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,ovFAAA,EAAA,MAAA,EAAA,CAAA,0jDAAA,CAAA,EAAA;;;AEpC1E;;AAEG;;;;"}

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

@@ -111,7 +111,7 @@ 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%;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 }); }
+    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", "lineClamp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,

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":"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"}

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

@@ -0,0 +1,79 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
+
+/**
+ * @component SkeletonComponent
+ * @description
+ * Placeholder shown while content loads, wrapping PrimeNG's `p-skeleton`
+ * with its wave animation (disabled when the user prefers reduced motion).
+ *
+ * Decorative by default. Set `ariaLabel` when the skeleton is the only sign
+ * that something is loading: it is rendered as visually hidden text, read by
+ * screen readers when they reach the skeleton. It is not a live region, so
+ * many skeletons at once do not flood the screen reader.
+ *
+ * @usage
+ * ```html
+ * <tk-skeleton width="40px" height="40px" ariaLabel="Cargando imagen" />
+ * ```
+ */
+class SkeletonComponent {
+    constructor() {
+        /**
+         * @property {string} width
+         * @description Width of the placeholder (any CSS length).
+         * @default '100%'
+         */
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {string} height
+         * @description Height of the placeholder (any CSS length).
+         * @default '1rem'
+         */
+        this.height = input('1rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {SkeletonShape} shape
+         * @description `circle` uses `size` for both dimensions when it is set.
+         * @default 'rectangle'
+         */
+        this.shape = input('rectangle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {string | undefined} size
+         * @description Width and height at once (e.g. for circles). Overrides both.
+         */
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {string | undefined} borderRadius
+         * @description Corner radius. Defaults to the theme's skeleton radius.
+         */
+        this.borderRadius = input(...(ngDevMode ? [undefined, { debugName: "borderRadius" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {SkeletonAnimation} animation
+         * @description `none` renders a static placeholder.
+         * @default 'wave'
+         */
+        this.animation = input('wave', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {string | undefined} ariaLabel
+         * @description
+         * Loading message for screen readers, rendered as visually hidden text.
+         * Without it the skeleton is decorative.
+         */
+        this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SkeletonComponent, isStandalone: true, selector: "tk-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-skeleton\n  [shape]=\"shape()\"\n  [width]=\"width()\"\n  [height]=\"height()\"\n  [size]=\"size()\"\n  [borderRadius]=\"borderRadius()\"\n  [animation]=\"animation()\" />\n@if (ariaLabel()) {\n<span class=\"tk-skeleton__sr-only\">{{ ariaLabel() }}</span>\n}\n", styles: [":host{position:relative;display:block;line-height:0}.tk-skeleton__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){:host ::ng-deep .p-skeleton:after{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-skeleton', imports: [SkeletonModule], template: "<p-skeleton\n  [shape]=\"shape()\"\n  [width]=\"width()\"\n  [height]=\"height()\"\n  [size]=\"size()\"\n  [borderRadius]=\"borderRadius()\"\n  [animation]=\"animation()\" />\n@if (ariaLabel()) {\n<span class=\"tk-skeleton__sr-only\">{{ ariaLabel() }}</span>\n}\n", styles: [":host{position:relative;display:block;line-height:0}.tk-skeleton__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){:host ::ng-deep .p-skeleton:after{animation:none}}\n"] }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkeletonComponent };
+//# sourceMappingURL=tekus-design-system-components-skeleton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-skeleton.mjs","sources":["../../../projects/design-system/components/skeleton/src/skeleton.component.ts","../../../projects/design-system/components/skeleton/src/skeleton.component.html","../../../projects/design-system/components/skeleton/tekus-design-system-components-skeleton.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SkeletonModule } from 'primeng/skeleton';\n\nexport type SkeletonShape = 'rectangle' | 'circle';\nexport type SkeletonAnimation = 'wave' | 'none';\n\n/**\n * @component SkeletonComponent\n * @description\n * Placeholder shown while content loads, wrapping PrimeNG's `p-skeleton`\n * with its wave animation (disabled when the user prefers reduced motion).\n *\n * Decorative by default. Set `ariaLabel` when the skeleton is the only sign\n * that something is loading: it is rendered as visually hidden text, read by\n * screen readers when they reach the skeleton. It is not a live region, so\n * many skeletons at once do not flood the screen reader.\n *\n * @usage\n * ```html\n * <tk-skeleton width=\"40px\" height=\"40px\" ariaLabel=\"Cargando imagen\" />\n * ```\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-skeleton',\n  imports: [SkeletonModule],\n  templateUrl: './skeleton.component.html',\n  styleUrl: './skeleton.component.scss',\n})\nexport class SkeletonComponent {\n  /**\n   * @property {string} width\n   * @description Width of the placeholder (any CSS length).\n   * @default '100%'\n   */\n  readonly width = input<string>('100%');\n\n  /**\n   * @property {string} height\n   * @description Height of the placeholder (any CSS length).\n   * @default '1rem'\n   */\n  readonly height = input<string>('1rem');\n\n  /**\n   * @property {SkeletonShape} shape\n   * @description `circle` uses `size` for both dimensions when it is set.\n   * @default 'rectangle'\n   */\n  readonly shape = input<SkeletonShape>('rectangle');\n\n  /**\n   * @property {string | undefined} size\n   * @description Width and height at once (e.g. for circles). Overrides both.\n   */\n  readonly size = input<string>();\n\n  /**\n   * @property {string | undefined} borderRadius\n   * @description Corner radius. Defaults to the theme's skeleton radius.\n   */\n  readonly borderRadius = input<string>();\n\n  /**\n   * @property {SkeletonAnimation} animation\n   * @description `none` renders a static placeholder.\n   * @default 'wave'\n   */\n  readonly animation = input<SkeletonAnimation>('wave');\n\n  /**\n   * @property {string | undefined} ariaLabel\n   * @description\n   * Loading message for screen readers, rendered as visually hidden text.\n   * Without it the skeleton is decorative.\n   */\n  readonly ariaLabel = input<string>();\n}\n","<p-skeleton\n  [shape]=\"shape()\"\n  [width]=\"width()\"\n  [height]=\"height()\"\n  [size]=\"size()\"\n  [borderRadius]=\"borderRadius()\"\n  [animation]=\"animation()\" />\n@if (ariaLabel()) {\n<span class=\"tk-skeleton__sr-only\">{{ ariaLabel() }}</span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}