@egose/shadcn-theme-ng 0.0.28 → 0.2.0

package/searchable-multiselect/README.md

@@ -1,64 +1,324 @@
-# MultiselectAutocomplete
+# Searchable Multiselect (`@egose/shadcn-theme-ng/searchable-multiselect`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+A shadcn/ui-style **multi-select with chips + popover picker** — selected values render as removable chips, and a popover holds the checkbox option list. There is no exact single shadcn/ui counterpart; it composes the `Popover`, `Button`, and `Checkbox` patterns into one opinionated control.
 
-## Code scaffolding
+It is a **standalone `ControlValueAccessor` component** (`EgSearchableMultiselect`), so it binds directly to Angular reactive forms (`formControlName`) and template-driven forms (`ngModel`) with a `string[]` value. Internally it reuses `HlmPopover`/`HlmCheckbox`/`HlmButton` — you do not import those yourself.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+> **Ships as:** `@egose/shadcn-theme-ng/searchable-multiselect` and `@egose/shadcn-theme-ng-tw/searchable-multiselect` (the `tw:`-prefixed Tailwind variant — same API, class strings prefixed with `tw:`).
+> See the [package README](../../README.md) for installation, peer dependencies, and Tailwind setup. Do not publish this project directory independently.
+
+## Installation
 
 ```bash
-ng generate component component-name
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+```ts
+import { EgSearchableMultiselect } from '@egose/shadcn-theme-ng/searchable-multiselect';
+// tw variant:
+// import { EgSearchableMultiselect } from '@egose/shadcn-theme-ng-tw/searchable-multiselect';
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+Peer dependencies (see [package README](../../README.md) for versions): `@angular/core`, `@angular/common`. (No `@spartan-ng/brain` peer — popover/checkbox/button come along as regular library dependencies.)
 
-```bash
-ng generate --help
+## Imports
+
+Real exported symbols (from `src/public-api.ts`):
+
+| Symbol                    | Kind                                               | Description                                                |
+| ------------------------- | -------------------------------------------------- | ---------------------------------------------------------- |
+| `EgSearchableMultiselect` | Standalone component (`eg-searchable-multiselect`) | The whole control; provides `NG_VALUE_ACCESSOR` for itself |
+| `SelectOption`            | Interface                                          | `{ label: string; value: string }`                         |
+
+> Note: unlike most subpaths, this one exposes **no `*Imports` array and no `*Module`**. Import `EgSearchableMultiselect` directly — it is standalone.
+
+```ts
+import { Component } from '@angular/core';
+import { EgSearchableMultiselect } from '@egose/shadcn-theme-ng/searchable-multiselect';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [EgSearchableMultiselect],
+  template: ` <eg-searchable-multiselect [options]="options" [(value)]="selected" /> `,
+})
+export class DemoComponent {}
+```
+
+## Anatomy / Structure
+
+```html
+<eg-searchable-multiselect [options]="options" placeholder="Pick frameworks…" [(value)]="selected" />
 ```
 
-## Building
+Renders (internally — you do not write this yourself):
 
-To build the library, run:
+```html
+<eg-searchable-multiselect>
+  <!-- chip row: placeholder pill when empty, removable chips otherwise -->
+  <div>
+    <span><!-- {{ placeholder }} or chip {{ item.label }} + ✕ button --></span>
+  </div>
 
