@haloduck/ui 2.0.18 → 2.0.20

package/fesm2022/haloduck-ui.mjs

@@ -7,17 +7,17 @@ import { BehaviorSubject, zip, Subject, takeUntil, tap, combineLatest, switchMap
 import { ulid } from 'ulid';
 import * as i1 from '@angular/common';
 import { CommonModule, DecimalPipe, DatePipe } from '@angular/common';
-import * as i1$2 from '@jsverse/transloco';
+import * as i2$1 from '@jsverse/transloco';
 import { provideTranslocoScope, TranslocoModule, TranslocoService } from '@jsverse/transloco';
 import * as i2 from '@angular/common/http';
-import * as i1$3 from '@angular/cdk/overlay';
+import * as i1$2 from '@angular/cdk/overlay';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CoreService } from '@haloduck/core';
-import * as i1$5 from '@angular/router';
+import * as i1$4 from '@angular/router';
 import { Router, NavigationEnd, RouterLink } from '@angular/router';
-import * as i1$4 from '@angular/platform-browser';
+import * as i1$3 from '@angular/platform-browser';
 import { Title } from '@angular/platform-browser';
 import * as THREE from 'three';
 import { STLLoader, OrbitControls } from 'three-stdlib';
@@ -342,6 +342,8 @@ class SelectDropdownComponent {
     _filteredOptions = signal([], ...(ngDevMode ? [{ debugName: "_filteredOptions" }] : []));
     _options = [];
     _selectedOptionIds = [];
+    manualInputValues = {};
+    activeManualKey = null;
     selectedChange = new EventEmitter();
     useFilter = false;
     multiselect = true;
@@ -350,57 +352,221 @@ class SelectDropdownComponent {
     set options(value) {
         this._options = value || [];
         this._filteredOptions.set(this._options);
+        this.seedManualInputs();
     }
     get options() {
         return this._filteredOptions();
     }
     set selectedOptionIds(value) {
         this._selectedOptionIds = value || [];
+        this.seedManualInputs();
     }
     get selectedOptions() {
         return this._selectedOptionIds;
     }
     onFilterInput(event) {
         const value = event.target.value.toLowerCase();
-        this._filteredOptions.set(this._options.filter((opt) => opt.value.toLowerCase().includes(value)));
+        this._filteredOptions.set(this._options.filter((opt) => opt.value.toLowerCase().includes(value) || opt.isSticky === true));
     }
     onToggleOption(option) {
         if (this.asButton) {
-            this._selectedOptionIds = [option.id || option.value];
+            this.setSelected([option.id || option.value]);
+            return;
         }
-        else {
-            if (this.multiselect) {
-                if (!this._selectedOptionIds.includes(option.id || option.value)) {
-                    this._selectedOptionIds.push(option.id || option.value);
+        // Handle manual input option
+        if (option.shouldManualInput) {
+            const key = this.getManualKey(option);
+            const prefix = option.manualPrefix || '';
+            const typed = (this.manualInputValues[key] || '').trim();
+            const isSelected = this.isOptionSelected(option);
+            if (isSelected) {
+                // Deselect current manual value
+                if (this.multiselect) {
+                    let next;
+                    if (prefix) {
+                        next = this._selectedOptionIds.filter((id) => !id.startsWith(prefix));
+                    }
+                    else {
+                        next = this._selectedOptionIds.filter((id) => id !== typed);
+                    }
+                    this.setSelected(next);
                 }
                 else {
-                    this._selectedOptionIds.splice(this._selectedOptionIds.indexOf(option.id || option.value), 1);
+                    this.setSelected([]);
                 }
+                // Clear input text when deselected
+                this.manualInputValues[key] = '';
+                // Hide input
+                this.activeManualKey = null;
             }
             else {
-                if (this.atLeastOne) {
-                    this._selectedOptionIds = [option.id || option.value];
+                // open manual input without changing selection yet
+                this.activeManualKey = key;
+                // ensure there is an entry in manualInputValues
+                if (this.manualInputValues[key] === undefined) {
+                    this.manualInputValues[key] = '';
+                }
+                // focus input on next tick
+                setTimeout(() => {
+                    const selector = `input[data-manual-key="${key}"]`;
+                    const el = document.querySelector(selector);
+                    el?.focus();
+                    el?.select();
+                });
+            }
+            return;
+        }
+        // Non-manual options
+        if (this.multiselect) {
+            const id = option.id || option.value;
+            if (option.isExclusive) {
+                if (this._selectedOptionIds.includes(id)) {
+                    this.setSelected([]);
                 }
                 else {
-                    if (this._selectedOptionIds.includes(option.id || option.value)) {
-                        this._selectedOptionIds = [];
-                    }
-                    else {
-                        this._selectedOptionIds = [option.id || option.value];
+                    this.setSelected([id]);
+                }
+            }
+            else {
+                // remove any exclusive selections
+                let next = this._selectedOptionIds.filter((selectedId) => !this.isIdExclusive(selectedId));
+                if (!next.includes(id)) {
+                    next = [id, ...next];
+                }
+                else {
+                    next = next.filter((x) => x !== id);
+                }
+                this.setSelected(next);
+            }
+        }
+        else {
+            const id = option.id || option.value;
+            if (this.atLeastOne) {
+                this.setSelected([id]);
+            }
+            else {
+                if (this._selectedOptionIds.includes(id)) {
+                    this.setSelected([]);
+                }
+                else {
+                    this.setSelected([id]);
+                }
+            }
+        }
+    }
+    isOptionSelected(option) {
+        const id = option.id || option.value;
+        if (option.shouldManualInput) {
+            const prefix = option.manualPrefix;
+            if (prefix) {
+                // selected only if there exists a value with more than prefix
+                return this._selectedOptionIds.some((selectedId) => typeof selectedId === 'string' && selectedId.startsWith(prefix) && selectedId.length > prefix.length);
+            }
+            // no prefix: consider selected if any selected id equals current typed value (non-empty)
+            const key = this.getManualKey(option);
+            const typed = (this.manualInputValues[key] || '').trim();
+            return typed !== '' && this._selectedOptionIds.includes(typed);
+        }
+        return this._selectedOptionIds.includes(id);
+    }
+    isIdExclusive(id) {
+        for (const o of this._options) {
+            if (!o.isExclusive)
+                continue;
+            const refId = o.id || o.value;
+            if (refId === id)
+                return true;
+            if (o.shouldManualInput && o.manualPrefix && id?.startsWith(o.manualPrefix)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    getManualKey(option) {
+        return option.manualPrefix || (option.id || option.value);
+    }
+    seedManualInputs() {
+        const manualOptions = this._options.filter((o) => o.shouldManualInput);
+        for (const opt of manualOptions) {
+            const prefix = opt.manualPrefix || '';
+            const key = this.getManualKey(opt);
+            const existingWithPrefix = this._selectedOptionIds.find((id) => prefix ? id?.startsWith(prefix) : false);
+            const value = existingWithPrefix
+                ? existingWithPrefix.substring(prefix.length)
+                : '';
+            this.manualInputValues[key] = value;
+        }
+    }
+    onManualInputChange(option, value) {
+        const key = this.getManualKey(option);
+        this.manualInputValues[key] = value;
+        // Dynamically reflect selection as user types, only when non-empty
+        const prefix = option.manualPrefix || '';
+        const sentinel = option.id || option.value;
+        const trimmed = (value || '').trim();
+        if (this.multiselect) {
+            if (option.isExclusive) {
+                if (trimmed === '') {
+                    this.setSelected([]);
+                }
+                else {
+                    this.setSelected([`${prefix}${trimmed}`]);
+                }
+            }
+            else {
+                let next = this._selectedOptionIds.filter((id) => !this.isIdExclusive(id));
+                // remove same prefix or sentinel
+                next = next.filter((id) => (prefix ? !id.startsWith(prefix) : id !== sentinel));
+                if (trimmed !== '') {
+                    const toAdd = `${prefix}${trimmed}`;
+                    if (!next.includes(toAdd)) {
+                        next = [toAdd, ...next];
                     }
                 }
+                this.setSelected(next);
             }
         }
-        // prevent [null]
-        this._selectedOptionIds = this._selectedOptionIds.filter((id) => id !== null);
-        this.selectedChange.emit(this._selectedOptionIds);
+        else {
+            // single select
+            if (trimmed === '') {
+                this.setSelected([]);
+            }
+            else {
+                this.setSelected([`${prefix}${trimmed}`]);
+            }
+        }
+    }
+    onManualInputConfirm(option) {
+        const key = this.getManualKey(option);
+        const raw = (this.manualInputValues[key] || '').trim();
+        // Use same logic as onManualInputChange
+        this.onManualInputChange(option, raw);
+    }
+    onManualInputBlur(option) {
+        const key = this.getManualKey(option);
+        const raw = (this.manualInputValues[key] || '').trim();
+        if (raw === '') {
+            // hide input on blur when empty
+            this.activeManualKey = null;
+        }
+    }
+    emitSelectedChange() {
+        const payload = [...this._selectedOptionIds];
+        setTimeout(() => this.selectedChange.emit(payload));
+    }
+    setSelected(next) {
+        const sanitized = next.filter((id) => id != null);
+        setTimeout(() => {
+            this._selectedOptionIds = sanitized;
+            this.emitSelectedChange();
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectDropdownComponent, isStandalone: true, selector: "haloduck-select-dropdown", inputs: { useFilter: "useFilter", multiselect: "multiselect", atLeastOne: "atLeastOne", asButton: "asButton", options: "options", selectedOptionIds: "selectedOptionIds" }, outputs: { selectedChange: "selectedChange" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<div id=\"dropdown\"\n     class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\">\n  @if (useFilter && _options.length >= 5) {\n  <input #inputFilter\n         id=\"inputFilter\"\n         type=\"text\"\n         [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n         (input)=\"onFilterInput($event)\"\n         class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\" />\n  }\n  <div class=\"overflow-y-auto\">\n    @for ( option of _filteredOptions(); track (option.id) ? option.id : option.value) {\n    <div class=\"px-3 py-2 text-sm/6 cursor-pointer hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n         (click)=\"onToggleOption(option)\">\n      @if(!asButton) {\n      @if( _selectedOptionIds.includes(option.id || option.value)) {\n      <svg class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n      } @else {\n      <div class=\"w-4 h-4 inline-block mr-2\"></div>\n      }\n      }\n      {{ option.value }}\n    </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectDropdownComponent, isStandalone: true, selector: "haloduck-select-dropdown", inputs: { useFilter: "useFilter", multiselect: "multiselect", atLeastOne: "atLeastOne", asButton: "asButton", options: "options", selectedOptionIds: "selectedOptionIds" }, outputs: { selectedChange: "selectedChange" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<div id=\"dropdown\"\n     class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\">\n  @if (useFilter && _options.length >= 5) {\n  <input #inputFilter\n         id=\"inputFilter\"\n         type=\"text\"\n         [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n         (input)=\"onFilterInput($event)\"\n         class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\" />\n  }\n  <div class=\"overflow-y-auto\">\n    @for ( option of _filteredOptions(); track (option.id) ? option.id : option.value) {\n    <div class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n         [class.cursor-pointer]=\"!option.shouldManualInput\"\n         (click)=\"onToggleOption(option)\">\n      @if(!asButton) {\n      @if( isOptionSelected(option)) {\n      <svg class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n      } @else {\n      <div class=\"w-4 h-4 inline-block mr-2\"></div>\n      }\n      }\n      @if(option.shouldManualInput && (isOptionSelected(option) || (activeManualKey === (option.manualPrefix ? option.manualPrefix : (option.id || option.value))))) {\n        <input type=\"text\"\n               [(ngModel)]=\"manualInputValues[option.manualPrefix ? option.manualPrefix : (option.id || option.value)]\"\n               [attr.data-manual-key]=\"option.manualPrefix ? option.manualPrefix : (option.id || option.value)\"\n               (ngModelChange)=\"onManualInputChange(option, $event)\"\n               (click)=\"$event.stopPropagation()\"\n               (blur)=\"onManualInputBlur(option)\"\n               (keydown.enter)=\"onManualInputConfirm(option)\"\n               class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\" />\n      } @else {\n        {{ option.value }}\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-select-dropdown', imports: [TranslocoModule], providers: [provideTranslocoScope('haloduck')], template: "<div id=\"dropdown\"\n     class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\">\n  @if (useFilter && _options.length >= 5) {\n  <input #inputFilter\n         id=\"inputFilter\"\n         type=\"text\"\n         [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n         (input)=\"onFilterInput($event)\"\n         class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\" />\n  }\n  <div class=\"overflow-y-auto\">\n    @for ( option of _filteredOptions(); track (option.id) ? option.id : option.value) {\n    <div class=\"px-3 py-2 text-sm/6 cursor-pointer hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n         (click)=\"onToggleOption(option)\">\n      @if(!asButton) {\n      @if( _selectedOptionIds.includes(option.id || option.value)) {\n      <svg class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n      } @else {\n      <div class=\"w-4 h-4 inline-block mr-2\"></div>\n      }\n      }\n      {{ option.value }}\n    </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'haloduck-select-dropdown', imports: [TranslocoModule, FormsModule], providers: [provideTranslocoScope('haloduck')], template: "<div id=\"dropdown\"\n     class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\">\n  @if (useFilter && _options.length >= 5) {\n  <input #inputFilter\n         id=\"inputFilter\"\n         type=\"text\"\n         [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n         (input)=\"onFilterInput($event)\"\n         class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\" />\n  }\n  <div class=\"overflow-y-auto\">\n    @for ( option of _filteredOptions(); track (option.id) ? option.id : option.value) {\n    <div class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n         [class.cursor-pointer]=\"!option.shouldManualInput\"\n         (click)=\"onToggleOption(option)\">\n      @if(!asButton) {\n      @if( isOptionSelected(option)) {\n      <svg class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n      } @else {\n      <div class=\"w-4 h-4 inline-block mr-2\"></div>\n      }\n      }\n      @if(option.shouldManualInput && (isOptionSelected(option) || (activeManualKey === (option.manualPrefix ? option.manualPrefix : (option.id || option.value))))) {\n        <input type=\"text\"\n               [(ngModel)]=\"manualInputValues[option.manualPrefix ? option.manualPrefix : (option.id || option.value)]\"\n               [attr.data-manual-key]=\"option.manualPrefix ? option.manualPrefix : (option.id || option.value)\"\n               (ngModelChange)=\"onManualInputChange(option, $event)\"\n               (click)=\"$event.stopPropagation()\"\n               (blur)=\"onManualInputBlur(option)\"\n               (keydown.enter)=\"onManualInputConfirm(option)\"\n               class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\" />\n      } @else {\n        {{ option.value }}\n      }\n    </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { selectedChange: [{
                 type: Output
             }], useFilter: [{
@@ -421,6 +587,7 @@ class SelectComponent {
     translateService = inject(TranslocoService);
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
+    cdr = inject(ChangeDetectorRef);
     overlayRef = null;
     selectedChange = new EventEmitter();
     disabled = false;
@@ -455,12 +622,8 @@ class SelectComponent {
     label;
     isDropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "isDropdownOpen" }] : []));
     selectedOptionIds = [];
-    get selectedOptions() {
-        if (this.options) {
-            return this.options.filter((option) => this.selectedOptionIds.includes(option.id || option.value));
-        }
-        return [];
-    }
+    displayedSelectedOptions = [];
+    selectedIdToDisplayOption = {};
     onClick(event) {
         if (this.disabled) {
             return;
@@ -505,13 +668,22 @@ class SelectComponent {
             componentRef.instance.atLeastOne = this.atLeastOne;
             componentRef.instance.asButton = this.asButton;
             componentRef.instance.selectedChange.subscribe((selectedOptionIds) => {
-                this.selectedChange.emit(selectedOptionIds);
-                this.selectedOptionIds = selectedOptionIds;
-                this.onChange(this.getSelectedValue());
-                if (!this.multiselect) {
-                    this.isDropdownOpen.set(false);
-                    this.overlayRef?.detach();
-                }
+                const payload = Array.isArray(selectedOptionIds)
+                    ? [...selectedOptionIds]
+                    : selectedOptionIds;
+                setTimeout(() => {
+                    this.selectedOptionIds = payload;
+                    this.recomputeSelectedOptions();
+                    this.onChange(this.getSelectedValue());
+                    this.selectedChange.emit(payload);
+                    this.cdr.markForCheck();
+                    // Keep dropdown open if a manual-input option is selected (to allow typing)
+                    const shouldKeepOpenForManual = this.isManualSelection(this.selectedOptionIds);
+                    if (!this.multiselect && !shouldKeepOpenForManual) {
+                        this.isDropdownOpen.set(false);
+                        this.overlayRef?.detach();
+                    }
+                });
             });
             this.isDropdownOpen.set(true);
         }
@@ -534,6 +706,7 @@ class SelectComponent {
         event.stopPropagation();
         event.preventDefault();
         this.selectedOptionIds = this.selectedOptionIds.filter((selected) => selected !== (option.id || option.value));
+        this.recomputeSelectedOptions();
         this.onChange(this.getSelectedValue());
         this.selectedChange.emit(this.selectedOptionIds);
         this.isDropdownOpen.set(false);
@@ -555,11 +728,12 @@ class SelectComponent {
     onTouched = () => { };
     writeValue(value) {
         if (Array.isArray(value)) {
-            this.selectedOptionIds = value;
+            this.selectedOptionIds = value.filter(id => id !== null && id !== undefined && id !== '');
         }
         else {
-            this.selectedOptionIds = [value];
+            this.selectedOptionIds = (value !== null && value !== undefined && value !== '') ? [value] : [];
         }
+        this.recomputeSelectedOptions();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -588,6 +762,105 @@ class SelectComponent {
             }
         });
     }
+    ngOnChanges(changes) {
+        if (changes['options']) {
+            this.recomputeSelectedOptions();
+        }
+    }
+    recomputeSelectedOptions() {
+        const options = this.options || [];
+        const result = [];
+        const nextMap = {};
+        const selectedIds = [...this.selectedOptionIds];
+        const consumed = new Set();
+        const resolveDisplayForId = (selectedId) => {
+            // 1) exact match by id or value
+            const exact = options.find((opt) => (opt.id || opt.value) === selectedId);
+            if (exact) {
+                return exact;
+            }
+            // 2) manual prefix match → create synthetic option for display
+            const manual = options.find((opt) => {
+                if (!opt.shouldManualInput)
+                    return false;
+                if (opt.manualPrefix) {
+                    return selectedId.startsWith(opt.manualPrefix);
+                }
+                // when no prefix, match by sentinel id/value
+                return (opt.id || opt.value) === selectedId;
+            });
+            if (manual) {
+                const cached = this.selectedIdToDisplayOption[selectedId];
+                return cached || { ...manual, id: selectedId, value: selectedId };
+            }
+            // 3) fallback when options array is missing the corresponding option definition
+            const cached = this.selectedIdToDisplayOption[selectedId];
+            return cached || { id: selectedId, value: selectedId };
+        };
+        if (this.multiselect) {
+            // Order by options sequence first
+            for (const opt of options) {
+                if (opt.shouldManualInput) {
+                    const manualId = opt.manualPrefix
+                        ? selectedIds.find((id) => id.startsWith(opt.manualPrefix))
+                        : selectedIds.find((id) => id === (opt.id || opt.value));
+                    if (manualId) {
+                        const display = resolveDisplayForId(manualId);
+                        result.push(display);
+                        nextMap[manualId] = display;
+                        consumed.add(manualId);
+                    }
+                }
+                else {
+                    const id = opt.id || opt.value;
+                    if (selectedIds.includes(id)) {
+                        const display = resolveDisplayForId(id);
+                        result.push(display);
+                        nextMap[id] = display;
+                        consumed.add(id);
+                    }
+                }
+            }
+            // Append any remaining selected ids in their existing order
+            for (const selectedId of selectedIds) {
+                if (consumed.has(selectedId))
+                    continue;
+                const display = resolveDisplayForId(selectedId);
+                result.push(display);
+                nextMap[selectedId] = display;
+            }
+        }
+        else {
+            // Single select: keep as-is (only one item), but still resolve display
+            for (const selectedId of selectedIds) {
+                const display = resolveDisplayForId(selectedId);
+                result.push(display);
+                nextMap[selectedId] = display;
+            }
+        }
+        this.displayedSelectedOptions = result;
+        this.selectedIdToDisplayOption = nextMap;
+    }
+    isManualSelection(selectedIds) {
+        const options = this.options || [];
+        for (const id of selectedIds) {
+            const manual = options.find((opt) => opt.shouldManualInput);
+            if (!manual)
+                continue;
+            if (manual.manualPrefix) {
+                if (id.startsWith(manual.manualPrefix))
+                    return true;
+                // allow initial sentinel selection to keep open
+                if ((manual.id || manual.value) === id)
+                    return true;
+            }
+            else {
+                if ((manual.id || manual.value) === id)
+                    return true;
+            }
+        }
+        return false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectComponent, isStandalone: true, selector: "haloduck-select", inputs: { disabled: "disabled", loading: "loading", variant: "variant", asButton: "asButton", useIcon: "useIcon", useFilter: "useFilter", multiselect: "multiselect", placeholder: "placeholder", atLeastOne: "atLeastOne", showAll: "showAll", options: "options", layout: "layout", labelWidth: "labelWidth", value: "value" }, outputs: { selectedChange: "selectedChange" }, providers: [
             {
@@ -596,7 +869,7 @@ class SelectComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<div class=\"flex gap-2 items-center w-full\"\n     [ngClass]=\"{'flex-col items-start': layout === 'vertical'}\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\"\n         [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n  <div #origin\n       class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n       [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary': !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary' : variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary' : variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger' : variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n        }\"\n       [tabindex]=\"(disabled) ? -1 : 0\"\n       (click)=\"onClick($event)\"\n       (keydown)=\"onKeyDown($event)\">\n    <div class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\">\n      @if(loading){\n      <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n        <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">&nbsp;</div>\n      </div>\n      }\n      @else{\n      <div class=\"flex-1\">\n        @if (!asButton && selectedOptions && selectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of selectedOptions; track option; let i = $index) {\n          @if (showAll || i === 0) {\n          <span class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                [ngClass]=\"{'w-full h-full px-4': !multiselect, 'px-1': multiselect}\">\n            {{ option.value }}\n            @if (showAll || i === 0) {\n            <div (click)=\"onDeselectOption($event, option)\"\n                 class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\">\n              <svg class=\"w-3 h-3\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            }\n          </span>\n          @if (!showAll && selectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ selectedOptions.length - 1 }}\n          </span>\n          }\n          }\n          }\n        </div>\n        } @else {\n        <span class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n                'text-light-on-secondary dark:text-dark-on-secondary': variant === 'secondary' && !disabled,\n                'text-light-on-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n        }\">{{ selectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n        }\">\n          @if (useIcon) {\n          <ng-content select=\"buttonIcon\"></ng-content>\n          } @else {\n          {{ placeholder }}\n          }\n        </span>\n        }\n      </div>\n      }\n      <div class=\"text-light-on-control dark:text-dark-on-control\"\n           [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n      }\">\n        @if (isDropdownOpen()) {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        } @else {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex gap-2 items-center w-full\"\n     [ngClass]=\"{'flex-col items-start': layout === 'vertical'}\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\"\n         [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n  <div #origin\n       class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n       [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary': !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary' : variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary' : variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger' : variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n        }\"\n       [tabindex]=\"(disabled) ? -1 : 0\"\n       (click)=\"onClick($event)\"\n       (keydown)=\"onKeyDown($event)\">\n    <div class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\">\n      @if(loading){\n      <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n        <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">&nbsp;</div>\n      </div>\n      }\n      @else{\n      <div class=\"flex-1\">\n        @if (!asButton && displayedSelectedOptions && displayedSelectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of displayedSelectedOptions; track option; let i = $index) {\n          @if (showAll || i === 0) {\n          <span class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                [ngClass]=\"{'w-full h-full px-4': !multiselect, 'px-1': multiselect}\">\n            {{ option.value }}\n            @if (showAll || i === 0) {\n            <div (click)=\"onDeselectOption($event, option)\"\n                 class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\">\n              <svg class=\"w-3 h-3\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            }\n          </span>\n          @if (!showAll && displayedSelectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ displayedSelectedOptions.length - 1 }}\n          </span>\n          }\n          }\n          }\n        </div>\n        } @else {\n        <span class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n                'text-light-on-secondary dark:text-dark-on-secondary': variant === 'secondary' && !disabled,\n                'text-light-on-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n        }\">{{ displayedSelectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n        }\">\n          @if (useIcon) {\n          <ng-content select=\"buttonIcon\"></ng-content>\n          } @else {\n          {{ placeholder }}\n          }\n        </span>\n        }\n      </div>\n      }\n      <div class=\"text-light-on-control dark:text-dark-on-control\"\n           [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n      }\">\n        @if (isDropdownOpen()) {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        } @else {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -607,7 +880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], template: "<div class=\"flex gap-2 items-center w-full\"\n     [ngClass]=\"{'flex-col items-start': layout === 'vertical'}\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\"\n         [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n  <div #origin\n       class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n       [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary': !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary' : variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary' : variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger' : variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n        }\"\n       [tabindex]=\"(disabled) ? -1 : 0\"\n       (click)=\"onClick($event)\"\n       (keydown)=\"onKeyDown($event)\">\n    <div class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\">\n      @if(loading){\n      <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n        <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">&nbsp;</div>\n      </div>\n      }\n      @else{\n      <div class=\"flex-1\">\n        @if (!asButton && selectedOptions && selectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of selectedOptions; track option; let i = $index) {\n          @if (showAll || i === 0) {\n          <span class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                [ngClass]=\"{'w-full h-full px-4': !multiselect, 'px-1': multiselect}\">\n            {{ option.value }}\n            @if (showAll || i === 0) {\n            <div (click)=\"onDeselectOption($event, option)\"\n                 class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\">\n              <svg class=\"w-3 h-3\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            }\n          </span>\n          @if (!showAll && selectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ selectedOptions.length - 1 }}\n          </span>\n          }\n          }\n          }\n        </div>\n        } @else {\n        <span class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n                'text-light-on-secondary dark:text-dark-on-secondary': variant === 'secondary' && !disabled,\n                'text-light-on-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n        }\">{{ selectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n        }\">\n          @if (useIcon) {\n          <ng-content select=\"buttonIcon\"></ng-content>\n          } @else {\n          {{ placeholder }}\n          }\n        </span>\n        }\n      </div>\n      }\n      <div class=\"text-light-on-control dark:text-dark-on-control\"\n           [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n      }\">\n        @if (isDropdownOpen()) {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        } @else {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"flex gap-2 items-center w-full\"\n     [ngClass]=\"{'flex-col items-start': layout === 'vertical'}\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\"\n         [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n  <div #origin\n       class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n       [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary': !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary' : variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary' : variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger' : variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n        }\"\n       [tabindex]=\"(disabled) ? -1 : 0\"\n       (click)=\"onClick($event)\"\n       (keydown)=\"onKeyDown($event)\">\n    <div class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\">\n      @if(loading){\n      <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n        <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">&nbsp;</div>\n      </div>\n      }\n      @else{\n      <div class=\"flex-1\">\n        @if (!asButton && displayedSelectedOptions && displayedSelectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of displayedSelectedOptions; track option; let i = $index) {\n          @if (showAll || i === 0) {\n          <span class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                [ngClass]=\"{'w-full h-full px-4': !multiselect, 'px-1': multiselect}\">\n            {{ option.value }}\n            @if (showAll || i === 0) {\n            <div (click)=\"onDeselectOption($event, option)\"\n                 class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\">\n              <svg class=\"w-3 h-3\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            }\n          </span>\n          @if (!showAll && displayedSelectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ displayedSelectedOptions.length - 1 }}\n          </span>\n          }\n          }\n          }\n        </div>\n        } @else {\n        <span class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n                'text-light-on-secondary dark:text-dark-on-secondary': variant === 'secondary' && !disabled,\n                'text-light-on-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n        }\">{{ displayedSelectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n        }\">\n          @if (useIcon) {\n          <ng-content select=\"buttonIcon\"></ng-content>\n          } @else {\n          {{ placeholder }}\n          }\n        </span>\n        }\n      </div>\n      }\n      <div class=\"text-light-on-control dark:text-dark-on-control\"\n           [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n      }\">\n        @if (isDropdownOpen()) {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        } @else {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { selectedChange: [{
                 type: Output
             }], disabled: [{
@@ -851,7 +1124,7 @@ class CalendarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CalendarComponent, isStandalone: true, selector: "haloduck-calendar", inputs: { singleDate: "singleDate", firstDayOfWeek: "firstDayOfWeek", selectedDate: "selectedDate", selectedDateRange: "selectedDateRange" }, outputs: { dateChange: "dateChange", dateRangeChange: "dateRangeChange" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "monthSelect", first: true, predicate: ["monthSelect"], descendants: true }], ngImport: i0, template: "<div id=\"dateRangeCalendar\"\n     class=\"min-w-96 brightness-125 bg-light-background dark:bg-dark-background border border-light-inactive dark:border-dark-inactive rounded text-center p-4 flex flex-col gap-4\"\n     tabindex=\"1\">\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(-1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"yearList\"\n                         [value]=\"currentYear + ''\"\n                         (selectedChange)=\"onSelectYear($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(-1)\">\n      <span class=\"sr-only\">\uC774\uC804 \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"monthList\"\n                         [value]=\"currentMonth + ''\"\n                         (selectedChange)=\"onSelectMonth($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(1)\">\n      <span class=\"sr-only\">\uB2E4\uC74C \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div>\n    <div\n         class=\"grid grid-cols-7 gap-[1px] text-xs/6 font-semibold text-light-on-background dark:text-dark-on-background\">\n      <div>{{ 'haloduck.ui.calendar.Mon' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Tue' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Wed' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Thu' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Fri' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sat' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sun' | transloco }}</div>\n    </div>\n\n    <div class=\"isolate mt-2 grid grid-cols-7 gap-[1px] rounded-lg text-sm shadow overflow-hidden\">\n      @for (date of listCalendarDate; track date.datetime) {\n      <button type=\"button\"\n              (click)=\"onSelectCalendarDate(date)\"\n              class=\"py-1.5 hover:cursor-pointer bg-light-alternative dark:bg-dark-alternative text-light-on-alternative dark:text-dark-on-alternative\"\n              [ngClass]=\"{'bg-light-control dark:bg-dark-control text-light-on-control dark:text-dark-on-control' : date.isCurrentMonth}\">\n        <time [ngClass]=\"{'font-semibold bg-light-primary-light dark:bg-dark-primary-light text-on-light-primary-light dark:text-dark-on-primary-light': date.isToday && date.datetime !== selectedDateRange?.from,\n           'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary': date.datetime === selectedDateRange?.from,\n           'bg-gray-500 font-semibold text-white' : date.isTheDate}\"\n              class=\"mx-auto flex size-7 items-center justify-center rounded-full hover:font-bold\">{{date.date}}</time>\n      </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "options", "layout", "labelWidth", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CalendarComponent, isStandalone: true, selector: "haloduck-calendar", inputs: { singleDate: "singleDate", firstDayOfWeek: "firstDayOfWeek", selectedDate: "selectedDate", selectedDateRange: "selectedDateRange" }, outputs: { dateChange: "dateChange", dateRangeChange: "dateRangeChange" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "monthSelect", first: true, predicate: ["monthSelect"], descendants: true }], ngImport: i0, template: "<div id=\"dateRangeCalendar\"\n     class=\"min-w-96 brightness-125 bg-light-background dark:bg-dark-background border border-light-inactive dark:border-dark-inactive rounded text-center p-4 flex flex-col gap-4\"\n     tabindex=\"1\">\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(-1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"yearList\"\n                         [value]=\"currentYear + ''\"\n                         (selectedChange)=\"onSelectYear($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(-1)\">\n      <span class=\"sr-only\">\uC774\uC804 \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"monthList\"\n                         [value]=\"currentMonth + ''\"\n                         (selectedChange)=\"onSelectMonth($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(1)\">\n      <span class=\"sr-only\">\uB2E4\uC74C \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div>\n    <div\n         class=\"grid grid-cols-7 gap-[1px] text-xs/6 font-semibold text-light-on-background dark:text-dark-on-background\">\n      <div>{{ 'haloduck.ui.calendar.Mon' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Tue' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Wed' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Thu' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Fri' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sat' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sun' | transloco }}</div>\n    </div>\n\n    <div class=\"isolate mt-2 grid grid-cols-7 gap-[1px] rounded-lg text-sm shadow overflow-hidden\">\n      @for (date of listCalendarDate; track date.datetime) {\n      <button type=\"button\"\n              (click)=\"onSelectCalendarDate(date)\"\n              class=\"py-1.5 hover:cursor-pointer bg-light-alternative dark:bg-dark-alternative text-light-on-alternative dark:text-dark-on-alternative\"\n              [ngClass]=\"{'bg-light-control dark:bg-dark-control text-light-on-control dark:text-dark-on-control' : date.isCurrentMonth}\">\n        <time [ngClass]=\"{'font-semibold bg-light-primary-light dark:bg-dark-primary-light text-on-light-primary-light dark:text-dark-on-primary-light': date.isToday && date.datetime !== selectedDateRange?.from,\n           'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary': date.datetime === selectedDateRange?.from,\n           'bg-gray-500 font-semibold text-white' : date.isTheDate}\"\n              class=\"mx-auto flex size-7 items-center justify-center rounded-full hover:font-bold\">{{date.date}}</time>\n      </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "options", "layout", "labelWidth", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
@@ -967,13 +1240,13 @@ class DialogService {
             this.dialogStack.pop()?.dispose();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogService, deps: [{ token: i1$3.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogService, deps: [{ token: i1$2.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.Injector }] });
 
 class ConfirmDialogComponent {
     dialogService = inject(DialogService);
@@ -1058,7 +1331,7 @@ class CopyButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CopyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CopyButtonComponent, isStandalone: true, selector: "haloduck-copy-button", inputs: { text: "text" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<ng-container *transloco=\"let _ts; read: 'haloduck'\">\n  <button type=\"button\"\n          class=\"group inline-flex items-center px-2 py-1 bg-light-alternative dark:bg-dark-alternative hover:brightness-125 rounded text-xs text-light-on-alternative dark:text-dark-on-alternative hover:cursor-pointer active:scale-95 transition-transform\"\n          (click)=\"copyToClipboard($event)\"\n          title=\"Copy to clipboard\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         [class]=\"'h-4 w-4 mr-1 transition-all duration-500 ' + (isAnimating ? 'scale-150 opacity-0' : 'scale-100 opacity-100')\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <rect x=\"9\"\n            y=\"9\"\n            width=\"13\"\n            height=\"13\"\n            rx=\"2\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            fill=\"none\" />\n      <rect x=\"3\"\n            y=\"3\"\n            width=\"13\"\n            height=\"13\"\n            rx=\"2\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            fill=\"none\" />\n    </svg>\n    <span class=\"hidden group-hover:inline\">\n      @if (isAnimating) {\n      {{ _ts('ui.button.Copied') }}\n      } @else {\n      {{ _ts('ui.button.Copy') }}\n      }\n    </span>\n  </button>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i1$2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CopyButtonComponent, isStandalone: true, selector: "haloduck-copy-button", inputs: { text: "text" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<ng-container *transloco=\"let _ts; read: 'haloduck'\">\n  <button type=\"button\"\n          class=\"group inline-flex items-center px-2 py-1 bg-light-alternative dark:bg-dark-alternative hover:brightness-125 rounded text-xs text-light-on-alternative dark:text-dark-on-alternative hover:cursor-pointer active:scale-95 transition-transform\"\n          (click)=\"copyToClipboard($event)\"\n          title=\"Copy to clipboard\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         [class]=\"'h-4 w-4 mr-1 transition-all duration-500 ' + (isAnimating ? 'scale-150 opacity-0' : 'scale-100 opacity-100')\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <rect x=\"9\"\n            y=\"9\"\n            width=\"13\"\n            height=\"13\"\n            rx=\"2\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            fill=\"none\" />\n      <rect x=\"3\"\n            y=\"3\"\n            width=\"13\"\n            height=\"13\"\n            rx=\"2\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            fill=\"none\" />\n    </svg>\n    <span class=\"hidden group-hover:inline\">\n      @if (isAnimating) {\n      {{ _ts('ui.button.Copied') }}\n      } @else {\n      {{ _ts('ui.button.Copy') }}\n      }\n    </span>\n  </button>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i2$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CopyButtonComponent, decorators: [{
             type: Component,
@@ -1446,7 +1719,7 @@ class DateRangeComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div #origin\n     class=\"relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n     [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary': !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n     }\"\n     [tabindex]=\"(disabled) ? -1 : 0\"\n     (click)=\"onClick()\">\n  <div class=\"flex items-center\">\n    <haloduck-select [multiselect]=\"false\"\n                     [disabled]=\"disabled\"\n                     [options]=\"dateRangeOptions\"\n                     [atLeastOne]=\"true\"\n                     (click)=\"$event.stopPropagation()\"\n                     variant=\"primary\"\n                     placeholder=\"{{ 'haloduck.ui.calendar.Period' | transloco }}\"\n                     [(ngModel)]=\"selectedDateRangeOptionId\"\n                     (ngModelChange)=\"onDateRangeOptionChange($event)\">\n    </haloduck-select>\n    @if (getSelectedDateRangeString()) {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-on-control dark:text-dark-on-control': !disabled,\n      'text-light-on-control/60 dark:text-light-on-control/60': disabled,\n      }\"> {{ getSelectedDateRangeString() }}</div>\n    } @else {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-inactive dark:text-dark-inactive': !disabled,\n      'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n         }\"> {{ placeholder }}</div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "options", "layout", "labelWidth", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div #origin\n     class=\"relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n     [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary': !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n     }\"\n     [tabindex]=\"(disabled) ? -1 : 0\"\n     (click)=\"onClick()\">\n  <div class=\"flex items-center\">\n    <haloduck-select [multiselect]=\"false\"\n                     [disabled]=\"disabled\"\n                     [options]=\"dateRangeOptions\"\n                     [atLeastOne]=\"true\"\n                     (click)=\"$event.stopPropagation()\"\n                     variant=\"primary\"\n                     placeholder=\"{{ 'haloduck.ui.calendar.Period' | transloco }}\"\n                     [(ngModel)]=\"selectedDateRangeOptionId\"\n                     (ngModelChange)=\"onDateRangeOptionChange($event)\">\n    </haloduck-select>\n    @if (getSelectedDateRangeString()) {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-on-control dark:text-dark-on-control': !disabled,\n      'text-light-on-control/60 dark:text-light-on-control/60': disabled,\n      }\"> {{ getSelectedDateRangeString() }}</div>\n    } @else {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-inactive dark:text-dark-inactive': !disabled,\n      'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n         }\"> {{ placeholder }}</div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "options", "layout", "labelWidth", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
@@ -1590,7 +1863,7 @@ class DrawCanvasComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"draw-canvas-container flex flex-col gap-2\">\n  <canvas #canvas width=\"800\" height=\"400\" class=\"max-w-full draw-canvas select-none\"></canvas>\n  <haloduck-button variant=\"danger\" (click)=\"onReset()\">{{ 'haloduck.ui.draw.Clear' | transloco }}</haloduck-button>\n</div>\n", styles: [".draw-canvas-container{display:flex;flex-direction:column;align-items:center}.draw-canvas{border:1px solid #ccc;cursor:crosshair}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+        ], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"draw-canvas-container flex flex-col gap-2\">\n  <canvas #canvas width=\"800\" height=\"400\" class=\"max-w-full draw-canvas select-none\"></canvas>\n  <haloduck-button variant=\"danger\" (click)=\"onReset()\">{{ 'haloduck.ui.draw.Clear' | transloco }}</haloduck-button>\n</div>\n", styles: [".draw-canvas-container{display:flex;flex-direction:column;align-items:center}.draw-canvas{border:1px solid #ccc;cursor:crosshair}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DrawCanvasComponent, decorators: [{
             type: Component,
@@ -1779,7 +2052,7 @@ class FileUploaderComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], ngImport: i0, template: "<div class=\"p-4 border border-light-inactive dark:border-dark-inactive rounded-md\"\n     [class.drag-over]=\"isDragOver\"\n     (dragover)=\"onDragOver($event)\"\n     (dragleave)=\"onDragLeave($event)\"\n     (drop)=\"onDrop($event)\">\n  @if (!isUploading) {\n  <label for=\"file-upload\"\n         class=\"flex flex-col items-center justify-center w-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md cursor-pointer hover:border-light-secondary dark:border-dark-secondary p-4\">\n    <span class=\"text-light-inactive dark:text-dark-inactive\">{{ 'haloduck.ui.file.Drag and drop files here, or click to select files' | transloco }}</span>\n    <input id=\"file-upload\"\n           type=\"file\"\n           class=\"hidden\"\n           [attr.accept]=\"accept ? accept.join(',') : null\"\n           [attr.multiple]=\"multiple ? '' : null\"\n           (cancel)=\"$event.stopPropagation()\"\n           (change)=\"onFileSelected($event)\" />\n  </label>\n  }\n  <!-- Display file list -->\n  @if (files.length > 0) {\n  <ul class=\"mt-4 space-y-2\">\n    @for (file of files; track file.name; let i = $index) {\n    <li class=\"flex items-center justify-between p-2 border border-light-inactive dark:border-dark-inactive rounded-md\">\n      <!-- Check if the file is an image -->\n      <div class=\"flex items-center space-x-4\">\n        @if (file.previewUrl){\n        <img [src]=\"file.previewUrl\"\n             alt=\"{{ file.name }}\"\n             class=\"w-12 h-12 object-cover rounded-md\" />\n        }\n        <span class=\"text-sm text-light-inactive dark:text-dark-inactive\">{{ file.name }}</span>\n      </div>\n      @if (isUploading) {\n      @if (file.isUploaded) {\n      <span class=\"text-sm text-light-secondary dark:text-dark-secondary\">{{ 'haloduck.ui.file.Uploaded' | transloco }}</span>\n      }@else{\n      <span class=\"text-sm text-light-primary dark:text-dark-primary\">{{ 'haloduck.ui.file.Uploading...' | transloco }}</span>\n      }\n      }@else{\n      <button type=\"button\"\n              class=\"text-light-danger dark:text-dark-danger hover:brightness-125\"\n              (click)=\"removeFile(i)\">\n        {{ 'haloduck.ui.file.Remove' | transloco }}\n      </button>\n      }\n    </li>\n    }\n  </ul>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+        ], ngImport: i0, template: "<div class=\"p-4 border border-light-inactive dark:border-dark-inactive rounded-md\"\n     [class.drag-over]=\"isDragOver\"\n     (dragover)=\"onDragOver($event)\"\n     (dragleave)=\"onDragLeave($event)\"\n     (drop)=\"onDrop($event)\">\n  @if (!isUploading) {\n  <label for=\"file-upload\"\n         class=\"flex flex-col items-center justify-center w-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md cursor-pointer hover:border-light-secondary dark:border-dark-secondary p-4\">\n    <span class=\"text-light-inactive dark:text-dark-inactive\">{{ 'haloduck.ui.file.Drag and drop files here, or click to select files' | transloco }}</span>\n    <input id=\"file-upload\"\n           type=\"file\"\n           class=\"hidden\"\n           [attr.accept]=\"accept ? accept.join(',') : null\"\n           [attr.multiple]=\"multiple ? '' : null\"\n           (cancel)=\"$event.stopPropagation()\"\n           (change)=\"onFileSelected($event)\" />\n  </label>\n  }\n  <!-- Display file list -->\n  @if (files.length > 0) {\n  <ul class=\"mt-4 space-y-2\">\n    @for (file of files; track file.name; let i = $index) {\n    <li class=\"flex items-center justify-between p-2 border border-light-inactive dark:border-dark-inactive rounded-md\">\n      <!-- Check if the file is an image -->\n      <div class=\"flex items-center space-x-4\">\n        @if (file.previewUrl){\n        <img [src]=\"file.previewUrl\"\n             alt=\"{{ file.name }}\"\n             class=\"w-12 h-12 object-cover rounded-md\" />\n        }\n        <span class=\"text-sm text-light-inactive dark:text-dark-inactive\">{{ file.name }}</span>\n      </div>\n      @if (isUploading) {\n      @if (file.isUploaded) {\n      <span class=\"text-sm text-light-secondary dark:text-dark-secondary\">{{ 'haloduck.ui.file.Uploaded' | transloco }}</span>\n      }@else{\n      <span class=\"text-sm text-light-primary dark:text-dark-primary\">{{ 'haloduck.ui.file.Uploading...' | transloco }}</span>\n      }\n      }@else{\n      <button type=\"button\"\n              class=\"text-light-danger dark:text-dark-danger hover:brightness-125\"\n              (click)=\"removeFile(i)\">\n        {{ 'haloduck.ui.file.Remove' | transloco }}\n      </button>\n      }\n    </li>\n    }\n  </ul>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
@@ -2016,7 +2289,7 @@ class ImageUploaderComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col gap-1\">\n    <label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n        <ng-content></ng-content>\n    </label>\n    <div class=\"h-full w-full p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n         [class.drag-over]=\"isDragOver\"\n         (dragstart)=\"onDragStart($event)\"\n         (dragend)=\"onDragEnd($event)\"\n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\"\n         (drop)=\"onDrop($event)\">\n        <!-- Show image preview if available -->\n        @if (imageUrl) {\n        @if (!disabled) {\n        <div class=\"relative\">\n            <button type=\"button\"\n                    class=\"absolute -top-1 -right-1 bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger rounded-full px-1 text-xs\"\n                    (click)=\"removeImage()\">\n                x\n            </button>\n        </div>\n        }\n        <img [src]=\"imageUrl\"\n             [id]=\"id + '-image'\"\n             [alt]=\"alt || ''\"\n             class=\"w-full h-full rounded-md aspect-square\"\n             [ngClass]=\"{\n                 'filter grayscale': disabled,\n             }\"\n             (click)=\"previewImage(imageUrl)\" />\n        } @else {\n        <!-- Show upload area -->\n        <label for=\"{{id + '-input'}}\"\n               class=\"flex flex-col items-center justify-center w-full h-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md\"\n               [ngClass]=\"{'cursor-pointer hover:border-light-primary dark:hover:border-dark-primary': !disabled}\">\n            @if (backgroundImage) {\n            <img [src]=\"backgroundImage\"\n                 [alt]=\"alt || ''\"\n                 class=\"w-full h-full rounded-md aspect-square\" />\n            }@else {\n            <span class=\"text-light-inactive dark:text-dark-inactive text-sm p-2\">{{ 'haloduck.ui.file.Drag and drop an image here, or click to select' | transloco }}</span>\n            }\n\n            @if(!disabled){\n            <input [id]=\"id + '-input'\"\n                   type=\"file\"\n                   class=\"hidden\"\n                   accept=\"image/*\"\n                   [multiple]=\"passToSibling\"\n                   (cancel)=\"$event.stopPropagation()\"\n                   (change)=\"onFileSelected($event)\" />\n            }\n        </label>\n        }\n    </div>\n</div>\n", styles: [".drag-over{border-color:#3b82f6}.relative{position:relative}button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col gap-1\">\n    <label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n        <ng-content></ng-content>\n    </label>\n    <div class=\"h-full w-full p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n         [class.drag-over]=\"isDragOver\"\n         (dragstart)=\"onDragStart($event)\"\n         (dragend)=\"onDragEnd($event)\"\n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\"\n         (drop)=\"onDrop($event)\">\n        <!-- Show image preview if available -->\n        @if (imageUrl) {\n        @if (!disabled) {\n        <div class=\"relative\">\n            <button type=\"button\"\n                    class=\"absolute -top-1 -right-1 bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger rounded-full px-1 text-xs\"\n                    (click)=\"removeImage()\">\n                x\n            </button>\n        </div>\n        }\n        <img [src]=\"imageUrl\"\n             [id]=\"id + '-image'\"\n             [alt]=\"alt || ''\"\n             class=\"w-full h-full rounded-md aspect-square\"\n             [ngClass]=\"{\n                 'filter grayscale': disabled,\n             }\"\n             (click)=\"previewImage(imageUrl)\" />\n        } @else {\n        <!-- Show upload area -->\n        <label for=\"{{id + '-input'}}\"\n               class=\"flex flex-col items-center justify-center w-full h-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md\"\n               [ngClass]=\"{'cursor-pointer hover:border-light-primary dark:hover:border-dark-primary': !disabled}\">\n            @if (backgroundImage) {\n            <img [src]=\"backgroundImage\"\n                 [alt]=\"alt || ''\"\n                 class=\"w-full h-full rounded-md aspect-square\" />\n            }@else {\n            <span class=\"text-light-inactive dark:text-dark-inactive text-sm p-2\">{{ 'haloduck.ui.file.Drag and drop an image here, or click to select' | transloco }}</span>\n            }\n\n            @if(!disabled){\n            <input [id]=\"id + '-input'\"\n                   type=\"file\"\n                   class=\"hidden\"\n                   accept=\"image/*\"\n                   [multiple]=\"passToSibling\"\n                   (cancel)=\"$event.stopPropagation()\"\n                   (change)=\"onFileSelected($event)\" />\n            }\n        </label>\n        }\n    </div>\n</div>\n", styles: [".drag-over{border-color:#3b82f6}.relative{position:relative}button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ImageUploaderComponent, decorators: [{
             type: Component,
@@ -2429,13 +2702,13 @@ class SideMenuItemComponent {
     navigateTo(link) {
         this.router.navigate(link);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideMenuItemComponent, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideMenuItemComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SideMenuItemComponent, isStandalone: true, selector: "haloduck-side-menu-item", inputs: { menuItem: "menuItem", depth: "depth", menuItemSelectHandler: "menuItemSelectHandler" }, ngImport: i0, template: "<a href=\"javascript:void(0)\"\n   (click)=\"onMenuItemSelected(menuItem)\"\n   class=\"flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:text-light-on-primary dark:hover:text-dark-on-primary hover:bg-light-primary dark:hover:bg-dark-primary hover:cursor-pointer\"\n   [ngClass]=\"{\n      'font-bold text-light-on-secondary dark:bg-dark-on-secondary bg-light-secondary dark:bg-dark-secondary': menuItem.isSelected,\n     }\">\n  @if (menuItem.iconType === 'svg') {\n  <div [innerHTML]=\"iconSvg\"></div>\n  } @else {\n  @if (menuItem.icon) {\n  <img class=\"w-5 h-5\"\n       [src]=\"menuItem.icon\"\n       [alt]=\"menuItem.title\"\n       [title]=\"menuItem.title\"\n       [loading]=\"'lazy'\" />\n  }\n  }\n  <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n        title=\"{{ menuItem.title }}\"\n        [ngStyle]=\"{'margin-left.px': depth ? depth * 16 : 0}\">\n    {{ menuItem.title }}\n  </span>\n</a>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'haloduck-side-menu-item', imports: [CommonModule], template: "<a href=\"javascript:void(0)\"\n   (click)=\"onMenuItemSelected(menuItem)\"\n   class=\"flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:text-light-on-primary dark:hover:text-dark-on-primary hover:bg-light-primary dark:hover:bg-dark-primary hover:cursor-pointer\"\n   [ngClass]=\"{\n      'font-bold text-light-on-secondary dark:bg-dark-on-secondary bg-light-secondary dark:bg-dark-secondary': menuItem.isSelected,\n     }\">\n  @if (menuItem.iconType === 'svg') {\n  <div [innerHTML]=\"iconSvg\"></div>\n  } @else {\n  @if (menuItem.icon) {\n  <img class=\"w-5 h-5\"\n       [src]=\"menuItem.icon\"\n       [alt]=\"menuItem.title\"\n       [title]=\"menuItem.title\"\n       [loading]=\"'lazy'\" />\n  }\n  }\n  <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n        title=\"{{ menuItem.title }}\"\n        [ngStyle]=\"{'margin-left.px': depth ? depth * 16 : 0}\">\n    {{ menuItem.title }}\n  </span>\n</a>\n" }]
-        }], ctorParameters: () => [{ type: i1$4.DomSanitizer }], propDecorators: { menuItem: [{
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { menuItem: [{
                 type: Input
             }], depth: [{
                 type: Input
@@ -2552,7 +2825,7 @@ class StlViewerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: StlViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: StlViewerComponent, isStandalone: true, selector: "haloduck-stl-viewer", inputs: { fileUrl: "fileUrl", filename: "filename", context: "context" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["viewerContainer"], descendants: true }], ngImport: i0, template: "<div class=\"relative w-full h-full flex flex-col items-end\">\n    <div class=\"w-full h-full flex items-start flex-col\">\n        <div #viewerContainer\n             class=\"w-full h-full rounded-md\"></div>\n        @if (loadingPercentage < 100)\n          {\n          <div\n          class=\"h-2 bg-light-primary-light dark:bg-dark-primary-light\"\n          [ngStyle]=\"{ 'width': loadingPercentage + '%' }\">\n    </div>\n    }\n</div>\n<div class=\"absolute bottom-2 right-0 flex justify-end gap-2\">\n    @if (context) {\n    <haloduck-button variant=\"primary\"\n                (click)=\"download()\">{{ 'haloduck.ui.button.Download' | transloco }}</haloduck-button>\n    <haloduck-button variant=\"danger\"\n                (click)=\"closeDialog()\">{{ 'haloduck.ui.button.Close' | transloco }}</haloduck-button>\n    } @else {\n    <haloduck-button variant=\"primary\"\n                (click)=\"download()\">{{ 'haloduck.ui.button.Download' | transloco }}</haloduck-button>\n    <haloduck-button variant=\"secondary\"\n                (click)=\"showStl()\">{{ 'haloduck.ui.button.View' | transloco }}</haloduck-button>\n    }\n</div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: StlViewerComponent, isStandalone: true, selector: "haloduck-stl-viewer", inputs: { fileUrl: "fileUrl", filename: "filename", context: "context" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["viewerContainer"], descendants: true }], ngImport: i0, template: "<div class=\"relative w-full h-full flex flex-col items-end\">\n    <div class=\"w-full h-full flex items-start flex-col\">\n        <div #viewerContainer\n             class=\"w-full h-full rounded-md\"></div>\n        @if (loadingPercentage < 100)\n          {\n          <div\n          class=\"h-2 bg-light-primary-light dark:bg-dark-primary-light\"\n          [ngStyle]=\"{ 'width': loadingPercentage + '%' }\">\n    </div>\n    }\n</div>\n<div class=\"absolute bottom-2 right-0 flex justify-end gap-2\">\n    @if (context) {\n    <haloduck-button variant=\"primary\"\n                (click)=\"download()\">{{ 'haloduck.ui.button.Download' | transloco }}</haloduck-button>\n    <haloduck-button variant=\"danger\"\n                (click)=\"closeDialog()\">{{ 'haloduck.ui.button.Close' | transloco }}</haloduck-button>\n    } @else {\n    <haloduck-button variant=\"primary\"\n                (click)=\"download()\">{{ 'haloduck.ui.button.Download' | transloco }}</haloduck-button>\n    <haloduck-button variant=\"secondary\"\n                (click)=\"showStl()\">{{ 'haloduck.ui.button.View' | transloco }}</haloduck-button>\n    }\n</div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: StlViewerComponent, decorators: [{
             type: Component,
@@ -2673,7 +2946,7 @@ class TableComponent {
     ngOnInit() { }
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableComponent, isStandalone: true, selector: "haloduck-table", inputs: { tableLayout: "tableLayout", showHeader: "showHeader", useLoadMore: "useLoadMore", columns: "columns", rows: "rows", isLoading: "isLoading", isPaging: "isPaging", sort: "sort", expandedTemplate: "expandedTemplate", customTemplates: "customTemplates", lastEvaluatedKey: "lastEvaluatedKey" }, outputs: { onSortChange: "onSortChange", onLoadMore: "onLoadMore", onRowClick: "onRowClick", onRowDblClick: "onRowDblClick" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<div class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n  <table class=\"w-full h-full\"\n         [ngClass]=\"{\n      'table-fixed': tableLayout === 'fixed',\n      'table-auto': tableLayout === 'auto',\n    }\">\n    <colgroup>\n      @for (column of columns; track column.key) {\n      @if (!column.hidden || !(column.hidden | async)) {\n      <col class=\"{{ column.width || '' }}\" />\n      }\n      }\n    </colgroup>\n    @if (showHeader) {\n    <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n      <tr>\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <th scope=\"col\"\n            class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n          <span class=\"group inline-flex\">\n            {{ column.label }}\n            @if (column.sortable) {\n            @switch (getSortDirection(column.sort?.field || column.key) | async)\n            {\n            @case('desc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @case('asc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @default {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            }\n            }\n          </span>\n        </th>\n        }\n        }\n      </tr>\n    </thead>\n    }\n    <tbody class=\"overflow-scroll\">\n      @for (row of rows | async; track row['id']; let lastRow = $last) {\n      <tr class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n          (click)=\"onRowClicked(row)\"\n          (dblclick)=\"onRowDblClicked(row)\"\n          [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n          [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n            [ngClass]=\"{\n                                    'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n                                    'text-wrap': row.isExpanded && column.type !== 'custom',\n                                    'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n                                    'py-2': column.type === 'custom',\n                                    'py-4': column.type !== 'custom'\n                                    }\">\n          @if (column.type === 'custom') {\n          @if (column.customRenderTemplate) {\n          <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n          }\n          }\n          @else {\n          {{ getColumnValue(row, column) | async }}\n          }\n        </td>\n        }\n        }\n      </tr>\n\n      @if (row.isExpanded && expandedTemplate) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\">\n        </td>\n      </tr>\n      <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n          <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n        </td>\n      </tr>\n      }\n\n      @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n      <tr #loadMoreRow class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          <div (click)=\"onLoadMoreClicked()\"\n               class=\"cursor-pointer\">\n            {{ 'haloduck.ui.table.Load More...' | transloco }}\n          </div>\n        </td>\n      </tr>\n      }\n\n      } @empty {\n      @if(!(isLoading | async)) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          {{ 'haloduck.ui.table.No data available.' | transloco }}\n        </td>\n      </tr>\n      }\n      }\n\n      @if(isLoading | async) {\n      @for ( i of [0,1,2,3,4]; track i; let lastRow = $last)\n      {\n      <tr class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\">\n        @for (column of columns; track column.key) {\n        <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n            [ngClass]=\"{'first:rounded-bl-lg last:rounded-br-lg': lastRow}\">\n          <div class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"></div>\n        </td>\n        }\n      </tr>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableComponent, isStandalone: true, selector: "haloduck-table", inputs: { tableLayout: "tableLayout", showHeader: "showHeader", useLoadMore: "useLoadMore", columns: "columns", rows: "rows", isLoading: "isLoading", isPaging: "isPaging", sort: "sort", expandedTemplate: "expandedTemplate", customTemplates: "customTemplates", lastEvaluatedKey: "lastEvaluatedKey" }, outputs: { onSortChange: "onSortChange", onLoadMore: "onLoadMore", onRowClick: "onRowClick", onRowDblClick: "onRowDblClick" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<div class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n  <table class=\"w-full h-full\"\n         [ngClass]=\"{\n      'table-fixed': tableLayout === 'fixed',\n      'table-auto': tableLayout === 'auto',\n    }\">\n    <colgroup>\n      @for (column of columns; track column.key) {\n      @if (!column.hidden || !(column.hidden | async)) {\n      <col class=\"{{ column.width || '' }}\" />\n      }\n      }\n    </colgroup>\n    @if (showHeader) {\n    <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n      <tr>\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <th scope=\"col\"\n            class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n          <span class=\"group inline-flex\">\n            {{ column.label }}\n            @if (column.sortable) {\n            @switch (getSortDirection(column.sort?.field || column.key) | async)\n            {\n            @case('desc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @case('asc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @default {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            }\n            }\n          </span>\n        </th>\n        }\n        }\n      </tr>\n    </thead>\n    }\n    <tbody class=\"overflow-scroll\">\n      @for (row of rows | async; track row['id']; let lastRow = $last) {\n      <tr class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n          (click)=\"onRowClicked(row)\"\n          (dblclick)=\"onRowDblClicked(row)\"\n          [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n          [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n            [ngClass]=\"{\n                                    'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n                                    'text-wrap': row.isExpanded && column.type !== 'custom',\n                                    'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n                                    'py-2': column.type === 'custom',\n                                    'py-4': column.type !== 'custom'\n                                    }\">\n          @if (column.type === 'custom') {\n          @if (column.customRenderTemplate) {\n          <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n          }\n          }\n          @else {\n          {{ getColumnValue(row, column) | async }}\n          }\n        </td>\n        }\n        }\n      </tr>\n\n      @if (row.isExpanded && expandedTemplate) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\">\n        </td>\n      </tr>\n      <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n          <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n        </td>\n      </tr>\n      }\n\n      @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n      <tr #loadMoreRow class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          <div (click)=\"onLoadMoreClicked()\"\n               class=\"cursor-pointer\">\n            {{ 'haloduck.ui.table.Load More...' | transloco }}\n          </div>\n        </td>\n      </tr>\n      }\n\n      } @empty {\n      @if(!(isLoading | async)) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          {{ 'haloduck.ui.table.No data available.' | transloco }}\n        </td>\n      </tr>\n      }\n      }\n\n      @if(isLoading | async) {\n      @for ( i of [0,1,2,3,4]; track i; let lastRow = $last)\n      {\n      <tr class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\">\n        @for (column of columns; track column.key) {\n        <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n            [ngClass]=\"{'first:rounded-bl-lg last:rounded-br-lg': lastRow}\">\n          <div class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"></div>\n        </td>\n        }\n      </tr>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -3244,13 +3517,13 @@ class BreadcrumbService {
         }
         return breadcrumbs;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BreadcrumbService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$5.Router }] });
+        }], ctorParameters: () => [{ type: i1$4.Router }] });
 
 class BreadcrumbComponent {
     breadcrumbService = inject(BreadcrumbService);
@@ -3261,7 +3534,7 @@ class BreadcrumbComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: BreadcrumbComponent, isStandalone: true, selector: "haloduck-breadcrumb", ngImport: i0, template: "<nav class=\"flex border-b border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n     aria-label=\"Breadcrumb\">\n    <ol role=\"list\"\n        class=\"flex w-full max-w-(--breakpoint-xl) space-x-4 px-4 sm:px-6 lg:px-8\">\n        <li class=\"flex\">\n            <div class=\"flex items-center\">\n                <a routerLink=\"/\"\n                   class=\"text-light-on-background dark:text-dark-on-background hover:scale-105\">\n                    <svg class=\"size-5 shrink-0\"\n                         viewBox=\"0 0 20 20\"\n                         fill=\"currentColor\"\n                         aria-hidden=\"true\"\n                         data-slot=\"icon\">\n                        <path fill-rule=\"evenodd\"\n                              d=\"M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z\"\n                              clip-rule=\"evenodd\" />\n                    </svg>\n                    <span class=\"sr-only\">Home</span>\n                </a>\n            </div>\n        </li>\n        @for (breadcrumb of listBreadcrumb; track breadcrumb.label; let last = $last) {\n        <li class=\"flex\">\n            <div class=\"flex items-center\">\n                <svg class=\"h-full w-6 shrink-0 text-light-inactive dark:text-dark-inactive\"\n                     viewBox=\"0 0 24 44\"\n                     preserveAspectRatio=\"none\"\n                     fill=\"currentColor\"\n                     aria-hidden=\"true\">\n                    <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n                </svg>\n                @if (!last) {\n                <a href=\"javascript:void(0)\"\n                   [routerLink]=\"breadcrumb.url\"\n                   class=\"ml-4 text-sm font-medium hover:font-bold text-light-on-background dark:text-dark-on-background\">{{ breadcrumb.label | transloco }}</a>\n                } @else {\n                <span class=\"ml-4 text-sm font-medium text-light-on-background dark:text-dark-on-background\">{{ breadcrumb.label | transloco }}</span>\n                }\n            </div>\n        </li>\n        }\n    </ol>\n</nav>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: BreadcrumbComponent, isStandalone: true, selector: "haloduck-breadcrumb", ngImport: i0, template: "<nav class=\"flex border-b border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n     aria-label=\"Breadcrumb\">\n    <ol role=\"list\"\n        class=\"flex w-full max-w-(--breakpoint-xl) space-x-4 px-4 sm:px-6 lg:px-8\">\n        <li class=\"flex\">\n            <div class=\"flex items-center\">\n                <a routerLink=\"/\"\n                   class=\"text-light-on-background dark:text-dark-on-background hover:scale-105\">\n                    <svg class=\"size-5 shrink-0\"\n                         viewBox=\"0 0 20 20\"\n                         fill=\"currentColor\"\n                         aria-hidden=\"true\"\n                         data-slot=\"icon\">\n                        <path fill-rule=\"evenodd\"\n                              d=\"M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z\"\n                              clip-rule=\"evenodd\" />\n                    </svg>\n                    <span class=\"sr-only\">Home</span>\n                </a>\n            </div>\n        </li>\n        @for (breadcrumb of listBreadcrumb; track breadcrumb.label; let last = $last) {\n        <li class=\"flex\">\n            <div class=\"flex items-center\">\n                <svg class=\"h-full w-6 shrink-0 text-light-inactive dark:text-dark-inactive\"\n                     viewBox=\"0 0 24 44\"\n                     preserveAspectRatio=\"none\"\n                     fill=\"currentColor\"\n                     aria-hidden=\"true\">\n                    <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n                </svg>\n                @if (!last) {\n                <a href=\"javascript:void(0)\"\n                   [routerLink]=\"breadcrumb.url\"\n                   class=\"ml-4 text-sm font-medium hover:font-bold text-light-on-background dark:text-dark-on-background\">{{ breadcrumb.label | transloco }}</a>\n                } @else {\n                <span class=\"ml-4 text-sm font-medium text-light-on-background dark:text-dark-on-background\">{{ breadcrumb.label | transloco }}</span>\n                }\n            </div>\n        </li>\n        }\n    </ol>\n</nav>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,