@letsprogram/ng-oat 0.1.5 → 0.1.6

package/fesm2022/letsprogram-ng-oat.mjs

@@ -2405,10 +2405,23 @@ const MOBILE_BREAKPOINT = 768;
 /**
  * Angular component wrapper for Oat's sidebar layout.
  *
- * Usage:
+ * Supports two modes:
+ * - `fixed` (default): Permanent sidebar on desktop, slide-out drawer on mobile.
+ * - `overlay`: Slide-out drawer at all screen sizes (ideal for app shells
+ *   that already have a toolbar with nav links).
+ *
+ * Usage (fixed — permanent desktop sidebar):
+ * ```html
+ * <ng-oat-sidebar>
+ *   <aside data-sidebar>Navigation</aside>
+ *   <main>Main content</main>
+ * </ng-oat-sidebar>
+ * ```
+ *
+ * Usage (overlay — mobile-style drawer at all sizes):
  * ```html
- * <ng-oat-sidebar [scrollLock]="true" (openChange)="onToggle($event)">
- *   <aside sidebar>Navigation</aside>
+ * <ng-oat-sidebar mode="overlay">
+ *   <aside data-sidebar>Navigation</aside>
  *   <main>Main content</main>
  * </ng-oat-sidebar>
  * ```
@@ -2419,11 +2432,19 @@ class NgOatSidebarComponent {
     destroyRef = inject(DestroyRef);
     platformId = inject(PLATFORM_ID);
     doc = inject(DOCUMENT);
-    /** Whether scroll lock is applied on mobile when sidebar is open */
+    /**
+     * Layout mode:
+     * - `'fixed'` (default) — permanent sidebar on desktop, drawer on mobile.
+     * - `'overlay'` — always a slide-out drawer at any screen size.
+     */
+    mode = input('fixed', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Whether scroll lock is applied when sidebar is open */
     scrollLock = input(true, ...(ngDevMode ? [{ debugName: "scrollLock" }] : []));
     initialOpen = input(false, ...(ngDevMode ? [{ debugName: "initialOpen" }] : []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     openChange = output();
+    /** Whether the sidebar is in overlay mode */
+    isOverlay = computed(() => this.mode() === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
     cleanupFns = [];
     constructor() {
         afterNextRender(() => {
@@ -2433,16 +2454,16 @@ class NgOatSidebarComponent {
                 this.isOpen.set(true);
             }
             this.listen(this.doc, 'keydown', (e) => {
-                if (e.key === KEYS.ESCAPE && this.isOpen() && this.isMobile()) {
+                if (e.key === KEYS.ESCAPE && this.isOpen() && this.shouldAutoClose()) {
                     this.close();
                 }
             });
-            // Outside click to close on mobile
+            // Outside click to close
             this.listen(this.doc, 'click', (e) => {
                 const target = e.target;
                 if (this.isOpen() &&
-                    this.isMobile() &&
-                    !target.closest('[sidebar]') &&
+                    this.shouldAutoClose() &&
+                    !target.closest('[data-sidebar]') &&
                     !target.closest('aside') &&
                     !target.closest('[data-sidebar-toggle]')) {
                     this.close();
@@ -2458,7 +2479,7 @@ class NgOatSidebarComponent {
     open() {
         this.isOpen.set(true);
         this.openChange.emit(true);
-        if (this.scrollLock() && this.isMobile()) {
+        if (this.scrollLock() && this.shouldAutoClose()) {
             this.lockScroll();
         }
     }
@@ -2475,6 +2496,15 @@ class NgOatSidebarComponent {
             this.open();
         }
     }
+    /**
+     * Whether the sidebar should auto-close on outside click / ESC.
+     * In overlay mode: always. In fixed mode: only on mobile.
+     */
+    shouldAutoClose() {
+        if (this.mode() === 'overlay')
+            return true;
+        return typeof window !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT;
+    }
     isMobile() {
         return typeof window !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT;
     }
@@ -2489,15 +2519,26 @@ class NgOatSidebarComponent {
         this.cleanupFns.push(() => el.removeEventListener(event, handler));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgOatSidebarComponent, isStandalone: true, selector: "ng-oat-sidebar", inputs: { scrollLock: { classPropertyName: "scrollLock", publicName: "scrollLock", isSignal: true, isRequired: false, transformFunction: null }, initialOpen: { classPropertyName: "initialOpen", publicName: "initialOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "attr.data-sidebar-layout": "\"\"", "attr.data-sidebar-open": "isOpen() ? \"\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatSidebarComponent, isStandalone: true, selector: "ng-oat-sidebar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, scrollLock: { classPropertyName: "scrollLock", publicName: "scrollLock", isSignal: true, isRequired: false, transformFunction: null }, initialOpen: { classPropertyName: "initialOpen", publicName: "initialOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "attr.data-sidebar-layout": "\"\"", "attr.data-sidebar-open": "isOpen() ? \"\" : null", "attr.data-sidebar-mode": "mode()" } }, ngImport: i0, template: `
+    @if (isOpen() && isOverlay()) {
+      <div class="ng-oat-sidebar-backdrop" (click)="close()"></div>
+    }
+    <ng-content />
+  `, isInline: true, styles: [":host[data-sidebar-mode=overlay]{grid-template-columns:1fr!important}:host[data-sidebar-mode=overlay]>::ng-deep aside[data-sidebar]{position:fixed!important;left:0;top:var(--topnav-offset, 0px);width:16rem;height:calc(100dvh - var(--topnav-offset, 0px));z-index:20;transform:translate(-100%);transition:transform var(--transition, .3s ease);box-shadow:var(--shadow-large)}:host[data-sidebar-mode=overlay][data-sidebar-open]>::ng-deep aside[data-sidebar]{transform:translate(0)}.ng-oat-sidebar-backdrop{position:fixed;inset:0;z-index:19;background:#0006}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-oat-sidebar', host: {
                         '[attr.data-sidebar-layout]': '""',
                         '[attr.data-sidebar-open]': 'isOpen() ? "" : null',
-                    }, template: `<ng-content />`, styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { scrollLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLock", required: false }] }], initialOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialOpen", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+                        '[attr.data-sidebar-mode]': 'mode()',
+                    }, template: `
+    @if (isOpen() && isOverlay()) {
+      <div class="ng-oat-sidebar-backdrop" (click)="close()"></div>
+    }
+    <ng-content />
+  `, styles: [":host[data-sidebar-mode=overlay]{grid-template-columns:1fr!important}:host[data-sidebar-mode=overlay]>::ng-deep aside[data-sidebar]{position:fixed!important;left:0;top:var(--topnav-offset, 0px);width:16rem;height:calc(100dvh - var(--topnav-offset, 0px));z-index:20;transform:translate(-100%);transition:transform var(--transition, .3s ease);box-shadow:var(--shadow-large)}:host[data-sidebar-mode=overlay][data-sidebar-open]>::ng-deep aside[data-sidebar]{transform:translate(0)}.ng-oat-sidebar-backdrop{position:fixed;inset:0;z-index:19;background:#0006}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], scrollLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLock", required: false }] }], initialOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialOpen", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 
 /**
  * Angular component wrapper for Oat's tabs.
@@ -5013,6 +5054,7 @@ class NgOatInput {
     max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : []));
     minLength = input(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : []));
     maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
+    autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
     // --- Component-specific inputs ---
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
@@ -5031,7 +5073,7 @@ class NgOatInput {
         input?.focus(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgOatInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatInput, isStandalone: true, selector: "ng-oat-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange" }, providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatInput) }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NgOatInput, isStandalone: true, selector: "ng-oat-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange" }, providers: [{ provide: NG_OAT_VALUE_HOST, useExisting: forwardRef(() => NgOatInput) }], ngImport: i0, template: `
     @if (label()) {
       <label [attr.for]="inputId">{{ label() }}</label>
     }
@@ -5047,6 +5089,7 @@ class NgOatInput {
       [attr.min]="min() ?? null"
       [attr.max]="max() ?? null"
       [attr.minlength]="minLength() ?? null"
+      [attr.autocomplete]="autocomplete() ?? null"
       [attr.maxlength]="maxLength() ?? null"
       (input)="onInput($event)"
       (blur)="onBlur()"
@@ -5076,6 +5119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       [attr.min]="min() ?? null"
       [attr.max]="max() ?? null"
       [attr.minlength]="minLength() ?? null"
+      [attr.autocomplete]="autocomplete() ?? null"
       [attr.maxlength]="maxLength() ?? null"
       (input)="onInput($event)"
       (blur)="onBlur()"
@@ -5086,7 +5130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       }
     } -->
   `, styles: [":host{display:block}.error{color:var(--danger);display:block;font-size:var(--text-8);margin-block-start:var(--space-1)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }] } });
 
 /**
  * Oat-styled textarea implementing `FormValueControl<string>`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@letsprogram/ng-oat",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Angular component library built on top of the Oat CSS framework — signals-first, lightweight, and accessible.",
   "license": "MIT",
   "author": "SashiKumar Yadav",

package/types/letsprogram-ng-oat.d.ts

@@ -918,13 +918,27 @@ declare class NgOatTooltipComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatTooltipComponent, "ng-oat-tooltip", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+type NgOatSidebarMode = 'fixed' | 'overlay';
 /**
  * Angular component wrapper for Oat's sidebar layout.
  *
- * Usage:
+ * Supports two modes:
+ * - `fixed` (default): Permanent sidebar on desktop, slide-out drawer on mobile.
+ * - `overlay`: Slide-out drawer at all screen sizes (ideal for app shells
+ *   that already have a toolbar with nav links).
+ *
+ * Usage (fixed — permanent desktop sidebar):
+ * ```html
+ * <ng-oat-sidebar>
+ *   <aside data-sidebar>Navigation</aside>
+ *   <main>Main content</main>
+ * </ng-oat-sidebar>
+ * ```
+ *
+ * Usage (overlay — mobile-style drawer at all sizes):
  * ```html
- * <ng-oat-sidebar [scrollLock]="true" (openChange)="onToggle($event)">
- *   <aside sidebar>Navigation</aside>
+ * <ng-oat-sidebar mode="overlay">
+ *   <aside data-sidebar>Navigation</aside>
  *   <main>Main content</main>
  * </ng-oat-sidebar>
  * ```
@@ -935,22 +949,35 @@ declare class NgOatSidebarComponent {
     private destroyRef;
     private platformId;
     private doc;
-    /** Whether scroll lock is applied on mobile when sidebar is open */
+    /**
+     * Layout mode:
+     * - `'fixed'` (default) — permanent sidebar on desktop, drawer on mobile.
+     * - `'overlay'` — always a slide-out drawer at any screen size.
+     */
+    readonly mode: _angular_core.InputSignal<NgOatSidebarMode>;
+    /** Whether scroll lock is applied when sidebar is open */
     readonly scrollLock: _angular_core.InputSignal<boolean>;
     readonly initialOpen: _angular_core.InputSignal<boolean>;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly openChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Whether the sidebar is in overlay mode */
+    readonly isOverlay: _angular_core.Signal<boolean>;
     private cleanupFns;
     constructor();
     open(): void;
     close(): void;
     toggle(): void;
+    /**
+     * Whether the sidebar should auto-close on outside click / ESC.
+     * In overlay mode: always. In fixed mode: only on mobile.
+     */
+    private shouldAutoClose;
     private isMobile;
     private lockScroll;
     private restoreScroll;
     private listen;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatSidebarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatSidebarComponent, "ng-oat-sidebar", never, { "scrollLock": { "alias": "scrollLock"; "required": false; "isSignal": true; }; "initialOpen": { "alias": "initialOpen"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatSidebarComponent, "ng-oat-sidebar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "scrollLock": { "alias": "scrollLock"; "required": false; "isSignal": true; }; "initialOpen": { "alias": "initialOpen"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, ["*"], true, never>;
 }
 
 interface NgOatTabItem {
@@ -1727,6 +1754,7 @@ declare class NgOatInput implements FormValueControl<string> {
     readonly max: _angular_core.InputSignal<number | undefined>;
     readonly minLength: _angular_core.InputSignal<number | undefined>;
     readonly maxLength: _angular_core.InputSignal<number | undefined>;
+    readonly autocomplete: _angular_core.InputSignal<string | undefined>;
     readonly label: _angular_core.InputSignal<string>;
     readonly type: _angular_core.InputSignal<NgOatInputType>;
     readonly placeholder: _angular_core.InputSignal<string>;
@@ -1736,7 +1764,7 @@ declare class NgOatInput implements FormValueControl<string> {
     onBlur(): void;
     focus(options?: FocusOptions): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgOatInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatInput, "ng-oat-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgOatInput, "ng-oat-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "showErrors": { "alias": "showErrors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /**