@egose/shadcn-theme-ng 0.0.27 → 0.1.0

package/scroll-area/types/scroll-area.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from '@angular/core';
+
+declare class HlmScrollArea {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmScrollArea, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmScrollArea, "ng-scrollbar[hlm],ng-scrollbar[hlmScrollbar]", never, {}, {}, never, never, true, never>;
+}
+
+declare const HlmScrollAreaImports: readonly [typeof HlmScrollArea];
+declare class HlmScrollAreaModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmScrollAreaModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmScrollAreaModule, never, [typeof HlmScrollArea], [typeof HlmScrollArea]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<HlmScrollAreaModule>;
+}
+
+export { HlmScrollArea, HlmScrollAreaImports, HlmScrollAreaModule };

package/searchable-multiselect/README.md

@@ -0,0 +1,3 @@
+# Searchable Multiselect Subpath
+
+This project ships only as `@egose/shadcn-theme-ng/searchable-multiselect` or `@egose/shadcn-theme-ng-tw/searchable-multiselect`. See the [package README](../../README.md) for installation, compatibility, Tailwind variant, test, and release guidance. Do not publish this project directory independently.

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

@@ -0,0 +1,136 @@
+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, 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';
+
+class EgSearchableMultiselect {
+    /** Full option list with labels/values */
+    options = input([], /* @ts-ignore */
+    ...(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 */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    selectedItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    isSelected(value) {
+        return this.selectedItems().some((s) => s.value === value);
+    }
+    toggle(value, checked) {
+        if (this.disabledState())
+            return;
+        if (checked) {
+            this.addItem(value);
+        }
+        else {
+            this.removeItem(value);
+        }
+    }
+    addItem(value) {
+        if (!this.selectedItems().some((s) => s.value === value)) {
+            const opt = this.options()?.find((o) => o.value === value);
+            if (!opt)
+                return;
+            const updated = [...this.selectedItems(), opt];
+            this.updateValueFromSelected(updated);
+        }
+    }
+    removeItem(value) {
+        if (this.disabledState())
+            return;
+        const updated = this.selectedItems().filter((i) => i.value !== value);
+        this.updateValueFromSelected(updated);
+    }
+    updateSelectedFromValues(values) {
+        const opts = this.options() || [];
+        this.selectedItems.set(opts.filter((o) => values.includes(o.value)));
+    }
+    updateValueFromSelected(items) {
+        this.selectedItems.set(items);
+        const values = items.map((i) => i.value);
+        this.valueChange.emit(values);
+        this.onChange(values);
+        this.onTouched();
+    }
+    constructor() {
+        // No effect needed; we read `value` input directly via writeValue for form-bound usage.
+    }
+    // --- ControlValueAccessor ---
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(values) {
+        this.isFormBound = true;
+        this.updateSelectedFromValues(values || []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    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: "\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.1.3", ngImport: i0, type: EgSearchableMultiselect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-searchable-multiselect',
+                    standalone: true,
+                    imports: [HlmPopover, HlmPopoverTrigger, HlmPopoverContent, HlmPopoverPortal, HlmButton, HlmCheckbox],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EgSearchableMultiselect),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        '[class]': '_hostClass()',
+                    },
+                    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 }] }], 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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EgSearchableMultiselect };
+

package/searchable-multiselect/package.json

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

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

@@ -0,0 +1,45 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ClassValue } from 'clsx';
+
+interface SelectOption {
+    label: string;
+    value: string;
+}
+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 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;
+    protected toggle(value: string, checked: boolean): void;
+    protected addItem(value: string): void;
+    protected removeItem(value: string): void;
+    private updateSelectedFromValues;
+    private updateValueFromSelected;
+    constructor();
+    private onChange;
+    private onTouched;
+    writeValue(values: string[] | null): void;
+    registerOnChange(fn: (value: string[]) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgSearchableMultiselect, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgSearchableMultiselect, "eg-searchable-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "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 };
+export type { SelectOption };

package/select/README.md

@@ -1,64 +1,3 @@
-# Select
+# Select Subpath
 
-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 select
-```
-
-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/select
-   ```
-
-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.
+This project ships only as `@egose/shadcn-theme-ng/select` or `@egose/shadcn-theme-ng-tw/select`. See the [package README](../../README.md) for installation, compatibility, Tailwind variant, test, and release guidance. Do not publish this project directory independently.