-```bash
-ng build searchable-multiselect
+  <!-- popover trigger + checkbox list -->
+  <hlm-popover>
+    <button hlmPopoverTrigger hlmButton>N selected</button>
+    <hlm-popover-content>
+      <label><!-- <hlm-checkbox> per option + label text --></label>
+    </hlm-popover-content>
+  </hlm-popover>
+</eg-searchable-multiselect>
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+Real selector: `eg-searchable-multiselect` (element). The `✕` chip buttons and popover trigger honor the disabled state; the popover panel is `tw:w-64` with a `tw:max-h-60` scrolling option list.
 
-### Publishing the Library
+## API reference
 
-Once the project is built, you can publish your library by following these steps:
+### EgSearchableMultiselect (component, `ControlValueAccessor`)
 
-1. Navigate to the `dist` directory:
+| Input                 | Type                  | Default                  | Description                                                                      |
+| --------------------- | --------------------- | ------------------------ | -------------------------------------------------------------------------------- |
+| `options`             | `SelectOption[]`      | `[]`                     | Full option list (`{ label, value }`)                                            |
+| `value`               | `string[]`            | `[]`                     | Selected values (one-way in; pairs with `valueChange` for two-way `[(value)]`)   |
+| `placeholder`         | `string`              | `'Start typing to add…'` | Text of the pill shown when nothing is selected                                  |
+| `id`                  | `string`              | `''`                     | `id` placed on the trigger button                                                |
+| `disabled`            | `boolean`             | `false`                  | Disables chips + trigger + checkboxes                                            |
+| `wrapperDisabled`     | `boolean`             | `false`                  | Second disable flag (e.g. set by wrapper form components); OR-ed with `disabled` |
+| `ariaLabel`           | `string \| undefined` | `undefined`              | `aria-label` for the trigger button                                              |
+| `ariaDescribedby`     | `string \| null`      | `null`                   | `aria-describedby` for the trigger button                                        |
+| `class` (`userClass`) | `ClassValue`          | `''`                     | Extra classes on the host                                                        |
 
-   ```bash
-   cd dist/searchable-multiselect
-   ```
+| Output        | Type       | Description                                          |
+| ------------- | ---------- | ---------------------------------------------------- |
+| `valueChange` | `string[]` | Emitted with the new value array on every add/remove |
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+`ControlValueAccessor` contract: `writeValue(values)`, `registerOnChange`, `registerOnTouched`, `setDisabledState` are implemented, so `formControl` / `formControlName` / `ngModel` all work. Effective disabled state = `disabled() \|\| wrapperDisabled() \|\| formDisabled()` (the last set by forms via `setDisabledState`).
 
-## Running unit tests
+API surprise worth knowing: despite the "searchable" name, the current template ships **no filter text field** — the popover shows the full checkbox list and empty state reads "No options". Treat `options` as the complete visible list (filter it yourself before passing it in if you need search). Also `value` is a plain `input`, not a `model`: form writes flow through `writeValue`, and user edits flow out through `valueChange` + the CVA `onChange` callback.
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+## Examples
 
-```bash
-ng test
+### 1. Basic two-way binding
+
+```ts
+import { Component, signal } from '@angular/core';
+import { EgSearchableMultiselect, type SelectOption } from '@egose/shadcn-theme-ng/searchable-multiselect';
+
+@Component({
+  selector: 'app-basic-multi',
+  standalone: true,
+  imports: [EgSearchableMultiselect],
+  template: `
+    <eg-searchable-multiselect [options]="frameworks" placeholder="Pick frameworks…" [(value)]="selected" />
+    <p>Selected: {{ selected().join(', ') || 'none' }}</p>
+  `,
+})
+export class BasicMultiComponent {
+  readonly frameworks: SelectOption[] = [
+    { label: 'Angular', value: 'angular' },
+    { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' },
+    { label: 'Svelte', value: 'svelte' },
+  ];
+  readonly selected = signal<string[]>(['angular']);
+}
 ```
 
-## Running end-to-end tests
+### 2. Reactive forms
 
-For end-to-end (e2e) testing, run:
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { EgSearchableMultiselect, type SelectOption } from '@egose/shadcn-theme-ng/searchable-multiselect';
 
