npm - @tekus/design-system - Versions diffs - 5.26.0 → 5.27.0 - Mend

@tekus/design-system 5.26.0 → 5.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/fesm2022/tekus-design-system-components-card.mjs CHANGED Viewed

@@ -102,7 +102,7 @@ class CardComponent {
         return 'primary';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: CardComponent, isStandalone: true, selector: "tk-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, titleIcon: { classPropertyName: "titleIcon", publicName: "titleIcon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, showImage: { classPropertyName: "showImage", publicName: "showImage", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: true, isRequired: false, transformFunction: null }, secondaryBadgeText: { classPropertyName: "secondaryBadgeText", publicName: "secondaryBadgeText", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, infoElements: { classPropertyName: "infoElements", publicName: "infoElements", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || actions().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Visible Actions (up to 3) -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Overflow Menu (> 3 actions) -->\n        @if (hasOverflowActions()) {\n          <div class=\"tk-card-overflow\">\n            <p-menu #menu [model]=\"menuItems()\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n            <tk-button \n              icon=\"ellipsis-vertical\" \n              severity=\"secondary\" \n              variant=\"text\" \n              size=\"small\"\n              (click)=\"menu.toggle($event)\"\n              (keydown.enter)=\"menu.toggle($event)\"\n              (keydown.space)=\"menu.toggle($event); $event.preventDefault()\">\n            </tk-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\">\n        @if (titleIcon()) {\n          <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n        }\n        {{ title() }}\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tk-card{background-color:var(--tk-color-base-surface-0);border:1px solid var(--tk-color-base-surface-200);border-radius:var(--tk-borderRadius-m);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%;box-shadow:0 1px 3px rgba(var(--tk-color-base-surface-1000),.05)}.tk-card.tk-card-selectable:hover{border-color:var(--tk-color-base-primary-300);box-shadow:0 4px 12px rgba(var(--tk-color-base-surface-1000),.08);transform:translateY(-2px)}.tk-card.tk-card-selected{border-color:var(--tk-color-base-primary-500);background-color:var(--tk-color-base-sky-100)}.tk-card .tk-card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-paddingX-s);min-height:var(--tk-spacing-base-300);z-index:2}.tk-card .tk-card-header .tk-card-header-left{display:flex;align-items:center;gap:var(--tk-spacing-base-100)}.tk-card .tk-card-header .tk-card-metadata{display:flex;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-header .tk-card-metadata tk-tag ::ng-deep .p-tag{background-color:var(--tk-color-base-surface-100)!important;color:var(--tk-color-text-default)!important;font-weight:500}.tk-card .tk-card-header .tk-card-metadata .tk-card-metadata-secondary{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-subtle);font-weight:400}.tk-card .tk-card-header .tk-card-actions{display:flex;align-items:center;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-image-container{background-color:var(--tk-color-base-surface-100);display:flex;justify-content:center;align-items:center;width:100%;position:relative}.tk-card .tk-card-image-container .tk-card-image{width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat}.tk-card .tk-card-image-container .tk-card-image-placeholder{color:var(--tk-color-base-surface-400);display:flex;justify-content:center;align-items:center;width:100%;height:100%}.tk-card .tk-card-image-container .tk-card-image-placeholder tk-icon{font-size:3rem;opacity:.5}.tk-card .tk-card-content{padding:var(--tk-spacing-paddingX-m);display:flex;flex-direction:column;gap:var(--tk-spacing-gap-s);flex:1}.tk-card .tk-card-content .tk-card-body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-content .tk-card-title{margin:0;font-size:var(--tk-font-size-paragraph-m);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);display:flex;align-items:center;gap:var(--tk-spacing-base-50);line-height:normal}.tk-card .tk-card-content .tk-card-description{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-subtle);line-height:1.5}.tk-card .tk-card-content .tk-card-info-elements{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100);margin-top:auto}.tk-card .tk-card-content .tk-card-info-progress{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-content .tk-card-info-progress .tk-card-info-progress-label{font-size:var(--tk-font-size-legal-m);font-weight:600;color:var(--tk-color-text-default);min-width:fit-content}.tk-card .tk-card-content .tk-card-info-progress tk-progress-bar{flex:1}.tk-card .tk-card-content .tk-card-info-text{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-default);line-height:normal}.tk-card.tk-card-horizontal{flex-direction:row;min-height:11.25rem;display:grid;grid-template-columns:11.25rem 1fr;grid-template-rows:auto 1fr}.tk-card.tk-card-horizontal.tk-card-no-image{grid-template-columns:1fr;min-height:auto}.tk-card.tk-card-horizontal .tk-card-image-container{grid-row:1/span 2;grid-column:1;width:11.25rem;min-width:11.25rem;height:100%;border-right:1px solid var(--tk-color-base-surface-100)}.tk-card.tk-card-horizontal .tk-card-header{grid-column:2;grid-row:1}.tk-card.tk-card-horizontal .tk-card-content{grid-column:2;grid-row:2;margin-top:0}.tk-card:not(.tk-card-horizontal) .tk-card-image-container{height:13.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: ProgressBarComponent, selector: "tk-progress-bar", inputs: ["value", "showValue", "size"] }, { kind: "component", type: StatusBarComponent, selector: "tk-status-bar", inputs: ["label", "severity", "size", "barLabel"] }, { 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.3", type: CardComponent, isStandalone: true, selector: "tk-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, titleIcon: { classPropertyName: "titleIcon", publicName: "titleIcon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, showImage: { classPropertyName: "showImage", publicName: "showImage", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: true, isRequired: false, transformFunction: null }, secondaryBadgeText: { classPropertyName: "secondaryBadgeText", publicName: "secondaryBadgeText", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, infoElements: { classPropertyName: "infoElements", publicName: "infoElements", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || actions().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Visible Actions (up to 3) -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Overflow Menu (> 3 actions) -->\n        @if (hasOverflowActions()) {\n          <div class=\"tk-card-overflow\">\n            <p-menu #menu [model]=\"menuItems()\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n            <tk-button \n              icon=\"ellipsis-vertical\" \n              severity=\"secondary\" \n              variant=\"text\" \n              size=\"small\"\n              (click)=\"menu.toggle($event)\"\n              (keydown.enter)=\"menu.toggle($event)\"\n              (keydown.space)=\"menu.toggle($event); $event.preventDefault()\">\n            </tk-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\">\n        @if (titleIcon()) {\n          <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n        }\n        {{ title() }}\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tk-card{background-color:var(--tk-color-base-surface-0);border:1px solid var(--tk-color-base-surface-200);border-radius:var(--tk-borderRadius-m);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%;box-shadow:0 1px 3px rgba(var(--tk-color-base-surface-1000),.05)}.tk-card.tk-card-selectable:hover{border-color:var(--tk-color-base-primary-300);box-shadow:0 4px 12px rgba(var(--tk-color-base-surface-1000),.08);transform:translateY(-2px)}.tk-card.tk-card-selected{border-color:var(--tk-color-base-primary-500);background-color:var(--tk-color-base-sky-100)}.tk-card .tk-card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-padding-s);min-height:var(--tk-spacing-base-300);z-index:2}.tk-card .tk-card-header .tk-card-header-left{display:flex;align-items:center;gap:var(--tk-spacing-base-100)}.tk-card .tk-card-header .tk-card-metadata{display:flex;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-header .tk-card-metadata tk-tag ::ng-deep .p-tag{background-color:var(--tk-color-base-surface-100)!important;color:var(--tk-color-text-default)!important;font-weight:500}.tk-card .tk-card-header .tk-card-metadata .tk-card-metadata-secondary{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-subtle);font-weight:400}.tk-card .tk-card-header .tk-card-actions{display:flex;align-items:center;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-image-container{background-color:var(--tk-color-base-surface-100);display:flex;justify-content:center;align-items:center;width:100%;position:relative}.tk-card .tk-card-image-container .tk-card-image{width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat}.tk-card .tk-card-image-container .tk-card-image-placeholder{color:var(--tk-color-base-surface-400);display:flex;justify-content:center;align-items:center;width:100%;height:100%}.tk-card .tk-card-image-container .tk-card-image-placeholder tk-icon{font-size:3rem;opacity:.5}.tk-card .tk-card-content{padding:var(--tk-spacing-padding-m);display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs);flex:1}.tk-card .tk-card-content .tk-card-body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-content .tk-card-title{margin:0;font-size:var(--tk-font-size-paragraph-m);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);display:flex;align-items:center;gap:var(--tk-spacing-base-50);line-height:normal}.tk-card .tk-card-content .tk-card-description{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-subtle);line-height:1.5}.tk-card .tk-card-content .tk-card-info-elements{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100);margin-top:auto}.tk-card .tk-card-content .tk-card-info-progress{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-content .tk-card-info-progress .tk-card-info-progress-label{font-size:var(--tk-font-size-legal-m);font-weight:600;color:var(--tk-color-text-default);min-width:fit-content}.tk-card .tk-card-content .tk-card-info-progress tk-progress-bar{flex:1}.tk-card .tk-card-content .tk-card-info-text{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-default);line-height:normal}.tk-card.tk-card-horizontal{flex-direction:row;min-height:11.25rem;display:grid;grid-template-columns:11.25rem 1fr;grid-template-rows:auto 1fr}.tk-card.tk-card-horizontal.tk-card-no-image{grid-template-columns:1fr;min-height:auto}.tk-card.tk-card-horizontal .tk-card-image-container{grid-row:1/span 2;grid-column:1;width:11.25rem;min-width:11.25rem;height:100%;border-right:1px solid var(--tk-color-base-surface-100)}.tk-card.tk-card-horizontal .tk-card-header{grid-column:2;grid-row:1}.tk-card.tk-card-horizontal .tk-card-content{grid-column:2;grid-row:2;margin-top:0}.tk-card:not(.tk-card-horizontal) .tk-card-image-container{height:13.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: ProgressBarComponent, selector: "tk-progress-bar", inputs: ["value", "showValue", "size"] }, { kind: "component", type: StatusBarComponent, selector: "tk-status-bar", inputs: ["label", "severity", "size", "barLabel"] }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -115,7 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                         ProgressBarComponent,
                         StatusBarComponent,
                         TagComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || actions().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Visible Actions (up to 3) -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Overflow Menu (> 3 actions) -->\n        @if (hasOverflowActions()) {\n          <div class=\"tk-card-overflow\">\n            <p-menu #menu [model]=\"menuItems()\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n            <tk-button \n              icon=\"ellipsis-vertical\" \n              severity=\"secondary\" \n              variant=\"text\" \n              size=\"small\"\n              (click)=\"menu.toggle($event)\"\n              (keydown.enter)=\"menu.toggle($event)\"\n              (keydown.space)=\"menu.toggle($event); $event.preventDefault()\">\n            </tk-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\">\n        @if (titleIcon()) {\n          <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n        }\n        {{ title() }}\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tk-card{background-color:var(--tk-color-base-surface-0);border:1px solid var(--tk-color-base-surface-200);border-radius:var(--tk-borderRadius-m);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%;box-shadow:0 1px 3px rgba(var(--tk-color-base-surface-1000),.05)}.tk-card.tk-card-selectable:hover{border-color:var(--tk-color-base-primary-300);box-shadow:0 4px 12px rgba(var(--tk-color-base-surface-1000),.08);transform:translateY(-2px)}.tk-card.tk-card-selected{border-color:var(--tk-color-base-primary-500);background-color:var(--tk-color-base-sky-100)}.tk-card .tk-card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-paddingX-s);min-height:var(--tk-spacing-base-300);z-index:2}.tk-card .tk-card-header .tk-card-header-left{display:flex;align-items:center;gap:var(--tk-spacing-base-100)}.tk-card .tk-card-header .tk-card-metadata{display:flex;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-header .tk-card-metadata tk-tag ::ng-deep .p-tag{background-color:var(--tk-color-base-surface-100)!important;color:var(--tk-color-text-default)!important;font-weight:500}.tk-card .tk-card-header .tk-card-metadata .tk-card-metadata-secondary{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-subtle);font-weight:400}.tk-card .tk-card-header .tk-card-actions{display:flex;align-items:center;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-image-container{background-color:var(--tk-color-base-surface-100);display:flex;justify-content:center;align-items:center;width:100%;position:relative}.tk-card .tk-card-image-container .tk-card-image{width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat}.tk-card .tk-card-image-container .tk-card-image-placeholder{color:var(--tk-color-base-surface-400);display:flex;justify-content:center;align-items:center;width:100%;height:100%}.tk-card .tk-card-image-container .tk-card-image-placeholder tk-icon{font-size:3rem;opacity:.5}.tk-card .tk-card-content{padding:var(--tk-spacing-paddingX-m);display:flex;flex-direction:column;gap:var(--tk-spacing-gap-s);flex:1}.tk-card .tk-card-content .tk-card-body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-content .tk-card-title{margin:0;font-size:var(--tk-font-size-paragraph-m);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);display:flex;align-items:center;gap:var(--tk-spacing-base-50);line-height:normal}.tk-card .tk-card-content .tk-card-description{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-subtle);line-height:1.5}.tk-card .tk-card-content .tk-card-info-elements{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100);margin-top:auto}.tk-card .tk-card-content .tk-card-info-progress{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-content .tk-card-info-progress .tk-card-info-progress-label{font-size:var(--tk-font-size-legal-m);font-weight:600;color:var(--tk-color-text-default);min-width:fit-content}.tk-card .tk-card-content .tk-card-info-progress tk-progress-bar{flex:1}.tk-card .tk-card-content .tk-card-info-text{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-default);line-height:normal}.tk-card.tk-card-horizontal{flex-direction:row;min-height:11.25rem;display:grid;grid-template-columns:11.25rem 1fr;grid-template-rows:auto 1fr}.tk-card.tk-card-horizontal.tk-card-no-image{grid-template-columns:1fr;min-height:auto}.tk-card.tk-card-horizontal .tk-card-image-container{grid-row:1/span 2;grid-column:1;width:11.25rem;min-width:11.25rem;height:100%;border-right:1px solid var(--tk-color-base-surface-100)}.tk-card.tk-card-horizontal .tk-card-header{grid-column:2;grid-row:1}.tk-card.tk-card-horizontal .tk-card-content{grid-column:2;grid-row:2;margin-top:0}.tk-card:not(.tk-card-horizontal) .tk-card-image-container{height:13.75rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  class=\"tk-card\" \n  [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n  [class.tk-card-selectable]=\"selectable()\"\n  [class.tk-card-selected]=\"selectable() && selected()\"\n  [class.tk-card-no-image]=\"!showImage()\"\n  [attr.aria-pressed]=\"selectable() ? selected() : null\">\n  \n  <!-- Header: Selection, Metadata, and Actions -->\n  @if (selectable() || badgeText() || secondaryBadgeText() || actions().length > 0) {\n    <div class=\"tk-card-header\">\n      <div class=\"tk-card-header-left\">\n        @if (selectable()) {\n          <div \n            class=\"tk-card-selection\" \n            tabindex=\"-1\">\n            <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n          </div>\n        }\n        @if (badgeText() || secondaryBadgeText()) {\n          <div class=\"tk-card-metadata\">\n            @if (badgeText()) {\n              <tk-tag [value]=\"badgeText()!\"></tk-tag>\n            }\n            @if (secondaryBadgeText()) {\n              <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n            }\n          </div>\n        }\n      </div>\n\n      <div \n        class=\"tk-card-actions\" \n        tabindex=\"-1\">\n        <!-- Visible Actions (up to 3) -->\n        @for (action of visibleActions(); track action.id) {\n          <tk-button \n            [icon]=\"action.icon\" \n            [severity]=\"getButtonSeverity(action.severity)\"\n            variant=\"text\"\n            [disabled]=\"action.disabled || false\"\n            [tooltipText]=\"action.label\"\n            size=\"small\"\n            (clicked)=\"action.handler()\">\n          </tk-button>\n        }\n\n        <!-- Overflow Menu (> 3 actions) -->\n        @if (hasOverflowActions()) {\n          <div class=\"tk-card-overflow\">\n            <p-menu #menu [model]=\"menuItems()\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n            <tk-button \n              icon=\"ellipsis-vertical\" \n              severity=\"secondary\" \n              variant=\"text\" \n              size=\"small\"\n              (click)=\"menu.toggle($event)\"\n              (keydown.enter)=\"menu.toggle($event)\"\n              (keydown.space)=\"menu.toggle($event); $event.preventDefault()\">\n            </tk-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Image Section -->\n  @if (showImage()) {\n    <div class=\"tk-card-image-container\">\n      @if (image()) {\n        <div \n          class=\"tk-card-image\" \n          [style.background-image]=\"'url(' + image() + ')'\">\n        </div>\n      } @else {\n        <div class=\"tk-card-image-placeholder\">\n          <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content Section -->\n  <div class=\"tk-card-content\">\n    <div class=\"tk-card-body\">\n      <h3 class=\"tk-card-title\">\n        @if (titleIcon()) {\n          <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n        }\n        {{ title() }}\n      </h3>\n      @if (description()) {\n        <p class=\"tk-card-description\">{{ description() }}</p>\n      }\n    </div>\n\n    @if (infoElements().length > 0) {\n      <div class=\"tk-card-info-elements\">\n        @for (element of infoElements(); track $index) {\n          <div class=\"tk-card-info-item\">\n            @switch (element.type) {\n              @case ('progress-bar') {\n                <div class=\"tk-card-info-progress\">\n                  @if (element.label) {\n                    <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n                  }\n                  <tk-progress-bar [value]=\"element.value || 0\" size=\"small\"></tk-progress-bar>\n                </div>\n              }\n              @case ('tag') {\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('chip') {\n                <!-- Using tag for chips as per design system style -->\n                <tk-tag [value]=\"element.label || ''\" [severity]=\"element.severity || 'secondary'\"></tk-tag>\n              }\n              @case ('status-bar') {\n                <tk-status-bar \n                  [label]=\"element.label || ''\" \n                  [barLabel]=\"element.barLabel || ''\"\n                  [severity]=\"getStatusBarSeverity(element.severity)\">\n                </tk-status-bar>\n              }\n              @case ('button') {\n                <tk-button \n                  [label]=\"element.label\" \n                  [icon]=\"element.icon\" \n                  [severity]=\"getButtonSeverity(element.severity)\"\n                  size=\"small\"\n                  (clicked)=\"element.handler ? element.handler() : null\">\n                </tk-button>\n              }\n              @case ('icon') {\n                <tk-icon [icon]=\"element.icon || ''\"></tk-icon>\n              }\n              @case ('string') {\n                <span class=\"tk-card-info-text\">{{ element.label }}</span>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.tk-card{background-color:var(--tk-color-base-surface-0);border:1px solid var(--tk-color-base-surface-200);border-radius:var(--tk-borderRadius-m);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%;box-shadow:0 1px 3px rgba(var(--tk-color-base-surface-1000),.05)}.tk-card.tk-card-selectable:hover{border-color:var(--tk-color-base-primary-300);box-shadow:0 4px 12px rgba(var(--tk-color-base-surface-1000),.08);transform:translateY(-2px)}.tk-card.tk-card-selected{border-color:var(--tk-color-base-primary-500);background-color:var(--tk-color-base-sky-100)}.tk-card .tk-card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-padding-s);min-height:var(--tk-spacing-base-300);z-index:2}.tk-card .tk-card-header .tk-card-header-left{display:flex;align-items:center;gap:var(--tk-spacing-base-100)}.tk-card .tk-card-header .tk-card-metadata{display:flex;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-header .tk-card-metadata tk-tag ::ng-deep .p-tag{background-color:var(--tk-color-base-surface-100)!important;color:var(--tk-color-text-default)!important;font-weight:500}.tk-card .tk-card-header .tk-card-metadata .tk-card-metadata-secondary{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-subtle);font-weight:400}.tk-card .tk-card-header .tk-card-actions{display:flex;align-items:center;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-image-container{background-color:var(--tk-color-base-surface-100);display:flex;justify-content:center;align-items:center;width:100%;position:relative}.tk-card .tk-card-image-container .tk-card-image{width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat}.tk-card .tk-card-image-container .tk-card-image-placeholder{color:var(--tk-color-base-surface-400);display:flex;justify-content:center;align-items:center;width:100%;height:100%}.tk-card .tk-card-image-container .tk-card-image-placeholder tk-icon{font-size:3rem;opacity:.5}.tk-card .tk-card-content{padding:var(--tk-spacing-padding-m);display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs);flex:1}.tk-card .tk-card-content .tk-card-body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25)}.tk-card .tk-card-content .tk-card-title{margin:0;font-size:var(--tk-font-size-paragraph-m);font-weight:var(--tk-font-weight-600);color:var(--tk-color-text-default);display:flex;align-items:center;gap:var(--tk-spacing-base-50);line-height:normal}.tk-card .tk-card-content .tk-card-description{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-subtle);line-height:1.5}.tk-card .tk-card-content .tk-card-info-elements{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100);margin-top:auto}.tk-card .tk-card-content .tk-card-info-progress{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-75)}.tk-card .tk-card-content .tk-card-info-progress .tk-card-info-progress-label{font-size:var(--tk-font-size-legal-m);font-weight:600;color:var(--tk-color-text-default);min-width:fit-content}.tk-card .tk-card-content .tk-card-info-progress tk-progress-bar{flex:1}.tk-card .tk-card-content .tk-card-info-text{font-size:var(--tk-font-size-legal-m);color:var(--tk-color-text-default);line-height:normal}.tk-card.tk-card-horizontal{flex-direction:row;min-height:11.25rem;display:grid;grid-template-columns:11.25rem 1fr;grid-template-rows:auto 1fr}.tk-card.tk-card-horizontal.tk-card-no-image{grid-template-columns:1fr;min-height:auto}.tk-card.tk-card-horizontal .tk-card-image-container{grid-row:1/span 2;grid-column:1;width:11.25rem;min-width:11.25rem;height:100%;border-right:1px solid var(--tk-color-base-surface-100)}.tk-card.tk-card-horizontal .tk-card-header{grid-column:2;grid-row:1}.tk-card.tk-card-horizontal .tk-card-content{grid-column:2;grid-row:2;margin-top:0}.tk-card:not(.tk-card-horizontal) .tk-card-image-container{height:13.75rem}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], titleIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleIcon", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], showImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showImage", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], badgeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeText", required: false }] }], secondaryBadgeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryBadgeText", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], infoElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoElements", required: false }] }] } });
 /**

package/fesm2022/tekus-design-system-components-card.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-card.mjs","sources":["../../../projects/design-system/components/card/src/card.component.ts","../../../projects/design-system/components/card/src/card.component.html","../../../projects/design-system/components/card/tekus-design-system-components-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MenuModule } from 'primeng/menu';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { ProgressBarComponent } from '@tekus/design-system/components/progress-bar';\nimport { StatusBarComponent } from '@tekus/design-system/components/status-bar';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { TkCardAction, TkCardInfoElement, TkCardLayout } from './card.types';\n\n/*\n @component CardComponent\n * @description\n * Flexible card component used to display grouped content with multiple layout options.\n * Supports vertical and horizontal orientations, optional images, headers with selection,\n * and dynamic action buttons (with overflow menu support).\n \n It utilizes Angular 21 Signals for efficient state management and reactivity.\n \n @usage\n * ```html\n * <tk-card\n * title=\"My Document\"\n * description=\"Upload in progress...\"\n * layout=\"horizontal\"\n * [actions]=\"myActions\"\n * [infoElements]=\"[{ type: 'progress-bar', value: 75 }]\">\n * </tk-card>\n * ```\n /\n@Component({\n selector: 'tk-card',\n standalone: true,\n imports: [\n CommonModule,\n MenuModule,\n ButtonComponent,\n CheckboxComponent,\n IconComponent,\n ProgressBarComponent,\n StatusBarComponent,\n TagComponent\n ],\n templateUrl: './card.component.html',\n styleUrl: './card.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardComponent {\n /* The primary title of the card. Required. /\n title = input.required<string>();\n\n /* Optional icon to display next to the title. /\n titleIcon = input<string>();\n\n /* Optional secondary description. /\n description = input<string>();\n\n /* Optional image URL or source. /\n image = input<string>();\n\n /* Whether to show the image section. If true and no URL is provided, a placeholder is shown. /\n showImage = input<boolean>(true);\n\n /* Layout orientation: 'vertical' (default) or 'horizontal'. /\n layout = input<TkCardLayout>('vertical');\n\n /* Whether the card shows a checkbox for selection. /\n selectable = input<boolean>(false);\n\n /* Two-way signal for the selection state. /\n selected = model<boolean>(false);\n\n /* Optional ID or primary badge text displayed in the header. /\n badgeText = input<string>();\n\n /* Optional secondary metadata text (e.g. file size) displayed next to the badge. /\n secondaryBadgeText = input<string>();\n\n /* List of actions associated with the card. /\n actions = input<TkCardAction[]>([]);\n\n /* Dynamic list of informational elements (tags, progress bars, etc.). /\n infoElements = input<TkCardInfoElement[]>([]);\n\n /\n Computed logic for handling actions.\n * If there are > 3 actions, they are all moved to an overflow menu.\n * Otherwise, they are displayed as individual buttons.\n /\n hasOverflowActions = computed(() => this.actions().length > 3);\n\n /* Actions to be displayed directly as buttons. /\n visibleActions = computed(() => this.hasOverflowActions() ? [] : this.actions());\n\n /* \n * Actions to be displayed in the overflow menu.\n * Maps TkCardAction to PrimeNG MenuItem format.\n /\n menuItems = computed<MenuItem[]>(() => {\n if (!this.hasOverflowActions()) return [];\n return this.actions().map(action => ({\n label: action.label,\n icon: action.icon ? `fa fa-${action.icon}` : undefined,\n disabled: action.disabled,\n command: () => action.handler()\n }));\n });\n\n /\n Maps card severity to button severity.\n /\n getButtonSeverity(severity?: string): 'primary' \| 'secondary' \| 'danger' {\n if (severity === 'danger') return 'danger';\n if (severity === 'secondary') return 'secondary';\n return 'primary';\n }\n\n /\n Maps card severity to status bar severity.\n /\n getStatusBarSeverity(severity?: string): 'primary' \| 'secondary' \| 'success' \| 'error' {\n if (severity === 'danger') return 'error';\n if (severity === 'success') return 'success';\n if (severity === 'secondary') return 'secondary';\n return 'primary';\n }\n}\n","<div \n class=\"tk-card\" \n [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n [class.tk-card-selectable]=\"selectable()\"\n [class.tk-card-selected]=\"selectable() && selected()\"\n [class.tk-card-no-image]=\"!showImage()\"\n [attr.aria-pressed]=\"selectable() ? selected() : null\">\n \n <!-- Header: Selection, Metadata, and Actions -->\n @if (selectable() \|\| badgeText() \|\| secondaryBadgeText() \|\| actions().length > 0) {\n <div class=\"tk-card-header\">\n <div class=\"tk-card-header-left\">\n @if (selectable()) {\n <div \n class=\"tk-card-selection\" \n tabindex=\"-1\">\n <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n </div>\n }\n @if (badgeText() \|\| secondaryBadgeText()) {\n <div class=\"tk-card-metadata\">\n @if (badgeText()) {\n <tk-tag [value]=\"badgeText()!\"></tk-tag>\n }\n @if (secondaryBadgeText()) {\n <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n }\n </div>\n }\n </div>\n\n <div \n class=\"tk-card-actions\" \n tabindex=\"-1\">\n <!-- Visible Actions (up to 3) -->\n @for (action of visibleActions(); track action.id) {\n <tk-button \n [icon]=\"action.icon\" \n [severity]=\"getButtonSeverity(action.severity)\"\n variant=\"text\"\n [disabled]=\"action.disabled \|\| false\"\n [tooltipText]=\"action.label\"\n size=\"small\"\n (clicked)=\"action.handler()\">\n </tk-button>\n }\n\n <!-- Overflow Menu (> 3 actions) -->\n @if (hasOverflowActions()) {\n <div class=\"tk-card-overflow\">\n <p-menu #menu [model]=\"menuItems()\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <tk-button \n icon=\"ellipsis-vertical\" \n severity=\"secondary\" \n variant=\"text\" \n size=\"small\"\n (click)=\"menu.toggle($event)\"\n (keydown.enter)=\"menu.toggle($event)\"\n (keydown.space)=\"menu.toggle($event); $event.preventDefault()\">\n </tk-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Image Section -->\n @if (showImage()) {\n <div class=\"tk-card-image-container\">\n @if (image()) {\n <div \n class=\"tk-card-image\" \n [style.background-image]=\"'url(' + image() + ')'\">\n </div>\n } @else {\n <div class=\"tk-card-image-placeholder\">\n <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n </div>\n }\n </div>\n }\n\n <!-- Content Section -->\n <div class=\"tk-card-content\">\n <div class=\"tk-card-body\">\n <h3 class=\"tk-card-title\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </h3>\n @if (description()) {\n <p class=\"tk-card-description\">{{ description() }}</p>\n }\n </div>\n\n @if (infoElements().length > 0) {\n <div class=\"tk-card-info-elements\">\n @for (element of infoElements(); track $index) {\n <div class=\"tk-card-info-item\">\n @switch (element.type) {\n @case ('progress-bar') {\n <div class=\"tk-card-info-progress\">\n @if (element.label) {\n <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n }\n <tk-progress-bar [value]=\"element.value \|\| 0\" size=\"small\"></tk-progress-bar>\n </div>\n }\n @case ('tag') {\n <tk-tag [value]=\"element.label \|\| ''\" [severity]=\"element.severity \|\| 'secondary'\"></tk-tag>\n }\n @case ('chip') {\n <!-- Using tag for chips as per design system style -->\n <tk-tag [value]=\"element.label \|\| ''\" [severity]=\"element.severity \|\| 'secondary'\"></tk-tag>\n }\n @case ('status-bar') {\n <tk-status-bar \n [label]=\"element.label \|\| ''\" \n [barLabel]=\"element.barLabel \|\| ''\"\n [severity]=\"getStatusBarSeverity(element.severity)\">\n </tk-status-bar>\n }\n @case ('button') {\n <tk-button \n [label]=\"element.label\" \n [icon]=\"element.icon\" \n [severity]=\"getButtonSeverity(element.severity)\"\n size=\"small\"\n (clicked)=\"element.handler ? element.handler() : null\">\n </tk-button>\n }\n @case ('icon') {\n <tk-icon [icon]=\"element.icon \|\| ''\"></tk-icon>\n }\n @case ('string') {\n <span class=\"tk-card-info-text\">{{ element.label }}</span>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"tekus-design-system-components-card.mjs","sources":["../../../projects/design-system/components/card/src/card.component.ts","../../../projects/design-system/components/card/src/card.component.html","../../../projects/design-system/components/card/tekus-design-system-components-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MenuModule } from 'primeng/menu';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { ProgressBarComponent } from '@tekus/design-system/components/progress-bar';\nimport { StatusBarComponent } from '@tekus/design-system/components/status-bar';\nimport { TagComponent } from '@tekus/design-system/components/tag';\nimport { TkCardAction, TkCardInfoElement, TkCardLayout } from './card.types';\n\n/*\n @component CardComponent\n * @description\n * Flexible card component used to display grouped content with multiple layout options.\n * Supports vertical and horizontal orientations, optional images, headers with selection,\n * and dynamic action buttons (with overflow menu support).\n \n It utilizes Angular 21 Signals for efficient state management and reactivity.\n \n @usage\n * ```html\n * <tk-card\n * title=\"My Document\"\n * description=\"Upload in progress...\"\n * layout=\"horizontal\"\n * [actions]=\"myActions\"\n * [infoElements]=\"[{ type: 'progress-bar', value: 75 }]\">\n * </tk-card>\n * ```\n /\n@Component({\n selector: 'tk-card',\n standalone: true,\n imports: [\n CommonModule,\n MenuModule,\n ButtonComponent,\n CheckboxComponent,\n IconComponent,\n ProgressBarComponent,\n StatusBarComponent,\n TagComponent\n ],\n templateUrl: './card.component.html',\n styleUrl: './card.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardComponent {\n /* The primary title of the card. Required. /\n title = input.required<string>();\n\n /* Optional icon to display next to the title. /\n titleIcon = input<string>();\n\n /* Optional secondary description. /\n description = input<string>();\n\n /* Optional image URL or source. /\n image = input<string>();\n\n /* Whether to show the image section. If true and no URL is provided, a placeholder is shown. /\n showImage = input<boolean>(true);\n\n /* Layout orientation: 'vertical' (default) or 'horizontal'. /\n layout = input<TkCardLayout>('vertical');\n\n /* Whether the card shows a checkbox for selection. /\n selectable = input<boolean>(false);\n\n /* Two-way signal for the selection state. /\n selected = model<boolean>(false);\n\n /* Optional ID or primary badge text displayed in the header. /\n badgeText = input<string>();\n\n /* Optional secondary metadata text (e.g. file size) displayed next to the badge. /\n secondaryBadgeText = input<string>();\n\n /* List of actions associated with the card. /\n actions = input<TkCardAction[]>([]);\n\n /* Dynamic list of informational elements (tags, progress bars, etc.). /\n infoElements = input<TkCardInfoElement[]>([]);\n\n /\n Computed logic for handling actions.\n * If there are > 3 actions, they are all moved to an overflow menu.\n * Otherwise, they are displayed as individual buttons.\n /\n hasOverflowActions = computed(() => this.actions().length > 3);\n\n /* Actions to be displayed directly as buttons. /\n visibleActions = computed(() => this.hasOverflowActions() ? [] : this.actions());\n\n /* \n * Actions to be displayed in the overflow menu.\n * Maps TkCardAction to PrimeNG MenuItem format.\n /\n menuItems = computed<MenuItem[]>(() => {\n if (!this.hasOverflowActions()) return [];\n return this.actions().map(action => ({\n label: action.label,\n icon: action.icon ? `fa fa-${action.icon}` : undefined,\n disabled: action.disabled,\n command: () => action.handler()\n }));\n });\n\n /\n Maps card severity to button severity.\n /\n getButtonSeverity(severity?: string): 'primary' \| 'secondary' \| 'danger' {\n if (severity === 'danger') return 'danger';\n if (severity === 'secondary') return 'secondary';\n return 'primary';\n }\n\n /\n Maps card severity to status bar severity.\n /\n getStatusBarSeverity(severity?: string): 'primary' \| 'secondary' \| 'success' \| 'error' {\n if (severity === 'danger') return 'error';\n if (severity === 'success') return 'success';\n if (severity === 'secondary') return 'secondary';\n return 'primary';\n }\n}\n","<div \n class=\"tk-card\" \n [class.tk-card-horizontal]=\"layout() === 'horizontal'\"\n [class.tk-card-selectable]=\"selectable()\"\n [class.tk-card-selected]=\"selectable() && selected()\"\n [class.tk-card-no-image]=\"!showImage()\"\n [attr.aria-pressed]=\"selectable() ? selected() : null\">\n \n <!-- Header: Selection, Metadata, and Actions -->\n @if (selectable() \|\| badgeText() \|\| secondaryBadgeText() \|\| actions().length > 0) {\n <div class=\"tk-card-header\">\n <div class=\"tk-card-header-left\">\n @if (selectable()) {\n <div \n class=\"tk-card-selection\" \n tabindex=\"-1\">\n <tk-checkbox [binary]=\"true\" [(model)]=\"selected\"></tk-checkbox>\n </div>\n }\n @if (badgeText() \|\| secondaryBadgeText()) {\n <div class=\"tk-card-metadata\">\n @if (badgeText()) {\n <tk-tag [value]=\"badgeText()!\"></tk-tag>\n }\n @if (secondaryBadgeText()) {\n <span class=\"tk-card-metadata-secondary\">{{ secondaryBadgeText() }}</span>\n }\n </div>\n }\n </div>\n\n <div \n class=\"tk-card-actions\" \n tabindex=\"-1\">\n <!-- Visible Actions (up to 3) -->\n @for (action of visibleActions(); track action.id) {\n <tk-button \n [icon]=\"action.icon\" \n [severity]=\"getButtonSeverity(action.severity)\"\n variant=\"text\"\n [disabled]=\"action.disabled \|\| false\"\n [tooltipText]=\"action.label\"\n size=\"small\"\n (clicked)=\"action.handler()\">\n </tk-button>\n }\n\n <!-- Overflow Menu (> 3 actions) -->\n @if (hasOverflowActions()) {\n <div class=\"tk-card-overflow\">\n <p-menu #menu [model]=\"menuItems()\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <tk-button \n icon=\"ellipsis-vertical\" \n severity=\"secondary\" \n variant=\"text\" \n size=\"small\"\n (click)=\"menu.toggle($event)\"\n (keydown.enter)=\"menu.toggle($event)\"\n (keydown.space)=\"menu.toggle($event); $event.preventDefault()\">\n </tk-button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Image Section -->\n @if (showImage()) {\n <div class=\"tk-card-image-container\">\n @if (image()) {\n <div \n class=\"tk-card-image\" \n [style.background-image]=\"'url(' + image() + ')'\">\n </div>\n } @else {\n <div class=\"tk-card-image-placeholder\">\n <tk-icon icon=\"image\" size=\"lg\"></tk-icon>\n </div>\n }\n </div>\n }\n\n <!-- Content Section -->\n <div class=\"tk-card-content\">\n <div class=\"tk-card-body\">\n <h3 class=\"tk-card-title\">\n @if (titleIcon()) {\n <tk-icon [icon]=\"titleIcon()!\" size=\"sm\"></tk-icon>\n }\n {{ title() }}\n </h3>\n @if (description()) {\n <p class=\"tk-card-description\">{{ description() }}</p>\n }\n </div>\n\n @if (infoElements().length > 0) {\n <div class=\"tk-card-info-elements\">\n @for (element of infoElements(); track $index) {\n <div class=\"tk-card-info-item\">\n @switch (element.type) {\n @case ('progress-bar') {\n <div class=\"tk-card-info-progress\">\n @if (element.label) {\n <span class=\"tk-card-info-progress-label\">{{ element.label }}</span>\n }\n <tk-progress-bar [value]=\"element.value \|\| 0\" size=\"small\"></tk-progress-bar>\n </div>\n }\n @case ('tag') {\n <tk-tag [value]=\"element.label \|\| ''\" [severity]=\"element.severity \|\| 'secondary'\"></tk-tag>\n }\n @case ('chip') {\n <!-- Using tag for chips as per design system style -->\n <tk-tag [value]=\"element.label \|\| ''\" [severity]=\"element.severity \|\| 'secondary'\"></tk-tag>\n }\n @case ('status-bar') {\n <tk-status-bar \n [label]=\"element.label \|\| ''\" \n [barLabel]=\"element.barLabel \|\| ''\"\n [severity]=\"getStatusBarSeverity(element.severity)\">\n </tk-status-bar>\n }\n @case ('button') {\n <tk-button \n [label]=\"element.label\" \n [icon]=\"element.icon\" \n [severity]=\"getButtonSeverity(element.severity)\"\n size=\"small\"\n (clicked)=\"element.handler ? element.handler() : null\">\n </tk-button>\n }\n @case ('icon') {\n <tk-icon [icon]=\"element.icon \|\| ''\"></tk-icon>\n }\n @case ('string') {\n <span class=\"tk-card-info-text\">{{ element.label }}</span>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-date-picker.mjs CHANGED Viewed

@@ -379,7 +379,7 @@ class DatePickerComponent {
         this.onModelChange(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DatePickerComponent, isStandalone: true, selector: "tk-date-picker", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: true, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: true, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelValue: "modelValueChange", handleSelect: "handleSelect", handleClear: "handleClear" }, ngImport: i0, template: "<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n  @if (inline()) {\n    <p-datepicker\n      inputId=\"datepicker\"\n      [ngModel]=\"modelValue()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onBlur()\"\n      [selectionMode]=\"effectiveSelectionMode()\"\n      [readonlyInput]=\"readonlyInput()\"\n      [showClear]=\"showClear()\"\n      [showIcon]=\"showIcon()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabled]=\"effectiveDisabled()\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [inline]=\"true\"\n      [showTime]=\"effectiveShowTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"effectiveShowSeconds()\">\n    </p-datepicker>\n  } @else {\n    <p-floatlabel>\n      <p-datepicker\n        inputId=\"datepicker\"\n        iconDisplay=\"input\"\n        [ngModel]=\"modelValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onBlur()\"\n        [selectionMode]=\"effectiveSelectionMode()\"\n        [readonlyInput]=\"readonlyInput()\"\n        [showClear]=\"showClear()\"\n        [showIcon]=\"showIcon()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"effectiveDisabled()\"\n        [dateFormat]=\"effectiveDateFormat()\"\n        [timeOnly]=\"variant() === 'time'\"\n        [showTime]=\"effectiveShowTime()\"\n        [hourFormat]=\"hourFormat()\"\n        [appendTo]=\"appendTo()\"\n        [baseZIndex]=\"baseZIndex()\"\n        [stepHour]=\"stepHour()\"\n        [stepMinute]=\"stepMinute()\"\n        [stepSecond]=\"stepSecond()\"\n        [showSeconds]=\"effectiveShowSeconds()\">\n        <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n          <fa-icon\n            tabindex=\"0\"\n            [icon]=\"variant() === 'time' ? faClock : faCalendarDay\"\n            (keydown.enter)=\"clickCallBack($event)\"\n            (keydown.space)=\"clickCallBack($event)\"\n            (click)=\"clickCallBack($event)\">\n          </fa-icon>\n        </ng-template>\n      </p-datepicker>\n\n      <label for=\"datepicker\">{{ labelText() }}</label>\n    </p-floatlabel>\n  }\n</div>\n", styles: [":host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker-input{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-datepicker-input:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-datepicker-decade{color:var(--tk-color-text-default, #121214)}:host ::ng-deep .p-datepicker-clear-icon{color:var(--tk-surface-700, #424243);inset-inline-end:2.5rem!important}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-datepicker-day-selected-range{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .p-datepicker-panel{min-width:0!important;max-width:300px!important;width:100%!important}.datepicker-container{margin-top:var(--tk-spacing-base-200, 2rem)}.datepicker-container.inline{margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DatePickerComponent, isStandalone: true, selector: "tk-date-picker", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: true, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: true, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelValue: "modelValueChange", handleSelect: "handleSelect", handleClear: "handleClear" }, ngImport: i0, template: "<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n  @if (inline()) {\n    <p-datepicker\n      inputId=\"datepicker\"\n      [ngModel]=\"modelValue()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onBlur()\"\n      [selectionMode]=\"effectiveSelectionMode()\"\n      [readonlyInput]=\"readonlyInput()\"\n      [showClear]=\"showClear()\"\n      [showIcon]=\"showIcon()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabled]=\"effectiveDisabled()\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [inline]=\"true\"\n      [showTime]=\"effectiveShowTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"effectiveShowSeconds()\">\n    </p-datepicker>\n  } @else {\n    <p-floatlabel>\n      <p-datepicker\n        inputId=\"datepicker\"\n        iconDisplay=\"input\"\n        [ngModel]=\"modelValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onBlur()\"\n        [selectionMode]=\"effectiveSelectionMode()\"\n        [readonlyInput]=\"readonlyInput()\"\n        [showClear]=\"showClear()\"\n        [showIcon]=\"showIcon()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"effectiveDisabled()\"\n        [dateFormat]=\"effectiveDateFormat()\"\n        [timeOnly]=\"variant() === 'time'\"\n        [showTime]=\"effectiveShowTime()\"\n        [hourFormat]=\"hourFormat()\"\n        [appendTo]=\"appendTo()\"\n        [baseZIndex]=\"baseZIndex()\"\n        [stepHour]=\"stepHour()\"\n        [stepMinute]=\"stepMinute()\"\n        [stepSecond]=\"stepSecond()\"\n        [showSeconds]=\"effectiveShowSeconds()\">\n        <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n          <fa-icon\n            tabindex=\"0\"\n            [icon]=\"variant() === 'time' ? faClock : faCalendarDay\"\n            (keydown.enter)=\"clickCallBack($event)\"\n            (keydown.space)=\"clickCallBack($event)\"\n            (click)=\"clickCallBack($event)\">\n          </fa-icon>\n        </ng-template>\n      </p-datepicker>\n\n      <label for=\"datepicker\">{{ labelText() }}</label>\n    </p-floatlabel>\n  }\n</div>\n", styles: [":host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker-input{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-datepicker-input:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-datepicker-decade{color:var(--tk-color-text-default, #121214)}:host ::ng-deep .p-datepicker-clear-icon{color:var(--tk-surface-700, #424243);inset-inline-end:2.5rem!important}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-datepicker-day-selected-range{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .p-datepicker-panel{min-width:0!important;max-width:300px!important;width:100%!important}.datepicker-container{margin-top:var(--tk-spacing-base-200, 2rem)}.datepicker-container.inline{margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -389,7 +389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                         DatePickerModule,
                         FloatLabelModule,
                         FaIconComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n  @if (inline()) {\n    <p-datepicker\n      inputId=\"datepicker\"\n      [ngModel]=\"modelValue()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onBlur()\"\n      [selectionMode]=\"effectiveSelectionMode()\"\n      [readonlyInput]=\"readonlyInput()\"\n      [showClear]=\"showClear()\"\n      [showIcon]=\"showIcon()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabled]=\"effectiveDisabled()\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [inline]=\"true\"\n      [showTime]=\"effectiveShowTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"effectiveShowSeconds()\">\n    </p-datepicker>\n  } @else {\n    <p-floatlabel>\n      <p-datepicker\n        inputId=\"datepicker\"\n        iconDisplay=\"input\"\n        [ngModel]=\"modelValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onBlur()\"\n        [selectionMode]=\"effectiveSelectionMode()\"\n        [readonlyInput]=\"readonlyInput()\"\n        [showClear]=\"showClear()\"\n        [showIcon]=\"showIcon()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"effectiveDisabled()\"\n        [dateFormat]=\"effectiveDateFormat()\"\n        [timeOnly]=\"variant() === 'time'\"\n        [showTime]=\"effectiveShowTime()\"\n        [hourFormat]=\"hourFormat()\"\n        [appendTo]=\"appendTo()\"\n        [baseZIndex]=\"baseZIndex()\"\n        [stepHour]=\"stepHour()\"\n        [stepMinute]=\"stepMinute()\"\n        [stepSecond]=\"stepSecond()\"\n        [showSeconds]=\"effectiveShowSeconds()\">\n        <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n          <fa-icon\n            tabindex=\"0\"\n            [icon]=\"variant() === 'time' ? faClock : faCalendarDay\"\n            (keydown.enter)=\"clickCallBack($event)\"\n            (keydown.space)=\"clickCallBack($event)\"\n            (click)=\"clickCallBack($event)\">\n          </fa-icon>\n        </ng-template>\n      </p-datepicker>\n\n      <label for=\"datepicker\">{{ labelText() }}</label>\n    </p-floatlabel>\n  }\n</div>\n", styles: [":host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker-input{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-datepicker-input:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-datepicker-decade{color:var(--tk-color-text-default, #121214)}:host ::ng-deep .p-datepicker-clear-icon{color:var(--tk-surface-700, #424243);inset-inline-end:2.5rem!important}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-datepicker-day-selected-range{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .p-datepicker-panel{min-width:0!important;max-width:300px!important;width:100%!important}.datepicker-container{margin-top:var(--tk-spacing-base-200, 2rem)}.datepicker-container.inline{margin-top:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n  @if (inline()) {\n    <p-datepicker\n      inputId=\"datepicker\"\n      [ngModel]=\"modelValue()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onBlur()\"\n      [selectionMode]=\"effectiveSelectionMode()\"\n      [readonlyInput]=\"readonlyInput()\"\n      [showClear]=\"showClear()\"\n      [showIcon]=\"showIcon()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabled]=\"effectiveDisabled()\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [inline]=\"true\"\n      [showTime]=\"effectiveShowTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"effectiveShowSeconds()\">\n    </p-datepicker>\n  } @else {\n    <p-floatlabel>\n      <p-datepicker\n        inputId=\"datepicker\"\n        iconDisplay=\"input\"\n        [ngModel]=\"modelValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onBlur()\"\n        [selectionMode]=\"effectiveSelectionMode()\"\n        [readonlyInput]=\"readonlyInput()\"\n        [showClear]=\"showClear()\"\n        [showIcon]=\"showIcon()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"effectiveDisabled()\"\n        [dateFormat]=\"effectiveDateFormat()\"\n        [timeOnly]=\"variant() === 'time'\"\n        [showTime]=\"effectiveShowTime()\"\n        [hourFormat]=\"hourFormat()\"\n        [appendTo]=\"appendTo()\"\n        [baseZIndex]=\"baseZIndex()\"\n        [stepHour]=\"stepHour()\"\n        [stepMinute]=\"stepMinute()\"\n        [stepSecond]=\"stepSecond()\"\n        [showSeconds]=\"effectiveShowSeconds()\">\n        <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n          <fa-icon\n            tabindex=\"0\"\n            [icon]=\"variant() === 'time' ? faClock : faCalendarDay\"\n            (keydown.enter)=\"clickCallBack($event)\"\n            (keydown.space)=\"clickCallBack($event)\"\n            (click)=\"clickCallBack($event)\">\n          </fa-icon>\n        </ng-template>\n      </p-datepicker>\n\n      <label for=\"datepicker\">{{ labelText() }}</label>\n    </p-floatlabel>\n  }\n</div>\n", styles: [":host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker-input{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-datepicker-input:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-datepicker-decade{color:var(--tk-color-text-default, #121214)}:host ::ng-deep .p-datepicker-clear-icon{color:var(--tk-surface-700, #424243);inset-inline-end:2.5rem!important}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-datepicker-day-selected-range{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .p-datepicker-panel{min-width:0!important;max-width:300px!important;width:100%!important}.datepicker-container{margin-top:var(--tk-spacing-base-200, 2rem)}.datepicker-container.inline{margin-top:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], stepHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepHour", required: false }] }], stepMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinute", required: false }] }], stepSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSecond", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }, { type: i0.Output, args: ["modelValueChange"] }], handleSelect: [{ type: i0.Output, args: ["handleSelect"] }], handleClear: [{ type: i0.Output, args: ["handleClear"] }] } });
 /**

package/fesm2022/tekus-design-system-components-date-picker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-date-picker.mjs","sources":["../../../projects/design-system/components/date-picker/src/date-picker.component.ts","../../../projects/design-system/components/date-picker/src/date-picker.component.html","../../../projects/design-system/components/date-picker/tekus-design-system-components-date-picker.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n OnInit,\n inject,\n input,\n model,\n signal,\n computed,\n output,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n FormsModule,\n ReactiveFormsModule,\n FormControl,\n ControlValueAccessor,\n NgControl,\n} from '@angular/forms';\n\nimport { DatePickerModule } from 'primeng/datepicker';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faCalendarDay, faClock } from '@fortawesome/pro-regular-svg-icons';\n\nexport type DateValue = Date \| [Date, Date] \| null;\n\n@Component({\n selector: 'tk-date-picker',\n imports: [\n FormsModule,\n ReactiveFormsModule,\n DatePickerModule,\n FloatLabelModule,\n FaIconComponent,\n ],\n templateUrl: './date-picker.component.html',\n styleUrl: './date-picker.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/*\n @component DatePickerComponent\n * @description\n * A wrapper around PrimeNG's DatePicker component with support for single-date,\n * range selection, and time-only modes. It uses Angular Signals for reactivity\n * and strictly implements the ControlValueAccessor interface via NgControl.\n /\nexport class DatePickerComponent implements OnInit, ControlValueAccessor {\n /* Internal references and injections /\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n /\n @property {InputSignal<'date' \| 'time' \| 'both'>} variant\n * @description\n * Defines the visual and functional mode:\n * - `'date'`: standard date/range picker\n * - `'time'`: time-only picker\n * - `'both'`: date and time picker\n * @default 'date'\n /\n variant = input<'date' \| 'time' \| 'both'>('date');\n\n /\n @property {InputSignal<'single' \| 'range'>} selectionMode\n * @description\n * Defines how the datepicker behaves:\n * - `'single'`: select one date\n * - `'range'`: select a pair of dates [start, end]\n * @default 'range'\n /\n selectionMode = input<'single' \| 'range'>('range');\n\n /\n @property {InputSignal<boolean>} readonlyInput\n * @description\n * Disables manual typing in the input and forces the user to select via the calendar.\n * @default true\n /\n readonlyInput = input<boolean>(true);\n\n /\n @property {InputSignal<boolean>} showClear\n * @description\n * Displays a clear button that resets the datepicker value.\n * @default true\n /\n showClear = input<boolean>(true);\n\n /\n @property {InputSignal<boolean>} showIcon\n * @description\n * Shows the calendar or clock icon inside the input.\n * @default true\n /\n showIcon = input<boolean>(true);\n\n /\n @property {InputSignal<string>} dateFormat\n * @description\n * Format used by PrimeNG for displaying dates.\n * @default 'dd/mm/yy'\n /\n dateFormat = input<string>('dd/mm/yy');\n\n /\n @property {InputSignal<string>} timeFormat\n * @description\n * Format used by PrimeNG for displaying times.\n * @default 'HH:mm'\n /\n timeFormat = input<string>('HH:mm');\n\n /\n @property {InputSignal<number>} stepHour\n * @description\n * Hours to skip when clicking up/down.\n * @default 1\n /\n stepHour = input<number>(1);\n\n /\n @property {InputSignal<number>} stepMinute\n * @description\n * Minutes to skip when clicking up/down.\n * @default 1\n /\n stepMinute = input<number>(1);\n\n /\n @property {InputSignal<number>} stepSecond\n * @description\n * Seconds to skip when clicking up/down.\n * @default 1\n /\n stepSecond = input<number>(1);\n\n /\n @property {InputSignal<boolean>} showSeconds\n * @description\n * Whether to show seconds in the time picker.\n * Only applicable when hourFormat is '24'.\n * @default false\n /\n showSeconds = input<boolean>(false);\n \n /\n @property {InputSignal<boolean>} disabled\n * @description\n * Whether the component is disabled.\n * @default false\n /\n disabled = input<boolean>(false);\n\n /\n @property {InputSignal<boolean>} inline\n * @description\n * Whether to display the datepicker inline.\n * @default false\n /\n inline = input<boolean>(false);\n\n /\n @property {InputSignal<boolean>} showTime\n * @description\n * Whether to show the time picker along with the date picker.\n * @default false\n /\n showTime = input<boolean>(false);\n\n /\n @property {InputSignal<'12' \| '24'>} hourFormat\n * @description\n * Format of the hours: '12' or '24'.\n * @default '24'\n /\n hourFormat = input<'12' \| '24'>('24');\n\n /\n @property {InputSignal<string \| HTMLElement \| null \| undefined>} appendTo\n * @description\n * Target element to attach the overlay to.\n * @default 'null'\n /\n appendTo = input<string \| HTMLElement \| null \| undefined>('body');\n\n /\n @property {InputSignal<number>} baseZIndex\n * @description\n * Base z-index value for the overlay.\n * @default 10000\n /\n baseZIndex = input<number>(10000);\n\n /\n @property {InputSignal<Date \| null>} maxDate\n * @description\n * Maximum selectable date.\n * @default null\n /\n maxDate = input<Date \| null>(null);\n\n /\n @property {InputSignal<Date \| null>} minDate\n * @description\n * Minimum selectable date.\n * @default null\n /\n minDate = input<Date \| null>(null);\n\n /\n @property {InputSignal<string>} labelText\n * @description\n * Label shown by the float-label wrapper.\n /\n labelText = input<string>('Select a date');\n\n /\n @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the datepicker value.\n * If not provided, an internal FormControl is created.\n /\n control = input<FormControl \| undefined>(undefined);\n\n /\n @property {ModelSignal<DateValue>} modelValue\n * @description\n * The value of the datepicker model. Supports two-way binding.\n /\n modelValue = model<DateValue>(null);\n\n /\n @property {OutputRef<DateValue>} handleSelect\n * @description\n * Emitted when a value is selected.\n /\n handleSelect = output<DateValue>();\n\n /\n @property {OutputRef<void>} handleClear\n * @description\n * Emitted when the value is cleared.\n /\n handleClear = output<void>();\n\n /\n @property {WritableSignal<boolean>} disabledStatus\n * @description\n * Internal signal to track disabled state.\n /\n disabledStatus = signal<boolean>(false);\n \n /\n @property {Signal<boolean>} effectiveDisabled\n * @description\n * Returns true if either the [disabled] input is true OR the FormControl is disabled.\n /\n effectiveDisabled = computed(() => this.disabled() \|\| this.disabledStatus());\n\n /* Computed properties /\n\n /\n @property {Signal<'single' \| 'range'>} effectiveSelectionMode\n * @description\n * Returns 'single' automatically if variant is 'time', otherwise returns the user-provided selectionMode.\n /\n effectiveSelectionMode = computed(() => {\n return this.variant() === 'time' ? 'single' : this.selectionMode();\n });\n\n /\n @property {Signal<string>} effectiveDateFormat\n * @description\n * Returns the user-provided dateFormat or timeFormat based on the variant.\n /\n effectiveDateFormat = computed(() => {\n return this.variant() === 'time' ? this.timeFormat() : this.dateFormat();\n });\n\n /\n @property {Signal<boolean>} effectiveShowSeconds\n * @description\n * Returns whether seconds should be shown, restricted to 24h format.\n /\n effectiveShowSeconds = computed(() => {\n return (\n (this.effectiveShowTime() \|\| this.variant() === 'time') &&\n this.hourFormat() === '24' &&\n this.showSeconds()\n );\n });\n\n /\n @property {Signal<boolean>} effectiveShowTime\n * @description\n * Returns whether the time picker should be shown.\n /\n effectiveShowTime = computed(() => {\n return this.variant() === 'both' \|\| this.showTime();\n });\n\n /\n @property {Signal<FormControl>} effectiveControl\n * @description\n * Returns the external FormControl from NgControl or a local fallback.\n /\n private readonly internalControl = new FormControl<DateValue>(null);\n get effectiveControl(): FormControl {\n return (\n (this.ngControl?.control as FormControl) \|\|\n this.control() \|\|\n this.internalControl\n );\n }\n\n /* Icons /\n faCalendarDay = faCalendarDay;\n faClock = faClock;\n\n /* CVA Logic /\n onChange: (value: DateValue) => void = () => {};\n onTouched: () => void = () => {};\n private lastValue: DateValue = null;\n private isWriting = false;\n\n ngOnInit(): void {\n const control = this.effectiveControl;\n\n // Synchronize initial disabled state\n this.disabledStatus.set(control.disabled);\n\n // Watch for status changes (to support [control].disable() etc. from outside)\n control.statusChanges\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.disabledStatus.set(control.disabled);\n });\n\n // Synchronize signal model with initial control value\n const initialValue = control.value;\n if (initialValue !== null && initialValue !== undefined) {\n this.modelValue.set(initialValue);\n this.lastValue = initialValue;\n }\n }\n\n writeValue(value: DateValue): void {\n this.isWriting = true;\n this.modelValue.set(value);\n this.lastValue = value;\n this.isWriting = false;\n }\n\n registerOnChange(fn: (value: DateValue) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabledStatus.set(isDisabled);\n const control = this.effectiveControl;\n if (isDisabled && control.enabled) {\n control.disable({ emitEvent: false });\n } else if (!isDisabled && control.disabled) {\n control.enable({ emitEvent: false });\n }\n }\n\n /\n @method onModelChange\n * @description\n * Called when the PrimeNG DatePicker template updates the value.\n /\n onModelChange(value: DateValue): void {\n if (this.isWriting) {\n return;\n }\n let finalValue = value;\n\n // Time cascading logic (single mode only)\n if (\n this.selectionMode() === 'single' &&\n finalValue instanceof Date &&\n this.lastValue instanceof Date\n ) {\n finalValue = this.applyTimeCascading(this.lastValue, finalValue);\n }\n\n this.lastValue = finalValue;\n this.modelValue.set(finalValue);\n this.onChange(finalValue);\n this.effectiveControl.setValue(finalValue, { emitEvent: false });\n this.effectiveControl.markAsDirty();\n\n if (finalValue === null) {\n this.handleClear.emit();\n } else if (this.selectionMode() === 'range') {\n if (Array.isArray(finalValue)) {\n const [start, end] = finalValue;\n if (start instanceof Date && end instanceof Date) {\n this.handleSelect.emit(finalValue);\n }\n }\n } else if (finalValue instanceof Date) {\n this.handleSelect.emit(finalValue);\n }\n }\n\n /\n @method applyTimeCascading\n * @private\n * @description\n * Adjusts the date when minutes or seconds wrap around.\n /\n private applyTimeCascading(prev: Date, curr: Date): Date {\n const updated = new Date(curr);\n\n // Cascade seconds to minutes\n if (prev.getSeconds() === 59 && updated.getSeconds() === 0) {\n updated.setMinutes(updated.getMinutes() + 1);\n } else if (prev.getSeconds() === 0 && updated.getSeconds() === 59) {\n updated.setMinutes(updated.getMinutes() - 1);\n }\n\n // Cascade minutes to hours\n if (prev.getMinutes() === 59 && updated.getMinutes() === 0) {\n updated.setHours(updated.getHours() + 1);\n } else if (prev.getMinutes() === 0 && updated.getMinutes() === 59) {\n updated.setHours(updated.getHours() - 1);\n }\n\n return updated;\n }\n\n /\n @method onBlur\n * @description\n * Triggered when the component loses focus.\n /\n onBlur(): void {\n this.onTouched();\n this.effectiveControl.markAsTouched();\n }\n\n /\n @method clear\n * @description\n * Programmatically clears the value.\n /\n clear() {\n this.onModelChange(null);\n }\n}\n","<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n @if (inline()) {\n <p-datepicker\n inputId=\"datepicker\"\n [ngModel]=\"modelValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (onBlur)=\"onBlur()\"\n [selectionMode]=\"effectiveSelectionMode()\"\n [readonlyInput]=\"readonlyInput()\"\n [showClear]=\"showClear()\"\n [showIcon]=\"showIcon()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabled]=\"effectiveDisabled()\"\n [dateFormat]=\"effectiveDateFormat()\"\n [timeOnly]=\"variant() === 'time'\"\n [inline]=\"true\"\n [showTime]=\"effectiveShowTime()\"\n [hourFormat]=\"hourFormat()\"\n [stepHour]=\"stepHour()\"\n [stepMinute]=\"stepMinute()\"\n [stepSecond]=\"stepSecond()\"\n [showSeconds]=\"effectiveShowSeconds()\">\n </p-datepicker>\n } @else {\n <p-floatlabel>\n <p-datepicker\n inputId=\"datepicker\"\n iconDisplay=\"input\"\n [ngModel]=\"modelValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (onBlur)=\"onBlur()\"\n [selectionMode]=\"effectiveSelectionMode()\"\n [readonlyInput]=\"readonlyInput()\"\n [showClear]=\"showClear()\"\n [showIcon]=\"showIcon()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabled]=\"effectiveDisabled()\"\n [dateFormat]=\"effectiveDateFormat()\"\n [timeOnly]=\"variant() === 'time'\"\n [showTime]=\"effectiveShowTime()\"\n [hourFormat]=\"hourFormat()\"\n [appendTo]=\"appendTo()\"\n [baseZIndex]=\"baseZIndex()\"\n [stepHour]=\"stepHour()\"\n [stepMinute]=\"stepMinute()\"\n [stepSecond]=\"stepSecond()\"\n [showSeconds]=\"effectiveShowSeconds()\">\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n <fa-icon\n tabindex=\"0\"\n [icon]=\"variant() === 'time' ? faClock : faCalendarDay\"\n (keydown.enter)=\"clickCallBack($event)\"\n (keydown.space)=\"clickCallBack($event)\"\n (click)=\"clickCallBack($event)\">\n </fa-icon>\n </ng-template>\n </p-datepicker>\n\n <label for=\"datepicker\">{{ labelText() }}</label>\n </p-floatlabel>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"tekus-design-system-components-date-picker.mjs","sources":["../../../projects/design-system/components/date-picker/src/date-picker.component.ts","../../../projects/design-system/components/date-picker/src/date-picker.component.html","../../../projects/design-system/components/date-picker/tekus-design-system-components-date-picker.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n OnInit,\n inject,\n input,\n model,\n signal,\n computed,\n output,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n FormsModule,\n ReactiveFormsModule,\n FormControl,\n ControlValueAccessor,\n NgControl,\n} from '@angular/forms';\n\nimport { DatePickerModule } from 'primeng/datepicker';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faCalendarDay, faClock } from '@fortawesome/pro-regular-svg-icons';\n\nexport type DateValue = Date \| [Date, Date] \| null;\n\n@Component({\n selector: 'tk-date-picker',\n imports: [\n FormsModule,\n ReactiveFormsModule,\n DatePickerModule,\n FloatLabelModule,\n FaIconComponent,\n ],\n templateUrl: './date-picker.component.html',\n styleUrl: './date-picker.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/*\n @component DatePickerComponent\n * @description\n * A wrapper around PrimeNG's DatePicker component with support for single-date,\n * range selection, and time-only modes. It uses Angular Signals for reactivity\n * and strictly implements the ControlValueAccessor interface via NgControl.\n /\nexport class DatePickerComponent implements OnInit, ControlValueAccessor {\n /* Internal references and injections /\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n /\n @property {InputSignal<'date' \| 'time' \| 'both'>} variant\n * @description\n * Defines the visual and functional mode:\n * - `'date'`: standard date/range picker\n * - `'time'`: time-only picker\n * - `'both'`: date and time picker\n * @default 'date'\n /\n variant = input<'date' \| 'time' \| 'both'>('date');\n\n /\n @property {InputSignal<'single' \| 'range'>} selectionMode\n * @description\n * Defines how the datepicker behaves:\n * - `'single'`: select one date\n * - `'range'`: select a pair of dates [start, end]\n * @default 'range'\n /\n selectionMode = input<'single' \| 'range'>('range');\n\n /\n @property {InputSignal<boolean>} readonlyInput\n * @description\n * Disables manual typing in the input and forces the user to select via the calendar.\n * @default true\n /\n readonlyInput = input<boolean>(true);\n\n /\n @property {InputSignal<boolean>} showClear\n * @description\n * Displays a clear button that resets the datepicker value.\n * @default true\n /\n showClear = input<boolean>(true);\n\n /\n @property {InputSignal<boolean>} showIcon\n * @description\n * Shows the calendar or clock icon inside the input.\n * @default true\n /\n showIcon = input<boolean>(true);\n\n /\n @property {InputSignal<string>} dateFormat\n * @description\n * Format used by PrimeNG for displaying dates.\n * @default 'dd/mm/yy'\n /\n dateFormat = input<string>('dd/mm/yy');\n\n /\n @property {InputSignal<string>} timeFormat\n * @description\n * Format used by PrimeNG for displaying times.\n * @default 'HH:mm'\n /\n timeFormat = input<string>('HH:mm');\n\n /\n @property {InputSignal<number>} stepHour\n * @description\n * Hours to skip when clicking up/down.\n * @default 1\n /\n stepHour = input<number>(1);\n\n /\n @property {InputSignal<number>} stepMinute\n * @description\n * Minutes to skip when clicking up/down.\n * @default 1\n /\n stepMinute = input<number>(1);\n\n /\n @property {InputSignal<number>} stepSecond\n * @description\n * Seconds to skip when clicking up/down.\n * @default 1\n /\n stepSecond = input<number>(1);\n\n /\n @property {InputSignal<boolean>} showSeconds\n * @description\n * Whether to show seconds in the time picker.\n * Only applicable when hourFormat is '24'.\n * @default false\n /\n showSeconds = input<boolean>(false);\n \n /\n @property {InputSignal<boolean>} disabled\n * @description\n * Whether the component is disabled.\n * @default false\n /\n disabled = input<boolean>(false);\n\n /\n @property {InputSignal<boolean>} inline\n * @description\n * Whether to display the datepicker inline.\n * @default false\n /\n inline = input<boolean>(false);\n\n /\n @property {InputSignal<boolean>} showTime\n * @description\n * Whether to show the time picker along with the date picker.\n * @default false\n /\n showTime = input<boolean>(false);\n\n /\n @property {InputSignal<'12' \| '24'>} hourFormat\n * @description\n * Format of the hours: '12' or '24'.\n * @default '24'\n /\n hourFormat = input<'12' \| '24'>('24');\n\n /\n @property {InputSignal<string \| HTMLElement \| null \| undefined>} appendTo\n * @description\n * Target element to attach the overlay to.\n * @default 'null'\n /\n appendTo = input<string \| HTMLElement \| null \| undefined>('body');\n\n /\n @property {InputSignal<number>} baseZIndex\n * @description\n * Base z-index value for the overlay.\n * @default 10000\n /\n baseZIndex = input<number>(10000);\n\n /\n @property {InputSignal<Date \| null>} maxDate\n * @description\n * Maximum selectable date.\n * @default null\n /\n maxDate = input<Date \| null>(null);\n\n /\n @property {InputSignal<Date \| null>} minDate\n * @description\n * Minimum selectable date.\n * @default null\n /\n minDate = input<Date \| null>(null);\n\n /\n @property {InputSignal<string>} labelText\n * @description\n * Label shown by the float-label wrapper.\n /\n labelText = input<string>('Select a date');\n\n /\n @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the datepicker value.\n * If not provided, an internal FormControl is created.\n /\n control = input<FormControl \| undefined>(undefined);\n\n /\n @property {ModelSignal<DateValue>} modelValue\n * @description\n * The value of the datepicker model. Supports two-way binding.\n /\n modelValue = model<DateValue>(null);\n\n /\n @property {OutputRef<DateValue>} handleSelect\n * @description\n * Emitted when a value is selected.\n /\n handleSelect = output<DateValue>();\n\n /\n @property {OutputRef<void>} handleClear\n * @description\n * Emitted when the value is cleared.\n /\n handleClear = output<void>();\n\n /\n @property {WritableSignal<boolean>} disabledStatus\n * @description\n * Internal signal to track disabled state.\n /\n disabledStatus = signal<boolean>(false);\n \n /\n @property {Signal<boolean>} effectiveDisabled\n * @description\n * Returns true if either the [disabled] input is true OR the FormControl is disabled.\n /\n effectiveDisabled = computed(() => this.disabled() \|\| this.disabledStatus());\n\n /* Computed properties /\n\n /\n @property {Signal<'single' \| 'range'>} effectiveSelectionMode\n * @description\n * Returns 'single' automatically if variant is 'time', otherwise returns the user-provided selectionMode.\n /\n effectiveSelectionMode = computed(() => {\n return this.variant() === 'time' ? 'single' : this.selectionMode();\n });\n\n /\n @property {Signal<string>} effectiveDateFormat\n * @description\n * Returns the user-provided dateFormat or timeFormat based on the variant.\n /\n effectiveDateFormat = computed(() => {\n return this.variant() === 'time' ? this.timeFormat() : this.dateFormat();\n });\n\n /\n @property {Signal<boolean>} effectiveShowSeconds\n * @description\n * Returns whether seconds should be shown, restricted to 24h format.\n /\n effectiveShowSeconds = computed(() => {\n return (\n (this.effectiveShowTime() \|\| this.variant() === 'time') &&\n this.hourFormat() === '24' &&\n this.showSeconds()\n );\n });\n\n /\n @property {Signal<boolean>} effectiveShowTime\n * @description\n * Returns whether the time picker should be shown.\n /\n effectiveShowTime = computed(() => {\n return this.variant() === 'both' \|\| this.showTime();\n });\n\n /\n @property {Signal<FormControl>} effectiveControl\n * @description\n * Returns the external FormControl from NgControl or a local fallback.\n /\n private readonly internalControl = new FormControl<DateValue>(null);\n get effectiveControl(): FormControl {\n return (\n (this.ngControl?.control as FormControl) \|\|\n this.control() \|\|\n this.internalControl\n );\n }\n\n /* Icons /\n faCalendarDay = faCalendarDay;\n faClock = faClock;\n\n /* CVA Logic /\n onChange: (value: DateValue) => void = () => {};\n onTouched: () => void = () => {};\n private lastValue: DateValue = null;\n private isWriting = false;\n\n ngOnInit(): void {\n const control = this.effectiveControl;\n\n // Synchronize initial disabled state\n this.disabledStatus.set(control.disabled);\n\n // Watch for status changes (to support [control].disable() etc. from outside)\n control.statusChanges\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.disabledStatus.set(control.disabled);\n });\n\n // Synchronize signal model with initial control value\n const initialValue = control.value;\n if (initialValue !== null && initialValue !== undefined) {\n this.modelValue.set(initialValue);\n this.lastValue = initialValue;\n }\n }\n\n writeValue(value: DateValue): void {\n this.isWriting = true;\n this.modelValue.set(value);\n this.lastValue = value;\n this.isWriting = false;\n }\n\n registerOnChange(fn: (value: DateValue) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabledStatus.set(isDisabled);\n const control = this.effectiveControl;\n if (isDisabled && control.enabled) {\n control.disable({ emitEvent: false });\n } else if (!isDisabled && control.disabled) {\n control.enable({ emitEvent: false });\n }\n }\n\n /\n @method onModelChange\n * @description\n * Called when the PrimeNG DatePicker template updates the value.\n /\n onModelChange(value: DateValue): void {\n if (this.isWriting) {\n return;\n }\n let finalValue = value;\n\n // Time cascading logic (single mode only)\n if (\n this.selectionMode() === 'single' &&\n finalValue instanceof Date &&\n this.lastValue instanceof Date\n ) {\n finalValue = this.applyTimeCascading(this.lastValue, finalValue);\n }\n\n this.lastValue = finalValue;\n this.modelValue.set(finalValue);\n this.onChange(finalValue);\n this.effectiveControl.setValue(finalValue, { emitEvent: false });\n this.effectiveControl.markAsDirty();\n\n if (finalValue === null) {\n this.handleClear.emit();\n } else if (this.selectionMode() === 'range') {\n if (Array.isArray(finalValue)) {\n const [start, end] = finalValue;\n if (start instanceof Date && end instanceof Date) {\n this.handleSelect.emit(finalValue);\n }\n }\n } else if (finalValue instanceof Date) {\n this.handleSelect.emit(finalValue);\n }\n }\n\n /\n @method applyTimeCascading\n * @private\n * @description\n * Adjusts the date when minutes or seconds wrap around.\n /\n private applyTimeCascading(prev: Date, curr: Date): Date {\n const updated = new Date(curr);\n\n // Cascade seconds to minutes\n if (prev.getSeconds() === 59 && updated.getSeconds() === 0) {\n updated.setMinutes(updated.getMinutes() + 1);\n } else if (prev.getSeconds() === 0 && updated.getSeconds() === 59) {\n updated.setMinutes(updated.getMinutes() - 1);\n }\n\n // Cascade minutes to hours\n if (prev.getMinutes() === 59 && updated.getMinutes() === 0) {\n updated.setHours(updated.getHours() + 1);\n } else if (prev.getMinutes() === 0 && updated.getMinutes() === 59) {\n updated.setHours(updated.getHours() - 1);\n }\n\n return updated;\n }\n\n /\n @method onBlur\n * @description\n * Triggered when the component loses focus.\n /\n onBlur(): void {\n this.onTouched();\n this.effectiveControl.markAsTouched();\n }\n\n /\n @method clear\n * @description\n * Programmatically clears the value.\n /\n clear() {\n this.onModelChange(null);\n }\n}\n","<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n @if (inline()) {\n <p-datepicker\n inputId=\"datepicker\"\n [ngModel]=\"modelValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (onBlur)=\"onBlur()\"\n [selectionMode]=\"effectiveSelectionMode()\"\n [readonlyInput]=\"readonlyInput()\"\n [showClear]=\"showClear()\"\n [showIcon]=\"showIcon()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabled]=\"effectiveDisabled()\"\n [dateFormat]=\"effectiveDateFormat()\"\n [timeOnly]=\"variant() === 'time'\"\n [inline]=\"true\"\n [showTime]=\"effectiveShowTime()\"\n [hourFormat]=\"hourFormat()\"\n [stepHour]=\"stepHour()\"\n [stepMinute]=\"stepMinute()\"\n [stepSecond]=\"stepSecond()\"\n [showSeconds]=\"effectiveShowSeconds()\">\n </p-datepicker>\n } @else {\n <p-floatlabel>\n <p-datepicker\n inputId=\"datepicker\"\n iconDisplay=\"input\"\n [ngModel]=\"modelValue()\"\n (ngModelChange)=\"onModelChange($event)\"\n (onBlur)=\"onBlur()\"\n [selectionMode]=\"effectiveSelectionMode()\"\n [readonlyInput]=\"readonlyInput()\"\n [showClear]=\"showClear()\"\n [showIcon]=\"showIcon()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabled]=\"effectiveDisabled()\"\n [dateFormat]=\"effectiveDateFormat()\"\n [timeOnly]=\"variant() === 'time'\"\n [showTime]=\"effectiveShowTime()\"\n [hourFormat]=\"hourFormat()\"\n [appendTo]=\"appendTo()\"\n [baseZIndex]=\"baseZIndex()\"\n [stepHour]=\"stepHour()\"\n [stepMinute]=\"stepMinute()\"\n [stepSecond]=\"stepSecond()\"\n [showSeconds]=\"effectiveShowSeconds()\">\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n <fa-icon\n tabindex=\"0\"\n [icon]=\"variant() === 'time' ? faClock : faCalendarDay\"\n (keydown.enter)=\"clickCallBack($event)\"\n (keydown.space)=\"clickCallBack($event)\"\n (click)=\"clickCallBack($event)\">\n </fa-icon>\n </ng-template>\n </p-datepicker>\n\n <label for=\"datepicker\">{{ labelText() }}</label>\n </p-floatlabel>\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-drawer.mjs CHANGED Viewed

@@ -224,11 +224,11 @@ class DrawerComponent {
         this.returnValueOnClose = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DrawerComponent, isStandalone: true, selector: "tk-drawer", inputs: { dialogRef: { classPropertyName: "dialogRef", publicName: "dialogRef", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, headerAction: { classPropertyName: "headerAction", publicName: "headerAction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interceptor: { classPropertyName: "interceptor", publicName: "interceptor", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange", closed: "closed" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n        @if (hasHeaderAction()) {\n          <div class=\"tk-drawer__actions\">\n            <tk-button\n              [label]=\"headerAction()!.label\"\n              [severity]=\"headerAction()!.severity\"\n              [variant]=\"headerAction()!.variant\"\n              (clicked)=\"\n                handleHeaderAction(\n                  headerAction()!.action,\n                  headerAction()!.returnValue\n                )\n              \" />\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DrawerComponent, isStandalone: true, selector: "tk-drawer", inputs: { dialogRef: { classPropertyName: "dialogRef", publicName: "dialogRef", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, headerAction: { classPropertyName: "headerAction", publicName: "headerAction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interceptor: { classPropertyName: "interceptor", publicName: "interceptor", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange", closed: "closed" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n        @if (hasHeaderAction()) {\n          <div class=\"tk-drawer__actions\">\n            <tk-button\n              [label]=\"headerAction()!.label\"\n              [severity]=\"headerAction()!.severity\"\n              [variant]=\"headerAction()!.variant\"\n              (clicked)=\"\n                handleHeaderAction(\n                  headerAction()!.action,\n                  headerAction()!.returnValue\n                )\n              \" />\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-padding-xs, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-drawer', imports: [DrawerModule, ButtonComponent], template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n        @if (hasHeaderAction()) {\n          <div class=\"tk-drawer__actions\">\n            <tk-button\n              [label]=\"headerAction()!.label\"\n              [severity]=\"headerAction()!.severity\"\n              [variant]=\"headerAction()!.variant\"\n              (clicked)=\"\n                handleHeaderAction(\n                  headerAction()!.action,\n                  headerAction()!.returnValue\n                )\n              \" />\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-drawer', imports: [DrawerModule, ButtonComponent], template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\">\n  @if (title() || hasHeaderAction()) {\n    <ng-template pTemplate=\"header\">\n      <div class=\"tk-drawer__header\">\n        <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n        @if (hasHeaderAction()) {\n          <div class=\"tk-drawer__actions\">\n            <tk-button\n              [label]=\"headerAction()!.label\"\n              [severity]=\"headerAction()!.severity\"\n              [variant]=\"headerAction()!.variant\"\n              (clicked)=\"\n                handleHeaderAction(\n                  headerAction()!.action,\n                  headerAction()!.returnValue\n                )\n              \" />\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-padding-xs, .25rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{
                             read: ViewContainerRef,
                         }, isSignal: true }] }], dialogRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogRef", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], headerAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], interceptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "interceptor", required: false }] }], isOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpened", required: false }] }, { type: i0.Output, args: ["isOpenedChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });