@haloduck/ui 2.0.43 → 2.0.45

package/fesm2022/haloduck-ui.mjs

@@ -2333,6 +2333,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 args: ['canvas', { static: true }]
             }] } });
 
+class TagInputComponent {
+    label;
+    inputEl;
+    placeholder = '';
+    disabled = false;
+    allowDuplicates = false;
+    // Two-way binding support independent of CVA
+    set value(tags) {
+        if (Array.isArray(tags)) {
+            this.tags = tags.map((t) => (t ?? '').trim()).filter((t) => t.length > 0);
+        }
+        else {
+            this.tags = [];
+        }
+    }
+    valueChange = new EventEmitter();
+    tags = [];
+    inputValue = '';
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (Array.isArray(value)) {
+            this.tags = value.map((t) => (t ?? '').trim()).filter((t) => t.length > 0);
+        }
+        else {
+            this.tags = [];
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngAfterViewInit() {
+        // hide label if no projected content
+        if (this.label && this.label.nativeElement) {
+            const hasContent = this.label.nativeElement.textContent?.trim();
+            if (!hasContent) {
+                this.label.nativeElement.style.display = 'none';
+            }
+        }
+    }
+    focus() {
+        this.inputEl?.nativeElement?.focus();
+    }
+    onInput(event) {
+        const input = event.target;
+        this.inputValue = input.value;
+        this.onTouched();
+    }
+    onBlur() {
+        if (this.disabled)
+            return;
+        this.inputValue = '';
+        this.onTouched();
+    }
+    onKeydown(event) {
+        if (this.disabled)
+            return;
+        // Commit on comma or Enter
+        if (event.key === ',' || event.key === 'Enter') {
+            event.preventDefault();
+            this.commitCurrentInput();
+            return;
+        }
+        // Backspace behavior
+        if (event.key === 'Backspace') {
+            if (this.inputValue.length > 0) {
+                return; // default backspace in input
+            }
+            if (this.tags.length > 0) {
+                event.preventDefault();
+                this.removeTag(this.tags.length - 1);
+                return;
+            }
+        }
+    }
+    removeTag(index) {
+        if (this.disabled)
+            return;
+        if (index < 0 || index >= this.tags.length)
+            return;
+        this.tags = this.tags.filter((_, i) => i !== index);
+        this.emitChanges();
+    }
+    commitCurrentInput() {
+        const raw = this.inputValue.trim();
+        if (!raw) {
+            this.inputValue = '';
+            return;
+        }
+        // If user pasted multiple comma-separated values, split and add all
+        const parts = raw
+            .split(',')
+            .map((p) => p.trim())
+            .filter((p) => p.length > 0);
+        for (const part of parts) {
+            this.addTag(part);
+        }
+        this.inputValue = '';
+    }
+    addTag(tag) {
+        if (!this.allowDuplicates) {
+            const exists = this.tags.some((t) => t.toLowerCase() === tag.toLowerCase());
+            if (exists) {
+                return;
+            }
+        }
+        this.tags = [...this.tags, tag];
+        this.emitChanges();
+    }
+    emitChanges() {
+        const cleaned = this.tags.map((t) => (t ?? '').trim()).filter((t) => t.length > 0);
+        if (cleaned.length !== this.tags.length || cleaned.some((t, i) => t !== this.tags[i])) {
+            this.tags = cleaned;
+        }
+        this.onChange(this.tags);
+        this.valueChange.emit(this.tags);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TagInputComponent, isStandalone: true, selector: "haloduck-tag-input", inputs: { placeholder: "placeholder", disabled: "disabled", allowDuplicates: "allowDuplicates", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TagInputComponent),
+                multi: true,
+            },
+            provideTranslocoScope('haloduck'),
+        ], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n\n  <div\n    class=\"tag-input-wrapper block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive sm:text-sm/6\"\n  >\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (tag of tags; track tag; let i = $index) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\"\n        >\n          {{ tag }}\n          @if (!disabled) {\n            <button\n              type=\"button\"\n              (click)=\"removeTag(i)\"\n              class=\"text-light-on-secondary/80 hover:text-light-on-secondary dark:text-dark-on-secondary/80 dark:hover:text-dark-on-secondary hover:cursor-pointer\"\n            >\n              \u00D7\n            </button>\n          }\n        </span>\n      }\n\n      <input\n        #inputEl\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        class=\"flex-1 min-w-[8rem] bg-transparent outline-none placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur()\"\n      />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tag-input-wrapper:focus-within{outline-width:2px;outline-offset:2px;outline-color:var(--color-light-primary)!important}@media (prefers-color-scheme: dark){.tag-input-wrapper:focus-within{outline-color:var(--color-dark-primary)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'haloduck-tag-input', imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TagInputComponent),
+                            multi: true,
+                        },
+                        provideTranslocoScope('haloduck'),
+                    ], template: "<div class=\"flex flex-col gap-2\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n\n  <div\n    class=\"tag-input-wrapper block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive sm:text-sm/6\"\n  >\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (tag of tags; track tag; let i = $index) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\"\n        >\n          {{ tag }}\n          @if (!disabled) {\n            <button\n              type=\"button\"\n              (click)=\"removeTag(i)\"\n              class=\"text-light-on-secondary/80 hover:text-light-on-secondary dark:text-dark-on-secondary/80 dark:hover:text-dark-on-secondary hover:cursor-pointer\"\n            >\n              \u00D7\n            </button>\n          }\n        </span>\n      }\n\n      <input\n        #inputEl\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        class=\"flex-1 min-w-[8rem] bg-transparent outline-none placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur()\"\n      />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tag-input-wrapper:focus-within{outline-width:2px;outline-offset:2px;outline-color:var(--color-light-primary)!important}@media (prefers-color-scheme: dark){.tag-input-wrapper:focus-within{outline-color:var(--color-dark-primary)!important}}\n"] }]
+        }], propDecorators: { label: [{
+                type: ViewChild,
+                args: ['label']
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['inputEl']
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], allowDuplicates: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 const ERROR_NOT_ACCEPTABLE_FILE_TYPE = 'NOT_ACCEPTABLE_FILE_TYPE';
 const ERROR_OVER_SIZE = 'OVER_SIZE';
 const ERROR_OVER_COUNT = 'OVER_COUNT';
@@ -2382,6 +2543,12 @@ class FileUploaderComponent {
         this.fileRemoved.emit(removedFile);
         this.onChange(this.files);
     }
+    onFileTagChanged(index, tags) {
+        if (this.files[index]) {
+            this.files[index].tag = tags;
+            this.onChange(this.files);
+        }
+    }
     onDragOver(event) {
         event.preventDefault();
         this.isDragOver = true;
@@ -2429,11 +2596,15 @@ class FileUploaderComponent {
         if (notAcceptedFiles.length > 0) {
             this.error.emit(notAcceptedFiles);
         }
-        // Compute preview URLs for the new files
+        // Compute preview URLs for the new files and initialize tags
         filteredFiles.forEach((file) => {
             if (file.type.startsWith('image')) {
                 file.previewUrl = URL.createObjectURL(file);
             }
+            // Initialize tag array if not exists
+            if (!file.tag) {
+                file.tag = [];
+            }
         });
         this.files = this.files.concat(filteredFiles);
         this.filesAdded.emit(filteredFiles);
@@ -2468,7 +2639,9 @@ class FileUploaderComponent {
         this.files.forEach((file) => {
             file.isUploading = true;
             file.isUploaded = false;
-            uploadTrigger$.push(this.uploadApi(file, this.keyPrefix).pipe(
+            // Create a file with tag information for upload
+            const fileWithTag = Object.assign(file, { tag: file.tag || [] });
+            uploadTrigger$.push(this.uploadApi(fileWithTag, this.keyPrefix).pipe(
             // Handle the upload API response
             tap((key) => {
                 file.isUploading = false;
@@ -2498,18 +2671,18 @@ class FileUploaderComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], ngImport: i0, template: "<div\n  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>\n  @if (!isUploading) {\n    <label\n      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    >\n      <span class=\"text-light-inactive dark:text-dark-inactive\">{{\n        'haloduck.ui.file.Drag and drop files here, or click to select files' | transloco\n      }}</span>\n      <input\n        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      />\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\n          class=\"flex items-center justify-between p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n        >\n          <!-- Check if the file is an image -->\n          <div class=\"flex items-center space-x-4\">\n            @if (file.previewUrl) {\n              <img\n                [src]=\"file.previewUrl\"\n                alt=\"{{ file.name }}\"\n                class=\"w-12 h-12 object-cover rounded-md\"\n              />\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\">{{\n                'haloduck.ui.file.Uploaded' | transloco\n              }}</span>\n            } @else {\n              <span class=\"text-sm text-light-primary dark:text-dark-primary\">{{\n                'haloduck.ui.file.Uploading...' | transloco\n              }}</span>\n            }\n          } @else {\n            <button\n              type=\"button\"\n              class=\"text-light-danger dark:text-dark-danger hover:brightness-125\"\n              (click)=\"removeFile(i)\"\n            >\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" }] });
+        ], ngImport: i0, template: "<div\n  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>\n  @if (!isUploading) {\n    <label\n      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    >\n      <span class=\"text-light-inactive dark:text-dark-inactive\">{{\n        'haloduck.ui.file.Drag and drop files here, or click to select files' | transloco\n      }}</span>\n      <input\n        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      />\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\n          class=\"flex items-center justify-between p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n        >\n          <!-- Check if the file is an image -->\n          <div class=\"flex items-center space-x-4\">\n            @if (file.previewUrl) {\n              <img\n                [src]=\"file.previewUrl\"\n                alt=\"{{ file.name }}\"\n                class=\"w-12 h-12 object-cover rounded-md\"\n              />\n            }\n            <span class=\"text-sm text-light-inactive dark:text-dark-inactive\">{{ file.name }}</span>\n          </div>\n          <div class=\"flex items-center space-x-4\">\n            <haloduck-tag-input\n              placeholder=\"{{ 'haloduck.ui.tag.Please input tags.' | transloco }}\"\n              [(value)]=\"file.tag\"\n              (valueChange)=\"onFileTagChanged(i, $event)\"\n            ></haloduck-tag-input>\n            @if (isUploading) {\n              @if (file.isUploaded) {\n                <span class=\"text-sm text-light-secondary dark:text-dark-secondary\">{{\n                  'haloduck.ui.file.Uploaded' | transloco\n                }}</span>\n              } @else {\n                <span class=\"text-sm text-light-primary dark:text-dark-primary\">{{\n                  'haloduck.ui.file.Uploading...' | transloco\n                }}</span>\n              }\n            } @else {\n              <button\n                type=\"button\"\n                class=\"text-light-danger dark:text-dark-danger hover:brightness-125\"\n                (click)=\"removeFile(i)\"\n              >\n                {{ 'haloduck.ui.file.Remove' | transloco }}\n              </button>\n            }\n          </div>\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: TagInputComponent, selector: "haloduck-tag-input", inputs: ["placeholder", "disabled", "allowDuplicates", "value"], outputs: ["valueChange"] }, { 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,
-            args: [{ selector: 'haloduck-file-uploader', imports: [CommonModule, TranslocoModule], providers: [
+            args: [{ selector: 'haloduck-file-uploader', imports: [CommonModule, TranslocoModule, TagInputComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => FileUploaderComponent),
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], template: "<div\n  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>\n  @if (!isUploading) {\n    <label\n      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    >\n      <span class=\"text-light-inactive dark:text-dark-inactive\">{{\n        'haloduck.ui.file.Drag and drop files here, or click to select files' | transloco\n      }}</span>\n      <input\n        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      />\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\n          class=\"flex items-center justify-between p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n        >\n          <!-- Check if the file is an image -->\n          <div class=\"flex items-center space-x-4\">\n            @if (file.previewUrl) {\n              <img\n                [src]=\"file.previewUrl\"\n                alt=\"{{ file.name }}\"\n                class=\"w-12 h-12 object-cover rounded-md\"\n              />\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\">{{\n                'haloduck.ui.file.Uploaded' | transloco\n              }}</span>\n            } @else {\n              <span class=\"text-sm text-light-primary dark:text-dark-primary\">{{\n                'haloduck.ui.file.Uploading...' | transloco\n              }}</span>\n            }\n          } @else {\n            <button\n              type=\"button\"\n              class=\"text-light-danger dark:text-dark-danger hover:brightness-125\"\n              (click)=\"removeFile(i)\"\n            >\n              {{ 'haloduck.ui.file.Remove' | transloco }}\n            </button>\n          }\n        </li>\n      }\n    </ul>\n  }\n</div>\n" }]
+                    ], template: "<div\n  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>\n  @if (!isUploading) {\n    <label\n      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    >\n      <span class=\"text-light-inactive dark:text-dark-inactive\">{{\n        'haloduck.ui.file.Drag and drop files here, or click to select files' | transloco\n      }}</span>\n      <input\n        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      />\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\n          class=\"flex items-center justify-between p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n        >\n          <!-- Check if the file is an image -->\n          <div class=\"flex items-center space-x-4\">\n            @if (file.previewUrl) {\n              <img\n                [src]=\"file.previewUrl\"\n                alt=\"{{ file.name }}\"\n                class=\"w-12 h-12 object-cover rounded-md\"\n              />\n            }\n            <span class=\"text-sm text-light-inactive dark:text-dark-inactive\">{{ file.name }}</span>\n          </div>\n          <div class=\"flex items-center space-x-4\">\n            <haloduck-tag-input\n              placeholder=\"{{ 'haloduck.ui.tag.Please input tags.' | transloco }}\"\n              [(value)]=\"file.tag\"\n              (valueChange)=\"onFileTagChanged(i, $event)\"\n            ></haloduck-tag-input>\n            @if (isUploading) {\n              @if (file.isUploaded) {\n                <span class=\"text-sm text-light-secondary dark:text-dark-secondary\">{{\n                  'haloduck.ui.file.Uploaded' | transloco\n                }}</span>\n              } @else {\n                <span class=\"text-sm text-light-primary dark:text-dark-primary\">{{\n                  'haloduck.ui.file.Uploading...' | transloco\n                }}</span>\n              }\n            } @else {\n              <button\n                type=\"button\"\n                class=\"text-light-danger dark:text-dark-danger hover:brightness-125\"\n                (click)=\"removeFile(i)\"\n              >\n                {{ 'haloduck.ui.file.Remove' | transloco }}\n              </button>\n            }\n          </div>\n        </li>\n      }\n    </ul>\n  }\n</div>\n" }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], urlPrefix: [{
@@ -3506,6 +3679,8 @@ class TableComponent {
                 return this.getDateTime(value);
             case 'time':
                 return this.getTime(value);
+            case 'number':
+                return this.getNumber(value);
             default:
                 return of(value);
         }
@@ -3908,167 +4083,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 args: ['label']
             }] } });
 
-class TagInputComponent {
-    label;
-    inputEl;
-    placeholder = '';
-    disabled = false;
-    allowDuplicates = false;
-    // Two-way binding support independent of CVA
-    set value(tags) {
-        if (Array.isArray(tags)) {
-            this.tags = tags.map((t) => (t ?? '').trim()).filter((t) => t.length > 0);
-        }
-        else {
-            this.tags = [];
-        }
-    }
-    valueChange = new EventEmitter();
-    tags = [];
-    inputValue = '';
-    onChange = () => { };
-    onTouched = () => { };
-    writeValue(value) {
-        if (Array.isArray(value)) {
-            this.tags = value.map((t) => (t ?? '').trim()).filter((t) => t.length > 0);
-        }
-        else {
-            this.tags = [];
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    ngAfterViewInit() {
-        // hide label if no projected content
-        if (this.label && this.label.nativeElement) {
-            const hasContent = this.label.nativeElement.textContent?.trim();
-            if (!hasContent) {
-                this.label.nativeElement.style.display = 'none';
-            }
-        }
-    }
-    focus() {
-        this.inputEl?.nativeElement?.focus();
-    }
-    onInput(event) {
-        const input = event.target;
-        this.inputValue = input.value;
-        this.onTouched();
-    }
-    onBlur() {
-        if (this.disabled)
-            return;
-        this.inputValue = '';
-        this.onTouched();
-    }
-    onKeydown(event) {
-        if (this.disabled)
-            return;
-        // Commit on comma or Enter
-        if (event.key === ',' || event.key === 'Enter') {
-            event.preventDefault();
-            this.commitCurrentInput();
-            return;
-        }
-        // Backspace behavior
-        if (event.key === 'Backspace') {
-            if (this.inputValue.length > 0) {
-                return; // default backspace in input
-            }
-            if (this.tags.length > 0) {
-                event.preventDefault();
-                this.removeTag(this.tags.length - 1);
-                return;
-            }
-        }
-    }
-    removeTag(index) {
-        if (this.disabled)
-            return;
-        if (index < 0 || index >= this.tags.length)
-            return;
-        this.tags = this.tags.filter((_, i) => i !== index);
-        this.emitChanges();
-    }
-    commitCurrentInput() {
-        const raw = this.inputValue.trim();
-        if (!raw) {
-            this.inputValue = '';
-            return;
-        }
-        // If user pasted multiple comma-separated values, split and add all
-        const parts = raw
-            .split(',')
-            .map((p) => p.trim())
-            .filter((p) => p.length > 0);
-        for (const part of parts) {
-            this.addTag(part);
-        }
-        this.inputValue = '';
-    }
-    addTag(tag) {
-        if (!this.allowDuplicates) {
-            const exists = this.tags.some((t) => t.toLowerCase() === tag.toLowerCase());
-            if (exists) {
-                return;
-            }
-        }
-        this.tags = [...this.tags, tag];
-        this.emitChanges();
-    }
-    emitChanges() {
-        const cleaned = this.tags.map((t) => (t ?? '').trim()).filter((t) => t.length > 0);
-        if (cleaned.length !== this.tags.length || cleaned.some((t, i) => t !== this.tags[i])) {
-            this.tags = cleaned;
-        }
-        this.onChange(this.tags);
-        this.valueChange.emit(this.tags);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TagInputComponent, isStandalone: true, selector: "haloduck-tag-input", inputs: { placeholder: "placeholder", disabled: "disabled", allowDuplicates: "allowDuplicates", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TagInputComponent),
-                multi: true,
-            },
-            provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n\n  <div\n    class=\"tag-input-wrapper block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive sm:text-sm/6\"\n  >\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (tag of tags; track tag; let i = $index) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\"\n        >\n          {{ tag }}\n          @if (!disabled) {\n            <button\n              type=\"button\"\n              (click)=\"removeTag(i)\"\n              class=\"text-light-on-secondary/80 hover:text-light-on-secondary dark:text-dark-on-secondary/80 dark:hover:text-dark-on-secondary hover:cursor-pointer\"\n            >\n              \u00D7\n            </button>\n          }\n        </span>\n      }\n\n      <input\n        #inputEl\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        class=\"flex-1 min-w-[8rem] bg-transparent outline-none placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur()\"\n      />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tag-input-wrapper:focus-within{outline-width:2px;outline-offset:2px;outline-color:var(--color-light-primary)!important}@media (prefers-color-scheme: dark){.tag-input-wrapper:focus-within{outline-color:var(--color-dark-primary)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'haloduck-tag-input', imports: [CommonModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TagInputComponent),
-                            multi: true,
-                        },
-                        provideTranslocoScope('haloduck'),
-                    ], template: "<div class=\"flex flex-col gap-2\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n\n  <div\n    class=\"tag-input-wrapper block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive sm:text-sm/6\"\n  >\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (tag of tags; track tag; let i = $index) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\"\n        >\n          {{ tag }}\n          @if (!disabled) {\n            <button\n              type=\"button\"\n              (click)=\"removeTag(i)\"\n              class=\"text-light-on-secondary/80 hover:text-light-on-secondary dark:text-dark-on-secondary/80 dark:hover:text-dark-on-secondary hover:cursor-pointer\"\n            >\n              \u00D7\n            </button>\n          }\n        </span>\n      }\n\n      <input\n        #inputEl\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        class=\"flex-1 min-w-[8rem] bg-transparent outline-none placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur()\"\n      />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tag-input-wrapper:focus-within{outline-width:2px;outline-offset:2px;outline-color:var(--color-light-primary)!important}@media (prefers-color-scheme: dark){.tag-input-wrapper:focus-within{outline-color:var(--color-dark-primary)!important}}\n"] }]
-        }], propDecorators: { label: [{
-                type: ViewChild,
-                args: ['label']
-            }], inputEl: [{
-                type: ViewChild,
-                args: ['inputEl']
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], allowDuplicates: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
 class TagViewerComponent {
     label;
     tags = [];