@tekus/design-system 5.41.0 → 5.42.1

package/fesm2022/tekus-design-system-components-column-picker.mjs

@@ -0,0 +1,210 @@
+import * as i0 from '@angular/core';
+import { inject, input, model, output, linkedSignal, computed, signal, viewChild, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { map } from 'rxjs';
+import * as i1 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
+import { ButtonComponent } from '@tekus/design-system/components/button';
+import { CheckboxComponent } from '@tekus/design-system/components/checkbox';
+import { DrawerComponent } from '@tekus/design-system/components/drawer';
+import { IconComponent } from '@tekus/design-system/components/icon';
+import { TooltipComponent } from '@tekus/design-system/components/tooltip';
+
+/**
+ * @component ColumnPickerComponent
+ * @description
+ * Icon button that opens a list of checkboxes to show or hide table columns:
+ * a popover on desktop and a bottom drawer on mobile. Changes stay temporary
+ * until "Aplicar". The consumer owns the selection: `[(hiddenColumns)]`
+ * preloads a stored preference and `(appliedColumns)` emits it to be saved.
+ *
+ * @usage
+ * ```html
+ * <tk-column-picker [columns]="columnOptions" [(hiddenColumns)]="hidden" />
+ * <tk-table [columns]="columns" [hiddenColumns]="hidden()" />
+ * ```
+ */
+class ColumnPickerComponent {
+    constructor() {
+        this.breakpointObserver = inject(BreakpointObserver);
+        /** Responsive flag: drawer instead of popover below 768px */
+        this.isMobile = toSignal(this.breakpointObserver.observe('(max-width: 768px)').pipe(map(result => result.matches)), { initialValue: false });
+        /**
+         * Columns listed in the picker. `key` must match the `tk-table` column `field`.
+         * @default []
+         */
+        this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /**
+         * Two-way bindable list of hidden column keys. Its initial value preloads a
+         * saved selection; unknown keys are ignored. Locked keys are removed right
+         * after the first change detection, so a bound tk-table could hide a locked
+         * column for that first frame: do not preload locked keys.
+         * @default []
+         */
+        this.hiddenColumns = model([], ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
+        /**
+         * Picker title, button tooltip and accessible name.
+         * @default 'Columnas'
+         */
+        this.label = input('Columnas', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * Label for the button that shows every column again.
+         * @default 'Restablecer'
+         */
+        this.resetLabel = input('Restablecer', ...(ngDevMode ? [{ debugName: "resetLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Label for the button that applies the selection.
+         * @default 'Aplicar'
+         */
+        this.applyLabel = input('Aplicar', ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Accessible name of the popover close button.
+         * @default 'Cerrar'
+         */
+        this.closeLabel = input('Cerrar', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits the hidden column keys when the user applies the selection,
+         * so the consumer can store it and preload it next time.
+         */
+        this.appliedColumns = output();
+        /**
+         * Temporary hidden column keys held before the user clicks "Aplicar".
+         * Follows `hiddenColumns` (so `apply()` never starts from an empty list)
+         * and stays writable while the user checks/unchecks options.
+         */
+        this.tempHiddenColumns = linkedSignal(() => [...this.hiddenColumns()], ...(ngDevMode ? [{ debugName: "tempHiddenColumns" }] : /* istanbul ignore next */ []));
+        /** Lookup of the temporary hidden keys, used once per option on each render */
+        this.tempHiddenSet = computed(() => new Set(this.tempHiddenColumns()), ...(ngDevMode ? [{ debugName: "tempHiddenSet" }] : /* istanbul ignore next */ []));
+        /** Controls visibility of the mobile drawer */
+        this.showDrawer = signal(false, ...(ngDevMode ? [{ debugName: "showDrawer" }] : /* istanbul ignore next */ []));
+        this.popover = viewChild('popover', ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+        /** Options shown before the list scrolls (limits the view, not the columns) */
+        this.maxVisibleOptions = 8;
+        this.list = viewChild('list', ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+        /**
+         * Max height of the scrollable body, measured from the rendered options so
+         * exactly 8 fit whatever the theme, font or 2-line names. Null when all fit.
+         */
+        this.bodyMaxHeight = signal(null, ...(ngDevMode ? [{ debugName: "bodyMaxHeight" }] : /* istanbul ignore next */ []));
+        /** Keys of the columns the user can hide (not locked) */
+        this.hideableColumnKeys = computed(() => new Set(this.columns().filter(col => !col.locked).map(col => col.key)), ...(ngDevMode ? [{ debugName: "hideableColumnKeys" }] : /* istanbul ignore next */ []));
+        /** Locked column keys present in `hiddenColumns` (e.g. from a preload); they get removed */
+        this.lockedHiddenColumnKeys = computed(() => {
+            const locked = new Set(this.columns().filter(col => col.locked).map(col => col.key));
+            return new Set(this.hiddenColumns().filter(key => locked.has(key)));
+        }, ...(ngDevMode ? [{ debugName: "lockedHiddenColumnKeys" }] : /* istanbul ignore next */ []));
+        /** Whether any existing, hideable column is currently hidden */
+        this.hasHiddenColumns = computed(() => {
+            const hideable = this.hideableColumnKeys();
+            return this.hiddenColumns().some(key => hideable.has(key));
+        }, ...(ngDevMode ? [{ debugName: "hasHiddenColumns" }] : /* istanbul ignore next */ []));
+        /** "Aplicar" requires at least one visible column in the temporary selection */
+        this.canApply = computed(() => {
+            const hidden = new Set(this.tempHiddenColumns());
+            return this.columns().some(col => col.locked || !hidden.has(col.key));
+        }, ...(ngDevMode ? [{ debugName: "canApply" }] : /* istanbul ignore next */ []));
+        /**
+         * Measure the list whenever it gets or changes size (popover/drawer open and
+         * animated, fonts loaded, columns changed), not at a fixed moment.
+         */
+        effect(onCleanup => {
+            const list = this.list()?.nativeElement;
+            if (!list) {
+                return;
+            }
+            const observer = new ResizeObserver(() => this.bodyMaxHeight.set(this.calculateBodyMaxHeight(list)));
+            observer.observe(list);
+            onCleanup(() => observer.disconnect());
+        });
+        /**
+         * Locked columns can never be hidden: drop them from a preloaded (or
+         * externally set) selection so the bound tk-table never hides them either.
+         * Unknown keys are left untouched, the table ignores them.
+         */
+        effect(() => {
+            const lockedHidden = this.lockedHiddenColumnKeys();
+            if (!lockedHidden.size) {
+                return;
+            }
+            const hidden = untracked(this.hiddenColumns);
+            this.hiddenColumns.set(hidden.filter(key => !lockedHidden.has(key)));
+        });
+    }
+    /** Bottom of the last visible option relative to the first one, or null when all fit */
+    calculateBodyMaxHeight(list) {
+        const options = list.querySelectorAll('.tk-column-picker__option');
+        if (options.length <= this.maxVisibleOptions) {
+            return null;
+        }
+        const first = options[0];
+        const last = options[this.maxVisibleOptions - 1];
+        const height = last.offsetTop + last.offsetHeight - first.offsetTop;
+        return height > 0 ? height : null;
+    }
+    /** Toggles the picker and copies the applied selection into temporary state */
+    open(event) {
+        this.tempHiddenColumns.set([...this.hiddenColumns()]);
+        if (this.isMobile()) {
+            this.showDrawer.set(true);
+        }
+        else {
+            this.popover()?.toggle(event);
+        }
+    }
+    /** Whether a column is checked (visible) in the temporary selection */
+    isTempColumnVisible(column) {
+        return column.locked || !this.tempHiddenSet().has(column.key);
+    }
+    /** Checks/unchecks a column in the temporary selection */
+    onTempColumnChange(column, visible) {
+        if (column.locked) {
+            return;
+        }
+        this.tempHiddenColumns.update(prev => {
+            const others = prev.filter(key => key !== column.key);
+            return visible ? others : [...others, column.key];
+        });
+    }
+    /** Shows every column in the temporary selection */
+    reset() {
+        this.tempHiddenColumns.set([]);
+    }
+    /** Saves the temporary selection and emits it for the consumer to store */
+    apply() {
+        if (!this.canApply()) {
+            return;
+        }
+        const hidden = [...this.tempHiddenColumns()];
+        this.hiddenColumns.set(hidden);
+        this.appliedColumns.emit(hidden);
+        if (this.isMobile()) {
+            this.showDrawer.set(false);
+        }
+        else {
+            this.popover()?.hide();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColumnPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ColumnPickerComponent, isStandalone: true, selector: "tk-column-picker", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", appliedColumns: "appliedColumns" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (columns().length > 0) {\n  <!-- preventDefault on keydown cancels the click the key would synthesize, so the popover toggles once -->\n  <tk-button\n    class=\"tk-column-picker__trigger\"\n    [icon]=\"'table-columns'\"\n    [severity]=\"hasHiddenColumns() ? 'primary' : 'secondary'\"\n    [variant]=\"hasHiddenColumns() ? undefined : 'text'\"\n    [tooltipText]=\"label()\"\n    [ariaLabel]=\"label()\"\n    (click)=\"open($event)\"\n    (keydown.enter)=\"$event.preventDefault(); open($event)\"\n    (keydown.space)=\"$event.preventDefault(); open($event)\">\n  </tk-button>\n\n  @if (isMobile()) {\n    <tk-drawer\n      [(isOpened)]=\"showDrawer\"\n      [title]=\"label()\"\n      direction=\"bottom\"\n      [dismissible]=\"true\">\n      <ng-container [ngTemplateOutlet]=\"body\" />\n      <ng-container [ngTemplateOutlet]=\"footer\" />\n    </tk-drawer>\n  } @else {\n    <p-popover #popover styleClass=\"tk-column-picker-popover\">\n      <div class=\"tk-column-picker__overlay\" data-testid=\"column-picker-popover\">\n        <div class=\"tk-column-picker__header\">\n          <span class=\"tk-column-picker__title\">{{ label() }}</span>\n          <button type=\"button\" class=\"tk-column-picker__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"popover.hide()\">\n            <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n          </button>\n        </div>\n        <ng-container [ngTemplateOutlet]=\"body\" />\n        <ng-container [ngTemplateOutlet]=\"footer\" />\n      </div>\n    </p-popover>\n  }\n}\n\n<!-- Shared by the desktop popover and the mobile drawer -->\n<ng-template #body>\n  <div class=\"tk-column-picker__body\" [style.max-height.px]=\"bodyMaxHeight()\">\n    <fieldset #list class=\"tk-column-picker__list\">\n      <legend class=\"tk-column-picker__sr-only\">{{ label() }}</legend>\n      @for (column of columns(); track column.key) {\n        <!-- Own label so long names can be clamped to 2 lines with a tooltip -->\n        <div class=\"tk-column-picker__option\" [class.tk-column-picker__option--locked]=\"column.locked\">\n          <tk-checkbox\n            [inputId]=\"'tk-column-picker-' + column.key\"\n            [binary]=\"true\"\n            [model]=\"isTempColumnVisible(column)\"\n            [disabled]=\"column.locked ?? false\"\n            (modelChange)=\"onTempColumnChange(column, $any($event))\">\n          </tk-checkbox>\n          <tk-tooltip class=\"tk-column-picker__label\" [content]=\"column.label\" [lineClamp]=\"2\">\n            <label [for]=\"'tk-column-picker-' + column.key\">{{ column.label }}</label>\n          </tk-tooltip>\n        </div>\n      }\n    </fieldset>\n  </div>\n</ng-template>\n\n<ng-template #footer>\n  <div class=\"tk-column-picker__footer\">\n    <tk-button\n      [label]=\"resetLabel()\"\n      severity=\"secondary\"\n      variant=\"outlined\"\n      (clicked)=\"reset()\">\n    </tk-button>\n    <tk-button\n      [label]=\"applyLabel()\"\n      severity=\"primary\"\n      [disabled]=\"!canApply()\"\n      (clicked)=\"apply()\">\n    </tk-button>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-flex}.tk-column-picker__trigger{width:2.5rem;height:2.5rem}.tk-column-picker__trigger ::ng-deep .p-button{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center}.tk-column-picker__overlay{display:flex;flex-direction:column;width:20rem;max-width:100%;padding:var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-column-picker__header{display:flex;justify-content:space-between;align-items:center;padding:0 0 var(--tk-spacing-base-50, .5rem) 0}.tk-column-picker__title{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-column-picker__close{background:none;border:none;padding:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-surface-500, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tk-borderRadius-s, 8px);transition:background-color .2s}.tk-column-picker__close:hover{background-color:var(--tk-color-base-surface-100, #f1f5f9);color:var(--tk-color-base-surface-900, #0f172a)}.tk-column-picker__body{display:flex;flex-direction:column;padding:var(--tk-spacing-base-125, 1.25rem) var(--tk-spacing-padding-xs, .25rem) 0;margin-bottom:var(--tk-spacing-base-150, 1.5rem);overflow-y:auto}.tk-column-picker__list{display:flex;flex-direction:column;gap:var(--tk-spacing-base-50, .5rem);min-width:0;margin:0;padding:0;border:0}.tk-column-picker__option{display:flex;align-items:flex-start;gap:var(--tk-spacing-base-50, .5rem)}.tk-column-picker__option tk-checkbox{flex-shrink:0}.tk-column-picker__label{flex:1;font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, 400);line-height:1.25rem}.tk-column-picker__label label{cursor:pointer}.tk-column-picker__option--locked .tk-column-picker__label{color:var(--tk-color-base-surface-600, #424243)}.tk-column-picker__option--locked .tk-column-picker__label label{cursor:default}.tk-column-picker__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tk-column-picker__footer{display:flex;justify-content:flex-end;gap:var(--tk-spacing-base-50, .5rem);padding-top:var(--tk-spacing-base-100, 1rem)}tk-drawer .tk-column-picker__body{padding-top:var(--tk-spacing-base-75, .75rem);margin-bottom:0}tk-drawer .tk-column-picker__footer{padding-top:var(--tk-spacing-base-75, .75rem)}::ng-deep .tk-column-picker-popover{border-radius:var(--tk-borderRadius-m, 12px);box-shadow:0 10px 15px -3px #0000001a;border:1px solid var(--tk-color-base-surface-200, #e2e8f0);overflow:hidden}::ng-deep .tk-column-picker-popover .p-popover-content{padding:0}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "hint", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: DrawerComponent, selector: "tk-drawer", inputs: ["dialogRef", "title", "content", "headerAction", "tag", "subtle", "hasTabs", "size", "direction", "closable", "dismissible", "data", "interceptor", "isOpened"], outputs: ["isOpenedChange", "closed"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position", "lineClamp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColumnPickerComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-column-picker', imports: [
+                        ButtonComponent,
+                        CheckboxComponent,
+                        DrawerComponent,
+                        IconComponent,
+                        NgTemplateOutlet,
+                        PopoverModule,
+                        TooltipComponent,
+                    ], template: "@if (columns().length > 0) {\n  <!-- preventDefault on keydown cancels the click the key would synthesize, so the popover toggles once -->\n  <tk-button\n    class=\"tk-column-picker__trigger\"\n    [icon]=\"'table-columns'\"\n    [severity]=\"hasHiddenColumns() ? 'primary' : 'secondary'\"\n    [variant]=\"hasHiddenColumns() ? undefined : 'text'\"\n    [tooltipText]=\"label()\"\n    [ariaLabel]=\"label()\"\n    (click)=\"open($event)\"\n    (keydown.enter)=\"$event.preventDefault(); open($event)\"\n    (keydown.space)=\"$event.preventDefault(); open($event)\">\n  </tk-button>\n\n  @if (isMobile()) {\n    <tk-drawer\n      [(isOpened)]=\"showDrawer\"\n      [title]=\"label()\"\n      direction=\"bottom\"\n      [dismissible]=\"true\">\n      <ng-container [ngTemplateOutlet]=\"body\" />\n      <ng-container [ngTemplateOutlet]=\"footer\" />\n    </tk-drawer>\n  } @else {\n    <p-popover #popover styleClass=\"tk-column-picker-popover\">\n      <div class=\"tk-column-picker__overlay\" data-testid=\"column-picker-popover\">\n        <div class=\"tk-column-picker__header\">\n          <span class=\"tk-column-picker__title\">{{ label() }}</span>\n          <button type=\"button\" class=\"tk-column-picker__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"popover.hide()\">\n            <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n          </button>\n        </div>\n        <ng-container [ngTemplateOutlet]=\"body\" />\n        <ng-container [ngTemplateOutlet]=\"footer\" />\n      </div>\n    </p-popover>\n  }\n}\n\n<!-- Shared by the desktop popover and the mobile drawer -->\n<ng-template #body>\n  <div class=\"tk-column-picker__body\" [style.max-height.px]=\"bodyMaxHeight()\">\n    <fieldset #list class=\"tk-column-picker__list\">\n      <legend class=\"tk-column-picker__sr-only\">{{ label() }}</legend>\n      @for (column of columns(); track column.key) {\n        <!-- Own label so long names can be clamped to 2 lines with a tooltip -->\n        <div class=\"tk-column-picker__option\" [class.tk-column-picker__option--locked]=\"column.locked\">\n          <tk-checkbox\n            [inputId]=\"'tk-column-picker-' + column.key\"\n            [binary]=\"true\"\n            [model]=\"isTempColumnVisible(column)\"\n            [disabled]=\"column.locked ?? false\"\n            (modelChange)=\"onTempColumnChange(column, $any($event))\">\n          </tk-checkbox>\n          <tk-tooltip class=\"tk-column-picker__label\" [content]=\"column.label\" [lineClamp]=\"2\">\n            <label [for]=\"'tk-column-picker-' + column.key\">{{ column.label }}</label>\n          </tk-tooltip>\n        </div>\n      }\n    </fieldset>\n  </div>\n</ng-template>\n\n<ng-template #footer>\n  <div class=\"tk-column-picker__footer\">\n    <tk-button\n      [label]=\"resetLabel()\"\n      severity=\"secondary\"\n      variant=\"outlined\"\n      (clicked)=\"reset()\">\n    </tk-button>\n    <tk-button\n      [label]=\"applyLabel()\"\n      severity=\"primary\"\n      [disabled]=\"!canApply()\"\n      (clicked)=\"apply()\">\n    </tk-button>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-flex}.tk-column-picker__trigger{width:2.5rem;height:2.5rem}.tk-column-picker__trigger ::ng-deep .p-button{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center}.tk-column-picker__overlay{display:flex;flex-direction:column;width:20rem;max-width:100%;padding:var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-column-picker__header{display:flex;justify-content:space-between;align-items:center;padding:0 0 var(--tk-spacing-base-50, .5rem) 0}.tk-column-picker__title{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-column-picker__close{background:none;border:none;padding:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-surface-500, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tk-borderRadius-s, 8px);transition:background-color .2s}.tk-column-picker__close:hover{background-color:var(--tk-color-base-surface-100, #f1f5f9);color:var(--tk-color-base-surface-900, #0f172a)}.tk-column-picker__body{display:flex;flex-direction:column;padding:var(--tk-spacing-base-125, 1.25rem) var(--tk-spacing-padding-xs, .25rem) 0;margin-bottom:var(--tk-spacing-base-150, 1.5rem);overflow-y:auto}.tk-column-picker__list{display:flex;flex-direction:column;gap:var(--tk-spacing-base-50, .5rem);min-width:0;margin:0;padding:0;border:0}.tk-column-picker__option{display:flex;align-items:flex-start;gap:var(--tk-spacing-base-50, .5rem)}.tk-column-picker__option tk-checkbox{flex-shrink:0}.tk-column-picker__label{flex:1;font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, 400);line-height:1.25rem}.tk-column-picker__label label{cursor:pointer}.tk-column-picker__option--locked .tk-column-picker__label{color:var(--tk-color-base-surface-600, #424243)}.tk-column-picker__option--locked .tk-column-picker__label label{cursor:default}.tk-column-picker__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tk-column-picker__footer{display:flex;justify-content:flex-end;gap:var(--tk-spacing-base-50, .5rem);padding-top:var(--tk-spacing-base-100, 1rem)}tk-drawer .tk-column-picker__body{padding-top:var(--tk-spacing-base-75, .75rem);margin-bottom:0}tk-drawer .tk-column-picker__footer{padding-top:var(--tk-spacing-base-75, .75rem)}::ng-deep .tk-column-picker-popover{border-radius:var(--tk-borderRadius-m, 12px);box-shadow:0 10px 15px -3px #0000001a;border:1px solid var(--tk-color-base-surface-200, #e2e8f0);overflow:hidden}::ng-deep .tk-column-picker-popover .p-popover-content{padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], appliedColumns: [{ type: i0.Output, args: ["appliedColumns"] }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColumnPickerComponent };
+//# sourceMappingURL=tekus-design-system-components-column-picker.mjs.map

package/fesm2022/tekus-design-system-components-column-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-column-picker.mjs","sources":["../../../projects/design-system/components/column-picker/src/column-picker.component.ts","../../../projects/design-system/components/column-picker/src/column-picker.component.html","../../../projects/design-system/components/column-picker/tekus-design-system-components-column-picker.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  effect,\n  inject,\n  input,\n  linkedSignal,\n  model,\n  output,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { map } from 'rxjs';\nimport { Popover, PopoverModule } from 'primeng/popover';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CheckboxComponent } from '@tekus/design-system/components/checkbox';\nimport { DrawerComponent } from '@tekus/design-system/components/drawer';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\nimport { TkColumnPickerColumn } from './column-picker.types';\n\n/**\n * @component ColumnPickerComponent\n * @description\n * Icon button that opens a list of checkboxes to show or hide table columns:\n * a popover on desktop and a bottom drawer on mobile. Changes stay temporary\n * until \"Aplicar\". The consumer owns the selection: `[(hiddenColumns)]`\n * preloads a stored preference and `(appliedColumns)` emits it to be saved.\n *\n * @usage\n * ```html\n * <tk-column-picker [columns]=\"columnOptions\" [(hiddenColumns)]=\"hidden\" />\n * <tk-table [columns]=\"columns\" [hiddenColumns]=\"hidden()\" />\n * ```\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-column-picker',\n  imports: [\n    ButtonComponent,\n    CheckboxComponent,\n    DrawerComponent,\n    IconComponent,\n    NgTemplateOutlet,\n    PopoverModule,\n    TooltipComponent,\n  ],\n  templateUrl: './column-picker.component.html',\n  styleUrl: './column-picker.component.scss',\n})\nexport class ColumnPickerComponent {\n  private readonly breakpointObserver = inject(BreakpointObserver);\n\n  /** Responsive flag: drawer instead of popover below 768px */\n  readonly isMobile = toSignal(\n    this.breakpointObserver.observe('(max-width: 768px)').pipe(map(result => result.matches)),\n    { initialValue: false }\n  );\n\n  /**\n   * Columns listed in the picker. `key` must match the `tk-table` column `field`.\n   * @default []\n   */\n  readonly columns = input<TkColumnPickerColumn[]>([]);\n\n  /**\n   * Two-way bindable list of hidden column keys. Its initial value preloads a\n   * saved selection; unknown keys are ignored. Locked keys are removed right\n   * after the first change detection, so a bound tk-table could hide a locked\n   * column for that first frame: do not preload locked keys.\n   * @default []\n   */\n  readonly hiddenColumns = model<string[]>([]);\n\n  /**\n   * Picker title, button tooltip and accessible name.\n   * @default 'Columnas'\n   */\n  readonly label = input<string>('Columnas');\n\n  /**\n   * Label for the button that shows every column again.\n   * @default 'Restablecer'\n   */\n  readonly resetLabel = input<string>('Restablecer');\n\n  /**\n   * Label for the button that applies the selection.\n   * @default 'Aplicar'\n   */\n  readonly applyLabel = input<string>('Aplicar');\n\n  /**\n   * Accessible name of the popover close button.\n   * @default 'Cerrar'\n   */\n  readonly closeLabel = input<string>('Cerrar');\n\n  /**\n   * Emits the hidden column keys when the user applies the selection,\n   * so the consumer can store it and preload it next time.\n   */\n  readonly appliedColumns = output<string[]>();\n\n  /**\n   * Temporary hidden column keys held before the user clicks \"Aplicar\".\n   * Follows `hiddenColumns` (so `apply()` never starts from an empty list)\n   * and stays writable while the user checks/unchecks options.\n   */\n  readonly tempHiddenColumns = linkedSignal<string[]>(() => [...this.hiddenColumns()]);\n\n  /** Lookup of the temporary hidden keys, used once per option on each render */\n  private readonly tempHiddenSet = computed(() => new Set(this.tempHiddenColumns()));\n\n  /** Controls visibility of the mobile drawer */\n  readonly showDrawer = signal<boolean>(false);\n\n  readonly popover = viewChild<Popover>('popover');\n\n  /** Options shown before the list scrolls (limits the view, not the columns) */\n  private readonly maxVisibleOptions = 8;\n\n  private readonly list = viewChild<ElementRef<HTMLElement>>('list');\n\n  /**\n   * Max height of the scrollable body, measured from the rendered options so\n   * exactly 8 fit whatever the theme, font or 2-line names. Null when all fit.\n   */\n  readonly bodyMaxHeight = signal<number | null>(null);\n\n  /** Keys of the columns the user can hide (not locked) */\n  private readonly hideableColumnKeys = computed(\n    () => new Set(this.columns().filter(col => !col.locked).map(col => col.key))\n  );\n\n  /** Locked column keys present in `hiddenColumns` (e.g. from a preload); they get removed */\n  private readonly lockedHiddenColumnKeys = computed(() => {\n    const locked = new Set(this.columns().filter(col => col.locked).map(col => col.key));\n    return new Set(this.hiddenColumns().filter(key => locked.has(key)));\n  });\n\n  /** Whether any existing, hideable column is currently hidden */\n  readonly hasHiddenColumns = computed(() => {\n    const hideable = this.hideableColumnKeys();\n    return this.hiddenColumns().some(key => hideable.has(key));\n  });\n\n  /** \"Aplicar\" requires at least one visible column in the temporary selection */\n  readonly canApply = computed(() => {\n    const hidden = new Set(this.tempHiddenColumns());\n    return this.columns().some(col => col.locked || !hidden.has(col.key));\n  });\n\n  constructor() {\n    /**\n     * Measure the list whenever it gets or changes size (popover/drawer open and\n     * animated, fonts loaded, columns changed), not at a fixed moment.\n     */\n    effect(onCleanup => {\n      const list = this.list()?.nativeElement;\n      if (!list) {\n        return;\n      }\n      const observer = new ResizeObserver(() => this.bodyMaxHeight.set(this.calculateBodyMaxHeight(list)));\n      observer.observe(list);\n      onCleanup(() => observer.disconnect());\n    });\n\n    /**\n     * Locked columns can never be hidden: drop them from a preloaded (or\n     * externally set) selection so the bound tk-table never hides them either.\n     * Unknown keys are left untouched, the table ignores them.\n     */\n    effect(() => {\n      const lockedHidden = this.lockedHiddenColumnKeys();\n      if (!lockedHidden.size) {\n        return;\n      }\n      const hidden = untracked(this.hiddenColumns);\n      this.hiddenColumns.set(hidden.filter(key => !lockedHidden.has(key)));\n    });\n  }\n\n  /** Bottom of the last visible option relative to the first one, or null when all fit */\n  private calculateBodyMaxHeight(list: HTMLElement): number | null {\n    const options = list.querySelectorAll<HTMLElement>('.tk-column-picker__option');\n    if (options.length <= this.maxVisibleOptions) {\n      return null;\n    }\n    const first = options[0];\n    const last = options[this.maxVisibleOptions - 1];\n    const height = last.offsetTop + last.offsetHeight - first.offsetTop;\n    return height > 0 ? height : null;\n  }\n\n  /** Toggles the picker and copies the applied selection into temporary state */\n  open(event: Event): void {\n    this.tempHiddenColumns.set([...this.hiddenColumns()]);\n\n    if (this.isMobile()) {\n      this.showDrawer.set(true);\n    } else {\n      this.popover()?.toggle(event);\n    }\n  }\n\n  /** Whether a column is checked (visible) in the temporary selection */\n  isTempColumnVisible(column: TkColumnPickerColumn): boolean {\n    return column.locked || !this.tempHiddenSet().has(column.key);\n  }\n\n  /** Checks/unchecks a column in the temporary selection */\n  onTempColumnChange(column: TkColumnPickerColumn, visible: boolean): void {\n    if (column.locked) {\n      return;\n    }\n    this.tempHiddenColumns.update(prev => {\n      const others = prev.filter(key => key !== column.key);\n      return visible ? others : [...others, column.key];\n    });\n  }\n\n  /** Shows every column in the temporary selection */\n  reset(): void {\n    this.tempHiddenColumns.set([]);\n  }\n\n  /** Saves the temporary selection and emits it for the consumer to store */\n  apply(): void {\n    if (!this.canApply()) {\n      return;\n    }\n    const hidden = [...this.tempHiddenColumns()];\n    this.hiddenColumns.set(hidden);\n    this.appliedColumns.emit(hidden);\n\n    if (this.isMobile()) {\n      this.showDrawer.set(false);\n    } else {\n      this.popover()?.hide();\n    }\n  }\n}\n","@if (columns().length > 0) {\n  <!-- preventDefault on keydown cancels the click the key would synthesize, so the popover toggles once -->\n  <tk-button\n    class=\"tk-column-picker__trigger\"\n    [icon]=\"'table-columns'\"\n    [severity]=\"hasHiddenColumns() ? 'primary' : 'secondary'\"\n    [variant]=\"hasHiddenColumns() ? undefined : 'text'\"\n    [tooltipText]=\"label()\"\n    [ariaLabel]=\"label()\"\n    (click)=\"open($event)\"\n    (keydown.enter)=\"$event.preventDefault(); open($event)\"\n    (keydown.space)=\"$event.preventDefault(); open($event)\">\n  </tk-button>\n\n  @if (isMobile()) {\n    <tk-drawer\n      [(isOpened)]=\"showDrawer\"\n      [title]=\"label()\"\n      direction=\"bottom\"\n      [dismissible]=\"true\">\n      <ng-container [ngTemplateOutlet]=\"body\" />\n      <ng-container [ngTemplateOutlet]=\"footer\" />\n    </tk-drawer>\n  } @else {\n    <p-popover #popover styleClass=\"tk-column-picker-popover\">\n      <div class=\"tk-column-picker__overlay\" data-testid=\"column-picker-popover\">\n        <div class=\"tk-column-picker__header\">\n          <span class=\"tk-column-picker__title\">{{ label() }}</span>\n          <button type=\"button\" class=\"tk-column-picker__close\" [attr.aria-label]=\"closeLabel()\" (click)=\"popover.hide()\">\n            <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n          </button>\n        </div>\n        <ng-container [ngTemplateOutlet]=\"body\" />\n        <ng-container [ngTemplateOutlet]=\"footer\" />\n      </div>\n    </p-popover>\n  }\n}\n\n<!-- Shared by the desktop popover and the mobile drawer -->\n<ng-template #body>\n  <div class=\"tk-column-picker__body\" [style.max-height.px]=\"bodyMaxHeight()\">\n    <fieldset #list class=\"tk-column-picker__list\">\n      <legend class=\"tk-column-picker__sr-only\">{{ label() }}</legend>\n      @for (column of columns(); track column.key) {\n        <!-- Own label so long names can be clamped to 2 lines with a tooltip -->\n        <div class=\"tk-column-picker__option\" [class.tk-column-picker__option--locked]=\"column.locked\">\n          <tk-checkbox\n            [inputId]=\"'tk-column-picker-' + column.key\"\n            [binary]=\"true\"\n            [model]=\"isTempColumnVisible(column)\"\n            [disabled]=\"column.locked ?? false\"\n            (modelChange)=\"onTempColumnChange(column, $any($event))\">\n          </tk-checkbox>\n          <tk-tooltip class=\"tk-column-picker__label\" [content]=\"column.label\" [lineClamp]=\"2\">\n            <label [for]=\"'tk-column-picker-' + column.key\">{{ column.label }}</label>\n          </tk-tooltip>\n        </div>\n      }\n    </fieldset>\n  </div>\n</ng-template>\n\n<ng-template #footer>\n  <div class=\"tk-column-picker__footer\">\n    <tk-button\n      [label]=\"resetLabel()\"\n      severity=\"secondary\"\n      variant=\"outlined\"\n      (clicked)=\"reset()\">\n    </tk-button>\n    <tk-button\n      [label]=\"applyLabel()\"\n      severity=\"primary\"\n      [disabled]=\"!canApply()\"\n      (clicked)=\"apply()\">\n    </tk-button>\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA2BA;;;;;;;;;;;;;AAaG;MAgBU,qBAAqB,CAAA;AAuGhC,IAAA,WAAA,GAAA;AAtGiB,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,CAAC;;AAGvD,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAC1B,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,EACzF,EAAE,YAAY,EAAE,KAAK,EAAE,CACxB;AAED;;;AAGG;AACM,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAyB,EAAE,8EAAC;AAEpD;;;;;;AAMG;AACM,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAW,EAAE,oFAAC;AAE5C;;;AAGG;AACM,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,UAAU,4EAAC;AAE1C;;;AAGG;AACM,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,aAAa,iFAAC;AAElD;;;AAGG;AACM,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,SAAS,iFAAC;AAE9C;;;AAGG;AACM,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,QAAQ,iFAAC;AAE7C;;;AAGG;QACM,IAAA,CAAA,cAAc,GAAG,MAAM,EAAY;AAE5C;;;;AAIG;AACM,QAAA,IAAA,CAAA,iBAAiB,GAAG,YAAY,CAAW,MAAM,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,wFAAC;;AAGnE,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,oFAAC;;AAGzE,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAU,KAAK,iFAAC;AAEnC,QAAA,IAAA,CAAA,OAAO,GAAG,SAAS,CAAU,SAAS,8EAAC;;QAG/B,IAAA,CAAA,iBAAiB,GAAG,CAAC;AAErB,QAAA,IAAA,CAAA,IAAI,GAAG,SAAS,CAA0B,MAAM,2EAAC;AAElE;;;AAGG;AACM,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAgB,IAAI,oFAAC;;AAGnC,QAAA,IAAA,CAAA,kBAAkB,GAAG,QAAQ,CAC5C,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,yFAC7E;;AAGgB,QAAA,IAAA,CAAA,sBAAsB,GAAG,QAAQ,CAAC,MAAK;AACtD,YAAA,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;YACpF,OAAO,IAAI,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AACrE,QAAA,CAAC,6FAAC;;AAGO,QAAA,IAAA,CAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;AACxC,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAC1C,YAAA,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,GAAG,IAAI,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC5D,QAAA,CAAC,uFAAC;;AAGO,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;YAChC,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAChD,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACvE,QAAA,CAAC,+EAAC;AAGA;;;AAGG;QACH,MAAM,CAAC,SAAS,IAAG;YACjB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,aAAa;YACvC,IAAI,CAAC,IAAI,EAAE;gBACT;YACF;YACA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC;AACpG,YAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;YACtB,SAAS,CAAC,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AACxC,QAAA,CAAC,CAAC;AAEF;;;;AAIG;QACH,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,sBAAsB,EAAE;AAClD,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;gBACtB;YACF;YACA,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;YAC5C,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AACtE,QAAA,CAAC,CAAC;IACJ;;AAGQ,IAAA,sBAAsB,CAAC,IAAiB,EAAA;QAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAc,2BAA2B,CAAC;QAC/E,IAAI,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,iBAAiB,EAAE;AAC5C,YAAA,OAAO,IAAI;QACb;AACA,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;QACxB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC;AAChD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS;QACnE,OAAO,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI;IACnC;;AAGA,IAAA,IAAI,CAAC,KAAY,EAAA;AACf,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;AAErD,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;QAC3B;aAAO;YACL,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;QAC/B;IACF;;AAGA,IAAA,mBAAmB,CAAC,MAA4B,EAAA;AAC9C,QAAA,OAAO,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC;IAC/D;;IAGA,kBAAkB,CAAC,MAA4B,EAAE,OAAgB,EAAA;AAC/D,QAAA,IAAI,MAAM,CAAC,MAAM,EAAE;YACjB;QACF;AACA,QAAA,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,IAAG;AACnC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,KAAK,MAAM,CAAC,GAAG,CAAC;AACrD,YAAA,OAAO,OAAO,GAAG,MAAM,GAAG,CAAC,GAAG,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC;AACnD,QAAA,CAAC,CAAC;IACJ;;IAGA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC;;IAGA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;YACpB;QACF;QACA,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;AAC5C,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC;AAC9B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;AAEhC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;QAC5B;aAAO;AACL,YAAA,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE;QACxB;IACF;+GA/LW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,MAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxDlC,qhGA+EA,EAAA,MAAA,EAAA,CAAA,snFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDlCI,eAAe,sNACf,iBAAiB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,EAAA,QAAA,EAAA,SAAA,EAAA,cAAA,EAAA,MAAA,EAAA,eAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,qBAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,OAAA,EAAA,SAAA,EAAA,cAAA,EAAA,KAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,aAAA,EAAA,MAAA,EAAA,aAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAChB,aAAa,yVACb,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,UAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAKP,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAfjC,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,kBAAkB,EAAA,OAAA,EACnB;wBACP,eAAe;wBACf,iBAAiB;wBACjB,eAAe;wBACf,aAAa;wBACb,gBAAgB;wBAChB,aAAa;wBACb,gBAAgB;AACjB,qBAAA,EAAA,QAAA,EAAA,qhGAAA,EAAA,MAAA,EAAA,CAAA,snFAAA,CAAA,EAAA;AAuEqC,SAAA,CAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,SAAS,8DAKY,MAAM,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEhInE;;AAEG;;;;"}

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

@@ -79,7 +79,7 @@ class DropdownComponent {
         this.popover()?.hide();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DropdownComponent, isStandalone: true, selector: "tk-dropdown", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["op"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #trigger>\n  <tk-button\n    [icon]=\"icon()\"\n    [label]=\"label()\"\n    [size]=\"size()\"\n    [iconPosition]=\"iconPosition()\"\n    [disabled]=\"disabled()\"\n    severity=\"secondary\"\n    variant=\"text\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.space)=\"toggle($event); $event.preventDefault()\"\n  ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n  <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n    <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n  </tk-tooltip>\n} @else {\n  <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n  <tk-menu\n    [model]=\"model()\"\n    (itemClick)=\"onItemClick()\"\n  ></tk-menu>\n</p-popover>\n", styles: [":host{display:inline-block}:host ::ng-deep .tk-dropdown-popover{min-width:200px;overflow:hidden}:host ::ng-deep .tk-dropdown-popover:before,:host ::ng-deep .tk-dropdown-popover:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: MenuComponent, selector: "tk-menu", inputs: ["model", "popup", "appendTo", "variant", "styleClass"], outputs: ["itemClick"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DropdownComponent, isStandalone: true, selector: "tk-dropdown", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["op"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #trigger>\n  <tk-button\n    [icon]=\"icon()\"\n    [label]=\"label()\"\n    [size]=\"size()\"\n    [iconPosition]=\"iconPosition()\"\n    [disabled]=\"disabled()\"\n    severity=\"secondary\"\n    variant=\"text\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.space)=\"toggle($event); $event.preventDefault()\"\n  ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n  <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n    <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n  </tk-tooltip>\n} @else {\n  <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n  <tk-menu\n    [model]=\"model()\"\n    (itemClick)=\"onItemClick()\"\n  ></tk-menu>\n</p-popover>\n", styles: [":host{display:inline-block}:host ::ng-deep .tk-dropdown-popover{min-width:200px;overflow:hidden}:host ::ng-deep .tk-dropdown-popover:before,:host ::ng-deep .tk-dropdown-popover:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: MenuComponent, selector: "tk-menu", inputs: ["model", "popup", "appendTo", "variant", "styleClass"], outputs: ["itemClick"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position", "lineClamp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-dropdown.mjs","sources":["../../../projects/design-system/components/dropdown/src/dropdown.component.ts","../../../projects/design-system/components/dropdown/src/dropdown.component.html","../../../projects/design-system/components/dropdown/tekus-design-system-components-dropdown.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, viewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PopoverModule, Popover } from 'primeng/popover';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { MenuComponent } from '@tekus/design-system/components/menu';\nimport { TooltipComponent, TooltipPosition } from '@tekus/design-system/components/tooltip';\n\n/**\n * @component DropdownComponent\n * @description\n * A dropdown component that acts as a context menu or \"more options\" button.\n * It uses a `tk-button` as a trigger, a PrimeNG `p-popover` for the overlay,\n * and a `tk-menu` for the list of options.\n *\n * @usage\n * ```html\n * <tk-dropdown [model]=\"items\"></tk-dropdown>\n * ```\n */\n@Component({\n  selector: 'tk-dropdown',\n  standalone: true,\n  imports: [CommonModule, PopoverModule, ButtonComponent, MenuComponent, TooltipComponent],\n  templateUrl: './dropdown.component.html',\n  styleUrl: './dropdown.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DropdownComponent {\n  /**\n   * Reference to the PrimeNG Popover component instance.\n   */\n  popover = viewChild<Popover>('op');\n\n  /**\n   * An array of menu items to display.\n   */\n  model = input<MenuItem[]>([]);\n\n  /**\n   * Icon for the trigger button.\n   * @default 'ellipsis-vertical'\n   */\n  icon = input<string>('ellipsis-vertical');\n\n  /**\n   * Text for the trigger button.\n   * If provided, it will be displayed alongside the icon (if any).\n   */\n  label = input<string | undefined>();\n\n  /**\n   * Position of the icon relative to the label.\n   * @default 'left'\n   */\n  iconPosition = input<'left' | 'right'>('left');\n\n  /**\n   * Size of the trigger button.\n   * @default undefined\n   */\n  size = input<'small' | 'large' | undefined>();\n\n  /**\n   * Whether the dropdown trigger button is disabled.\n   * @default false\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * Optional tooltip text for the trigger button.\n   */\n  tooltip = input<string | undefined>();\n\n  /**\n   * Position of the tooltip.\n   * @default 'top'\n   */\n  tooltipPosition = input<TooltipPosition>('top');\n\n  /**\n   * Toggles the popover visibility.\n   * @param event The event that triggered the toggle.\n   */\n  toggle(event: Event) {\n    this.popover()?.toggle(event);\n  }\n\n  /**\n   * Closes the popover when an item is clicked.\n   */\n  onItemClick() {\n    this.popover()?.hide();\n  }\n}\n","<ng-template #trigger>\n  <tk-button\n    [icon]=\"icon()\"\n    [label]=\"label()\"\n    [size]=\"size()\"\n    [iconPosition]=\"iconPosition()\"\n    [disabled]=\"disabled()\"\n    severity=\"secondary\"\n    variant=\"text\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.space)=\"toggle($event); $event.preventDefault()\"\n  ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n  <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n    <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n  </tk-tooltip>\n} @else {\n  <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n  <tk-menu\n    [model]=\"model()\"\n    (itemClick)=\"onItemClick()\"\n  ></tk-menu>\n</p-popover>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-dropdown.mjs","sources":["../../../projects/design-system/components/dropdown/src/dropdown.component.ts","../../../projects/design-system/components/dropdown/src/dropdown.component.html","../../../projects/design-system/components/dropdown/tekus-design-system-components-dropdown.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, viewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PopoverModule, Popover } from 'primeng/popover';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { MenuComponent } from '@tekus/design-system/components/menu';\nimport { TooltipComponent, TooltipPosition } from '@tekus/design-system/components/tooltip';\n\n/**\n * @component DropdownComponent\n * @description\n * A dropdown component that acts as a context menu or \"more options\" button.\n * It uses a `tk-button` as a trigger, a PrimeNG `p-popover` for the overlay,\n * and a `tk-menu` for the list of options.\n *\n * @usage\n * ```html\n * <tk-dropdown [model]=\"items\"></tk-dropdown>\n * ```\n */\n@Component({\n  selector: 'tk-dropdown',\n  standalone: true,\n  imports: [CommonModule, PopoverModule, ButtonComponent, MenuComponent, TooltipComponent],\n  templateUrl: './dropdown.component.html',\n  styleUrl: './dropdown.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DropdownComponent {\n  /**\n   * Reference to the PrimeNG Popover component instance.\n   */\n  popover = viewChild<Popover>('op');\n\n  /**\n   * An array of menu items to display.\n   */\n  model = input<MenuItem[]>([]);\n\n  /**\n   * Icon for the trigger button.\n   * @default 'ellipsis-vertical'\n   */\n  icon = input<string>('ellipsis-vertical');\n\n  /**\n   * Text for the trigger button.\n   * If provided, it will be displayed alongside the icon (if any).\n   */\n  label = input<string | undefined>();\n\n  /**\n   * Position of the icon relative to the label.\n   * @default 'left'\n   */\n  iconPosition = input<'left' | 'right'>('left');\n\n  /**\n   * Size of the trigger button.\n   * @default undefined\n   */\n  size = input<'small' | 'large' | undefined>();\n\n  /**\n   * Whether the dropdown trigger button is disabled.\n   * @default false\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * Optional tooltip text for the trigger button.\n   */\n  tooltip = input<string | undefined>();\n\n  /**\n   * Position of the tooltip.\n   * @default 'top'\n   */\n  tooltipPosition = input<TooltipPosition>('top');\n\n  /**\n   * Toggles the popover visibility.\n   * @param event The event that triggered the toggle.\n   */\n  toggle(event: Event) {\n    this.popover()?.toggle(event);\n  }\n\n  /**\n   * Closes the popover when an item is clicked.\n   */\n  onItemClick() {\n    this.popover()?.hide();\n  }\n}\n","<ng-template #trigger>\n  <tk-button\n    [icon]=\"icon()\"\n    [label]=\"label()\"\n    [size]=\"size()\"\n    [iconPosition]=\"iconPosition()\"\n    [disabled]=\"disabled()\"\n    severity=\"secondary\"\n    variant=\"text\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.space)=\"toggle($event); $event.preventDefault()\"\n  ></tk-button>\n</ng-template>\n\n@if (tooltip()) {\n  <tk-tooltip [content]=\"tooltip()!\" [position]=\"tooltipPosition()\">\n    <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n  </tk-tooltip>\n} @else {\n  <ng-container *ngTemplateOutlet=\"trigger\"></ng-container>\n}\n\n<p-popover #op styleClass=\"tk-dropdown-popover\">\n  <tk-menu\n    [model]=\"model()\"\n    (itemClick)=\"onItemClick()\"\n  ></tk-menu>\n</p-popover>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -969,6 +969,16 @@ const chartIcon = {
             solid: import('@fortawesome/pro-solid-svg-icons').then(m => m.faTable)
         }
     },
+    'table-columns': {
+        name: 'faTableColumns',
+        tags: ['layout', 'columns', 'table'],
+        source: 'Font awesome',
+        styles: {
+            light: import('@fortawesome/pro-light-svg-icons').then(m => m.faTableColumns),
+            regular: import('@fortawesome/pro-regular-svg-icons').then(m => m.faTableColumns),
+            solid: import('@fortawesome/pro-solid-svg-icons').then(m => m.faTableColumns)
+        }
+    },
     'file-chart-column': {
         name: 'faFileChartColumn',
         tags: [],