@egose/shadcn-theme-ng 0.0.11 → 0.0.13

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

@@ -0,0 +1,221 @@
+import * as i0 from '@angular/core';
+import { viewChild, input, output, signal, computed, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { HlmAutocomplete } from '@egose/shadcn-theme-ng/autocomplete';
+
+class EgSearchableMultiselect {
+    autoComplete = viewChild(HlmAutocomplete, ...(ngDevMode ? [{ debugName: "autoComplete" }] : []));
+    /** Full option list with labels/values */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    placeholder = input('Start typing to add…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Value: array of selected values (string[]) */
+    value = input([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valueChange = output(); // emits string[] of values
+    /** Internal state */
+    search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : [])); // full objects for display
+    isDisabled = false;
+    isFormBound = false;
+    /** Filtered **labels** for hlm-autocomplete */
+    filteredOptionLabels = computed(() => (this.options() || [])
+        .filter((opt) => opt.label.toLowerCase().includes(this.search().toLowerCase()) &&
+        !this.selectedItems().some((sel) => sel.value === opt.value))
+        .map((opt) => opt.label), ...(ngDevMode ? [{ debugName: "filteredOptionLabels" }] : []));
+    /** Form callbacks */
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Sync `value` input to selectedItems for standalone usage
+        effect(() => {
+            if (!this.isFormBound) {
+                this.updateSelectedFromValues(this.value() || []);
+            }
+        });
+    }
+    /** Add by label string (from autocomplete) */
+    addItemByLabel(label) {
+        const opt = this.options()?.find((o) => o.label === label);
+        if (opt) {
+            this.addItem(opt.value);
+        }
+    }
+    /** Add by value string */
+    addItem(value) {
+        if (!this.selectedItems().some((sel) => sel.value === value)) {
+            const opt = this.options()?.find((o) => o.value === value);
+            if (!opt)
+                return;
+            const updatedItems = [...this.selectedItems(), opt];
+            this.updateValueFromSelected(updatedItems);
+        }
+    }
+    /** Remove by value string */
+    removeItem(value) {
+        const updatedItems = this.selectedItems().filter((i) => i.value !== value);
+        this.updateValueFromSelected(updatedItems);
+    }
+    /** Clear autocomplete text */
+    clearAutocompleteText() {
+        this.autoComplete()?.clearText();
+        if (this.options().length === this.selectedItems().length) {
+            this.autoComplete()?.setPopoverState('closed');
+        }
+    }
+    handleSelect(label) {
+        this.clearAutocompleteText();
+    }
+    /** Map string[] values → full objects */
+    updateSelectedFromValues(values) {
+        const opts = this.options() || [];
+        const matched = opts.filter((o) => values.includes(o.value));
+        this.selectedItems.set(matched);
+    }
+    /** Map full objects → string[] values and emit */
+    updateValueFromSelected(items) {
+        this.selectedItems.set(items);
+        const values = items.map((i) => i.value);
+        this.valueChange.emit(values);
+        this.onChange(values);
+        this.onTouched();
+    }
+    // --- ControlValueAccessor ---
+    writeValue(values) {
+        this.isFormBound = true;
+        this.updateSelectedFromValues(values || []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgSearchableMultiselect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgSearchableMultiselect, isStandalone: true, selector: "eg-searchable-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EgSearchableMultiselect),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "autoComplete", first: true, predicate: HlmAutocomplete, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="tw:flex tw:flex-col tw:gap-2 tw:w-full">
+      <!-- Selected items -->
+      <div
+        class="tw:flex tw:gap-2 tw:overflow-x-auto tw:whitespace-nowrap
+               tw:[scrollbar-width:none] tw:[-ms-overflow-style:none]
+               tw:[&::-webkit-scrollbar]:hidden"
+      >
+        @if (selectedItems().length === 0) {
+          <span
+            class="tw:bg-gray-100 tw:text-gray-400 tw:rounded-full
+                   tw:px-2 tw:py-1 tw:inline-flex tw:items-center tw:text-xs"
+          >
+            {{ placeholder() }}
+          </span>
+        } @else {
+          @for (item of selectedItems(); track item.value) {
+            <span
+              class="tw:bg-gray-200 tw:rounded-full tw:px-2 tw:py-1
+                     tw:inline-flex tw:items-center tw:gap-2 tw:text-xs"
+            >
+              {{ item.label }}
+              <button
+                type="button"
+                (click)="removeItem(item.value)"
+                class="tw:bg-transparent tw:border-0 tw:text-gray-600
+                       tw:hover:text-red-500 tw:cursor-pointer"
+              >
+                ✕
+              </button>
+            </span>
+          }
+        }
+      </div>
+
+      <!-- Autocomplete -->
+      <hlm-autocomplete
+        [filteredOptions]="filteredOptionLabels()"
+        [(search)]="search"
+        (valueChange)="addItemByLabel($event)"
+        [searchPlaceholderText]="this.selectedItems().length.toString() + ' of ' + this.options().length + ' selected'"
+        [onSelect]="handleSelect.bind(this)"
+        [disabled]="isDisabled"
+      />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: HlmAutocomplete, selector: "hlm-autocomplete", inputs: ["onSelect", "class", "autocompleteListClass", "autocompleteEmptyClass", "filteredOptions", "value", "search", "transformValueToSearch", "optionTemplate", "loading", "searchPlaceholderText", "loadingText", "emptyText", "ariaLabelToggleButton", "inputId", "disabled"], outputs: ["valueChange", "searchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgSearchableMultiselect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-searchable-multiselect',
+                    standalone: true,
+                    imports: [HlmAutocomplete],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EgSearchableMultiselect),
+                            multi: true,
+                        },
+                    ],
+                    template: `
+    <div class="tw:flex tw:flex-col tw:gap-2 tw:w-full">
+      <!-- Selected items -->
+      <div
+        class="tw:flex tw:gap-2 tw:overflow-x-auto tw:whitespace-nowrap
+               tw:[scrollbar-width:none] tw:[-ms-overflow-style:none]
+               tw:[&::-webkit-scrollbar]:hidden"
+      >
+        @if (selectedItems().length === 0) {
+          <span
+            class="tw:bg-gray-100 tw:text-gray-400 tw:rounded-full
+                   tw:px-2 tw:py-1 tw:inline-flex tw:items-center tw:text-xs"
+          >
+            {{ placeholder() }}
+          </span>
+        } @else {
+          @for (item of selectedItems(); track item.value) {
+            <span
+              class="tw:bg-gray-200 tw:rounded-full tw:px-2 tw:py-1
+                     tw:inline-flex tw:items-center tw:gap-2 tw:text-xs"
+            >
+              {{ item.label }}
+              <button
+                type="button"
+                (click)="removeItem(item.value)"
+                class="tw:bg-transparent tw:border-0 tw:text-gray-600
+                       tw:hover:text-red-500 tw:cursor-pointer"
+              >
+                ✕
+              </button>
+            </span>
+          }
+        }
+      </div>
+
+      <!-- Autocomplete -->
+      <hlm-autocomplete
+        [filteredOptions]="filteredOptionLabels()"
+        [(search)]="search"
+        (valueChange)="addItemByLabel($event)"
+        [searchPlaceholderText]="this.selectedItems().length.toString() + ' of ' + this.options().length + ' selected'"
+        [onSelect]="handleSelect.bind(this)"
+        [disabled]="isDisabled"
+      />
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of searchable-multiselect
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EgSearchableMultiselect };
+//# sourceMappingURL=searchable-multiselect.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchable-multiselect.mjs","sources":["../../../projects/searchable-multiselect/src/lib/searchable-multiselect.ts","../../../projects/searchable-multiselect/src/public-api.ts","../../../projects/searchable-multiselect/src/searchable-multiselect.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  signal,\n  input,\n  output,\n  viewChild,\n  effect,\n  forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { HlmAutocomplete } from '@egose/shadcn-theme-ng/autocomplete';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\n@Component({\n  selector: 'eg-searchable-multiselect',\n  standalone: true,\n  imports: [HlmAutocomplete],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => EgSearchableMultiselect),\n      multi: true,\n    },\n  ],\n  template: `\n    <div class=\"tw:flex tw:flex-col tw:gap-2 tw:w-full\">\n      <!-- Selected items -->\n      <div\n        class=\"tw:flex tw:gap-2 tw:overflow-x-auto tw:whitespace-nowrap\n               tw:[scrollbar-width:none] tw:[-ms-overflow-style:none]\n               tw:[&::-webkit-scrollbar]:hidden\"\n      >\n        @if (selectedItems().length === 0) {\n          <span\n            class=\"tw:bg-gray-100 tw:text-gray-400 tw:rounded-full\n                   tw:px-2 tw:py-1 tw:inline-flex tw:items-center tw:text-xs\"\n          >\n            {{ placeholder() }}\n          </span>\n        } @else {\n          @for (item of selectedItems(); track item.value) {\n            <span\n              class=\"tw:bg-gray-200 tw:rounded-full tw:px-2 tw:py-1\n                     tw:inline-flex tw:items-center tw:gap-2 tw:text-xs\"\n            >\n              {{ item.label }}\n              <button\n                type=\"button\"\n                (click)=\"removeItem(item.value)\"\n                class=\"tw:bg-transparent tw:border-0 tw:text-gray-600\n                       tw:hover:text-red-500 tw:cursor-pointer\"\n              >\n                ✕\n              </button>\n            </span>\n          }\n        }\n      </div>\n\n      <!-- Autocomplete -->\n      <hlm-autocomplete\n        [filteredOptions]=\"filteredOptionLabels()\"\n        [(search)]=\"search\"\n        (valueChange)=\"addItemByLabel($event)\"\n        [searchPlaceholderText]=\"this.selectedItems().length.toString() + ' of ' + this.options().length + ' selected'\"\n        [onSelect]=\"handleSelect.bind(this)\"\n        [disabled]=\"isDisabled\"\n      />\n    </div>\n  `,\n})\nexport class EgSearchableMultiselect implements ControlValueAccessor {\n  autoComplete = viewChild(HlmAutocomplete);\n\n  /** Full option list with labels/values */\n  options = input<SelectOption[]>([]);\n  placeholder = input<string>('Start typing to add…');\n\n  /** Value: array of selected values (string[]) */\n  value = input<string[]>([]);\n  valueChange = output<string[]>(); // emits string[] of values\n\n  /** Internal state */\n  search = signal<string>('');\n  selectedItems = signal<SelectOption[]>([]); // full objects for display\n  isDisabled = false;\n  private isFormBound = false;\n\n  /** Filtered **labels** for hlm-autocomplete */\n  filteredOptionLabels = computed(\n    () =>\n      (this.options() || [])\n        .filter(\n          (opt) =>\n            opt.label.toLowerCase().includes(this.search().toLowerCase()) &&\n            !this.selectedItems().some((sel) => sel.value === opt.value),\n        )\n        .map((opt) => opt.label), // convert to string[] for hlm-autocomplete\n  );\n\n  /** Form callbacks */\n  private onChange: (value: string[]) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  constructor() {\n    // Sync `value` input to selectedItems for standalone usage\n    effect(() => {\n      if (!this.isFormBound) {\n        this.updateSelectedFromValues(this.value() || []);\n      }\n    });\n  }\n\n  /** Add by label string (from autocomplete) */\n  addItemByLabel(label: string) {\n    const opt = this.options()?.find((o) => o.label === label);\n    if (opt) {\n      this.addItem(opt.value);\n    }\n  }\n\n  /** Add by value string */\n  addItem(value: string) {\n    if (!this.selectedItems().some((sel) => sel.value === value)) {\n      const opt = this.options()?.find((o) => o.value === value);\n      if (!opt) return;\n      const updatedItems = [...this.selectedItems(), opt];\n      this.updateValueFromSelected(updatedItems);\n    }\n  }\n\n  /** Remove by value string */\n  removeItem(value: string) {\n    const updatedItems = this.selectedItems().filter((i) => i.value !== value);\n    this.updateValueFromSelected(updatedItems);\n  }\n\n  /** Clear autocomplete text */\n  clearAutocompleteText() {\n    this.autoComplete()?.clearText();\n\n    if (this.options().length === this.selectedItems().length) {\n      this.autoComplete()?.setPopoverState('closed');\n    }\n  }\n\n  handleSelect(label: string) {\n    this.clearAutocompleteText();\n  }\n\n  /** Map string[] values → full objects */\n  private updateSelectedFromValues(values: string[]) {\n    const opts = this.options() || [];\n    const matched = opts.filter((o) => values.includes(o.value));\n    this.selectedItems.set(matched);\n  }\n\n  /** Map full objects → string[] values and emit */\n  private updateValueFromSelected(items: SelectOption[]) {\n    this.selectedItems.set(items);\n    const values = items.map((i) => i.value);\n    this.valueChange.emit(values);\n    this.onChange(values);\n    this.onTouched();\n  }\n\n  // --- ControlValueAccessor ---\n  writeValue(values: string[] | null): void {\n    this.isFormBound = true;\n    this.updateSelectedFromValues(values || []);\n  }\n\n  registerOnChange(fn: (value: string[]) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.isDisabled = isDisabled;\n  }\n}\n","/*\n * Public API Surface of searchable-multiselect\n */\n\nexport * from './lib/searchable-multiselect';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/searchable-multiselect/index.d.ts

@@ -0,0 +1,50 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { HlmAutocomplete } from '@egose/shadcn-theme-ng/autocomplete';
+
+interface SelectOption {
+    label: string;
+    value: string;
+}
+declare class EgSearchableMultiselect implements ControlValueAccessor {
+    autoComplete: _angular_core.Signal<HlmAutocomplete<any> | undefined>;
+    /** Full option list with labels/values */
+    options: _angular_core.InputSignal<SelectOption[]>;
+    placeholder: _angular_core.InputSignal<string>;
+    /** Value: array of selected values (string[]) */
+    value: _angular_core.InputSignal<string[]>;
+    valueChange: _angular_core.OutputEmitterRef<string[]>;
+    /** Internal state */
+    search: _angular_core.WritableSignal<string>;
+    selectedItems: _angular_core.WritableSignal<SelectOption[]>;
+    isDisabled: boolean;
+    private isFormBound;
+    /** Filtered **labels** for hlm-autocomplete */
+    filteredOptionLabels: _angular_core.Signal<string[]>;
+    /** Form callbacks */
+    private onChange;
+    private onTouched;
+    constructor();
+    /** Add by label string (from autocomplete) */
+    addItemByLabel(label: string): void;
+    /** Add by value string */
+    addItem(value: string): void;
+    /** Remove by value string */
+    removeItem(value: string): void;
+    /** Clear autocomplete text */
+    clearAutocompleteText(): void;
+    handleSelect(label: string): void;
+    /** Map string[] values → full objects */
+    private updateSelectedFromValues;
+    /** Map full objects → string[] values and emit */
+    private updateValueFromSelected;
+    writeValue(values: string[] | null): void;
+    registerOnChange(fn: (value: string[]) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgSearchableMultiselect, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgSearchableMultiselect, "eg-searchable-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+export { EgSearchableMultiselect };
+export type { SelectOption };

package/select/fesm2022/select.mjs

@@ -12,10 +12,10 @@ import { cva } from 'class-variance-authority';
 class HlmSelect {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     _computedClass = computed(() => hlm('tw:space-y-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: HlmSelect, isStandalone: true, selector: "hlm-select, brn-select [hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelect, isStandalone: true, selector: "hlm-select, brn-select [hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelect, decorators: [{
             type: Directive,
             args: [{
                     selector: 'hlm-select, brn-select [hlm]',
@@ -33,10 +33,10 @@ class HlmSelectContent {
     _stateProvider = injectExposesStateProvider({ optional: true });
     _sideProvider = injectExposedSideProvider({ optional: true });
     _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:z-50 tw:w-full tw:min-w-[8rem] tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-md tw:data-[side=bottom]:top-[2px] tw:data-[side=top]:bottom-[2px]', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: HlmSelectContent, isStandalone: true, selector: "[hlmSelectContent], hlm-select-content", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, stickyLabels: { classPropertyName: "stickyLabels", publicName: "stickyLabels", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.data-state": "_stateProvider?.state() ?? \"open\"", "attr.data-side": "_sideProvider?.side() ?? \"bottom\"" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectContent, isStandalone: true, selector: "[hlmSelectContent], hlm-select-content", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, stickyLabels: { classPropertyName: "stickyLabels", publicName: "stickyLabels", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.data-state": "_stateProvider?.state() ?? \"open\"", "attr.data-side": "_sideProvider?.side() ?? \"bottom\"" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmSelectContent], hlm-select-content',
@@ -51,10 +51,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 class HlmSelectGroup {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     _computedClass = computed(() => hlm(this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: HlmSelectGroup, isStandalone: true, selector: "[hlmSelectGroup], hlm-select-group", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnSelectGroup }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectGroup, isStandalone: true, selector: "[hlmSelectGroup], hlm-select-group", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnSelectGroup }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmSelectGroup], hlm-select-group',
@@ -70,10 +70,10 @@ class HlmSelectLabel {
     _stickyLabels = computed(() => this._selectContent.stickyLabels(), ...(ngDevMode ? [{ debugName: "_stickyLabels" }] : []));
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     _computedClass = computed(() => hlm('tw:text-muted-foreground tw:px-2 tw:py-1.5 tw:text-xs', this._stickyLabels() ? 'tw:bg-popover tw:sticky tw:top-0 tw:z-[2] tw:block' : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: HlmSelectLabel, isStandalone: true, selector: "[hlmSelectLabel], hlm-select-label", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnSelectLabel }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectLabel, isStandalone: true, selector: "[hlmSelectLabel], hlm-select-label", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnSelectLabel }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmSelectLabel], hlm-select-label',
@@ -88,8 +88,8 @@ class HlmSelectOption {
     _brnSelectOption = inject(BrnSelectOption, { host: true });
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     _computedClass = computed(() => hlm('tw:data-[active]:bg-accent tw:data-[active]:text-accent-foreground tw:[&>ng-icon]:text-muted-foreground tw:*:[span]:last:flex tw:*:[span]:last:items-center tw:*:[span]:last:gap-2 tw:relative tw:flex tw:w-full tw:cursor-default tw:select-none tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pl-2 tw:pr-8 tw:text-sm tw:outline-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50 tw:[&>ng-icon]:pointer-events-none tw:[&>ng-icon]:size-4 tw:[&>ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: HlmSelectOption, isStandalone: true, selector: "hlm-option", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideCheck })], hostDirectives: [{ directive: i1.BrnSelectOption, inputs: ["disabled", "disabled", "value", "value"] }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmSelectOption, isStandalone: true, selector: "hlm-option", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideCheck })], hostDirectives: [{ directive: i1.BrnSelectOption, inputs: ["disabled", "disabled", "value", "value"] }], ngImport: i0, template: `
     <span class="tw:absolute tw:right-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center">
       @if (this._brnSelectOption.selected()) {
         <ng-icon hlm size="sm" aria-hidden="true" name="lucideCheck" />
@@ -99,7 +99,7 @@ class HlmSelectOption {
     <ng-content />
   `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectOption, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-option',
@@ -125,10 +125,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 class HlmSelectScrollDown {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     _computedClass = computed(() => hlm('tw:flex cursor-default tw:items-center tw:justify-center tw:py-1', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectScrollDown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: HlmSelectScrollDown, isStandalone: true, selector: "hlm-select-scroll-down", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronDown })], ngImport: i0, template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronDown" /> `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollDown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectScrollDown, isStandalone: true, selector: "hlm-select-scroll-down", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronDown })], ngImport: i0, template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronDown" /> `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectScrollDown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollDown, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-select-scroll-down',
@@ -145,10 +145,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 class HlmSelectScrollUp {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     _computedClass = computed(() => hlm('tw:flex tw:cursor-default tw:items-center tw:justify-center tw:py-1', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectScrollUp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: HlmSelectScrollUp, isStandalone: true, selector: "hlm-select-scroll-up", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronUp })], ngImport: i0, template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronUp" /> `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollUp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectScrollUp, isStandalone: true, selector: "hlm-select-scroll-up", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronUp })], ngImport: i0, template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronUp" /> `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectScrollUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollUp, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-select-scroll-up',
@@ -179,8 +179,8 @@ class HlmSelectTrigger {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
     _computedClass = computed(() => hlm(selectTriggerVariants({ error: this._brnSelect?.errorState() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: HlmSelectTrigger, isStandalone: true, selector: "hlm-select-trigger", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideChevronDown })], queries: [{ propertyName: "_icon", first: true, predicate: HlmIcon, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmSelectTrigger, isStandalone: true, selector: "hlm-select-trigger", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideChevronDown })], queries: [{ propertyName: "_icon", first: true, predicate: HlmIcon, descendants: true, isSignal: true }], ngImport: i0, template: `
     <button [class]="_computedClass()" #button egInput brnSelectTrigger type="button" [attr.data-size]="size()">
       <ng-content />
       @if (_icon()) {
@@ -191,7 +191,7 @@ class HlmSelectTrigger {
     </button>
   `, isInline: true, dependencies: [{ kind: "directive", type: BrnSelectTrigger, selector: "[brnSelectTrigger]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectTrigger, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-select-trigger',
@@ -214,10 +214,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 class HlmSelectValue {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     _computedClass = computed(() => hlm('tw:data-[placeholder]:text-muted-foreground tw:line-clamp-1 tw:flex tw:items-center tw:gap-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: HlmSelectValue, isStandalone: true, selector: "hlm-select-value,[hlmSelectValue], brn-select-value[hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectValue, isStandalone: true, selector: "hlm-select-value,[hlmSelectValue], brn-select-value[hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectValue, decorators: [{
             type: Directive,
             args: [{
                     selector: 'hlm-select-value,[hlmSelectValue], brn-select-value[hlm]',
@@ -242,8 +242,8 @@ const HlmSelectImports = [
     HlmSelectGroup,
 ];
 class HlmSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectModule, imports: [HlmSelectContent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectModule, imports: [HlmSelectContent,
             HlmSelectTrigger,
             HlmSelectOption,
             HlmSelectValue,
@@ -260,12 +260,12 @@ class HlmSelectModule {
             HlmSelectScrollDown,
             HlmSelectLabel,
             HlmSelectGroup] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectModule, imports: [HlmSelectTrigger,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectModule, imports: [HlmSelectTrigger,
             HlmSelectOption,
             HlmSelectScrollUp,
             HlmSelectScrollDown] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HlmSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmSelectImports],

package/separator/README.md

@@ -0,0 +1,64 @@
+# Separator
+
+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 separator
+```
+
+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/separator
+   ```
+
+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/separator/fesm2022/separator.mjs

@@ -0,0 +1,46 @@
+import * as i0 from '@angular/core';
+import { input, computed, Directive, NgModule } from '@angular/core';
+import * as i1 from '@spartan-ng/brain/separator';
+import { BrnSeparator } from '@spartan-ng/brain/separator';
+import { hlm } from '@egose/shadcn-theme-ng/utils';
+
+class HlmSeparator {
+    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
+    _computedClass = computed(() => hlm('tw:bg-border tw:inline-flex tw:shrink-0 tw:data-[orientation=horizontal]:h-px tw:data-[orientation=vertical]:h-full tw:data-[orientation=horizontal]:w-full tw:data-[orientation=vertical]:w-px', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSeparator, isStandalone: true, selector: "[hlmSeparator],hlm-separator", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnSeparator, inputs: ["orientation", "orientation", "decorative", "decorative"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmSeparator],hlm-separator',
+                    hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }] });
+
+/*
+ * Public API Surface of separator
+ */
+const HlmSeparatorImports = [HlmSeparator];
+class HlmSeparatorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSeparatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: HlmSeparatorModule, imports: [HlmSeparator], exports: [HlmSeparator] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSeparatorModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSeparatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmSeparatorImports],
+                    exports: [...HlmSeparatorImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HlmSeparator, HlmSeparatorImports, HlmSeparatorModule };
+//# sourceMappingURL=separator.mjs.map

package/separator/fesm2022/separator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.mjs","sources":["../../../projects/separator/src/lib/separator.ts","../../../projects/separator/src/public-api.ts","../../../projects/separator/src/separator.ts"],"sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { BrnSeparator } from '@spartan-ng/brain/separator';\nimport { hlm } from '@egose/shadcn-theme-ng/utils';\nimport type { ClassValue } from 'clsx';\n\n@Directive({\n  selector: '[hlmSeparator],hlm-separator',\n  hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],\n  host: {\n    '[class]': '_computedClass()',\n  },\n})\nexport class HlmSeparator {\n  public readonly userClass = input<ClassValue>('', { alias: 'class' });\n  protected _computedClass = computed(() =>\n    hlm(\n      'tw:bg-border tw:inline-flex tw:shrink-0 tw:data-[orientation=horizontal]:h-px tw:data-[orientation=vertical]:h-full tw:data-[orientation=horizontal]:w-full tw:data-[orientation=vertical]:w-px',\n      this.userClass(),\n    ),\n  );\n}\n","/*\n * Public API Surface of separator\n */\n\nimport { NgModule } from '@angular/core';\nimport { HlmSeparator } from './lib/separator';\n\nexport * from './lib/separator';\n\nexport const HlmSeparatorImports = [HlmSeparator] as const;\n\n@NgModule({\n  imports: [...HlmSeparatorImports],\n  exports: [...HlmSeparatorImports],\n})\nexport class HlmSeparatorModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAYa,YAAY,CAAA;AACP,IAAA,SAAS,GAAG,KAAK,CAAa,EAAE,6CAAI,KAAK,EAAE,OAAO,EAAA,CAAA,GAAA,CAAhB,EAAE,KAAK,EAAE,OAAO,EAAE,GAAC;AAC3D,IAAA,cAAc,GAAG,QAAQ,CAAC,MAClC,GAAG,CACD,iMAAiM,EACjM,IAAI,CAAC,SAAS,EAAE,CACjB,0DACF;uGAPU,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,YAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,aAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAPxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,8BAA8B;AACxC,oBAAA,cAAc,EAAE,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC,EAAE,CAAC;AACpF,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,kBAAkB;AAC9B,qBAAA;AACF,iBAAA;;;ACXD;;AAEG;AAOI,MAAM,mBAAmB,GAAG,CAAC,YAAY;MAMnC,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAlB,kBAAkB,EAAA,OAAA,EAAA,CANK,YAAY,CAAA,EAAA,OAAA,EAAA,CAAZ,YAAY,CAAA,EAAA,CAAA;wGAMnC,kBAAkB,EAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,GAAG,mBAAmB,CAAC;AACjC,oBAAA,OAAO,EAAE,CAAC,GAAG,mBAAmB,CAAC;AAClC,iBAAA;;;ACdD;;AAEG;;;;"}

package/separator/index.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from '@angular/core';
+import { ClassValue } from 'clsx';
+import * as i1 from '@spartan-ng/brain/separator';
+
+declare class HlmSeparator {
+    readonly userClass: i0.InputSignal<ClassValue>;
+    protected _computedClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmSeparator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmSeparator, "[hlmSeparator],hlm-separator", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnSeparator; inputs: { "orientation": "orientation"; "decorative": "decorative"; }; outputs: {}; }]>;
+}
+
+declare const HlmSeparatorImports: readonly [typeof HlmSeparator];
+declare class HlmSeparatorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmSeparatorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmSeparatorModule, never, [typeof HlmSeparator], [typeof HlmSeparator]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<HlmSeparatorModule>;
+}
+
+export { HlmSeparator, HlmSeparatorImports, HlmSeparatorModule };