@egose/shadcn-theme-ng 0.0.12 → 0.0.13

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-searchable-multiselect.mjs","sources":["../../../projects/form-searchable-multiselect/src/lib/form-searchable-multiselect.ts","../../../projects/form-searchable-multiselect/src/public-api.ts","../../../projects/form-searchable-multiselect/src/form-searchable-multiselect.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { ControlContainer, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';\nimport { HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';\nimport { HlmLabel } from '@egose/shadcn-theme-ng/label';\nimport { hlm } from '@egose/shadcn-theme-ng/utils';\nimport { ClassValue } from 'clsx';\nimport { EgSearchableMultiselect, SelectOption } from '@egose/shadcn-theme-ng/searchable-multiselect';\n\n@Component({\n  selector: 'eg-form-searchable-multiselect',\n  standalone: true,\n  host: {\n    class: 'tw:w-full',\n  },\n  imports: [ReactiveFormsModule, HlmFormField, HlmError, HlmHint, HlmLabel, EgSearchableMultiselect],\n  providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],\n  template: `\n    @let lbl = label(); @let nm = controlName(); @let err = error(); @let hnt = hint(); @let rqrd = required();\n\n    <hlm-form-field>\n      @if (lbl) {\n      <span hlmLabel [class]=\"$labelClass()\">\n        {{ lbl }}\n        @if (rqrd) {\n        <span class=\"tw:text-red-500\">*</span>\n        }\n      </span>\n      }\n\n      <eg-searchable-multiselect\n        [options]=\"options()\"\n        [placeholder]=\"placeholder()\"\n        [formControlName]=\"nm\"\n        [disabled]=\"disabled()\"\n        [required]=\"rqrd\"\n        [class]=\"$controlClass()\"\n      ></eg-searchable-multiselect>\n\n      @if (err) {\n      <hlm-error [class]=\"$errorClass()\">\n        {{ err }}\n      </hlm-error>\n      } @if (hnt) {\n      <hlm-hint [class]=\"$hintClass()\">\n        {{ hnt }}\n      </hlm-hint>\n      }\n    </hlm-form-field>\n  `,\n})\nexport class EgFormSearchableMultiselect {\n  // Form field inputs\n  label = input<string | undefined>(undefined);\n  controlName = input<string>(''); // required for form binding\n  error = input<string | undefined>(undefined);\n  hint = input<string | undefined>(undefined);\n\n  // HTML/control attributes\n  placeholder = input<string>('Start typing to add…');\n  disabled = input<boolean>(false);\n  required = input<boolean>(false);\n\n  // Multiselect-specific\n  options = input<SelectOption[]>([]); // [{ label, value }]\n\n  // Styling classes\n  userClass = input<ClassValue>('', { alias: 'class' });\n  labelClass = input<string>('');\n  controlClass = input<string>(''); // for EgMultiselectAutocomplete\n  errorClass = input<string>('');\n  hintClass = input<string>('');\n\n  // Computed class names\n  $userClass = computed(() => hlm('tw:flex tw:flex-col', this.userClass()));\n  $labelClass = computed(() => hlm('tw:mb-1 tw:gap-0', this.labelClass()));\n  $controlClass = computed(() => hlm('tw:w-full', this.controlClass()));\n  $errorClass = computed(() => hlm('tw:mt-0', this.errorClass()));\n  $hintClass = computed(() => hlm('tw:mt-0', this.hintClass()));\n}\n","/*\n * Public API Surface of form-searchable-multiselect\n */\n\nexport * from './lib/form-searchable-multiselect';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/form-searchable-multiselect/index.d.ts

@@ -0,0 +1,28 @@
+import * as _angular_core from '@angular/core';
+import { ClassValue } from 'clsx';
+import { SelectOption } from '@egose/shadcn-theme-ng/searchable-multiselect';
+
+declare class EgFormSearchableMultiselect {
+    label: _angular_core.InputSignal<string | undefined>;
+    controlName: _angular_core.InputSignal<string>;
+    error: _angular_core.InputSignal<string | undefined>;
+    hint: _angular_core.InputSignal<string | undefined>;
+    placeholder: _angular_core.InputSignal<string>;
+    disabled: _angular_core.InputSignal<boolean>;
+    required: _angular_core.InputSignal<boolean>;
+    options: _angular_core.InputSignal<SelectOption[]>;
+    userClass: _angular_core.InputSignal<ClassValue>;
+    labelClass: _angular_core.InputSignal<string>;
+    controlClass: _angular_core.InputSignal<string>;
+    errorClass: _angular_core.InputSignal<string>;
+    hintClass: _angular_core.InputSignal<string>;
+    $userClass: _angular_core.Signal<string>;
+    $labelClass: _angular_core.Signal<string>;
+    $controlClass: _angular_core.Signal<string>;
+    $errorClass: _angular_core.Signal<string>;
+    $hintClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormSearchableMultiselect, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormSearchableMultiselect, "eg-form-searchable-multiselect", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "controlClass": { "alias": "controlClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { EgFormSearchableMultiselect };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Angular shadcn UI theme",
   "license": "MIT",
   "sideEffects": false,
@@ -126,6 +126,14 @@
     "./autocomplete": {
       "types": "./autocomplete/index.d.ts",
       "default": "./autocomplete/fesm2022/autocomplete.mjs"
+    },
+    "./searchable-multiselect": {
+      "types": "./searchable-multiselect/index.d.ts",
+      "default": "./searchable-multiselect/fesm2022/searchable-multiselect.mjs"
+    },
+    "./form-searchable-multiselect": {
+      "types": "./form-searchable-multiselect/index.d.ts",
+      "default": "./form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs"
     }
   }
 }

package/searchable-multiselect/README.md

@@ -0,0 +1,64 @@
+# MultiselectAutocomplete
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build searchable-multiselect
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/searchable-multiselect
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

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

@@ -0,0 +1,221 @@
+import * as i0 from '@angular/core';
+import { viewChild, input, output, signal, computed, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { HlmAutocomplete } from '@egose/shadcn-theme-ng/autocomplete';
+
+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" }] : []));
+    /** 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
+    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() || []);
+            }
+        });
+    }
+    /** Add by label string (from autocomplete) */
+    addItemByLabel(label) {
+        const opt = this.options()?.find((o) => o.label === label);
+        if (opt) {
+            this.addItem(opt.value);
+        }
+    }
+    /** Add by value string */
+    addItem(value) {
+        if (!this.selectedItems().some((sel) => sel.value === value)) {
+            const opt = this.options()?.find((o) => o.value === value);
+            if (!opt)
+                return;
+            const updatedItems = [...this.selectedItems(), opt];
+            this.updateValueFromSelected(updatedItems);
+        }
+    }
+    /** Remove by value string */
+    removeItem(value) {
+        const updatedItems = this.selectedItems().filter((i) => i.value !== value);
+        this.updateValueFromSelected(updatedItems);
+    }
+    /** 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);
+    }
+    /** Map full objects → string[] values and emit */
+    updateValueFromSelected(items) {
+        this.selectedItems.set(items);
+        const values = items.map((i) => i.value);
+        this.valueChange.emit(values);
+        this.onChange(values);
+        this.onTouched();
+    }
+    // --- ControlValueAccessor ---
+    writeValue(values) {
+        this.isFormBound = true;
+        this.updateSelectedFromValues(values || []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EgSearchableMultiselect),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "autoComplete", first: true, predicate: HlmAutocomplete, descendants: true, isSignal: true }], 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"
+      >
+        @if (selectedItems().length === 0) {
+          <span
+            class="tw:bg-gray-100 tw:text-gray-400 tw:rounded-full
+                   tw:px-2 tw:py-1 tw:inline-flex tw:items-center tw:text-xs"
+          >
+            {{ placeholder() }}
+          </span>
+        } @else {
+          @for (item of selectedItems(); track item.value) {
+            <span
+              class="tw:bg-gray-200 tw:rounded-full tw:px-2 tw:py-1
+                     tw:inline-flex tw:items-center tw:gap-2 tw:text-xs"
+            >
+              {{ item.label }}
+              <button
+                type="button"
+                (click)="removeItem(item.value)"
+                class="tw:bg-transparent tw:border-0 tw:text-gray-600
+                       tw:hover:text-red-500 tw:cursor-pointer"
+              >
+                ✕
+              </button>
+            </span>
+          }
+        }
+      </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"
+      />
+    </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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgSearchableMultiselect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-searchable-multiselect',
+                    standalone: true,
+                    imports: [HlmAutocomplete],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EgSearchableMultiselect),
+                            multi: true,
+                        },
+                    ],
+                    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"
+      >
+        @if (selectedItems().length === 0) {
+          <span
+            class="tw:bg-gray-100 tw:text-gray-400 tw:rounded-full
+                   tw:px-2 tw:py-1 tw:inline-flex tw:items-center tw:text-xs"
+          >
+            {{ placeholder() }}
+          </span>
+        } @else {
+          @for (item of selectedItems(); track item.value) {
+            <span
+              class="tw:bg-gray-200 tw:rounded-full tw:px-2 tw:py-1
+                     tw:inline-flex tw:items-center tw:gap-2 tw:text-xs"
+            >
+              {{ item.label }}
+              <button
+                type="button"
+                (click)="removeItem(item.value)"
+                class="tw:bg-transparent tw:border-0 tw:text-gray-600
+                       tw:hover:text-red-500 tw:cursor-pointer"
+              >
+                ✕
+              </button>
+            </span>
+          }
+        }
+      </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"
+      />
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of searchable-multiselect
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EgSearchableMultiselect };
+//# sourceMappingURL=searchable-multiselect.mjs.map

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

@@ -0,0 +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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"}

package/searchable-multiselect/index.d.ts

@@ -0,0 +1,50 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { HlmAutocomplete } from '@egose/shadcn-theme-ng/autocomplete';
+
+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>;
+    /** 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;
+    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 */
+    private updateSelectedFromValues;
+    /** Map full objects → string[] values and emit */
+    private updateValueFromSelected;
+    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>;
+}
+
+export { EgSearchableMultiselect };
+export type { SelectOption };