@egose/shadcn-theme-ng-tw 0.0.26 → 0.0.28

package/searchable-multiselect/fesm2022/searchable-multiselect.mjs

@@ -1,76 +1,56 @@
 import * as i0 from '@angular/core';
-import { viewChild, input, output, signal, computed, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, output, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { HlmAutocomplete } from '@egose/shadcn-theme-ng-tw/autocomplete';
+import { HlmPopover, HlmPopoverTrigger, HlmPopoverContent } from '@egose/shadcn-theme-ng-tw/popover';
+import { HlmButton } from '@egose/shadcn-theme-ng-tw/button';
+import { HlmCheckbox } from '@egose/shadcn-theme-ng-tw/checkbox';
+import { hlm } from '@egose/shadcn-theme-ng-tw/utils';
 
 class EgSearchableMultiselect {
-    autoComplete = viewChild(HlmAutocomplete, ...(ngDevMode ? [{ debugName: "autoComplete" }] : []));
     /** Full option list with labels/values */
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    placeholder = input('Start typing to add…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    placeholder = input('Start typing to add…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     /** Value: array of selected values (string[]) */
-    value = input([], ...(ngDevMode ? [{ debugName: "value" }] : []));
-    valueChange = output(); // emits string[] of values
-    /** Internal state */
-    search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : []));
-    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : [])); // full objects for display
+    value = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    selectedItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
     isDisabled = false;
     isFormBound = false;
