@latitude-ui/widgets 0.0.33 → 0.0.35

package/fesm2022/latitude-ui-widgets-switch.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
 import { forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import { HTMLFormControl } from '@latitude-ui/widgets/core';
+import { FormControlComponent } from '@latitude-ui/widgets/core';
 
-class SwitchComponent extends HTMLFormControl {
+class SwitchComponent extends FormControlComponent {
     toggle() {
         if (!this.disabled()) {
             const value = this.value() ?? false;
-            this.writeValue(!value);
+            this.updateValue(!value);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: SwitchComponent, isStandalone: true, selector: "lat-switch", host: { listeners: { "click": "toggle()" } }, providers: [
             {
-                provide: HTMLFormControl,
+                provide: FormControlComponent,
                 useExisting: forwardRef(() => SwitchComponent),
             },
         ], exportAs: ["latSwitch"], usesInheritance: true, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  role=\"switch\"\r\n  [attr.id]=\"computedId()\"\r\n  [attr.value]=\"value() ? 'on' : 'off'\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || undefined\"\r\n  [attr.aria-checked]=\"value() || false\"\r\n>\r\n  <div\r\n    role=\"presentation\"\r\n    class=\"lat-switch-thumb\"\r\n  ></div>\r\n</button>\r\n<ng-content/>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -21,7 +21,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{ exportAs: 'latSwitch', selector: 'lat-switch', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
-                            provide: HTMLFormControl,
+                            provide: FormControlComponent,
                             useExisting: forwardRef(() => SwitchComponent),
                         },
                     ], host: {
@@ -29,9 +29,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     }, template: "<button\r\n  type=\"button\"\r\n  role=\"switch\"\r\n  [attr.id]=\"computedId()\"\r\n  [attr.value]=\"value() ? 'on' : 'off'\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || undefined\"\r\n  [attr.aria-checked]=\"value() || false\"\r\n>\r\n  <div\r\n    role=\"presentation\"\r\n    class=\"lat-switch-thumb\"\r\n  ></div>\r\n</button>\r\n<ng-content/>\r\n" }]
         }] });
 
+const SwitchImports = [
+    SwitchComponent
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SwitchComponent };
+export { SwitchComponent, SwitchImports };
 //# sourceMappingURL=latitude-ui-widgets-switch.mjs.map

package/fesm2022/latitude-ui-widgets-switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"latitude-ui-widgets-switch.mjs","sources":["../../../../packages/widgets/switch/lib/switch.component.ts","../../../../packages/widgets/switch/lib/switch.component.html","../../../../packages/widgets/switch/latitude-ui-widgets-switch.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';\r\n\r\nimport { HTMLFormControl } from '@latitude-ui/widgets/core';\r\n\r\n\r\n@Component({\r\n  exportAs: 'latSwitch',\r\n  selector: 'lat-switch',\r\n  templateUrl: './switch.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  providers: [\r\n    {\r\n      provide: HTMLFormControl,\r\n      useExisting: forwardRef(() => SwitchComponent),\r\n    },\r\n  ],\r\n  host: {\r\n    '(click)': 'toggle()',\r\n  },\r\n})\r\nexport class SwitchComponent extends HTMLFormControl<boolean> {\r\n  toggle() {\r\n    if (!this.disabled()) {\r\n      const value = this.value() ?? false;\r\n\r\n      this.writeValue(!value);\r\n    }\r\n  }\r\n}\r\n","<button\r\n  type=\"button\"\r\n  role=\"switch\"\r\n  [attr.id]=\"computedId()\"\r\n  [attr.value]=\"value() ? 'on' : 'off'\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || undefined\"\r\n  [attr.aria-checked]=\"value() || false\"\r\n>\r\n  <div\r\n    role=\"presentation\"\r\n    class=\"lat-switch-thumb\"\r\n  ></div>\r\n</button>\r\n<ng-content/>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAqBM,MAAO,eAAgB,SAAQ,eAAwB,CAAA;IAC3D,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;YACpB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,KAAK;AAEnC,YAAA,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC;QACzB;IACF;uGAPW,eAAe,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,UAAA,EAAA,EAAA,EAAA,SAAA,EAVf;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,eAAe;AACxB,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC/C,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChBH,kZAeA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDMa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAhB3B,SAAS;+BACE,WAAW,EAAA,QAAA,EACX,YAAY,EAAA,aAAA,EAEP,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,SAAA,EACpC;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,eAAe;AACxB,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC/C,yBAAA;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,SAAS,EAAE,UAAU;AACtB,qBAAA,EAAA,QAAA,EAAA,kZAAA,EAAA;;;AEnBH;;AAEG;;;;"}
+{"version":3,"file":"latitude-ui-widgets-switch.mjs","sources":["../../../../packages/widgets/switch/lib/switch.ts","../../../../packages/widgets/switch/lib/switch.html","../../../../packages/widgets/switch/public-api.ts","../../../../packages/widgets/switch/latitude-ui-widgets-switch.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';\r\n\r\nimport { FormControlComponent } from '@latitude-ui/widgets/core';\r\n\r\n\r\n@Component({\r\n  exportAs: 'latSwitch',\r\n  selector: 'lat-switch',\r\n  templateUrl: './switch.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  providers: [\r\n    {\r\n      provide: FormControlComponent,\r\n      useExisting: forwardRef(() => SwitchComponent),\r\n    },\r\n  ],\r\n  host: {\r\n    '(click)': 'toggle()',\r\n  },\r\n})\r\nexport class SwitchComponent extends FormControlComponent<boolean> {\r\n  toggle() {\r\n    if (!this.disabled()) {\r\n      const value = this.value() ?? false;\r\n\r\n      this.updateValue(!value);\r\n    }\r\n  }\r\n}\r\n","<button\r\n  type=\"button\"\r\n  role=\"switch\"\r\n  [attr.id]=\"computedId()\"\r\n  [attr.value]=\"value() ? 'on' : 'off'\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || undefined\"\r\n  [attr.aria-checked]=\"value() || false\"\r\n>\r\n  <div\r\n    role=\"presentation\"\r\n    class=\"lat-switch-thumb\"\r\n  ></div>\r\n</button>\r\n<ng-content/>\r\n","import { SwitchComponent } from './lib/switch';\r\n\r\nexport * from './lib/switch';\r\n\r\nexport const SwitchImports = [\r\n  SwitchComponent\r\n] as const;\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAqBM,MAAO,eAAgB,SAAQ,oBAA6B,CAAA;IAChE,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;YACpB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,KAAK;AAEnC,YAAA,IAAI,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;QAC1B;IACF;uGAPW,eAAe,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,UAAA,EAAA,EAAA,EAAA,SAAA,EAVf;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,oBAAoB;AAC7B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC/C,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChBH,kZAeA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDMa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAhB3B,SAAS;+BACE,WAAW,EAAA,QAAA,EACX,YAAY,EAAA,aAAA,EAEP,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,SAAA,EACpC;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,oBAAoB;AAC7B,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC/C,yBAAA;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,SAAS,EAAE,UAAU;AACtB,qBAAA,EAAA,QAAA,EAAA,kZAAA,EAAA;;;AEfI,MAAM,aAAa,GAAG;IAC3B;;;ACLF;;AAEG;;;;"}

package/fesm2022/latitude-ui-widgets-tabs.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Directive, input, booleanAttribute, numberAttribute, computed, contentChild, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, contentChildren, linkedSignal } from '@angular/core';
+import { Directive, input, booleanAttribute, numberAttribute, computed, contentChild, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, linkedSignal } from '@angular/core';
 import { uid } from '@latitude-ui/widgets/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { ButtonComponent } from '@latitude-ui/widgets/button';
 import { ToolBarComponent } from '@latitude-ui/widgets/toolbar';
 
