@haloduck/ui 2.0.10 → 2.0.12

package/fesm2022/haloduck-ui.mjs

@@ -2851,6 +2851,170 @@ 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 #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n\n  <div 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    <div class=\"flex flex-wrap items-center gap-2\">\n      <ng-container *ngFor=\"let tag of tags; let i = index\">\n        <span 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          {{ tag }}\n          @if (!disabled) {\n            <button type=\"button\" (click)=\"removeTag(i)\" 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              \u00D7\n            </button>\n          }\n        </span>\n      </ng-container>\n\n      <input #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 }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+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 #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n\n  <div 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    <div class=\"flex flex-wrap items-center gap-2\">\n      <ng-container *ngFor=\"let tag of tags; let i = index\">\n        <span 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          {{ tag }}\n          @if (!disabled) {\n            <button type=\"button\" (click)=\"removeTag(i)\" 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              \u00D7\n            </button>\n          }\n        </span>\n      </ng-container>\n\n      <input #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 BreadcrumbService {
     router;
     coreService = inject(CoreService);
@@ -2963,5 +3127,5 @@ const provideHaloduckTransloco = () => provideTranslocoScope({
  * Generated bundle index. Do not edit.
  */
 
-export { AuthenticateComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, ConfirmDialogService, CopyButtonComponent, DatePickerComponent, DateRangeComponent, DialogService, DrawCanvasComponent, ERROR_NOT_ACCEPTABLE_FILE_TYPE, ERROR_OVER_COUNT, ERROR_OVER_SIZE, ERROR_UPLOAD, FileUploaderComponent, FlipComponent, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent, SelectComponent, SelectDropdownComponent, SideMenuComponent, SideMenuItemComponent, StlViewerComponent, TableComponent, TabsComponent, ToggleComponent, dateToString, provideHaloduckTransloco };
+export { AuthenticateComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, ConfirmDialogService, CopyButtonComponent, DatePickerComponent, DateRangeComponent, DialogService, DrawCanvasComponent, ERROR_NOT_ACCEPTABLE_FILE_TYPE, ERROR_OVER_COUNT, ERROR_OVER_SIZE, ERROR_UPLOAD, FileUploaderComponent, FlipComponent, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent, SelectComponent, SelectDropdownComponent, SideMenuComponent, SideMenuItemComponent, StlViewerComponent, TableComponent, TabsComponent, TagInputComponent, ToggleComponent, dateToString, provideHaloduckTransloco };
 //# sourceMappingURL=haloduck-ui.mjs.map