-    /** Filtered **labels** for hlm-autocomplete */
-    filteredOptionLabels = computed(() => (this.options() || [])
-        .filter((opt) => opt.label.toLowerCase().includes(this.search().toLowerCase()) &&
-        !this.selectedItems().some((sel) => sel.value === opt.value))
-        .map((opt) => opt.label), ...(ngDevMode ? [{ debugName: "filteredOptionLabels" }] : []));
-    /** Form callbacks */
-    onChange = () => { };
-    onTouched = () => { };
-    constructor() {
-        // Sync `value` input to selectedItems for standalone usage
-        effect(() => {
-            if (!this.isFormBound) {
-                this.updateSelectedFromValues(this.value() || []);
-            }
-        });
+    _hostClass = computed(() => hlm(this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
+    isSelected(value) {
+        return this.selectedItems().some((s) => s.value === value);
     }
-    /** Add by label string (from autocomplete) */
-    addItemByLabel(label) {
-        const opt = this.options()?.find((o) => o.label === label);
-        if (opt) {
-            this.addItem(opt.value);
+    toggle(value, checked) {
+        if (checked) {
+            this.addItem(value);
+        }
+        else {
+            this.removeItem(value);
         }
     }
-    /** Add by value string */
     addItem(value) {
-        if (!this.selectedItems().some((sel) => sel.value === value)) {
+        if (!this.selectedItems().some((s) => s.value === value)) {
             const opt = this.options()?.find((o) => o.value === value);
             if (!opt)
                 return;
-            const updatedItems = [...this.selectedItems(), opt];
-            this.updateValueFromSelected(updatedItems);
+            const updated = [...this.selectedItems(), opt];
+            this.updateValueFromSelected(updated);
         }
     }
-    /** Remove by value string */
     removeItem(value) {
-        const updatedItems = this.selectedItems().filter((i) => i.value !== value);
-        this.updateValueFromSelected(updatedItems);
+        const updated = this.selectedItems().filter((i) => i.value !== value);
+        this.updateValueFromSelected(updated);
     }
-    /** Clear autocomplete text */
-    clearAutocompleteText() {
-        this.autoComplete()?.clearText();
-        if (this.options().length === this.selectedItems().length) {
-            this.autoComplete()?.setPopoverState('closed');
-        }
-    }
-    handleSelect(label) {
-        this.clearAutocompleteText();
-    }
-    /** Map string[] values → full objects */
     updateSelectedFromValues(values) {
         const opts = this.options() || [];
-        const matched = opts.filter((o) => values.includes(o.value));
-        this.selectedItems.set(matched);
+        this.selectedItems.set(opts.filter((o) => values.includes(o.value)));
     }
-    /** Map full objects → string[] values and emit */
     updateValueFromSelected(items) {
         this.selectedItems.set(items);
         const values = items.map((i) => i.value);
@@ -78,7 +58,12 @@ class EgSearchableMultiselect {
         this.onChange(values);
         this.onTouched();
     }
+    constructor() {
+        // No effect needed; we read `value` input directly via writeValue for form-bound usage.
+    }
     // --- ControlValueAccessor ---
+    onChange = () => { };
+    onTouched = () => { };
     writeValue(values) {
         this.isFormBound = true;
         this.updateSelectedFromValues(values || []);
@@ -92,21 +77,17 @@ class EgSearchableMultiselect {
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgSearchableMultiselect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgSearchableMultiselect, isStandalone: true, selector: "eg-searchable-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EgSearchableMultiselect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EgSearchableMultiselect, isStandalone: true, selector: "eg-searchable-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "_hostClass()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EgSearchableMultiselect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "autoComplete", first: true, predicate: HlmAutocomplete, descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], ngImport: i0, template: `
     <div class="tw:flex tw:flex-col tw:gap-2 tw:w-full">
-      <!-- Selected items -->
-      <div
-        class="tw:flex tw:gap-2 tw:overflow-x-auto tw:whitespace-nowrap
-               tw:[scrollbar-width:none] tw:[-ms-overflow-style:none]
-               tw:[&::-webkit-scrollbar]:hidden"
-      >
+      <!-- Selected chips -->
+      <div class="tw:flex tw:flex-wrap tw:gap-2">
         @if (selectedItems().length === 0) {
           <span
             class="tw:bg-gray-100 tw:text-gray-400 tw:rounded-full
@@ -134,24 +115,36 @@ class EgSearchableMultiselect {
         }
       </div>
 
-      <!-- Autocomplete -->
-      <hlm-autocomplete
-        [filteredOptions]="filteredOptionLabels()"
-        [(search)]="search"
-        (valueChange)="addItemByLabel($event)"
-        [searchPlaceholderText]="this.selectedItems().length.toString() + ' of ' + this.options().length + ' selected'"
-        [onSelect]="handleSelect.bind(this)"
-        [disabled]="isDisabled"
-      />
+      <!-- Trigger -->
+      <hlm-popover>
+        <button hlmPopoverTrigger hlmButton variant="secondary" appearance="outline" type="button">
+          {{ selectedItems().length }} selected
+        </button>
+
+        <hlm-popover-content class="tw:w-64 tw:p-2">
+          <div class="tw:max-h-60 tw:overflow-auto tw:flex tw:flex-col tw:gap-1">
+            @for (option of options(); track option.value) {
+              <label
+                class="tw:flex tw:items-center tw:gap-2 tw:cursor-pointer tw:px-2 tw:py-1 tw:rounded-sm tw:hover:bg-secondary"
+              >
+                <hlm-checkbox [checked]="isSelected(option.value)" (changed)="toggle(option.value, $event)" />
+                <span class="tw:text-sm">{{ option.label }}</span>
+              </label>
+            } @empty {
+              <span class="tw:text-xs tw:text-muted-foreground tw:px-2 tw:py-1">No options</span>
+            }
+          </div>
+        </hlm-popover-content>
+      </hlm-popover>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: HlmAutocomplete, selector: "hlm-autocomplete", inputs: ["onSelect", "class", "autocompleteListClass", "autocompleteEmptyClass", "filteredOptions", "value", "search", "transformValueToSearch", "optionTemplate", "loading", "searchPlaceholderText", "loadingText", "emptyText", "ariaLabelToggleButton", "inputId", "disabled"], outputs: ["valueChange", "searchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: HlmPopoverTrigger, selector: "button[hlmPopoverTrigger],button[hlmPopoverTriggerFor]" }, { kind: "directive", type: HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "component", type: HlmButton, selector: "button[hlmButton], a[hlmButton]", inputs: ["variant", "size", "appearance", "loading", "icon", "iconPosition", "class", "spinnerUserClass", "disabled", "type"] }, { kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "id", "aria-label", "aria-labelledby", "aria-describedby", "checked", "name", "required", "disabled"], outputs: ["checkedChange", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgSearchableMultiselect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EgSearchableMultiselect, decorators: [{
             type: Component,
             args: [{
                     selector: 'eg-searchable-multiselect',
                     standalone: true,
-                    imports: [HlmAutocomplete],
+                    imports: [HlmPopover, HlmPopoverTrigger, HlmPopoverContent, HlmButton, HlmCheckbox],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
@@ -160,14 +153,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                             multi: true,
                         },
                     ],
+                    host: {
+                        '[class]': '_hostClass()',
+                    },
                     template: `
     <div class="tw:flex tw:flex-col tw:gap-2 tw:w-full">
-      <!-- Selected items -->
-      <div
-        class="tw:flex tw:gap-2 tw:overflow-x-auto tw:whitespace-nowrap
-               tw:[scrollbar-width:none] tw:[-ms-overflow-style:none]
-               tw:[&::-webkit-scrollbar]:hidden"
-      >
+      <!-- Selected chips -->
+      <div class="tw:flex tw:flex-wrap tw:gap-2">
         @if (selectedItems().length === 0) {
           <span
             class="tw:bg-gray-100 tw:text-gray-400 tw:rounded-full
@@ -195,19 +187,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
         }
       </div>
 
-      <!-- Autocomplete -->
-      <hlm-autocomplete
-        [filteredOptions]="filteredOptionLabels()"
-        [(search)]="search"
-        (valueChange)="addItemByLabel($event)"
-        [searchPlaceholderText]="this.selectedItems().length.toString() + ' of ' + this.options().length + ' selected'"
-        [onSelect]="handleSelect.bind(this)"
-        [disabled]="isDisabled"
-      />
+      <!-- Trigger -->
+      <hlm-popover>
+        <button hlmPopoverTrigger hlmButton variant="secondary" appearance="outline" type="button">
+          {{ selectedItems().length }} selected
+        </button>
+
+        <hlm-popover-content class="tw:w-64 tw:p-2">
+          <div class="tw:max-h-60 tw:overflow-auto tw:flex tw:flex-col tw:gap-1">
+            @for (option of options(); track option.value) {
+              <label
+                class="tw:flex tw:items-center tw:gap-2 tw:cursor-pointer tw:px-2 tw:py-1 tw:rounded-sm tw:hover:bg-secondary"
+              >
+                <hlm-checkbox [checked]="isSelected(option.value)" (changed)="toggle(option.value, $event)" />
+                <span class="tw:text-sm">{{ option.label }}</span>
+              </label>
+            } @empty {
+              <span class="tw:text-xs tw:text-muted-foreground tw:px-2 tw:py-1">No options</span>
+            }
+          </div>
+        </hlm-popover-content>
+      </hlm-popover>
     </div>
   `,
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /*
  * Public API Surface of searchable-multiselect

package/searchable-multiselect/fesm2022/searchable-multiselect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"searchable-multiselect.mjs","sources":["../../../projects/searchable-multiselect/src/lib/searchable-multiselect.ts","../../../projects/searchable-multiselect/src/public-api.ts","../../../projects/searchable-multiselect/src/searchable-multiselect.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  signal,\n  input,\n  output,\n  viewChild,\n  effect,\n  forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { HlmAutocomplete } from '@egose/shadcn-theme-ng/autocomplete';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\n@Component({\n  selector: 'eg-searchable-multiselect',\n  standalone: true,\n  imports: [HlmAutocomplete],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => EgSearchableMultiselect),\n      multi: true,\n    },\n  ],\n  template: `\n    <div class=\"tw:flex tw:flex-col tw:gap-2 tw:w-full\">\n      <!-- Selected items -->\n      <div\n        class=\"tw:flex tw:gap-2 tw:overflow-x-auto tw:whitespace-nowrap\n               tw:[scrollbar-width:none] tw:[-ms-overflow-style:none]\n               tw:[&::-webkit-scrollbar]:hidden\"\n      >\n        @if (selectedItems().length === 0) {\n          <span\n            class=\"tw:bg-gray-100 tw:text-gray-400 tw:rounded-full\n                   tw:px-2 tw:py-1 tw:inline-flex tw:items-center tw:text-xs\"\n          >\n            {{ placeholder() }}\n          </span>\n        } @else {\n          @for (item of selectedItems(); track item.value) {\n            <span\n              class=\"tw:bg-gray-200 tw:rounded-full tw:px-2 tw:py-1\n                     tw:inline-flex tw:items-center tw:gap-2 tw:text-xs\"\n            >\n              {{ item.label }}\n              <button\n                type=\"button\"\n                (click)=\"removeItem(item.value)\"\n                class=\"tw:bg-transparent tw:border-0 tw:text-gray-600\n                       tw:hover:text-red-500 tw:cursor-pointer\"\n              >\n                ✕\n              </button>\n            </span>\n          }\n        }\n      </div>\n\n      <!-- Autocomplete -->\n      <hlm-autocomplete\n        [filteredOptions]=\"filteredOptionLabels()\"\n        [(search)]=\"search\"\n        (valueChange)=\"addItemByLabel($event)\"\n        [searchPlaceholderText]=\"this.selectedItems().length.toString() + ' of ' + this.options().length + ' selected'\"\n        [onSelect]=\"handleSelect.bind(this)\"\n        [disabled]=\"isDisabled\"\n      />\n    </div>\n  `,\n})\nexport class EgSearchableMultiselect implements ControlValueAccessor {\n  autoComplete = viewChild(HlmAutocomplete);\n\n  /** Full option list with labels/values */\n  options = input<SelectOption[]>([]);\n  placeholder = input<string>('Start typing to add…');\n\n  /** Value: array of selected values (string[]) */\n  value = input<string[]>([]);\n  valueChange = output<string[]>(); // emits string[] of values\n\n  /** Internal state */\n  search = signal<string>('');\n  selectedItems = signal<SelectOption[]>([]); // full objects for display\n  isDisabled = false;\n  private isFormBound = false;\n\n  /** Filtered **labels** for hlm-autocomplete */\n  filteredOptionLabels = computed(\n    () =>\n      (this.options() || [])\n        .filter(\n          (opt) =>\n            opt.label.toLowerCase().includes(this.search().toLowerCase()) &&\n            !this.selectedItems().some((sel) => sel.value === opt.value),\n        )\n        .map((opt) => opt.label), // convert to string[] for hlm-autocomplete\n  );\n\n  /** Form callbacks */\n  private onChange: (value: string[]) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  constructor() {\n    // Sync `value` input to selectedItems for standalone usage\n    effect(() => {\n      if (!this.isFormBound) {\n        this.updateSelectedFromValues(this.value() || []);\n      }\n    });\n  }\n\n  /** Add by label string (from autocomplete) */\n  addItemByLabel(label: string) {\n    const opt = this.options()?.find((o) => o.label === label);\n    if (opt) {\n      this.addItem(opt.value);\n    }\n  }\n\n  /** Add by value string */\n  addItem(value: string) {\n    if (!this.selectedItems().some((sel) => sel.value === value)) {\n      const opt = this.options()?.find((o) => o.value === value);\n      if (!opt) return;\n      const updatedItems = [...this.selectedItems(), opt];\n      this.updateValueFromSelected(updatedItems);\n    }\n  }\n\n  /** Remove by value string */\n  removeItem(value: string) {\n    const updatedItems = this.selectedItems().filter((i) => i.value !== value);\n    this.updateValueFromSelected(updatedItems);\n  }\n\n  /** Clear autocomplete text */\n  clearAutocompleteText() {\n    this.autoComplete()?.clearText();\n\n    if (this.options().length === this.selectedItems().length) {\n      this.autoComplete()?.setPopoverState('closed');\n    }\n  }\n\n  handleSelect(label: string) {\n    this.clearAutocompleteText();\n  }\n\n  /** Map string[] values → full objects */\n  private updateSelectedFromValues(values: string[]) {\n    const opts = this.options() || [];\n    const matched = opts.filter((o) => values.includes(o.value));\n    this.selectedItems.set(matched);\n  }\n\n  /** Map full objects → string[] values and emit */\n  private updateValueFromSelected(items: SelectOption[]) {\n    this.selectedItems.set(items);\n    const values = items.map((i) => i.value);\n    this.valueChange.emit(values);\n    this.onChange(values);\n    this.onTouched();\n  }\n\n  // --- ControlValueAccessor ---\n  writeValue(values: string[] | null): void {\n    this.isFormBound = true;\n    this.updateSelectedFromValues(values || []);\n  }\n\n  registerOnChange(fn: (value: string[]) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.isDisabled = isDisabled;\n  }\n}\n","/*\n * Public API Surface of searchable-multiselect\n */\n\nexport * from './lib/searchable-multiselect';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"searchable-multiselect.mjs","sources":["../../../projects/searchable-multiselect/src/lib/searchable-multiselect.ts","../../../projects/searchable-multiselect/src/public-api.ts","../../../projects/searchable-multiselect/src/searchable-multiselect.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, forwardRef, input, output, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { HlmPopover, HlmPopoverContent, HlmPopoverTrigger } from '@egose/shadcn-theme-ng/popover';\nimport { HlmButton } from '@egose/shadcn-theme-ng/button';\nimport { HlmCheckbox } from '@egose/shadcn-theme-ng/checkbox';\nimport { hlm } from '@egose/shadcn-theme-ng/utils';\nimport { ClassValue } from 'clsx';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\n@Component({\n  selector: 'eg-searchable-multiselect',\n  standalone: true,\n  imports: [HlmPopover, HlmPopoverTrigger, HlmPopoverContent, HlmButton, HlmCheckbox],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => EgSearchableMultiselect),\n      multi: true,\n    },\n  ],\n  host: {\n    '[class]': '_hostClass()',\n  },\n  template: `\n    <div class=\"tw:flex tw:flex-col tw:gap-2 tw:w-full\">\n      <!-- Selected chips -->\n      <div class=\"tw:flex tw:flex-wrap tw:gap-2\">\n        @if (selectedItems().length === 0) {\n          <span\n            class=\"tw:bg-gray-100 tw:text-gray-400 tw:rounded-full\n                   tw:px-2 tw:py-1 tw:inline-flex tw:items-center tw:text-xs\"\n          >\n            {{ placeholder() }}\n          </span>\n        } @else {\n          @for (item of selectedItems(); track item.value) {\n            <span\n              class=\"tw:bg-gray-200 tw:rounded-full tw:px-2 tw:py-1\n                     tw:inline-flex tw:items-center tw:gap-2 tw:text-xs\"\n            >\n              {{ item.label }}\n              <button\n                type=\"button\"\n                (click)=\"removeItem(item.value)\"\n                class=\"tw:bg-transparent tw:border-0 tw:text-gray-600\n                       tw:hover:text-red-500 tw:cursor-pointer\"\n              >\n                ✕\n              </button>\n            </span>\n          }\n        }\n      </div>\n\n      <!-- Trigger -->\n      <hlm-popover>\n        <button hlmPopoverTrigger hlmButton variant=\"secondary\" appearance=\"outline\" type=\"button\">\n          {{ selectedItems().length }} selected\n        </button>\n\n        <hlm-popover-content class=\"tw:w-64 tw:p-2\">\n          <div class=\"tw:max-h-60 tw:overflow-auto tw:flex tw:flex-col tw:gap-1\">\n            @for (option of options(); track option.value) {\n              <label\n                class=\"tw:flex tw:items-center tw:gap-2 tw:cursor-pointer tw:px-2 tw:py-1 tw:rounded-sm tw:hover:bg-secondary\"\n              >\n                <hlm-checkbox [checked]=\"isSelected(option.value)\" (changed)=\"toggle(option.value, $event)\" />\n                <span class=\"tw:text-sm\">{{ option.label }}</span>\n              </label>\n            } @empty {\n              <span class=\"tw:text-xs tw:text-muted-foreground tw:px-2 tw:py-1\">No options</span>\n            }\n          </div>\n        </hlm-popover-content>\n      </hlm-popover>\n    </div>\n  `,\n})\nexport class EgSearchableMultiselect implements ControlValueAccessor {\n  /** Full option list with labels/values */\n  options = input<SelectOption[]>([]);\n  placeholder = input<string>('Start typing to add…');\n\n  userClass = input<ClassValue>('', { alias: 'class' });\n\n  /** Value: array of selected values (string[]) */\n  value = input<string[]>([]);\n  valueChange = output<string[]>();\n\n  protected readonly selectedItems = signal<SelectOption[]>([]);\n  protected isDisabled = false;\n  private isFormBound = false;\n\n  protected readonly _hostClass = computed(() => hlm(this.userClass()));\n\n  protected isSelected(value: string): boolean {\n    return this.selectedItems().some((s) => s.value === value);\n  }\n\n  protected toggle(value: string, checked: boolean): void {\n    if (checked) {\n      this.addItem(value);\n    } else {\n      this.removeItem(value);\n    }\n  }\n\n  protected addItem(value: string): void {\n    if (!this.selectedItems().some((s) => s.value === value)) {\n      const opt = this.options()?.find((o) => o.value === value);\n      if (!opt) return;\n      const updated = [...this.selectedItems(), opt];\n      this.updateValueFromSelected(updated);\n    }\n  }\n\n  protected removeItem(value: string): void {\n    const updated = this.selectedItems().filter((i) => i.value !== value);\n    this.updateValueFromSelected(updated);\n  }\n\n  private updateSelectedFromValues(values: string[]): void {\n    const opts = this.options() || [];\n    this.selectedItems.set(opts.filter((o) => values.includes(o.value)));\n  }\n\n  private updateValueFromSelected(items: SelectOption[]): void {\n    this.selectedItems.set(items);\n    const values = items.map((i) => i.value);\n    this.valueChange.emit(values);\n    this.onChange(values);\n    this.onTouched();\n  }\n\n  constructor() {\n    // No effect needed; we read `value` input directly via writeValue for form-bound usage.\n  }\n\n  // --- ControlValueAccessor ---\n  private onChange: (value: string[]) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  writeValue(values: string[] | null): void {\n    this.isFormBound = true;\n    this.updateSelectedFromValues(values || []);\n  }\n\n  registerOnChange(fn: (value: string[]) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.isDisabled = isDisabled;\n  }\n}\n","/*\n * Public API Surface of searchable-multiselect\n */\n\nexport * from './lib/searchable-multiselect';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/searchable-multiselect/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "searchable-multiselect",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0 || ^22.0.0",
+    "@angular/core": "^20.3.0 || ^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/searchable-multiselect.mjs",
+  "typings": "types/searchable-multiselect.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/searchable-multiselect.d.ts",
+      "default": "./fesm2022/searchable-multiselect.mjs"
+    }
+  },
+  "type": "module"
+}

package/searchable-multiselect/{index.d.ts → types/searchable-multiselect.d.ts}

@@ -1,49 +1,38 @@
 import * as _angular_core from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { HlmAutocomplete } from '@egose/shadcn-theme-ng/autocomplete';
+import { ClassValue } from 'clsx';
 
 interface SelectOption {
     label: string;
     value: string;
 }
 declare class EgSearchableMultiselect implements ControlValueAccessor {
-    autoComplete: _angular_core.Signal<HlmAutocomplete<any> | undefined>;
     /** Full option list with labels/values */
     options: _angular_core.InputSignal<SelectOption[]>;
     placeholder: _angular_core.InputSignal<string>;
+    userClass: _angular_core.InputSignal<ClassValue>;
     /** Value: array of selected values (string[]) */
     value: _angular_core.InputSignal<string[]>;
     valueChange: _angular_core.OutputEmitterRef<string[]>;
-    /** Internal state */
-    search: _angular_core.WritableSignal<string>;
-    selectedItems: _angular_core.WritableSignal<SelectOption[]>;
-    isDisabled: boolean;
+    protected readonly selectedItems: _angular_core.WritableSignal<SelectOption[]>;
+    protected isDisabled: boolean;
     private isFormBound;
-    /** Filtered **labels** for hlm-autocomplete */
-    filteredOptionLabels: _angular_core.Signal<string[]>;
-    /** Form callbacks */
-    private onChange;
-    private onTouched;
-    constructor();
-    /** Add by label string (from autocomplete) */
-    addItemByLabel(label: string): void;
-    /** Add by value string */
-    addItem(value: string): void;
-    /** Remove by value string */
-    removeItem(value: string): void;
-    /** Clear autocomplete text */
-    clearAutocompleteText(): void;
-    handleSelect(label: string): void;
-    /** Map string[] values → full objects */
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    protected isSelected(value: string): boolean;
+    protected toggle(value: string, checked: boolean): void;
+    protected addItem(value: string): void;
+    protected removeItem(value: string): void;
     private updateSelectedFromValues;
-    /** Map full objects → string[] values and emit */
     private updateValueFromSelected;
+    constructor();
+    private onChange;
+    private onTouched;
     writeValue(values: string[] | null): void;
     registerOnChange(fn: (value: string[]) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgSearchableMultiselect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgSearchableMultiselect, "eg-searchable-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgSearchableMultiselect, "eg-searchable-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 export { EgSearchableMultiselect };