@egose/shadcn-theme-ng-tw 0.0.14

package/radio-group/README.md

@@ -0,0 +1,64 @@
+# RadioGroup
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.2.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 radio-group
+```
+
+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/radio-group
+   ```
+
+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/radio-group/fesm2022/radio-group.mjs

@@ -0,0 +1,170 @@
+import * as i0 from '@angular/core';
+import { inject, Renderer2, ElementRef, PLATFORM_ID, input, computed, booleanAttribute, signal, output, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import * as i1 from '@spartan-ng/brain/radio-group';
+import { BrnRadio, BrnRadioGroup } from '@spartan-ng/brain/radio-group';
+import { hlm } from '@egose/shadcn-theme-ng/utils';
+
+class HlmRadio {
+    _document = inject(DOCUMENT);
+    _renderer = inject(Renderer2);
+    _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" }] : []));
+    /** 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. */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
+    /** Used to set the aria-labelledby attribute on the underlying brn element. */
+    ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby", alias: 'aria-labelledby' }] : [{ alias: 'aria-labelledby' }]));
+    /** Used to set the aria-describedby attribute on the underlying brn element. */
+    ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby", alias: 'aria-describedby' }] : [{ alias: 'aria-describedby' }]));
+    /**
+     * The value this radio button represents.
+     */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Whether the checkbox is required. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Whether the checkbox is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    _state = computed(() => {
+        const id = this.id();
+        return {
+            disabled: signal(this.disabled()),
+            id: id ? id : null,
+        };
+    }, ...(ngDevMode ? [{ debugName: "_state" }] : []));
+    /**
+     * Event emitted when the checked state of this radio button changes.
+     */
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    change = output();
+    constructor() {
+        effect(() => {
+            const state = this._state();
+            const isDisabled = state.disabled();
+            if (!this._elementRef.nativeElement || !this._isBrowser)
+                return;
+            const labelElement = this._elementRef.nativeElement.closest('label') ?? this._document.querySelector(`label[for="${state.id}"]`);
+            if (!labelElement)
+                return;
+            this._renderer.setAttribute(labelElement, 'data-disabled', isDisabled ? 'true' : 'false');
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmRadio, isStandalone: true, selector: "hlm-radio", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "attr.id": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.data-disabled": "_state().disabled() ? \"\" : null" } }, ngImport: i0, template: `
+    <brn-radio
+      [id]="id()"
+      [class]="_computedClass()"
+      [value]="value()"
+      [required]="required()"
+      [disabled]="disabled()"
+      [aria-label]="ariaLabel()"
+      [aria-labelledby]="ariaLabelledby()"
+      [aria-describedby]="ariaDescribedby()"
+      (change)="change.emit($event)"
+    >
+      <ng-content select="[target],[indicator],hlm-radio-indicator" indicator />
+      <ng-content />
+    </brn-radio>
+  `, isInline: true, dependencies: [{ kind: "component", type: BrnRadio, selector: "brn-radio", inputs: ["disabled", "id", "aria-label", "aria-labelledby", "aria-describedby", "value", "required"], outputs: ["change"], exportAs: ["brnRadio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadio, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-radio',
+                    imports: [BrnRadio],
+                    template: `
+    <brn-radio
+      [id]="id()"
+      [class]="_computedClass()"
+      [value]="value()"
+      [required]="required()"
+      [disabled]="disabled()"
+      [aria-label]="ariaLabel()"
+      [aria-labelledby]="ariaLabelledby()"
+      [aria-describedby]="ariaDescribedby()"
+      (change)="change.emit($event)"
+    >
+      <ng-content select="[target],[indicator],hlm-radio-indicator" indicator />
+      <ng-content />
+    </brn-radio>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[attr.id]': 'null',
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-labelledby]': 'null',
+                        '[attr.aria-describedby]': 'null',
+                        '[attr.data-disabled]': '_state().disabled() ? "" : null',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmRadioGroup {
+    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
+    _computedClass = computed(() => hlm('tw:grid tw: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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-radio-group',
+                    hostDirectives: [
+                        {
+                            directive: BrnRadioGroup,
+                            inputs: ['name', 'value', 'disabled', 'required', 'direction'],
+                            outputs: ['valueChange'],
+                        },
+                    ],
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+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" }] : []));
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioIndicator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-radio-indicator',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    template: ` <div class="tw:group-data-[checked=true]:bg-primary tw:size-2 tw:rounded-full tw:bg-transparent"></div> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+/*
+ * Public API Surface of radio-group
+ */
+const HlmRadioGroupImports = [HlmRadioGroup, HlmRadio, HlmRadioIndicator];
+class HlmRadioGroupModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioGroupModule, imports: [HlmRadioGroup, HlmRadio, HlmRadioIndicator], exports: [HlmRadioGroup, HlmRadio, HlmRadioIndicator] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioGroupModule, imports: [HlmRadio] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmRadioGroupImports],
+                    exports: [...HlmRadioGroupImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HlmRadio, HlmRadioGroup, HlmRadioGroupImports, HlmRadioGroupModule, HlmRadioIndicator };
+//# sourceMappingURL=radio-group.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.mjs","sources":["../../../projects/radio-group/src/lib/radio.ts","../../../projects/radio-group/src/lib/radio-group.ts","../../../projects/radio-group/src/lib/radio-indicator.ts","../../../projects/radio-group/src/public-api.ts","../../../projects/radio-group/src/radio-group.ts"],"sourcesContent":["import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  output,\n  PLATFORM_ID,\n  Renderer2,\n  signal,\n} from '@angular/core';\nimport { BrnRadio, BrnRadioChange } from '@spartan-ng/brain/radio-group';\nimport { hlm } from '@egose/shadcn-theme-ng/utils';\nimport { ClassValue } from 'clsx';\n\n@Component({\n  selector: 'hlm-radio',\n  imports: [BrnRadio],\n  template: `\n    <brn-radio\n      [id]=\"id()\"\n      [class]=\"_computedClass()\"\n      [value]=\"value()\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n      [aria-label]=\"ariaLabel()\"\n      [aria-labelledby]=\"ariaLabelledby()\"\n      [aria-describedby]=\"ariaDescribedby()\"\n      (change)=\"change.emit($event)\"\n    >\n      <ng-content select=\"[target],[indicator],hlm-radio-indicator\" indicator />\n      <ng-content />\n    </brn-radio>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.id]': 'null',\n    '[attr.aria-label]': 'null',\n    '[attr.aria-labelledby]': 'null',\n    '[attr.aria-describedby]': 'null',\n    '[attr.data-disabled]': '_state().disabled() ? \"\" : null',\n  },\n})\nexport class HlmRadio<T = unknown> {\n  private readonly _document = inject(DOCUMENT);\n  private readonly _renderer = inject(Renderer2);\n  private readonly _elementRef = inject(ElementRef);\n  private readonly _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  public readonly userClass = input<ClassValue>('', { alias: 'class' });\n  protected readonly _computedClass = computed(() =>\n    hlm(\n      'tw:group tw:flex tw:items-center tw:gap-x-3',\n      this.userClass(),\n      this._state().disabled() ? 'tw:cursor-not-allowed tw:opacity-50' : '',\n    ),\n  );\n\n  /** Used to set the id on the underlying brn element. */\n  public readonly id = input<string | undefined>(undefined);\n\n  /** Used to set the aria-label attribute on the underlying brn element. */\n  public readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });\n\n  /** Used to set the aria-labelledby attribute on the underlying brn element. */\n  public readonly ariaLabelledby = input<string | undefined>(undefined, { alias: 'aria-labelledby' });\n\n  /** Used to set the aria-describedby attribute on the underlying brn element. */\n  public readonly ariaDescribedby = input<string | undefined>(undefined, { alias: 'aria-describedby' });\n\n  /**\n   * The value this radio button represents.\n   */\n  public readonly value = input.required<T>();\n\n  /** Whether the checkbox is required. */\n  public readonly required = input(false, { transform: booleanAttribute });\n\n  /** Whether the checkbox is disabled. */\n  public readonly disabled = input(false, { transform: booleanAttribute });\n\n  protected readonly _state = computed(() => {\n    const id = this.id();\n    return {\n      disabled: signal(this.disabled()),\n      id: id ? id : null,\n    };\n  });\n  /**\n   * Event emitted when the checked state of this radio button changes.\n   */\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  public readonly change = output<BrnRadioChange<T>>();\n\n  constructor() {\n    effect(() => {\n      const state = this._state();\n      const isDisabled = state.disabled();\n\n      if (!this._elementRef.nativeElement || !this._isBrowser) return;\n\n      const labelElement =\n        this._elementRef.nativeElement.closest('label') ?? this._document.querySelector(`label[for=\"${state.id}\"]`);\n\n      if (!labelElement) return;\n      this._renderer.setAttribute(labelElement, 'data-disabled', isDisabled ? 'true' : 'false');\n    });\n  }\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { BrnRadioGroup } from '@spartan-ng/brain/radio-group';\nimport { hlm } from '@egose/shadcn-theme-ng/utils';\nimport type { ClassValue } from 'clsx';\n\n@Component({\n  selector: 'hlm-radio-group',\n  hostDirectives: [\n    {\n      directive: BrnRadioGroup,\n      inputs: ['name', 'value', 'disabled', 'required', 'direction'],\n      outputs: ['valueChange'],\n    },\n  ],\n  host: {\n    '[class]': '_computedClass()',\n  },\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HlmRadioGroup {\n  public readonly userClass = input<ClassValue>('', { alias: 'class' });\n  protected readonly _computedClass = computed(() => hlm('tw:grid tw:gap-3', this.userClass()));\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { hlm } from '@egose/shadcn-theme-ng/utils';\nimport type { ClassValue } from 'clsx';\n\n@Component({\n  selector: 'hlm-radio-indicator',\n  host: {\n    '[class]': '_computedClass()',\n  },\n  template: ` <div class=\"tw:group-data-[checked=true]:bg-primary tw:size-2 tw:rounded-full tw:bg-transparent\"></div> `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HlmRadioIndicator {\n  public readonly userClass = input<ClassValue>('', { alias: 'class' });\n  protected readonly _computedClass = computed(() =>\n    hlm(\n      '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]',\n      this.userClass(),\n    ),\n  );\n}\n","/*\n * Public API Surface of radio-group\n */\n\nimport { NgModule } from '@angular/core';\n\nimport { HlmRadio } from './lib/radio';\nimport { HlmRadioGroup } from './lib/radio-group';\nimport { HlmRadioIndicator } from './lib/radio-indicator';\n\nexport * from './lib/radio';\nexport * from './lib/radio-group';\nexport * from './lib/radio-indicator';\n\nexport const HlmRadioGroupImports = [HlmRadioGroup, HlmRadio, HlmRadioIndicator];\n\n@NgModule({\n  imports: [...HlmRadioGroupImports],\n  exports: [...HlmRadioGroupImports],\n})\nexport class HlmRadioGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/radio-group/index.d.ts

@@ -0,0 +1,63 @@
+import * as _angular_core from '@angular/core';
+import * as i1 from '@spartan-ng/brain/radio-group';
+import { BrnRadioChange } from '@spartan-ng/brain/radio-group';
+import { ClassValue } from 'clsx';
+
+declare class HlmRadio<T = unknown> {
+    private readonly _document;
+    private readonly _renderer;
+    private readonly _elementRef;
+    private readonly _isBrowser;
+    readonly userClass: _angular_core.InputSignal<ClassValue>;
+    protected readonly _computedClass: _angular_core.Signal<string>;
+    /** Used to set the id on the underlying brn element. */
+    readonly id: _angular_core.InputSignal<string | undefined>;
+    /** Used to set the aria-label attribute on the underlying brn element. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Used to set the aria-labelledby attribute on the underlying brn element. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /** Used to set the aria-describedby attribute on the underlying brn element. */
+    readonly ariaDescribedby: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The value this radio button represents.
+     */
+    readonly value: _angular_core.InputSignal<T>;
+    /** Whether the checkbox is required. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the checkbox is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly _state: _angular_core.Signal<{
+        disabled: _angular_core.WritableSignal<boolean>;
+        id: string | null;
+    }>;
+    /**
+     * Event emitted when the checked state of this radio button changes.
+     */
+    readonly change: _angular_core.OutputEmitterRef<BrnRadioChange<T>>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmRadio<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmRadio<any>, "hlm-radio", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "change": "change"; }, never, ["[target],[indicator],hlm-radio-indicator", "*"], true, never>;
+}
+
+declare class HlmRadioGroup {
+    readonly userClass: _angular_core.InputSignal<ClassValue>;
+    protected readonly _computedClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmRadioGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmRadioGroup, "hlm-radio-group", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.BrnRadioGroup; inputs: { "name": "name"; "value": "value"; "disabled": "disabled"; "required": "required"; "direction": "direction"; }; outputs: { "valueChange": "valueChange"; }; }]>;
+}
+
+declare class HlmRadioIndicator {
+    readonly userClass: _angular_core.InputSignal<ClassValue>;
+    protected readonly _computedClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmRadioIndicator, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmRadioIndicator, "hlm-radio-indicator", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const HlmRadioGroupImports: (typeof HlmRadio | typeof HlmRadioGroup | typeof HlmRadioIndicator)[];
+declare class HlmRadioGroupModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmRadioGroupModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<HlmRadioGroupModule, never, [typeof HlmRadioGroup, typeof HlmRadio, typeof HlmRadioIndicator], [typeof HlmRadioGroup, typeof HlmRadio, typeof HlmRadioIndicator]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<HlmRadioGroupModule>;
+}
+
+export { HlmRadio, HlmRadioGroup, HlmRadioGroupImports, HlmRadioGroupModule, HlmRadioIndicator };

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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"}