-```bash
-ng e2e
+@Component({
+  selector: 'app-reactive-multi',
+  standalone: true,
+  imports: [EgSearchableMultiselect, ReactiveFormsModule],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="submit()">
+      <label for="skills">Skills (pick at least one)</label>
+      <eg-searchable-multiselect id="skills" [options]="skills" formControlName="skillIds" />
+      @if (form.controls.skillIds.invalid && form.controls.skillIds.touched) {
+        <p class="tw:text-destructive tw:text-sm">Choose at least one skill.</p>
+      }
+      <button type="submit">Save</button>
+    </form>
+  `,
+})
+export class ReactiveMultiComponent {
+  readonly skills: SelectOption[] = [
+    { label: 'TypeScript', value: 'ts' },
+    { label: 'CSS', value: 'css' },
+    { label: 'Testing', value: 'testing' },
+  ];
+  readonly form = new FormGroup({
+    skillIds: new FormControl<string[]>(['ts'], { validators: Validators.required }),
+  });
+
+  submit(): void {
+    this.form.markAllAsTouched();
+    console.log(this.form.value);
+  }
+}
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+### 3. Template-driven forms (`ngModel`)
+
+```ts
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { EgSearchableMultiselect, type SelectOption } from '@egose/shadcn-theme-ng/searchable-multiselect';
+
+@Component({
+  selector: 'app-ngmodel-multi',
+  standalone: true,
+  imports: [EgSearchableMultiselect, FormsModule],
+  template: `
+    <eg-searchable-multiselect name="tags" [options]="tags" [(ngModel)]="selected" #tagsCtrl="ngModel" />
+    @if (tagsCtrl.touched && !selected.length) {
+      <p class="tw:text-destructive tw:text-sm">Pick at least one tag.</p>
+    }
+  `,
+})
+export class NgModelMultiComponent {
+  readonly tags: SelectOption[] = [
+    { label: 'Bug', value: 'bug' },
+    { label: 'Feature', value: 'feature' },
+    { label: 'Docs', value: 'docs' },
+  ];
+  selected: string[] = [];
+}
+```
+
+### 4. Disabled / read-only states
+
+```ts
+import { Component } from '@angular/core';
+import { EgSearchableMultiselect } from '@egose/shadcn-theme-ng/searchable-multiselect';
+
+@Component({
+  selector: 'app-disabled-multi',
+  standalone: true,
+  imports: [EgSearchableMultiselect],
+  template: `
+    <!-- fully disabled: chips, ✕ buttons, trigger, checkboxes -->
+    <eg-searchable-multiselect [options]="options" [value]="['a']" disabled />
+
+    <!-- wrapper-driven disable (e.g. parent form section locked) -->
+    <eg-searchable-multiselect [options]="options" [value]="['a']" [wrapperDisabled]="locked" />
+  `,
+})
+export class DisabledMultiComponent {
+  readonly locked = true;
+  readonly options = [
+    { label: 'Alpha', value: 'a' },
+    { label: 'Beta', value: 'b' },
+  ];
+}
+```
+
+Disabling via `formControl.disable()` works too — it flows through `setDisabledState`.
+
+### 5. Client-side search (filter `options` yourself)
+
+Since the popover lists exactly what you pass in `options`, implement search by filtering upstream:
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { EgSearchableMultiselect } from '@egose/shadcn-theme-ng/searchable-multiselect';
+
+@Component({
+  selector: 'app-search-multi',
+  standalone: true,
+  imports: [EgSearchableMultiselect],
+  template: `
+    <input
+      type="search"
+      placeholder="Filter options…"
+      [value]="query()"
+      (input)="query.set($any($event.target).value)"
+      aria-label="Filter options"
+    />
+    <eg-searchable-multiselect [options]="filtered()" [(value)]="selected" />
+  `,
+})
+export class SearchMultiComponent {
+  readonly query = signal('');
+  readonly selected = signal<string[]>([]);
+  private readonly all = [
+    { label: 'Angular', value: 'angular' },
+    { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' },
+    { label: 'Svelte', value: 'svelte' },
+    { label: 'Solid', value: 'solid' },
+  ];
+  readonly filtered = computed(() => {
+    const q = this.query().trim().toLowerCase();
+    return q ? this.all.filter((o) => o.label.toLowerCase().includes(q)) : this.all;
+  });
+}
+```
+
+Note: selections whose option is currently filtered out stay selected internally (chips still show) but have no checkbox row until the filter matches again. Unknown values passed via `value`/`writeValue` that match no option are dropped from the chip row.
+
+### 6. Async options + reacting to changes
+
+```ts
+import { Component, resource, signal } from '@angular/core';
+import { EgSearchableMultiselect, type SelectOption } from '@egose/shadcn-theme-ng/searchable-multiselect';
+
+@Component({
+  selector: 'app-async-multi',
+  standalone: true,
+  imports: [EgSearchableMultiselect],
+  template: `
+    @if (users.isLoading()) {
+      <p>Loading users…</p>
+    } @else {
+      <eg-searchable-multiselect
+        [options]="users.value() ?? []"
+        [(value)]="assignees"
+        (valueChange)="onChange($event)"
+        ariaLabel="Assignees"
+      />
+    }
+  `,
+})
+export class AsyncMultiComponent {
+  readonly assignees = signal<string[]>([]);
+  readonly users = resource({
+    loader: async (): Promise<SelectOption[]> => {
+      const res = await fetch('/api/users');
+      const list = (await res.json()) as Array<{ id: string; name: string }>;
+      return list.map((u) => ({ label: u.name, value: u.id }));
+    },
+  });
+
+  onChange(values: string[]): void {
+    console.log('assignees now:', values);
+  }
+}
+```
+
+## Accessibility notes
+
+- The trigger is a real `<button>` — give it an accessible name via `ariaLabel` (or a visible `<label>` paired with `id`) and descriptions via `ariaDescribedby`.
+- Options render as native checkbox-backed `hlm-checkbox` rows inside `<label>` elements, so they are keyboard-operable and announced per option.
+- Chip `✕` buttons are real buttons and disabled along with the control; keep chip text concise so screen readers announce removals cleanly.
+- The empty state is a plain text pill (not focusable) — the popover trigger remains the single keyboard entry point, which keeps tab order simple.
+
+## Theming / CSS variables
+
+Class-driven (chips, popover panel, checkbox rows). Extend via the `class` input on the host; inner popover width (`tw:w-64`) and list height (`tw:max-h-60`) are fixed in the template.
 
-## Additional Resources
+## Related subpaths
 
-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.
+- `@egose/shadcn-theme-ng/form-searchable-multiselect` — form-field wrapper (label/description/error) around this control
+- `@egose/shadcn-theme-ng/select` — single-select dropdown counterpart
+- `@egose/shadcn-theme-ng/popover` — the underlying popover primitive
+- `@egose/shadcn-theme-ng/checkbox` — the underlying option-row primitive

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, output, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { HlmPopover, HlmPopoverTrigger, HlmPopoverContent } from '@egose/shadcn-theme-ng/popover';
+import { HlmPopover, HlmPopoverTrigger, HlmPopoverContent, HlmPopoverPortal } from '@egose/shadcn-theme-ng/popover';
 import { HlmButton } from '@egose/shadcn-theme-ng/button';
 import { HlmCheckbox } from '@egose/shadcn-theme-ng/checkbox';
 import { hlm } from '@egose/shadcn-theme-ng/utils';
@@ -12,6 +12,16 @@ class EgSearchableMultiselect {
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     placeholder = input('Start typing to add…', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    id = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    wrapperDisabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrapperDisabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     /** Value: array of selected values (string[]) */
     value = input([], /* @ts-ignore */
@@ -19,7 +29,10 @@ class EgSearchableMultiselect {
     valueChange = output();
     selectedItems = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
-    isDisabled = false;
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    disabledState = computed(() => this.disabled() || this.wrapperDisabled() || this.formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
     isFormBound = false;
     _hostClass = computed(() => hlm(this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
@@ -27,6 +40,8 @@ class EgSearchableMultiselect {
         return this.selectedItems().some((s) => s.value === value);
     }
     toggle(value, checked) {
+        if (this.disabledState())
+            return;
         if (checked) {
             this.addItem(value);
         }
@@ -44,6 +59,8 @@ class EgSearchableMultiselect {
         }
     }
     removeItem(value) {
+        if (this.disabledState())
+            return;
         const updated = this.selectedItems().filter((i) => i.value !== value);
         this.updateValueFromSelected(updated);
     }
@@ -75,76 +92,23 @@ class EgSearchableMultiselect {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
+        this.formDisabled.set(isDisabled);
     }
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgSearchableMultiselect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrapperDisabled: { classPropertyName: "wrapperDisabled", publicName: "wrapperDisabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", 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,
             },
-        ], ngImport: i0, template: `
-    <div class="flex flex-col gap-2 w-full">
-      <!-- Selected chips -->
-      <div class="flex flex-wrap gap-2">
-        @if (selectedItems().length === 0) {
-          <span
-            class="bg-gray-100 text-gray-400 rounded-full
-                   px-2 py-1 inline-flex items-center text-xs"
-          >
-            {{ placeholder() }}
-          </span>
-        } @else {
-          @for (item of selectedItems(); track item.value) {
-            <span
-              class="bg-gray-200 rounded-full px-2 py-1
-                     inline-flex items-center gap-2 text-xs"
-            >
-              {{ item.label }}
-              <button
-                type="button"
-                (click)="removeItem(item.value)"
-                class="bg-transparent border-0 text-gray-600
-                       hover:text-red-500 cursor-pointer"
-              >
-                ✕
-              </button>
-            </span>
-          }
-        }
-      </div>
-
-      <!-- Trigger -->
-      <hlm-popover>
-        <button hlmPopoverTrigger hlmButton variant="secondary" appearance="outline" type="button">
-          {{ selectedItems().length }} selected
-        </button>
-
-        <hlm-popover-content class="w-64 p-2">
-          <div class="max-h-60 overflow-auto flex flex-col gap-1">
-            @for (option of options(); track option.value) {
-              <label
-                class="flex items-center gap-2 cursor-pointer px-2 py-1 rounded-sm hover:bg-secondary"
-              >
-                <hlm-checkbox [checked]="isSelected(option.value)" (changed)="toggle(option.value, $event)" />
-                <span class="text-sm">{{ option.label }}</span>
-              </label>
-            } @empty {
-              <span class="text-xs text-muted-foreground px-2 py-1">No options</span>
-            }
-          </div>
-        </hlm-popover-content>
-      </hlm-popover>
-    </div>
-  `, 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 });
+        ], ngImport: i0, template: "\n    <div class=\"flex flex-col gap-2 w-full\">\n      <!-- Selected chips -->\n      <div class=\"flex flex-wrap gap-2\">\n        @if (selectedItems().length === 0) {\n          <span\n            class=\"bg-gray-100 text-gray-400 rounded-full\n                   px-2 py-1 inline-flex items-center text-xs\"\n          >\n            {{ placeholder() }}\n          </span>\n        } @else {\n          @for (item of selectedItems(); track item.value) {\n            <span\n              class=\"bg-gray-200 rounded-full px-2 py-1\n                     inline-flex items-center gap-2 text-xs\"\n            >\n              {{ item.label }}\n              <button\n                type=\"button\"\n                [disabled]=\"disabledState()\"\n                (click)=\"removeItem(item.value)\"\n                class=\"bg-transparent border-0 text-gray-600\n                       hover:text-red-500 cursor-pointer\"\n              >\n                ✕\n              </button>\n            </span>\n          }\n        }\n      </div>\n\n      <!-- Trigger -->\n      <hlm-popover>\n        <button\n          hlmPopoverTrigger\n          hlmButton\n          variant=\"secondary\"\n          appearance=\"outline\"\n          type=\"button\"\n          [id]=\"id()\"\n          [disabled]=\"disabledState()\"\n          [attr.aria-label]=\"ariaLabel()\"\n          [attr.aria-describedby]=\"ariaDescribedby()\"\n        >\n          {{ selectedItems().length }} selected\n        </button>\n\n        <hlm-popover-content class=\"w-64 p-2\" *hlmPopoverPortal=\"let ctx\">\n          <div class=\"max-h-60 overflow-auto flex flex-col gap-1\">\n            @for (option of options(); track option.value) {\n              <label\n                class=\"flex items-center gap-2 cursor-pointer px-2 py-1 rounded-sm hover:bg-secondary\"\n              >\n                <hlm-checkbox\n                  [checked]=\"isSelected(option.value)\"\n                  [disabled]=\"disabledState()\"\n                  (changed)=\"toggle(option.value, $event)\"\n                />\n                <span class=\"text-sm\">{{ option.label }}</span>\n              </label>\n            } @empty {\n              <span class=\"text-xs text-muted-foreground px-2 py-1\">No options</span>\n            }\n          </div>\n        </hlm-popover-content>\n      </hlm-popover>\n    </div>\n  ", 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: "directive", type: HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { 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", "wrapperDisabled"], outputs: ["checkedChange", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EgSearchableMultiselect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgSearchableMultiselect, decorators: [{
             type: Component,
             args: [{
                     selector: 'eg-searchable-multiselect',
                     standalone: true,
-                    imports: [HlmPopover, HlmPopoverTrigger, HlmPopoverContent, HlmButton, HlmCheckbox],
+                    imports: [HlmPopover, HlmPopoverTrigger, HlmPopoverContent, HlmPopoverPortal, HlmButton, HlmCheckbox],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
@@ -156,62 +120,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     host: {
                         '[class]': '_hostClass()',
                     },
-                    template: `
-    <div class="flex flex-col gap-2 w-full">
-      <!-- Selected chips -->
-      <div class="flex flex-wrap gap-2">
-        @if (selectedItems().length === 0) {
-          <span
-            class="bg-gray-100 text-gray-400 rounded-full
-                   px-2 py-1 inline-flex items-center text-xs"
-          >
-            {{ placeholder() }}
-          </span>
-        } @else {
-          @for (item of selectedItems(); track item.value) {
-            <span
-              class="bg-gray-200 rounded-full px-2 py-1
-                     inline-flex items-center gap-2 text-xs"
-            >
-              {{ item.label }}
-              <button
-                type="button"
-                (click)="removeItem(item.value)"
-                class="bg-transparent border-0 text-gray-600
-                       hover:text-red-500 cursor-pointer"
-              >
-                ✕
-              </button>
-            </span>
-          }
-        }
-      </div>
-
-      <!-- Trigger -->
-      <hlm-popover>
-        <button hlmPopoverTrigger hlmButton variant="secondary" appearance="outline" type="button">
-          {{ selectedItems().length }} selected
-        </button>
-
-        <hlm-popover-content class="w-64 p-2">
-          <div class="max-h-60 overflow-auto flex flex-col gap-1">
-            @for (option of options(); track option.value) {
-              <label
-                class="flex items-center gap-2 cursor-pointer px-2 py-1 rounded-sm hover:bg-secondary"
-              >
-                <hlm-checkbox [checked]="isSelected(option.value)" (changed)="toggle(option.value, $event)" />
-                <span class="text-sm">{{ option.label }}</span>
-              </label>
-            } @empty {
-              <span class="text-xs text-muted-foreground px-2 py-1">No options</span>
-            }
-          </div>
-        </hlm-popover-content>
-      </hlm-popover>
-    </div>
-  `,
+                    template: "\n    <div class=\"flex flex-col gap-2 w-full\">\n      <!-- Selected chips -->\n      <div class=\"flex flex-wrap gap-2\">\n        @if (selectedItems().length === 0) {\n          <span\n            class=\"bg-gray-100 text-gray-400 rounded-full\n                   px-2 py-1 inline-flex items-center text-xs\"\n          >\n            {{ placeholder() }}\n          </span>\n        } @else {\n          @for (item of selectedItems(); track item.value) {\n            <span\n              class=\"bg-gray-200 rounded-full px-2 py-1\n                     inline-flex items-center gap-2 text-xs\"\n            >\n              {{ item.label }}\n              <button\n                type=\"button\"\n                [disabled]=\"disabledState()\"\n                (click)=\"removeItem(item.value)\"\n                class=\"bg-transparent border-0 text-gray-600\n                       hover:text-red-500 cursor-pointer\"\n              >\n                ✕\n              </button>\n            </span>\n          }\n        }\n      </div>\n\n      <!-- Trigger -->\n      <hlm-popover>\n        <button\n          hlmPopoverTrigger\n          hlmButton\n          variant=\"secondary\"\n          appearance=\"outline\"\n          type=\"button\"\n          [id]=\"id()\"\n          [disabled]=\"disabledState()\"\n          [attr.aria-label]=\"ariaLabel()\"\n          [attr.aria-describedby]=\"ariaDescribedby()\"\n        >\n          {{ selectedItems().length }} selected\n        </button>\n\n        <hlm-popover-content class=\"w-64 p-2\" *hlmPopoverPortal=\"let ctx\">\n          <div class=\"max-h-60 overflow-auto flex flex-col gap-1\">\n            @for (option of options(); track option.value) {\n              <label\n                class=\"flex items-center gap-2 cursor-pointer px-2 py-1 rounded-sm hover:bg-secondary\"\n              >\n                <hlm-checkbox\n                  [checked]=\"isSelected(option.value)\"\n                  [disabled]=\"disabledState()\"\n                  (changed)=\"toggle(option.value, $event)\"\n                />\n                <span class=\"text-sm\">{{ option.label }}</span>\n              </label>\n            } @empty {\n              <span class=\"text-xs text-muted-foreground px-2 py-1\">No options</span>\n            }\n          </div>\n        </hlm-popover-content>\n      </hlm-popover>\n    </div>\n  ",
                 }]
-        }], 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"] }] } });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], wrapperDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperDisabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", 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
@@ -222,4 +133,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { EgSearchableMultiselect };
-//# sourceMappingURL=searchable-multiselect.mjs.map
+

package/searchable-multiselect/types/searchable-multiselect.d.ts

@@ -10,12 +10,18 @@ declare class EgSearchableMultiselect implements ControlValueAccessor {
     /** Full option list with labels/values */
     options: _angular_core.InputSignal<SelectOption[]>;
     placeholder: _angular_core.InputSignal<string>;
+    id: _angular_core.InputSignal<string>;
+    disabled: _angular_core.InputSignal<boolean>;
+    wrapperDisabled: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    ariaDescribedby: _angular_core.InputSignal<string | null>;
     userClass: _angular_core.InputSignal<ClassValue>;
     /** Value: array of selected values (string[]) */
     value: _angular_core.InputSignal<string[]>;
     valueChange: _angular_core.OutputEmitterRef<string[]>;
     protected readonly selectedItems: _angular_core.WritableSignal<SelectOption[]>;
-    protected isDisabled: boolean;
+    protected readonly formDisabled: _angular_core.WritableSignal<boolean>;
+    protected readonly disabledState: _angular_core.Signal<boolean>;
     private isFormBound;
     protected readonly _hostClass: _angular_core.Signal<string>;
     protected isSelected(value: string): boolean;
@@ -32,7 +38,7 @@ declare class EgSearchableMultiselect implements ControlValueAccessor {
     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; }; "userClass": { "alias": "class"; "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; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrapperDisabled": { "alias": "wrapperDisabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "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 };