-class TabLabelDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: TabLabelDirective, isStandalone: true, selector: "[latTabLabel]", exportAs: ["latTabLabel"], ngImport: i0 });
+class TabLabelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: TabLabelComponent, isStandalone: true, selector: "[latTabLabel]", exportAs: ["latTabLabel"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabLabelComponent, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'latTabLabel',
@@ -17,11 +17,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }] });
 
-class TabContentDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: TabContentDirective, isStandalone: true, selector: "[latTabContent]", exportAs: ["latTabContent"], ngImport: i0 });
+class TabContentComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: TabContentComponent, isStandalone: true, selector: "[latTabContent]", exportAs: ["latTabContent"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabContentComponent, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'latTabContent',
@@ -35,29 +35,19 @@ class TabComponent {
     tabindex = input(undefined, { ...(ngDevMode ? { debugName: "tabindex" } : {}), transform: numberAttribute });
     tabId = computed(() => `lat-tab-${this.id()}`, ...(ngDevMode ? [{ debugName: "tabId" }] : []));
     tabpanelId = computed(() => `lat-tabpanel-${this.id()}`, ...(ngDevMode ? [{ debugName: "tabpanelId" }] : []));
-    label = contentChild(TabLabelDirective, { ...(ngDevMode ? { debugName: "label" } : {}), read: TemplateRef });
-    content = contentChild.required(TabContentDirective, { read: TemplateRef });
+    label = contentChild(TabLabelComponent, { ...(ngDevMode ? { debugName: "label" } : {}), read: TemplateRef });
+    content = contentChild.required(TabContentComponent, { read: TemplateRef });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: TabComponent, isStandalone: true, selector: "lat-tab", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "label", first: true, predicate: TabLabelDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "content", first: true, predicate: TabContentDirective, descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["latTab"], ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: TabComponent, isStandalone: true, selector: "lat-tab", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "label", first: true, predicate: TabLabelComponent, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "content", first: true, predicate: TabContentComponent, descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["latTab"], ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'latTab', selector: 'lat-tab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabLabelDirective), { ...{ read: TemplateRef }, isSignal: true }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabContentDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
-
-const TABS_OPTIONS = new InjectionToken(ngDevMode ? 'TABS_OPTIONS' : '', {
-    factory: () => {
-        return {
-            size: 'md',
-            variant: 'default',
-        };
-    }
-});
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabLabelComponent), { ...{ read: TemplateRef }, isSignal: true }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabContentComponent), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 class TabsComponent {
-    options = inject(TABS_OPTIONS);
-    size = input(this.options.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
-    variant = input(this.options.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     selected = linkedSignal(() => this.tabs().at(0), ...(ngDevMode ? [{ debugName: "selected" }] : []));
     onTabChanged(tab) {
@@ -75,9 +65,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     ], exportAs: 'latTabs', selector: 'lat-tabs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<lat-toolbar role=\"tablist\" variant=\"inherit\">\r\n  @for (tab of tabs(); track $index) {\r\n    <lat-button\r\n      role=\"tab\"\r\n      variant=\"inherit\"\r\n      [id]=\"tab.tabId()\"\r\n      [tabindex]=\"tab.tabindex()\"\r\n      [disabled]=\"tab.disabled()\"\r\n      (click)=\"onTabChanged(tab)\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"tab.label()\" />\r\n    </lat-button>\r\n  }\r\n</lat-toolbar>\r\n\r\n@if (selected(); as tab) {\r\n  <div\r\n    role=\"tabpanel\"\r\n    [attr.id]=\"tab.tabpanelId()\"\r\n    [attr.aria-labelledby]=\"tab.tabId()\"\r\n  >\r\n    <ng-template [ngTemplateOutlet]=\"tab.content()\" />\r\n  </div>\r\n} @else {\r\n  <div role=\"presentation\">\r\n    <!-- TODO: empty state placeholder  -->\r\n  </div>\r\n}\r\n\r\n" }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }] } });
 
+const TabsImports = [
+    TabComponent,
+    TabContentComponent,
+    TabLabelComponent,
+    TabsComponent
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TABS_OPTIONS, TabComponent, TabContentDirective, TabLabelDirective, TabsComponent };
+export { TabComponent, TabContentComponent, TabLabelComponent, TabsComponent, TabsImports };
 //# sourceMappingURL=latitude-ui-widgets-tabs.mjs.map

package/fesm2022/latitude-ui-widgets-tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"latitude-ui-widgets-tabs.mjs","sources":["../../../../packages/widgets/tabs/lib/tab-label.directive.ts","../../../../packages/widgets/tabs/lib/tab-content.directive.ts","../../../../packages/widgets/tabs/lib/tab.component.ts","../../../../packages/widgets/tabs/lib/tab.component.html","../../../../packages/widgets/tabs/lib/tabs.options.ts","../../../../packages/widgets/tabs/lib/tabs.component.ts","../../../../packages/widgets/tabs/lib/tabs.component.html","../../../../packages/widgets/tabs/latitude-ui-widgets-tabs.ts"],"sourcesContent":["import { Directive } from '@angular/core';\r\n\r\n\r\n@Directive({\r\n  exportAs: 'latTabLabel',\r\n  selector: '[latTabLabel]'\r\n})\r\nexport class TabLabelDirective {\r\n}\r\n","import { Directive } from '@angular/core';\r\n\r\n\r\n@Directive({\r\n  exportAs: 'latTabContent',\r\n  selector: '[latTabContent]'\r\n})\r\nexport class TabContentDirective {\r\n}\r\n","import {\r\n  booleanAttribute,\r\n  ChangeDetectionStrategy,\r\n  Component, computed,\r\n  contentChild,\r\n  input, numberAttribute,\r\n  TemplateRef,\r\n  ViewEncapsulation\r\n} from '@angular/core';\r\n\r\nimport { uid } from '@latitude-ui/widgets/core';\r\n\r\nimport { TabLabelDirective } from './tab-label.directive';\r\nimport { TabContentDirective } from './tab-content.directive';\r\n\r\n\r\n@Component({\r\n  exportAs: 'latTab',\r\n  selector: 'lat-tab',\r\n  templateUrl: './tab.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class TabComponent {\r\n  readonly id = input<string>(uid());\r\n  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly tabindex = input<number, unknown>(undefined, { transform: numberAttribute });\r\n\r\n  readonly tabId = computed(() => `lat-tab-${this.id()}`);\r\n  readonly tabpanelId = computed(() => `lat-tabpanel-${this.id()}`);\r\n\r\n  readonly label = contentChild(TabLabelDirective, { read: TemplateRef });\r\n  readonly content = contentChild.required(TabContentDirective, { read: TemplateRef })\r\n}\r\n","","import { InjectionToken } from '@angular/core';\r\n\r\nimport { BoxSize } from '@latitude-ui/widgets/core';\r\n\r\n\r\nexport type TabsOptions = {\r\n  size: BoxSize;\r\n  variant: 'default' | 'inherit' | ({} & string);\r\n}\r\n\r\nexport const TABS_OPTIONS = new InjectionToken<TabsOptions>(\r\n  ngDevMode ? 'TABS_OPTIONS' : '',\r\n  {\r\n    factory: () => {\r\n      return {\r\n        size: 'md',\r\n        variant: 'default',\r\n      }\r\n    }\r\n  }\r\n);\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  contentChildren,\r\n  inject, input,\r\n  linkedSignal,\r\n  ViewEncapsulation\r\n} from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\n\r\nimport { ButtonComponent } from '@latitude-ui/widgets/button';\r\nimport { ToolBarComponent } from '@latitude-ui/widgets/toolbar';\r\n\r\nimport { TabComponent } from './tab.component';\r\nimport { TABS_OPTIONS, TabsOptions } from './tabs.options';\r\n\r\n\r\n@Component({\r\n  imports: [\r\n    NgTemplateOutlet,\r\n    ToolBarComponent,\r\n    ButtonComponent\r\n  ],\r\n  exportAs: 'latTabs',\r\n  selector: 'lat-tabs',\r\n  templateUrl: './tabs.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class TabsComponent {\r\n  readonly options = inject(TABS_OPTIONS);\r\n\r\n  readonly size = input<TabsOptions['size']>(this.options.size);\r\n  readonly variant = input<TabsOptions['variant']>(this.options.variant);\r\n\r\n  readonly tabs = contentChildren(TabComponent);\r\n\r\n  readonly selected = linkedSignal<TabComponent | undefined>(() => this.tabs().at(0));\r\n\r\n  onTabChanged(tab: TabComponent | undefined) {\r\n    this.selected.set(tab);\r\n  }\r\n}\r\n","<lat-toolbar role=\"tablist\" variant=\"inherit\">\r\n  @for (tab of tabs(); track $index) {\r\n    <lat-button\r\n      role=\"tab\"\r\n      variant=\"inherit\"\r\n      [id]=\"tab.tabId()\"\r\n      [tabindex]=\"tab.tabindex()\"\r\n      [disabled]=\"tab.disabled()\"\r\n      (click)=\"onTabChanged(tab)\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"tab.label()\" />\r\n    </lat-button>\r\n  }\r\n</lat-toolbar>\r\n\r\n@if (selected(); as tab) {\r\n  <div\r\n    role=\"tabpanel\"\r\n    [attr.id]=\"tab.tabpanelId()\"\r\n    [attr.aria-labelledby]=\"tab.tabId()\"\r\n  >\r\n    <ng-template [ngTemplateOutlet]=\"tab.content()\" />\r\n  </div>\r\n} @else {\r\n  <div role=\"presentation\">\r\n    <!-- TODO: empty state placeholder  -->\r\n  </div>\r\n}\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"latitude-ui-widgets-tabs.mjs","sources":["../../../../packages/widgets/tabs/lib/tab-label.ts","../../../../packages/widgets/tabs/lib/tab-content.ts","../../../../packages/widgets/tabs/lib/tab.ts","../../../../packages/widgets/tabs/lib/tab.html","../../../../packages/widgets/tabs/lib/tabs.ts","../../../../packages/widgets/tabs/lib/tabs.html","../../../../packages/widgets/tabs/public-api.ts","../../../../packages/widgets/tabs/latitude-ui-widgets-tabs.ts"],"sourcesContent":["import { Directive } from '@angular/core';\r\n\r\n\r\n@Directive({\r\n  exportAs: 'latTabLabel',\r\n  selector: '[latTabLabel]'\r\n})\r\nexport class TabLabelComponent {\r\n}\r\n","import { Directive } from '@angular/core';\r\n\r\n\r\n@Directive({\r\n  exportAs: 'latTabContent',\r\n  selector: '[latTabContent]'\r\n})\r\nexport class TabContentComponent {\r\n}\r\n","import {\r\n  booleanAttribute,\r\n  ChangeDetectionStrategy,\r\n  Component, computed,\r\n  contentChild,\r\n  input, numberAttribute,\r\n  TemplateRef,\r\n  ViewEncapsulation\r\n} from '@angular/core';\r\n\r\nimport { uid } from '@latitude-ui/widgets/core';\r\n\r\nimport { TabLabelComponent } from './tab-label';\r\nimport { TabContentComponent } from './tab-content';\r\n\r\n\r\n@Component({\r\n  exportAs: 'latTab',\r\n  selector: 'lat-tab',\r\n  templateUrl: './tab.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class TabComponent {\r\n  readonly id = input<string>(uid());\r\n  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly tabindex = input<number, unknown>(undefined, { transform: numberAttribute });\r\n\r\n  readonly tabId = computed(() => `lat-tab-${this.id()}`);\r\n  readonly tabpanelId = computed(() => `lat-tabpanel-${this.id()}`);\r\n\r\n  readonly label = contentChild(TabLabelComponent, { read: TemplateRef });\r\n  readonly content = contentChild.required(TabContentComponent, { read: TemplateRef })\r\n}\r\n","","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  contentChildren,\r\n  input,\r\n  linkedSignal,\r\n  ViewEncapsulation\r\n} from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\n\r\nimport { BoxSize } from '@latitude-ui/widgets/core';\r\n\r\nimport { ButtonComponent } from '@latitude-ui/widgets/button';\r\nimport { ToolBarComponent } from '@latitude-ui/widgets/toolbar';\r\n\r\nimport { TabComponent } from './tab';\r\n\r\nexport type TabsSize = BoxSize;\r\nexport type TabsVariant = 'default' | 'inherit' | ({} & string);\r\n\r\n@Component({\r\n  imports: [\r\n    NgTemplateOutlet,\r\n    ToolBarComponent,\r\n    ButtonComponent\r\n  ],\r\n  exportAs: 'latTabs',\r\n  selector: 'lat-tabs',\r\n  templateUrl: './tabs.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class TabsComponent {\r\n  readonly size = input<TabsSize>('md');\r\n  readonly variant = input<TabsVariant>('default');\r\n\r\n  readonly tabs = contentChildren(TabComponent);\r\n\r\n  readonly selected = linkedSignal<TabComponent | undefined>(() => this.tabs().at(0));\r\n\r\n  onTabChanged(tab: TabComponent | undefined) {\r\n    this.selected.set(tab);\r\n  }\r\n}\r\n","<lat-toolbar role=\"tablist\" variant=\"inherit\">\r\n  @for (tab of tabs(); track $index) {\r\n    <lat-button\r\n      role=\"tab\"\r\n      variant=\"inherit\"\r\n      [id]=\"tab.tabId()\"\r\n      [tabindex]=\"tab.tabindex()\"\r\n      [disabled]=\"tab.disabled()\"\r\n      (click)=\"onTabChanged(tab)\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"tab.label()\" />\r\n    </lat-button>\r\n  }\r\n</lat-toolbar>\r\n\r\n@if (selected(); as tab) {\r\n  <div\r\n    role=\"tabpanel\"\r\n    [attr.id]=\"tab.tabpanelId()\"\r\n    [attr.aria-labelledby]=\"tab.tabId()\"\r\n  >\r\n    <ng-template [ngTemplateOutlet]=\"tab.content()\" />\r\n  </div>\r\n} @else {\r\n  <div role=\"presentation\">\r\n    <!-- TODO: empty state placeholder  -->\r\n  </div>\r\n}\r\n\r\n","import { TabComponent } from './lib/tab';\r\nimport { TabContentComponent } from './lib/tab-content';\r\nimport { TabLabelComponent } from './lib/tab-label';\r\nimport { TabsComponent } from './lib/tabs';\r\n\r\nexport * from './lib/tab';\r\nexport * from './lib/tab-content';\r\nexport * from './lib/tab-label';\r\nexport * from './lib/tabs';\r\n\r\nexport const TabsImports = [\r\n  TabComponent,\r\n  TabContentComponent,\r\n  TabLabelComponent,\r\n  TabsComponent\r\n] as const;\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/latitude-ui-widgets-textbox.mjs

@@ -1,36 +1,13 @@
 import * as i0 from '@angular/core';
-import { viewChild, ElementRef, afterRenderEffect, Directive, input, numberAttribute, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, effect } from '@angular/core';
-import { HTMLFormControl } from '@latitude-ui/widgets/core';
+import { viewChild, ElementRef, input, numberAttribute, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, effect, afterRenderEffect } from '@angular/core';
+import { FormControlComponent } from '@latitude-ui/widgets/core';
 import { maskitoDateOptionsGenerator, maskitoStringifyDate, maskitoParseDate, maskitoNumberOptionsGenerator, maskitoStringifyNumber, maskitoParseNumber } from '@maskito/kit';
 import { Maskito, maskitoInitialCalibrationPlugin } from '@maskito/core';
 import { ButtonComponent } from '@latitude-ui/widgets/button';
 import { IconComponent } from '@latitude-ui/widgets/icons';
 
-class TextBoxDirective extends HTMLFormControl {
+class TextBoxComponent extends FormControlComponent {
     el = viewChild.required('htmlInputElement', { read: (ElementRef) });
-    blur() {
-        this.el().nativeElement.blur();
-    }
-    focus() {
-        this.el().nativeElement.focus();
-    }
-    constructor() {
-        super();
-        afterRenderEffect(() => {
-            const { nativeElement } = this.el();
-            if (this.autofocus()) {
-                nativeElement.focus();
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TextBoxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.3", type: TextBoxDirective, isStandalone: true, viewQueries: [{ propertyName: "el", first: true, predicate: ["htmlInputElement"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TextBoxDirective, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [], propDecorators: { el: [{ type: i0.ViewChild, args: ['htmlInputElement', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
-
-class TextBoxComponent extends TextBoxDirective {
     rows = input(undefined, { ...(ngDevMode ? { debugName: "rows" } : {}), transform: numberAttribute });
     maxlength = input(undefined, { ...(ngDevMode ? { debugName: "maxlength" } : {}), transform: numberAttribute });
     minlength = input(undefined, { ...(ngDevMode ? { debugName: "minlength" } : {}), transform: numberAttribute });
@@ -45,27 +22,28 @@ class TextBoxComponent extends TextBoxDirective {
     /** @internal */
     onValueChanged() {
         const { nativeElement } = this.el();
-        this.writeValue(nativeElement.value);
+        this.updateValue(nativeElement.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: TextBoxComponent, isStandalone: true, selector: "lat-textbox:not([type]), lat-textbox[type=\"text\"]", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
-                provide: HTMLFormControl,
-                useExisting: forwardRef(() => TextBoxComponent),
-            },
-        ], exportAs: ["latTextBox"], usesInheritance: true, ngImport: i0, template: "@if(textarea()) {\r\n  <textarea\r\n    #htmlInputElement\r\n    role=\"textbox\"\r\n    [value]='valueAsString()'\r\n    [attr.id]=\"computedId()\"\r\n    [attr.rows]=\"rows()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n    [attr.disabled]=\"disabled() || void 0\"\r\n    [attr.readonly]=\"readonly() || void 0\"\r\n    [attr.required]=\"required() || void 0\"\r\n    [attr.autofocus]=\"autofocus() ? '' : void 0\"\r\n    [attr.maxlength]=\"maxlength()\"\r\n    [attr.minlength]=\"minlength()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.aria-invalid]=\"invalid() || void 0\"\r\n    [attr.aria-disabled]=\"disabled() || void 0\"\r\n    [attr.aria-readonly]=\"readonly() || void 0\"\r\n    [attr.aria-required]=\"required() || void 0\"\r\n    [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n    [style.resize]=\"'none'\"\r\n    [style.height]=\"'auto'\"\r\n    (blur)=\"onBlurEvent()\"\r\n    (input)=\"onValueChanged()\"\r\n  ></textarea>\r\n} @else {\r\n  <input\r\n    #htmlInputElement\r\n    type=\"text\"\r\n    role=\"textbox\"\r\n    [value]='valueAsString()'\r\n    [attr.id]=\"computedId()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n    [attr.disabled]=\"disabled() || void 0\"\r\n    [attr.readonly]=\"readonly() || void 0\"\r\n    [attr.required]=\"required() || void 0\"\r\n    [attr.autofocus]=\"autofocus() ? '' : void 0\"\r\n    [attr.maxlength]=\"maxlength()\"\r\n    [attr.minlength]=\"minlength()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.aria-invalid]=\"invalid() || void 0\"\r\n    [attr.aria-disabled]=\"disabled() || void 0\"\r\n    [attr.aria-readonly]=\"readonly() || void 0\"\r\n    [attr.aria-required]=\"required() || void 0\"\r\n    [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n    (blur)=\"onBlurEvent()\"\r\n    (input)=\"onValueChanged()\"\r\n  />\r\n}\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+                provide: FormControlComponent,
+                useExisting: forwardRef(() => TextBoxComponent)
+            }
+        ], viewQueries: [{ propertyName: "el", first: true, predicate: ["htmlInputElement"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["latTextBox"], usesInheritance: true, ngImport: i0, template: "@if(textarea()) {\r\n  <textarea\r\n    #htmlInputElement\r\n    role=\"textbox\"\r\n    [value]='valueAsString()'\r\n    [attr.id]=\"computedId()\"\r\n    [attr.rows]=\"rows()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n    [attr.disabled]=\"disabled() || void 0\"\r\n    [attr.readonly]=\"readonly() || void 0\"\r\n    [attr.required]=\"required() || void 0\"\r\n    [attr.maxlength]=\"maxlength()\"\r\n    [attr.minlength]=\"minlength()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.aria-invalid]=\"invalid() || void 0\"\r\n    [attr.aria-disabled]=\"disabled() || void 0\"\r\n    [attr.aria-readonly]=\"readonly() || void 0\"\r\n    [attr.aria-required]=\"required() || void 0\"\r\n    [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n    [style.resize]=\"'none'\"\r\n    [style.height]=\"'auto'\"\r\n    (blur)=\"onBlurEvent()\"\r\n    (input)=\"onValueChanged()\"\r\n  ></textarea>\r\n} @else {\r\n  <input\r\n    #htmlInputElement\r\n    type=\"text\"\r\n    role=\"textbox\"\r\n    [value]='valueAsString()'\r\n    [attr.id]=\"computedId()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n    [attr.disabled]=\"disabled() || void 0\"\r\n    [attr.readonly]=\"readonly() || void 0\"\r\n    [attr.required]=\"required() || void 0\"\r\n    [attr.maxlength]=\"maxlength()\"\r\n    [attr.minlength]=\"minlength()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.aria-invalid]=\"invalid() || void 0\"\r\n    [attr.aria-disabled]=\"disabled() || void 0\"\r\n    [attr.aria-readonly]=\"readonly() || void 0\"\r\n    [attr.aria-required]=\"required() || void 0\"\r\n    [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n    (blur)=\"onBlurEvent()\"\r\n    (input)=\"onValueChanged()\"\r\n  />\r\n}\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'latTextBox', selector: 'lat-textbox:not([type]), lat-textbox[type="text"]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
-                            provide: HTMLFormControl,
-                            useExisting: forwardRef(() => TextBoxComponent),
-                        },
-                    ], template: "@if(textarea()) {\r\n  <textarea\r\n    #htmlInputElement\r\n    role=\"textbox\"\r\n    [value]='valueAsString()'\r\n    [attr.id]=\"computedId()\"\r\n    [attr.rows]=\"rows()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n    [attr.disabled]=\"disabled() || void 0\"\r\n    [attr.readonly]=\"readonly() || void 0\"\r\n    [attr.required]=\"required() || void 0\"\r\n    [attr.autofocus]=\"autofocus() ? '' : void 0\"\r\n    [attr.maxlength]=\"maxlength()\"\r\n    [attr.minlength]=\"minlength()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.aria-invalid]=\"invalid() || void 0\"\r\n    [attr.aria-disabled]=\"disabled() || void 0\"\r\n    [attr.aria-readonly]=\"readonly() || void 0\"\r\n    [attr.aria-required]=\"required() || void 0\"\r\n    [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n    [style.resize]=\"'none'\"\r\n    [style.height]=\"'auto'\"\r\n    (blur)=\"onBlurEvent()\"\r\n    (input)=\"onValueChanged()\"\r\n  ></textarea>\r\n} @else {\r\n  <input\r\n    #htmlInputElement\r\n    type=\"text\"\r\n    role=\"textbox\"\r\n    [value]='valueAsString()'\r\n    [attr.id]=\"computedId()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n    [attr.disabled]=\"disabled() || void 0\"\r\n    [attr.readonly]=\"readonly() || void 0\"\r\n    [attr.required]=\"required() || void 0\"\r\n    [attr.autofocus]=\"autofocus() ? '' : void 0\"\r\n    [attr.maxlength]=\"maxlength()\"\r\n    [attr.minlength]=\"minlength()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.aria-invalid]=\"invalid() || void 0\"\r\n    [attr.aria-disabled]=\"disabled() || void 0\"\r\n    [attr.aria-readonly]=\"readonly() || void 0\"\r\n    [attr.aria-required]=\"required() || void 0\"\r\n    [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n    (blur)=\"onBlurEvent()\"\r\n    (input)=\"onValueChanged()\"\r\n  />\r\n}\r\n" }]
-        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }] } });
+                            provide: FormControlComponent,
+                            useExisting: forwardRef(() => TextBoxComponent)
+                        }
+                    ], template: "@if(textarea()) {\r\n  <textarea\r\n    #htmlInputElement\r\n    role=\"textbox\"\r\n    [value]='valueAsString()'\r\n    [attr.id]=\"computedId()\"\r\n    [attr.rows]=\"rows()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n    [attr.disabled]=\"disabled() || void 0\"\r\n    [attr.readonly]=\"readonly() || void 0\"\r\n    [attr.required]=\"required() || void 0\"\r\n    [attr.maxlength]=\"maxlength()\"\r\n    [attr.minlength]=\"minlength()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.aria-invalid]=\"invalid() || void 0\"\r\n    [attr.aria-disabled]=\"disabled() || void 0\"\r\n    [attr.aria-readonly]=\"readonly() || void 0\"\r\n    [attr.aria-required]=\"required() || void 0\"\r\n    [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n    [style.resize]=\"'none'\"\r\n    [style.height]=\"'auto'\"\r\n    (blur)=\"onBlurEvent()\"\r\n    (input)=\"onValueChanged()\"\r\n  ></textarea>\r\n} @else {\r\n  <input\r\n    #htmlInputElement\r\n    type=\"text\"\r\n    role=\"textbox\"\r\n    [value]='valueAsString()'\r\n    [attr.id]=\"computedId()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n    [attr.disabled]=\"disabled() || void 0\"\r\n    [attr.readonly]=\"readonly() || void 0\"\r\n    [attr.required]=\"required() || void 0\"\r\n    [attr.maxlength]=\"maxlength()\"\r\n    [attr.minlength]=\"minlength()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.aria-invalid]=\"invalid() || void 0\"\r\n    [attr.aria-disabled]=\"disabled() || void 0\"\r\n    [attr.aria-readonly]=\"readonly() || void 0\"\r\n    [attr.aria-required]=\"required() || void 0\"\r\n    [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n    (blur)=\"onBlurEvent()\"\r\n    (input)=\"onValueChanged()\"\r\n  />\r\n}\r\n" }]
+        }], propDecorators: { el: [{ type: i0.ViewChild, args: ['htmlInputElement', { ...{ read: (ElementRef) }, isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }] } });
 
-class TextBoxDateComponent extends TextBoxDirective {
+class TextBoxDateComponent extends FormControlComponent {
+    el = viewChild.required('htmlInputElement', { read: (ElementRef) });
     max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
     min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
     pattern = input('dd/mm/yyyy', ...(ngDevMode ? [{ debugName: "pattern" }] : []));
@@ -86,9 +64,9 @@ class TextBoxDateComponent extends TextBoxDirective {
             'mm/dd/yyyy': `${mm}${separator}${dd}${separator}${yyyy}`,
             'mm/yy': `${mm}${separator}${yy}`,
             'mm/yyyy': `${mm}${separator}${yyyy}`,
-            "yyyy": `${yyyy}`,
+            'yyyy': `${yyyy}`,
             'yyyy/mm': `${yyyy}${separator}${mm}`,
-            'yyyy/mm/dd': `${yyyy}${separator}${mm}${separator}${dd}`,
+            'yyyy/mm/dd': `${yyyy}${separator}${mm}${separator}${dd}`
         };
         return new RegExp(`^${keyvalue[pattern]}$`);
     }, ...(ngDevMode ? [{ debugName: "patternRegExp" }] : []));
@@ -104,7 +82,7 @@ class TextBoxDateComponent extends TextBoxDirective {
             max: this.maxvalue(),
             min: this.minvalue(),
             mode: this.pattern(),
-            separator: this.separator(),
+            separator: this.separator()
         };
     }, ...(ngDevMode ? [{ debugName: "maskitoDateParams" }] : []));
     constructor() {
@@ -116,6 +94,12 @@ class TextBoxDateComponent extends TextBoxDirective {
             const instance = new Maskito(el.nativeElement, options);
             onCleanup(() => instance.destroy());
         });
