@egose/shadcn-theme-ng 0.5.3 → 0.6.1

package/input-otp/fesm2022/input-otp.mjs

@@ -1,9 +1,12 @@
 import * as i0 from '@angular/core';
-import { Directive, ChangeDetectionStrategy, Component, input, numberAttribute, NgModule } from '@angular/core';
+import { Directive, input, booleanAttribute, forwardRef, ChangeDetectionStrategy, Component, inject, computed, numberAttribute, NgModule } from '@angular/core';
 import { classes } from '@egose/shadcn-theme-ng/utils';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@spartan-ng/brain/field';
+import { BrnFieldControlDescribedBy, provideBrnLabelable, BrnFieldControl } from '@spartan-ng/brain/field';
+import { BrnInputOtp, BrnInputOtpSlot } from '@spartan-ng/brain/input-otp';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideMinus } from '@ng-icons/lucide';
-import { BrnInputOtpSlot } from '@spartan-ng/brain/input-otp';
 
 class HlmInputOtp {
     constructor() {
@@ -20,6 +23,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * BrnInputOtp's CVA and editing behavior with declarative native-input ARIA forwarding.
+ * Use with HlmInputOtpSlot; the legacy brn-input-otp skin remains available.
+ */
+class HlmInputOtpControl extends BrnInputOtp {
+    /** Native input description IDs, merged with enclosing Spartan field descriptions. */
+    ariaDescribedBy = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInputOtpControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmInputOtpControl, isStandalone: true, selector: "hlm-input-otp", inputs: { ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: BrnInputOtp, useExisting: forwardRef(() => HlmInputOtpControl) },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => HlmInputOtpControl), multi: true },
+            provideBrnLabelable(HlmInputOtpControl),
+        ], usesInheritance: true, hostDirectives: [{ directive: i1.BrnFieldControl }, { directive: HlmInputOtp }], ngImport: i0, template: `
+    <ng-content />
+    <div [style]="containerStyles()">
+      <input
+        #otpInput
+        data-slot="input-otp"
+        [id]="inputId()"
+        [class]="inputClass()"
+        [autocomplete]="inputAutocomplete()"
+        [style]="inputStyles()"
+        [disabled]="_disabled()"
+        [inputMode]="inputMode()"
+        [value]="value() ?? ''"
+        brnFieldControlDescribedBy
+        [aria-describedby]="ariaDescribedBy()"
+        [attr.aria-required]="required() || null"
+        [attr.aria-invalid]="invalid?.() ? 'true' : null"
+        (input)="onInputChange($event)"
+        (paste)="onPaste($event)"
+        (focus)="_focused.set(true)"
+        (blur)="onBlur()"
+      />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: BrnFieldControlDescribedBy, selector: "[brnFieldControlDescribedBy]", inputs: ["aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInputOtpControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-input-otp',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [BrnFieldControlDescribedBy],
+                    hostDirectives: [BrnFieldControl, HlmInputOtp],
+                    providers: [
+                        { provide: BrnInputOtp, useExisting: forwardRef(() => HlmInputOtpControl) },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => HlmInputOtpControl), multi: true },
+                        provideBrnLabelable(HlmInputOtpControl),
+                    ],
+                    template: `
+    <ng-content />
+    <div [style]="containerStyles()">
+      <input
+        #otpInput
+        data-slot="input-otp"
+        [id]="inputId()"
+        [class]="inputClass()"
+        [autocomplete]="inputAutocomplete()"
+        [style]="inputStyles()"
+        [disabled]="_disabled()"
+        [inputMode]="inputMode()"
+        [value]="value() ?? ''"
+        brnFieldControlDescribedBy
+        [aria-describedby]="ariaDescribedBy()"
+        [attr.aria-required]="required() || null"
+        [attr.aria-invalid]="invalid?.() ? 'true' : null"
+        (input)="onInputChange($event)"
+        (paste)="onPaste($event)"
+        (focus)="_focused.set(true)"
+        (blur)="onBlur()"
+      />
+    </div>
+  `,
+                }]
+        }], propDecorators: { ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
+
 class HlmInputOtpFakeCaret {
     constructor() {
         classes(() => "pointer-events-none absolute inset-0 flex items-center justify-center");
@@ -74,16 +154,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
         }], ctorParameters: () => [] });
 
 class HlmInputOtpSlot {
+    _control = inject(HlmInputOtpControl, { optional: true });
+    _slot = computed(() => this._control?.context()[this.index()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_slot" }] : /* istanbul ignore next */ []));
     /** The index of the slot to render the char or a fake caret */
     index = input.required({ ...(ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     constructor() {
-        classes(() => "dark:bg-input/30 border-input has-[brn-input-otp-slot[data-active=\"true\"]]:border-ring has-[brn-input-otp-slot[data-active=\"true\"]]:ring-ring/50 has-[brn-input-otp-slot[data-active=\"true\"]]:data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active=\"true\"]]:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active=\"true\"]]:data-[matches-spartan-invalid=true]:border-destructive size-9 border-y border-e text-sm shadow-xs transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md has-[brn-input-otp-slot[data-active=\"true\"]]:ring-3 relative flex items-center justify-center has-[brn-input-otp-slot[data-active=\"true\"]]:z-10");
+        classes(() => "dark:bg-input/30 border-input has-[[data-active=\"true\"]]:border-ring has-[[data-active=\"true\"]]:ring-ring/50 has-[[data-active=\"true\"]]:data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[[data-active=\"true\"]]:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive has-[[data-active=\"true\"]]:data-[matches-spartan-invalid=true]:border-destructive size-9 border-y border-e text-sm shadow-xs transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md has-[[data-active=\"true\"]]:ring-3 relative flex items-center justify-center has-[[data-active=\"true\"]]:z-10");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInputOtpSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmInputOtpSlot, isStandalone: true, selector: "hlm-input-otp-slot", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "input-otp-slot" } }, ngImport: i0, template: `
-    <brn-input-otp-slot [index]="index()">
-      <hlm-input-otp-fake-caret />
-    </brn-input-otp-slot>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmInputOtpSlot, isStandalone: true, selector: "hlm-input-otp-slot", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "input-otp-slot" } }, ngImport: i0, template: `
+    @if (_control) {
+      <span
+        [attr.data-active]="_slot()?.isActive"
+        [attr.data-invalid]="_control.invalid?.() ? 'true' : null"
+        [attr.data-touched]="_control.touched?.() ? 'true' : null"
+        [attr.data-dirty]="_control.dirty?.() ? 'true' : null"
+        [attr.data-matches-spartan-invalid]="_control.spartanInvalid?.() ? 'true' : null"
+      >
+        {{ _slot()?.char }}
+        @if (_slot()?.hasFakeCaret) {
+          <hlm-input-otp-fake-caret />
+        }
+      </span>
+    } @else {
+      <brn-input-otp-slot [index]="index()">
+        <hlm-input-otp-fake-caret />
+      </brn-input-otp-slot>
+    }
   `, isInline: true, dependencies: [{ kind: "component", type: BrnInputOtpSlot, selector: "brn-input-otp-slot", inputs: ["index", "forceInvalid"] }, { kind: "component", type: HlmInputOtpFakeCaret, selector: "hlm-input-otp-fake-caret" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInputOtpSlot, decorators: [{
@@ -94,9 +192,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { 'data-slot': 'input-otp-slot' },
                     template: `
-    <brn-input-otp-slot [index]="index()">
-      <hlm-input-otp-fake-caret />
-    </brn-input-otp-slot>
+    @if (_control) {
+      <span
+        [attr.data-active]="_slot()?.isActive"
+        [attr.data-invalid]="_control.invalid?.() ? 'true' : null"
+        [attr.data-touched]="_control.touched?.() ? 'true' : null"
+        [attr.data-dirty]="_control.dirty?.() ? 'true' : null"
+        [attr.data-matches-spartan-invalid]="_control.spartanInvalid?.() ? 'true' : null"
+      >
+        {{ _slot()?.char }}
+        @if (_slot()?.hasFakeCaret) {
+          <hlm-input-otp-fake-caret />
+        }
+      </span>
+    } @else {
+      <brn-input-otp-slot [index]="index()">
+        <hlm-input-otp-fake-caret />
+      </brn-input-otp-slot>
+    }
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }] } });
@@ -106,6 +219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
  */
 const HlmInputOtpImports = [
     HlmInputOtp,
+    HlmInputOtpControl,
     HlmInputOtpGroup,
     HlmInputOtpSeparator,
     HlmInputOtpSlot,
@@ -114,10 +228,12 @@ const HlmInputOtpImports = [
 class HlmInputOtpModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInputOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmInputOtpModule, imports: [HlmInputOtp,
+            HlmInputOtpControl,
             HlmInputOtpGroup,
             HlmInputOtpSeparator,
             HlmInputOtpSlot,
             HlmInputOtpFakeCaret], exports: [HlmInputOtp,
+            HlmInputOtpControl,
             HlmInputOtpGroup,
             HlmInputOtpSeparator,
             HlmInputOtpSlot,
@@ -137,5 +253,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { HlmInputOtp, HlmInputOtpFakeCaret, HlmInputOtpGroup, HlmInputOtpImports, HlmInputOtpModule, HlmInputOtpSeparator, HlmInputOtpSlot };
+export { HlmInputOtp, HlmInputOtpControl, HlmInputOtpFakeCaret, HlmInputOtpGroup, HlmInputOtpImports, HlmInputOtpModule, HlmInputOtpSeparator, HlmInputOtpSlot };
 

package/input-otp/types/input-otp.d.ts

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
-import { NumberInput } from '@angular/cdk/coercion';
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
+import * as i1 from '@spartan-ng/brain/field';
 
 declare class HlmInputOtp {
     constructor();
@@ -7,6 +9,18 @@ declare class HlmInputOtp {
     static ɵdir: i0.ɵɵDirectiveDeclaration<HlmInputOtp, "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * BrnInputOtp's CVA and editing behavior with declarative native-input ARIA forwarding.
+ * Use with HlmInputOtpSlot; the legacy brn-input-otp skin remains available.
+ */
+declare class HlmInputOtpControl extends BrnInputOtp {
+    /** Native input description IDs, merged with enclosing Spartan field descriptions. */
+    readonly ariaDescribedBy: i0.InputSignal<string | null>;
+    readonly required: i0.InputSignalWithTransform<boolean, BooleanInput>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmInputOtpControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmInputOtpControl, "hlm-input-otp", never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.BrnFieldControl; inputs: {}; outputs: {}; }, { directive: typeof HlmInputOtp; inputs: {}; outputs: {}; }]>;
+}
+
 declare class HlmInputOtpFakeCaret {
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmInputOtpFakeCaret, never>;
@@ -26,6 +40,12 @@ declare class HlmInputOtpSeparator {
 }
 
 declare class HlmInputOtpSlot {
+    protected readonly _control: HlmInputOtpControl | null;
+    protected readonly _slot: i0.Signal<{
+        char: string | null;
+        isActive: boolean;
+        hasFakeCaret: boolean;
+    } | undefined>;
     /** The index of the slot to render the char or a fake caret */
     readonly index: i0.InputSignalWithTransform<number, NumberInput>;
     constructor();
@@ -33,11 +53,11 @@ declare class HlmInputOtpSlot {
     static ɵcmp: i0.ɵɵComponentDeclaration<HlmInputOtpSlot, "hlm-input-otp-slot", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare const HlmInputOtpImports: readonly [typeof HlmInputOtp, typeof HlmInputOtpGroup, typeof HlmInputOtpSeparator, typeof HlmInputOtpSlot, typeof HlmInputOtpFakeCaret];
+declare const HlmInputOtpImports: readonly [typeof HlmInputOtp, typeof HlmInputOtpControl, typeof HlmInputOtpGroup, typeof HlmInputOtpSeparator, typeof HlmInputOtpSlot, typeof HlmInputOtpFakeCaret];
 declare class HlmInputOtpModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmInputOtpModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmInputOtpModule, never, [typeof HlmInputOtp, typeof HlmInputOtpGroup, typeof HlmInputOtpSeparator, typeof HlmInputOtpSlot, typeof HlmInputOtpFakeCaret], [typeof HlmInputOtp, typeof HlmInputOtpGroup, typeof HlmInputOtpSeparator, typeof HlmInputOtpSlot, typeof HlmInputOtpFakeCaret]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmInputOtpModule, never, [typeof HlmInputOtp, typeof HlmInputOtpControl, typeof HlmInputOtpGroup, typeof HlmInputOtpSeparator, typeof HlmInputOtpSlot, typeof HlmInputOtpFakeCaret], [typeof HlmInputOtp, typeof HlmInputOtpControl, typeof HlmInputOtpGroup, typeof HlmInputOtpSeparator, typeof HlmInputOtpSlot, typeof HlmInputOtpFakeCaret]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<HlmInputOtpModule>;
 }
 
-export { HlmInputOtp, HlmInputOtpFakeCaret, HlmInputOtpGroup, HlmInputOtpImports, HlmInputOtpModule, HlmInputOtpSeparator, HlmInputOtpSlot };
+export { HlmInputOtp, HlmInputOtpControl, HlmInputOtpFakeCaret, HlmInputOtpGroup, HlmInputOtpImports, HlmInputOtpModule, HlmInputOtpSeparator, HlmInputOtpSlot };

package/layout-simple/fesm2022/layout-simple.mjs

@@ -169,7 +169,7 @@ class EgLayoutSearch {
             buttons[Math.min(index, buttons.length - 1)]?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgLayoutSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgLayoutSearch, isStandalone: true, selector: "eg-layout-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, retryText: { classPropertyName: "retryText", publicName: "retryText", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, resultLabel: { classPropertyName: "resultLabel", publicName: "resultLabel", isSignal: true, isRequired: false, transformFunction: null }, resultTemplate: { classPropertyName: "resultTemplate", publicName: "resultTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resultSelected: "resultSelected" }, host: { classAttribute: "block min-w-0" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "resultButtons", predicate: ["resultButton"], descendants: true, isSignal: true }], ngImport: i0, template: "\n    <hlm-popover\n      [state]=\"isOpen() ? 'open' : 'closed'\"\n      (stateChanged)=\"setOpen($event === 'open')\"\n      (closed)=\"setOpen(false)\"\n    >\n      <button\n        hlmPopoverTrigger\n        type=\"button\"\n        class=\"flex min-h-11 w-full items-center gap-2 rounded-lg border border-border bg-foreground/3 px-3 text-left text-sm text-foreground/75 cursor-pointer hover:bg-foreground/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring md:w-56\"\n      >\n        <ng-icon [svg]=\"searchIcon\" size=\"16px\" aria-hidden=\"true\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ placeholder() }}</span>\n      </button>\n      <hlm-popover-content *hlmPopoverPortal class=\"w-80 max-w-[calc(100vw-2rem)] p-2\">\n        <input\n          #searchInput\n          hlmInput\n          type=\"search\"\n          autocomplete=\"off\"\n          [value]=\"query()\"\n          (input)=\"query.set($any($event.target).value)\"\n          [placeholder]=\"placeholder()\"\n          [attr.aria-label]=\"placeholder()\"\n          (keydown.arrowdown)=\"focusResult(0, $event)\"\n          class=\"mb-2 min-h-11\"\n        />\n        <div [attr.aria-busy]=\"isLoading()\" class=\"max-h-72 overflow-y-auto overscroll-contain\">\n          @if (isLoading()) {\n            <p role=\"status\" class=\"px-3 py-6 text-center text-sm text-foreground/75\">\n              {{ loadingText() }}\n            </p>\n          } @else if (hasError()) {\n            <div role=\"status\" class=\"space-y-3 px-3 py-4 text-sm\">\n              <p>{{ errorText() }}</p>\n              <button\n                type=\"button\"\n                (click)=\"retry()\"\n                class=\"min-h-11 rounded-md border border-border px-3 font-medium cursor-pointer focus-visible:outline-2 focus-visible:outline-ring\"\n              >\n                {{ retryText() }}\n              </button>\n            </div>\n          } @else if (!results().length) {\n            <p role=\"status\" class=\"px-3 py-6 text-center text-sm text-foreground/75\">\n              {{ emptyText() }}\n            </p>\n          } @else {\n            @for (result of results(); track $index; let index = $index) {\n              <button\n                #resultButton\n                type=\"button\"\n                (click)=\"selectResult(result)\"\n                (keydown.arrowdown)=\"focusResult(index + 1, $event)\"\n                (keydown.arrowup)=\"focusResult(index - 1, $event)\"\n                (keydown.home)=\"focusResult(0, $event)\"\n                (keydown.end)=\"focusResult(results().length - 1, $event)\"\n                class=\"flex min-h-11 w-full items-center rounded-md px-3 py-2 text-left text-sm cursor-pointer hover:bg-foreground/5 focus-visible:bg-foreground/10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n              >\n                @if (resultTemplate(); as template) {\n                  <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: result }\" />\n                } @else {\n                  {{ labelFor(result) }}\n                }\n              </button>\n            }\n          }\n        </div>\n      </hlm-popover-content>\n    </hlm-popover>\n  ", isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgLayoutSearch, isStandalone: true, selector: "eg-layout-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, retryText: { classPropertyName: "retryText", publicName: "retryText", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, resultLabel: { classPropertyName: "resultLabel", publicName: "resultLabel", isSignal: true, isRequired: false, transformFunction: null }, resultTemplate: { classPropertyName: "resultTemplate", publicName: "resultTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resultSelected: "resultSelected" }, host: { classAttribute: "block min-w-0" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "resultButtons", predicate: ["resultButton"], descendants: true, isSignal: true }], ngImport: i0, template: "\n    <hlm-popover\n      [state]=\"isOpen() ? 'open' : 'closed'\"\n      (stateChanged)=\"setOpen($event === 'open')\"\n      (closed)=\"setOpen(false)\"\n    >\n      <button\n        hlmPopoverTrigger\n        type=\"button\"\n        class=\"flex min-h-11 w-full items-center gap-2 rounded-lg border border-border bg-foreground/3 px-3 text-left text-sm text-foreground/75 cursor-pointer hover:bg-foreground/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring md:w-56\"\n      >\n        <ng-icon [svg]=\"searchIcon\" size=\"16px\" aria-hidden=\"true\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ placeholder() }}</span>\n      </button>\n      <hlm-popover-content *hlmPopoverPortal class=\"w-80 max-w-[calc(100vw-2rem)] p-2\">\n        <input\n          #searchInput\n          hlmInput\n          type=\"search\"\n          autocomplete=\"off\"\n          [value]=\"query()\"\n          (input)=\"query.set($any($event.target).value)\"\n          [placeholder]=\"placeholder()\"\n          [attr.aria-label]=\"placeholder()\"\n          (keydown.arrowdown)=\"focusResult(0, $event)\"\n          class=\"mb-2 min-h-11\"\n        />\n        <div [attr.aria-busy]=\"isLoading()\" class=\"max-h-72 overflow-y-auto overscroll-contain\">\n          @if (isLoading()) {\n            <p role=\"status\" class=\"px-3 py-6 text-center text-sm text-foreground/75\">\n              {{ loadingText() }}\n            </p>\n          } @else if (hasError()) {\n            <div role=\"status\" class=\"space-y-3 px-3 py-4 text-sm\">\n              <p>{{ errorText() }}</p>\n              <button\n                type=\"button\"\n                (click)=\"retry()\"\n                class=\"min-h-11 rounded-md border border-border px-3 font-medium cursor-pointer focus-visible:outline-2 focus-visible:outline-ring\"\n              >\n                {{ retryText() }}\n              </button>\n            </div>\n          } @else if (!results().length) {\n            <p role=\"status\" class=\"px-3 py-6 text-center text-sm text-foreground/75\">\n              {{ emptyText() }}\n            </p>\n          } @else {\n            @for (result of results(); track $index; let index = $index) {\n              <button\n                #resultButton\n                type=\"button\"\n                (click)=\"selectResult(result)\"\n                (keydown.arrowdown)=\"focusResult(index + 1, $event)\"\n                (keydown.arrowup)=\"focusResult(index - 1, $event)\"\n                (keydown.home)=\"focusResult(0, $event)\"\n                (keydown.end)=\"focusResult(results().length - 1, $event)\"\n                class=\"flex min-h-11 w-full items-center rounded-md px-3 py-2 text-left text-sm cursor-pointer hover:bg-foreground/5 focus-visible:bg-foreground/10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n              >\n                @if (resultTemplate(); as template) {\n                  <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: result }\" />\n                } @else {\n                  {{ labelFor(result) }}\n                }\n              </button>\n            }\n          }\n        </div>\n      </hlm-popover-content>\n    </hlm-popover>\n  ", isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby", "size"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgLayoutSearch, decorators: [{
             type: Component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egose/shadcn-theme-ng",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "description": "Angular shadcn UI theme",
   "author": "Junmin Ahn",
   "bundles": [
@@ -31,6 +31,7 @@
     "@angular/router": ">=22.0.0 <23.0.0",
     "@ng-icons/core": ">=35.0.1 <36.0.0",
     "@spartan-ng/brain": ">=1.3.2 <2.0.0",
+    "@tanstack/angular-table": ">=9.1.2 <10.0.0",
     "rxjs": ">=7.8.0 <8.0.0"
   },
   "files": [
@@ -126,6 +127,10 @@
       "types": "./context-menu/types/context-menu.d.ts",
       "default": "./context-menu/fesm2022/context-menu.mjs"
     },
+    "./data-table": {
+      "types": "./data-table/types/data-table.d.ts",
+      "default": "./data-table/fesm2022/data-table.mjs"
+    },
     "./date-picker": {
       "types": "./date-picker/types/date-picker.d.ts",
       "default": "./date-picker/fesm2022/date-picker.mjs"

package/pagination/README.md

@@ -144,12 +144,21 @@ For the `tw:` build, swap the specifier to `@egose/shadcn-theme-ng-tw/pagination
 | `currentPage`  | **model (required)** | `number`                                     | Two-way: `[(currentPage)]`. Clicks set it; out-of-range values are auto-corrected via `outOfBoundCorrection` |
 | `itemsPerPage` | **model (required)** | `number`                                     | Two-way: `[(itemsPerPage)]`, bound to the page-size `hlm-select`                                             |
 | `totalItems`   | input (required)     | `number` (number coercion)                   | Server or client total; `0`/negative collapses to a single empty page                                        |
-| `maxSize`      | input                | `number`, default `7` (number coercion)      | Max page links in the window (ellipsis logic from `ngx-pagination`)                                          |
+| `maxSize`      | input                | `number`, default `7` (number coercion)      | Window entries including ellipses; floored and bounded to 1–100; invalid/non-positive uses 7                 |
 | `showEdges`    | input                | `boolean`, default `true` (boolean coercion) | Shows prev/next edge buttons (hidden on first/last page respectively)                                        |
 | `pageSizes`    | input                | `number[]`, default `[10, 20, 50, 100]`      | Page-size menu; the current size is merged in + sorted if missing                                            |
 
 Layout: `flex justify-between` row — left count summary (`<b>total</b> total items | <b>pages</b> pages`), center pager, right `hlm-select` page-size picker. Previous/next are plain click handlers (`goToPrevious/goToNext`); page links set `currentPage` directly without routing.
 
+#### Normalization and numeric limits (both numbered pagers)
+
+- Page count is `ceil(totalItems / itemsPerPage)`, at least 1 and at most `Number.MAX_SAFE_INTEGER`. Finite positive fractional totals/sizes retain that division behavior, including sizes below 1. Overflowing positive division saturates at the safe-integer page limit.
+- Empty, negative or non-finite totals use one page. Non-positive or non-finite sizes (`0`, negative, `NaN`, `Infinity`) also use one page, **without rewriting `itemsPerPage`**. Supply a finite positive size to resume paging. The models are numeric; template number attributes such as `totalItems` and `maxSize` are coerced by Angular.
+- Finite `currentPage` values are floored and clamped to `[1, lastPage]`; non-finite values become 1. Changes to totals, size or the external page are reconciled by an effect, emitting `currentPageChange` once per correction. Valid models emit nothing. Bind `[(currentPage)]` to receive corrections.
+- All derived signals, including the page list, are side-effect-free. Rendering uses the corrected page immediately. Previous/next disappear at their bounds, and direct client-state navigation handlers are also clamped. Empty results show active page 1 and neither edge.
+- `maxSize` / helper `paginationRange` is a window-entry budget, including ellipses. Finite positive values are floored and clamped to **1–100**; non-finite/non-positive values fall back to **7**. Ranges below 5 use a contiguous window containing the active page; larger ranges retain the first/last/ellipsis layout. Work and allocation are proportional to `min(pageCount, normalizedRange)`, never to an unbounded total or range. The array-returning helper API is unchanged.
+- The summary displays the supplied total; normalization controls page count/navigation and does not repair the application's data. For asynchronous server loading, keep the last known total until the new count arrives if a temporary zero should not reset the page.
+
 ### `HlmNumberedPaginationQueryParams` (`hlm-numbered-pagination-query-params`)
 
 Same models/inputs as `HlmNumberedPagination` **plus**:
@@ -160,11 +169,13 @@ Same models/inputs as `HlmNumberedPagination` **plus**:
 
 Every link (prev/numbered/next) navigates via `RouterLink` with `[queryParams]="{ page }"` and `queryParamsHandling="merge"`. The active page renders with `link === undefined` (no navigation) + `isActive`.
 
+The component **does not subscribe to the route or navigate on correction/size changes**. The parent reads `?page=` and supplies `currentPage`; link clicks navigate, then the parent's route subscription updates that model. Corrections emit `currentPageChange` but leave the URL unchanged. To canonicalize a corrected page in the URL, handle that output in the parent with `router.navigate([], { relativeTo: route, queryParams: { page }, queryParamsHandling: 'merge', replaceUrl: true })`. Keep unrelated parameters when doing so. Page-size URL persistence is also parent-owned.
+
 ### Helpers
 
 | Symbol                                                                    | Signature                                                 | Notes                                                                                                    |
 | ------------------------------------------------------------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| `outOfBoundCorrection(totalItems, itemsPerPage, currentPage)`             | `(number, number, number) => number`                      | Clamps to `[1, totalPages]` (from `ngx-pagination`)                                                      |
+| `outOfBoundCorrection(totalItems, itemsPerPage, currentPage)`             | `(number, number, number) => number`                      | Pure floor/clamp using the normalization policy above; empty/invalid paging returns 1                    |
 | `createPageArray(currentPage, itemsPerPage, totalItems, paginationRange)` | `(number, number, number, number) => (number \| '...')[]` | Window with `'...'` gaps; powers both numbered pagers                                                    |
 | `Page`                                                                    | `type Page = number \| '...'`                             | Not exported from public-api (internal to the pager file) — redeclare locally if you type custom windows |
 
@@ -246,7 +257,8 @@ export class PagerClientComponent {
 ### 3. Router `?page=` pager (server-driven)
 
 ```ts
-import { Component, signal, effect } from '@angular/core';
+import { Component, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
 import { HlmPaginationImports } from '@egose/shadcn-theme-ng/pagination';
 
@@ -261,7 +273,7 @@ import { HlmPaginationImports } from '@egose/shadcn-theme-ng/pagination';
       [totalItems]="total()"
       link="."
     />
-    <p class="tw:text-sm tw:text-muted-foreground">URL holds ?page={{ page }}.</p>
+    <p class="tw:text-sm tw:text-muted-foreground">Displayed page: {{ page() }}.</p>
   `,
 })
 export class PagerQueryComponent {
@@ -270,13 +282,10 @@ export class PagerQueryComponent {
   readonly total = signal(320);
 
   constructor(route: ActivatedRoute) {
-    effect(() => {
-      // keep ?page= as the source of truth on back/forward + deep links
-      const sub = route.queryParamMap.subscribe((params) => {
-        const p = Number(params.get('page') ?? 1);
-        this.page.set(Number.isFinite(p) && p >= 1 ? Math.floor(p) : 1);
-      });
-      return () => sub.unsubscribe();
+    // Read deep links and back/forward changes; the pager corrects model bounds.
+    // Corrections here update the displayed page, not the URL.
+    route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((params) => {
+      this.page.set(Number(params.get('page') ?? 1));
     });
   }
 }
@@ -330,7 +339,7 @@ import { HlmPaginationImports, createPageArray } from '@egose/shadcn-theme-ng/pa
   template: `
     <nav hlmPagination>
       <ul hlmPaginationContent>
-        @for (p of window(); track p) {
+        @for (p of window(); track $index) {
           <li hlmPaginationItem>
             @if (p === '...') {
               <hlm-pagination-ellipsis />