@egose/shadcn-theme-ng 0.0.12 → 0.0.14

package/form-textarea/fesm2022/form-textarea.mjs

@@ -33,13 +33,13 @@ class EgFormTextarea {
     errorClass = input('', ...(ngDevMode ? [{ debugName: "errorClass" }] : []));
     hintClass = input('', ...(ngDevMode ? [{ debugName: "hintClass" }] : []));
     // Computed class bindings
-    $userClass = computed(() => hlm('tw:flex tw:flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
-    $labelClass = computed(() => hlm('tw:mb-1 tw:gap-0', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
-    $textareaClass = computed(() => hlm('tw:mb-1', this.textareaClass()), ...(ngDevMode ? [{ debugName: "$textareaClass" }] : []));
-    $errorClass = computed(() => hlm('tw:mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
-    $hintClass = computed(() => hlm('tw:mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
+    $userClass = computed(() => hlm('flex flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
+    $labelClass = computed(() => hlm('mb-1 gap-0', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
+    $textareaClass = computed(() => hlm('mb-1', this.textareaClass()), ...(ngDevMode ? [{ debugName: "$textareaClass" }] : []));
+    $errorClass = computed(() => hlm('mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
+    $hintClass = computed(() => hlm('mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgFormTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormTextarea, isStandalone: true, selector: "eg-form-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, textareaClass: { classPropertyName: "textareaClass", publicName: "textareaClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tw:w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormTextarea, isStandalone: true, selector: "eg-form-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, textareaClass: { classPropertyName: "textareaClass", publicName: "textareaClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
     @let lbl = label();
     @let nm = controlName();
     @let err = error();
@@ -50,7 +50,7 @@ class EgFormTextarea {
       @if (lbl) {
         <span hlmLabel [class]="$labelClass()">{{ lbl }}
         @if (rqrd) {
-          <span class="tw:text-red-500">*</span>
+          <span class="text-red-500">*</span>
         }
         </span>
       }
@@ -91,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                     selector: 'eg-form-textarea',
                     standalone: true,
                     host: {
-                        class: 'tw:w-full',
+                        class: 'w-full',
                     },
                     imports: [ReactiveFormsModule, HlmFormField, HlmError, HlmHint, HlmLabel, HlmInput],
                     providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
@@ -107,7 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
       @if (lbl) {
         <span hlmLabel [class]="$labelClass()">{{ lbl }}
         @if (rqrd) {
-          <span class="tw:text-red-500">*</span>
+          <span class="text-red-500">*</span>
         }
         </span>
       }

package/input/fesm2022/input.mjs

@@ -6,11 +6,11 @@ import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
 import { hlm } from '@egose/shadcn-theme-ng/utils';
 import { cva } from 'class-variance-authority';
 
-const inputVariants = cva('tw:file:text-foreground tw:placeholder:text-muted-foreground tw:selection:bg-primary tw:selection:text-primary-foreground tw:dark:bg-input/10 tw:border-input tw:shadow-xs tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:flex tw:h-9 tw:w-full tw:min-w-0 tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-1 tw:text-base tw:outline-none tw:transition-[color,box-shadow] tw:file:inline-flex tw:file:h-7 tw:file:border-0 tw:file:bg-transparent tw:file:text-sm tw:file:font-medium tw:focus-visible:ring-[3px] tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50 md:text-sm', {
+const inputVariants = cva('file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/10 border-input shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', {
     variants: {
         error: {
-            auto: 'tw:[&.ng-invalid.ng-touched]:text-destructive/20 tw:dark:[&.ng-invalid.ng-touched]:text-destructive/40 tw:[&.ng-invalid.ng-touched]:border-destructive tw:[&.ng-invalid.ng-touched]:focus-visible:ring-destructive',
-            true: 'tw:text-destructive/90 dark:text-destructive/60 tw:border-destructive tw:focus-visible:ring-destructive',
+            auto: '[&.ng-invalid.ng-touched]:text-destructive/20 dark:[&.ng-invalid.ng-touched]:text-destructive/40 [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive',
+            true: 'text-destructive/90 dark:text-destructive/60 border-destructive focus-visible:ring-destructive',
         },
     },
     defaultVariants: {

package/label/fesm2022/label.mjs

@@ -6,7 +6,7 @@ import { hlm } from '@egose/shadcn-theme-ng/utils';
 
 class HlmLabel {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:flex tw:select-none tw:items-center tw:gap-2 tw:text-sm tw:font-medium tw:leading-none tw:peer-disabled:cursor-not-allowed tw:peer-disabled:opacity-50 tw:has-[[disabled]]:cursor-not-allowed tw:has-[[disabled]]:opacity-50 tw:group-data-[disabled=true]:pointer-events-none tw:group-data-[disabled=true]:opacity-50 tw:peer-data-[disabled]:cursor-not-allowed tw:peer-data-[disabled]:opacity-50', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 has-[[disabled]]:cursor-not-allowed has-[[disabled]]:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmLabel, isStandalone: true, selector: "[hlmLabel]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnLabel, inputs: ["id", "id"] }], ngImport: i0 });
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.12",
+  "version": "0.0.14",
   "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/popover/fesm2022/popover.mjs

@@ -5,7 +5,7 @@ import { injectExposesStateProvider } from '@spartan-ng/brain/core';
 
 class HlmPopoverClose {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:ring-offset-background tw:focus:ring-ring tw:data-[state=open]:bg-accent tw:data-[state=open]:text-muted-foreground tw:absolute tw:right-4 tw:top-4 tw:rounded-sm tw:opacity-70 tw:transition-opacity tw:hover:opacity-100 tw:focus:outline-none tw:focus:ring-2 tw:focus:ring-offset-2 tw:disabled:pointer-events-none', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmPopoverClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmPopoverClose, isStandalone: true, selector: "[hlmPopoverClose],[brnPopoverClose][hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
@@ -30,7 +30,7 @@ class HlmPopoverContent {
         });
     }
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:border-border tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:relative tw:w-72 tw:rounded-md tw:border tw:p-4 tw:shadow-md tw:outline-none', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative w-72 rounded-md border p-4 shadow-md outline-none', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmPopoverContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmPopoverContent, isStandalone: true, selector: "[hlmPopoverContent],[brnPopoverContent][hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }

package/radio-group/fesm2022/radio-group.mjs

@@ -11,7 +11,7 @@ class HlmRadio {
     _elementRef = inject(ElementRef);
     _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:group tw:flex tw:items-center tw:gap-x-3', this.userClass(), this._state().disabled() ? 'tw:cursor-not-allowed tw:opacity-50' : ''), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('group flex items-center gap-x-3', this.userClass(), this._state().disabled() ? 'cursor-not-allowed opacity-50' : ''), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     /** Used to set the id on the underlying brn element. */
     id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : []));
     /** Used to set the aria-label attribute on the underlying brn element. */
@@ -104,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmRadioGroup {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:grid tw:gap-3', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('grid gap-3', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmRadioGroup, isStandalone: true, selector: "hlm-radio-group", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnRadioGroup, inputs: ["name", "name", "value", "value", "disabled", "disabled", "required", "required", "direction", "direction"], outputs: ["valueChange", "valueChange"] }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -129,9 +129,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmRadioIndicator {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:border-input tw:text-primary tw:group-has-[:focus-visible]:border-ring tw:group-has-[:focus-visible]:ring-ring/50 tw:dark:bg-input/10 tw:shadow-xs tw:group-data=[disabled=true]:cursor-not-allowed tw:group-data=[disabled=true]:opacity-50 tw:relative tw:flex tw:aspect-square tw:size-4 tw:shrink-0 tw:items-center tw:justify-center tw:rounded-full tw:border tw:outline-none tw:transition-[color,box-shadow] tw:group-has-[:focus-visible]:ring-[3px]', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('border-input text-primary group-has-[:focus-visible]:border-ring group-has-[:focus-visible]:ring-ring/50 dark:bg-input/10 shadow-xs group-data=[disabled=true]:cursor-not-allowed group-data=[disabled=true]:opacity-50 relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border outline-none transition-[color,box-shadow] group-has-[:focus-visible]:ring-[3px]', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmRadioIndicator, isStandalone: true, selector: "hlm-radio-indicator", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0, template: ` <div class="tw:group-data-[checked=true]:bg-primary tw:size-2 tw:rounded-full tw:bg-transparent"></div> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmRadioIndicator, isStandalone: true, selector: "hlm-radio-indicator", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0, template: ` <div class="group-data-[checked=true]:bg-primary size-2 rounded-full bg-transparent"></div> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioIndicator, decorators: [{
             type: Component,
@@ -140,7 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                     host: {
                         '[class]': '_computedClass()',
                     },
-                    template: ` <div class="tw:group-data-[checked=true]:bg-primary tw:size-2 tw:rounded-full tw:bg-transparent"></div> `,
+                    template: ` <div class="group-data-[checked=true]:bg-primary size-2 rounded-full bg-transparent"></div> `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });

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="flex flex-col gap-2 w-full">
+      <!-- Selected items -->
+      <div
+        class="flex gap-2 overflow-x-auto whitespace-nowrap
+               [scrollbar-width:none] [-ms-overflow-style:none]
+               [&::-webkit-scrollbar]:hidden"
+      >
+        @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>
+
+      <!-- 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="flex flex-col gap-2 w-full">
+      <!-- Selected items -->
+      <div
+        class="flex gap-2 overflow-x-auto whitespace-nowrap
+               [scrollbar-width:none] [-ms-overflow-style:none]
+               [&::-webkit-scrollbar]:hidden"
+      >
+        @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>
+
+      <!-- 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 };