+        afterRenderEffect(() => {
+            const { nativeElement } = this.el();
+            if (this.autofocus()) {
+                nativeElement.focus();
+            }
+        });
     }
     /** @internal */
     valueStringify(value) {
@@ -154,9 +138,9 @@ class TextBoxDateComponent extends TextBoxDirective {
         }
         const value = maskitoParseDate(valueAsString, this.maskitoDateParams());
         if (value === null) {
-            return this.writeValue(value);
+            return this.updateValue(value);
         }
-        this.writeValue(value);
+        this.updateValue(value);
     }
     /** @internal */
     onFocusEvent() {
@@ -191,27 +175,27 @@ class TextBoxDateComponent extends TextBoxDirective {
     onPickerChange() {
         const { nativeElement } = this.picker();
         const value = new Date(nativeElement.value);
-        this.writeValue(value);
+        this.updateValue(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TextBoxDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: TextBoxDateComponent, isStandalone: true, selector: "lat-textbox[type=\"date\"]", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
-                provide: HTMLFormControl,
-                useExisting: forwardRef(() => TextBoxDateComponent),
-            },
-        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["htmlInputPicker"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["latTextBox"], usesInheritance: true, ngImport: i0, template: "<input #htmlInputPicker type=\"date\" aria-hidden=\"true\" (change)=\"onPickerChange()\"/>\r\n\r\n<input\r\n  #htmlInputElement\r\n  type=\"text\"\r\n  role=\"textbox\"\r\n  autocomplete=\"off\"\r\n  autocapitalize=\"off\"\r\n  [value]='valueAsString()'\r\n  [attr.id]=\"computedId()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || void 0\"\r\n  [attr.readonly]=\"readonly() || void 0\"\r\n  [attr.required]=\"required() || void 0\"\r\n  [attr.autofocus]=\"autofocus() ? '' : void 0\"\r\n  [attr.placeholder]=\"placeholder() || patternPlaceholder()\"\r\n  [attr.aria-invalid]=\"invalid() || void 0\"\r\n  [attr.aria-disabled]=\"disabled() || void 0\"\r\n  [attr.aria-readonly]=\"readonly() || void 0\"\r\n  [attr.aria-required]=\"required() || void 0\"\r\n  [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n  (blur)=\"onBlurEvent()\"\r\n  (focus)=\"onFocusEvent()\"\r\n  (input)=\"onValueChanged()\"\r\n/>\r\n\r\n@if (!readonly()) {\r\n  <div>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onPickerShow($event)\"\r\n    >\r\n      <lat-icon name=\"calendar-week\" />\r\n    </lat-button>\r\n  </div>\r\n}\r\n\r\n\r\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "lat-button", inputs: ["role", "size", "variant", "disabled", "tabindex"], exportAs: ["latButton"] }, { kind: "component", type: IconComponent, selector: "lat-icon", inputs: ["url", "name"], exportAs: ["latIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+                provide: FormControlComponent,
+                useExisting: forwardRef(() => TextBoxDateComponent)
+            }
+        ], viewQueries: [{ propertyName: "el", first: true, predicate: ["htmlInputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "picker", first: true, predicate: ["htmlInputPicker"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["latTextBox"], usesInheritance: true, ngImport: i0, template: "<input #htmlInputPicker type=\"date\" aria-hidden=\"true\" (change)=\"onPickerChange()\"/>\r\n\r\n<input\r\n  #htmlInputElement\r\n  type=\"text\"\r\n  role=\"textbox\"\r\n  autocomplete=\"off\"\r\n  autocapitalize=\"off\"\r\n  [value]='valueAsString()'\r\n  [attr.id]=\"computedId()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || void 0\"\r\n  [attr.readonly]=\"readonly() || void 0\"\r\n  [attr.required]=\"required() || void 0\"\r\n  [attr.placeholder]=\"placeholder() || patternPlaceholder()\"\r\n  [attr.aria-invalid]=\"invalid() || void 0\"\r\n  [attr.aria-disabled]=\"disabled() || void 0\"\r\n  [attr.aria-readonly]=\"readonly() || void 0\"\r\n  [attr.aria-required]=\"required() || void 0\"\r\n  [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n  (blur)=\"onBlurEvent()\"\r\n  (focus)=\"onFocusEvent()\"\r\n  (input)=\"onValueChanged()\"\r\n/>\r\n\r\n@if (!readonly()) {\r\n  <div>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onPickerShow($event)\"\r\n    >\r\n      <lat-icon name=\"calendar-week\" />\r\n    </lat-button>\r\n  </div>\r\n}\r\n\r\n\r\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "lat-button", inputs: ["role", "size", "variant", "disabled", "tabindex"], exportAs: ["latButton"] }, { kind: "component", type: IconComponent, selector: "lat-icon", inputs: ["role", "url", "name"], exportAs: ["latIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TextBoxDateComponent, decorators: [{
             type: Component,
             args: [{ imports: [ButtonComponent, IconComponent], exportAs: 'latTextBox', selector: 'lat-textbox[type="date"]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
-                            provide: HTMLFormControl,
-                            useExisting: forwardRef(() => TextBoxDateComponent),
-                        },
-                    ], template: "<input #htmlInputPicker type=\"date\" aria-hidden=\"true\" (change)=\"onPickerChange()\"/>\r\n\r\n<input\r\n  #htmlInputElement\r\n  type=\"text\"\r\n  role=\"textbox\"\r\n  autocomplete=\"off\"\r\n  autocapitalize=\"off\"\r\n  [value]='valueAsString()'\r\n  [attr.id]=\"computedId()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || void 0\"\r\n  [attr.readonly]=\"readonly() || void 0\"\r\n  [attr.required]=\"required() || void 0\"\r\n  [attr.autofocus]=\"autofocus() ? '' : void 0\"\r\n  [attr.placeholder]=\"placeholder() || patternPlaceholder()\"\r\n  [attr.aria-invalid]=\"invalid() || void 0\"\r\n  [attr.aria-disabled]=\"disabled() || void 0\"\r\n  [attr.aria-readonly]=\"readonly() || void 0\"\r\n  [attr.aria-required]=\"required() || void 0\"\r\n  [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n  (blur)=\"onBlurEvent()\"\r\n  (focus)=\"onFocusEvent()\"\r\n  (input)=\"onValueChanged()\"\r\n/>\r\n\r\n@if (!readonly()) {\r\n  <div>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onPickerShow($event)\"\r\n    >\r\n      <lat-icon name=\"calendar-week\" />\r\n    </lat-button>\r\n  </div>\r\n}\r\n\r\n\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], picker: [{ type: i0.ViewChild, args: ['htmlInputPicker', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
+                            provide: FormControlComponent,
+                            useExisting: forwardRef(() => TextBoxDateComponent)
+                        }
+                    ], template: "<input #htmlInputPicker type=\"date\" aria-hidden=\"true\" (change)=\"onPickerChange()\"/>\r\n\r\n<input\r\n  #htmlInputElement\r\n  type=\"text\"\r\n  role=\"textbox\"\r\n  autocomplete=\"off\"\r\n  autocapitalize=\"off\"\r\n  [value]='valueAsString()'\r\n  [attr.id]=\"computedId()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || void 0\"\r\n  [attr.readonly]=\"readonly() || void 0\"\r\n  [attr.required]=\"required() || void 0\"\r\n  [attr.placeholder]=\"placeholder() || patternPlaceholder()\"\r\n  [attr.aria-invalid]=\"invalid() || void 0\"\r\n  [attr.aria-disabled]=\"disabled() || void 0\"\r\n  [attr.aria-readonly]=\"readonly() || void 0\"\r\n  [attr.aria-required]=\"required() || void 0\"\r\n  [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n  (blur)=\"onBlurEvent()\"\r\n  (focus)=\"onFocusEvent()\"\r\n  (input)=\"onValueChanged()\"\r\n/>\r\n\r\n@if (!readonly()) {\r\n  <div>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onPickerShow($event)\"\r\n    >\r\n      <lat-icon name=\"calendar-week\" />\r\n    </lat-button>\r\n  </div>\r\n}\r\n\r\n\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { el: [{ type: i0.ViewChild, args: ['htmlInputElement', { ...{ read: (ElementRef) }, isSignal: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], picker: [{ type: i0.ViewChild, args: ['htmlInputPicker', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
-class TextBoxNumberComponent extends TextBoxDirective {
+class TextBoxNumberComponent extends FormControlComponent {
     max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : {}), transform: numberAttribute });
     min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : {}), transform: numberAttribute });
     step = input(undefined, { ...(ngDevMode ? { debugName: "step" } : {}), transform: numberAttribute });
@@ -219,6 +203,7 @@ class TextBoxNumberComponent extends TextBoxDirective {
     decimalSeparator = input(',', ...(ngDevMode ? [{ debugName: "decimalSeparator" }] : []));
     decimalZeroPadding = input(false, ...(ngDevMode ? [{ debugName: "decimalZeroPadding" }] : []));
     thousandSeparator = input('', ...(ngDevMode ? [{ debugName: "thousandSeparator" }] : []));
+    el = viewChild.required('htmlInputElement', { read: (ElementRef) });
     maxvalue = computed(() => this.parseNumber(this.max(), Number.MAX_SAFE_INTEGER), ...(ngDevMode ? [{ debugName: "maxvalue" }] : []));
     minvalue = computed(() => this.parseNumber(this.min(), Number.MIN_SAFE_INTEGER), ...(ngDevMode ? [{ debugName: "minvalue" }] : []));
     nowvalue = computed(() => this.value() || 0, ...(ngDevMode ? [{ debugName: "nowvalue" }] : []));
@@ -238,7 +223,7 @@ class TextBoxNumberComponent extends TextBoxDirective {
             maximumFractionDigits: this.decimals(),
             minimumFractionDigits: this.decimalZeroPadding() ? this.decimals() : 0,
             decimalSeparator: this.decimalSeparator(),
-            thousandSeparator: this.thousandSeparator(),
+            thousandSeparator: this.thousandSeparator()
         };
     }, ...(ngDevMode ? [{ debugName: "maskitoNumberParams" }] : []));
     constructor() {
@@ -254,12 +239,18 @@ class TextBoxNumberComponent extends TextBoxDirective {
                     maskitoInitialCalibrationPlugin(maskitoNumberOptionsGenerator({
                         ...params,
                         min: Number.MIN_SAFE_INTEGER,
-                        max: Number.MAX_SAFE_INTEGER,
-                    })),
-                ],
+                        max: Number.MAX_SAFE_INTEGER
+                    }))
+                ]
             });
             onCleanup(() => instance.destroy());
         });
+        afterRenderEffect(() => {
+            const { nativeElement } = this.el();
+            if (this.autofocus()) {
+                nativeElement.focus();
+            }
+        });
     }
     /** @internal */
     valueStringify(valueAsString) {
@@ -304,12 +295,12 @@ class TextBoxNumberComponent extends TextBoxDirective {
         }
         const value = this.parseNumber(valueAsString);
         if (value === null) {
-            return this.writeValue(value);
+            return this.updateValue(value);
         }
         if (value < this.minvalue() || value > this.maxvalue()) {
             return void 0;
         }
-        this.writeValue(value);
+        this.updateValue(value);
     }
     /** @internal */
     onValueSpined(mul) {
@@ -318,7 +309,7 @@ class TextBoxNumberComponent extends TextBoxDirective {
             return void 0;
         }
         const factor = Math.pow(10, this.decimals());
-        this.writeValue(Math.round(value * factor) / factor);
+        this.updateValue(Math.round(value * factor) / factor);
     }
     /** @internal */
     onFocusEvent() {
@@ -338,24 +329,30 @@ class TextBoxNumberComponent extends TextBoxDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TextBoxNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: TextBoxNumberComponent, isStandalone: true, selector: "lat-textbox[type=\"number\"]", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, decimalSeparator: { classPropertyName: "decimalSeparator", publicName: "decimalSeparator", isSignal: true, isRequired: false, transformFunction: null }, decimalZeroPadding: { classPropertyName: "decimalZeroPadding", publicName: "decimalZeroPadding", isSignal: true, isRequired: false, transformFunction: null }, thousandSeparator: { classPropertyName: "thousandSeparator", publicName: "thousandSeparator", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
-                provide: HTMLFormControl,
-                useExisting: forwardRef(() => TextBoxNumberComponent),
-            },
-        ], exportAs: ["latTextBox"], usesInheritance: true, ngImport: i0, template: "<input\r\n  #htmlInputElement\r\n  type=\"text\"\r\n  role=\"spinbutton\"\r\n  autocomplete=\"off\"\r\n  autocapitalize=\"off\"\r\n  [value]='valueAsString()'\r\n  [attr.id]=\"computedId()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || void 0\"\r\n  [attr.readonly]=\"readonly() || void 0\"\r\n  [attr.required]=\"required() || void 0\"\r\n  [attr.autofocus]=\"autofocus() ? '' : void 0\"\r\n  [attr.maxlength]=\"maxlength()\"\r\n  [attr.placeholder]=\"placeholder()\"\r\n  [attr.aria-invalid]=\"invalid() || void 0\"\r\n  [attr.aria-valuemax]=\"maxvalue()\"\r\n  [attr.aria-valuemin]=\"minvalue()\"\r\n  [attr.aria-valuenow]=\"nowvalue()\"\r\n  [attr.aria-disabled]=\"disabled() || void 0\"\r\n  [attr.aria-readonly]=\"readonly() || void 0\"\r\n  [attr.aria-required]=\"required() || void 0\"\r\n  [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n  (blur)=\"onBlurEvent()\"\r\n  (focus)=\"onFocusEvent()\"\r\n  (input)=\"onValueChanged()\"\r\n/>\r\n\r\n@if (step() && !readonly()) {\r\n  <div>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onValueSpined(1)\"\r\n    >\r\n      <lat-icon name=\"chevron-up\" />\r\n    </lat-button>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onValueSpined(-1)\"\r\n    >\r\n      <lat-icon name=\"chevron-down\" />\r\n    </lat-button>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "lat-button", inputs: ["role", "size", "variant", "disabled", "tabindex"], exportAs: ["latButton"] }, { kind: "component", type: IconComponent, selector: "lat-icon", inputs: ["url", "name"], exportAs: ["latIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+                provide: FormControlComponent,
+                useExisting: forwardRef(() => TextBoxNumberComponent)
+            }
+        ], viewQueries: [{ propertyName: "el", first: true, predicate: ["htmlInputElement"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["latTextBox"], usesInheritance: true, ngImport: i0, template: "<input\r\n  #htmlInputElement\r\n  type=\"text\"\r\n  role=\"spinbutton\"\r\n  autocomplete=\"off\"\r\n  autocapitalize=\"off\"\r\n  [value]='valueAsString()'\r\n  [attr.id]=\"computedId()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || void 0\"\r\n  [attr.readonly]=\"readonly() || void 0\"\r\n  [attr.required]=\"required() || void 0\"\r\n  [attr.maxlength]=\"maxlength()\"\r\n  [attr.placeholder]=\"placeholder()\"\r\n  [attr.aria-invalid]=\"invalid() || void 0\"\r\n  [attr.aria-valuemax]=\"maxvalue()\"\r\n  [attr.aria-valuemin]=\"minvalue()\"\r\n  [attr.aria-valuenow]=\"nowvalue()\"\r\n  [attr.aria-disabled]=\"disabled() || void 0\"\r\n  [attr.aria-readonly]=\"readonly() || void 0\"\r\n  [attr.aria-required]=\"required() || void 0\"\r\n  [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n  (blur)=\"onBlurEvent()\"\r\n  (focus)=\"onFocusEvent()\"\r\n  (input)=\"onValueChanged()\"\r\n/>\r\n\r\n@if (step() && !readonly()) {\r\n  <div>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onValueSpined(1)\"\r\n    >\r\n      <lat-icon name=\"chevron-up\" />\r\n    </lat-button>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onValueSpined(-1)\"\r\n    >\r\n      <lat-icon name=\"chevron-down\" />\r\n    </lat-button>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "lat-button", inputs: ["role", "size", "variant", "disabled", "tabindex"], exportAs: ["latButton"] }, { kind: "component", type: IconComponent, selector: "lat-icon", inputs: ["role", "url", "name"], exportAs: ["latIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TextBoxNumberComponent, decorators: [{
             type: Component,
             args: [{ imports: [ButtonComponent, IconComponent], exportAs: 'latTextBox', selector: 'lat-textbox[type="number"]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
-                            provide: HTMLFormControl,
-                            useExisting: forwardRef(() => TextBoxNumberComponent),
-                        },
-                    ], template: "<input\r\n  #htmlInputElement\r\n  type=\"text\"\r\n  role=\"spinbutton\"\r\n  autocomplete=\"off\"\r\n  autocapitalize=\"off\"\r\n  [value]='valueAsString()'\r\n  [attr.id]=\"computedId()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || void 0\"\r\n  [attr.readonly]=\"readonly() || void 0\"\r\n  [attr.required]=\"required() || void 0\"\r\n  [attr.autofocus]=\"autofocus() ? '' : void 0\"\r\n  [attr.maxlength]=\"maxlength()\"\r\n  [attr.placeholder]=\"placeholder()\"\r\n  [attr.aria-invalid]=\"invalid() || void 0\"\r\n  [attr.aria-valuemax]=\"maxvalue()\"\r\n  [attr.aria-valuemin]=\"minvalue()\"\r\n  [attr.aria-valuenow]=\"nowvalue()\"\r\n  [attr.aria-disabled]=\"disabled() || void 0\"\r\n  [attr.aria-readonly]=\"readonly() || void 0\"\r\n  [attr.aria-required]=\"required() || void 0\"\r\n  [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n  (blur)=\"onBlurEvent()\"\r\n  (focus)=\"onFocusEvent()\"\r\n  (input)=\"onValueChanged()\"\r\n/>\r\n\r\n@if (step() && !readonly()) {\r\n  <div>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onValueSpined(1)\"\r\n    >\r\n      <lat-icon name=\"chevron-up\" />\r\n    </lat-button>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onValueSpined(-1)\"\r\n    >\r\n      <lat-icon name=\"chevron-down\" />\r\n    </lat-button>\r\n  </div>\r\n}\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], decimalSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimalSeparator", required: false }] }], decimalZeroPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimalZeroPadding", required: false }] }], thousandSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "thousandSeparator", required: false }] }] } });
+                            provide: FormControlComponent,
+                            useExisting: forwardRef(() => TextBoxNumberComponent)
+                        }
+                    ], template: "<input\r\n  #htmlInputElement\r\n  type=\"text\"\r\n  role=\"spinbutton\"\r\n  autocomplete=\"off\"\r\n  autocapitalize=\"off\"\r\n  [value]='valueAsString()'\r\n  [attr.id]=\"computedId()\"\r\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\r\n  [attr.disabled]=\"disabled() || void 0\"\r\n  [attr.readonly]=\"readonly() || void 0\"\r\n  [attr.required]=\"required() || void 0\"\r\n  [attr.maxlength]=\"maxlength()\"\r\n  [attr.placeholder]=\"placeholder()\"\r\n  [attr.aria-invalid]=\"invalid() || void 0\"\r\n  [attr.aria-valuemax]=\"maxvalue()\"\r\n  [attr.aria-valuemin]=\"minvalue()\"\r\n  [attr.aria-valuenow]=\"nowvalue()\"\r\n  [attr.aria-disabled]=\"disabled() || void 0\"\r\n  [attr.aria-readonly]=\"readonly() || void 0\"\r\n  [attr.aria-required]=\"required() || void 0\"\r\n  [attr.aria-labelledby]=\"labelledby ? labelledby() : void 0\"\r\n  (blur)=\"onBlurEvent()\"\r\n  (focus)=\"onFocusEvent()\"\r\n  (input)=\"onValueChanged()\"\r\n/>\r\n\r\n@if (step() && !readonly()) {\r\n  <div>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onValueSpined(1)\"\r\n    >\r\n      <lat-icon name=\"chevron-up\" />\r\n    </lat-button>\r\n    <lat-button\r\n      size=\"inherit\"\r\n      variant=\"inherit\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || void 0\"\r\n      (click)=\"onValueSpined(-1)\"\r\n    >\r\n      <lat-icon name=\"chevron-down\" />\r\n    </lat-button>\r\n  </div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], decimalSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimalSeparator", required: false }] }], decimalZeroPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimalZeroPadding", required: false }] }], thousandSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "thousandSeparator", required: false }] }], el: [{ type: i0.ViewChild, args: ['htmlInputElement', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
+
+const TextBoxImports = [
+    TextBoxComponent,
+    TextBoxDateComponent,
+    TextBoxNumberComponent
+];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TextBoxComponent, TextBoxDateComponent, TextBoxDirective, TextBoxNumberComponent };
+export { TextBoxComponent, TextBoxDateComponent, TextBoxImports, TextBoxNumberComponent };
 //# sourceMappingURL=latitude-ui-widgets-textbox.mjs.map