@latitude-ui/widgets 0.0.26 → 0.0.27

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import { HTMLInputDirective } from '@latitude-ui/widgets/input';
+import { HTMLFormControl } from '@latitude-ui/widgets/core';
 import { IconComponent } from '@latitude-ui/widgets/icons';
 
-class CheckBoxComponent extends HTMLInputDirective {
+class CheckBoxComponent extends HTMLFormControl {
     toggle() {
         if (!this.disabled()) {
             const value = this.value() ?? false;
@@ -13,10 +13,10 @@ class CheckBoxComponent extends HTMLInputDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CheckBoxComponent, isStandalone: true, selector: "lat-checkbox", host: { listeners: { "click": "toggle()" } }, providers: [
             {
-                provide: HTMLInputDirective,
+                provide: HTMLFormControl,
                 useExisting: forwardRef(() => CheckBoxComponent),
             },
-        ], exportAs: ["latCheckBox"], usesInheritance: true, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"inputId()\"\n  [attr.value]=\"value() ? 'on' : 'off'\"\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\n  [attr.disabled]=\"disabled() || undefined\"\n  [attr.aria-checked]=\"value() || false\"\n>\n  <lat-icon name=\"check\" />\n</button>\n<ng-content/>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "lat-icon", inputs: ["url", "name"], exportAs: ["latIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], exportAs: ["latCheckBox"], usesInheritance: true, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"computedId()\"\n  [attr.value]=\"value() ? 'on' : 'off'\"\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\n  [attr.disabled]=\"disabled() || undefined\"\n  [attr.aria-checked]=\"value() || false\"\n>\n  <lat-icon name=\"check\" />\n</button>\n<ng-content/>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "lat-icon", inputs: ["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: CheckBoxComponent, decorators: [{
             type: Component,
@@ -24,12 +24,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         IconComponent
                     ], exportAs: 'latCheckBox', selector: 'lat-checkbox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
-                            provide: HTMLInputDirective,
+                            provide: HTMLFormControl,
                             useExisting: forwardRef(() => CheckBoxComponent),
                         },
                     ], host: {
                         '(click)': 'toggle()',
-                    }, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"inputId()\"\n  [attr.value]=\"value() ? 'on' : 'off'\"\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\n  [attr.disabled]=\"disabled() || undefined\"\n  [attr.aria-checked]=\"value() || false\"\n>\n  <lat-icon name=\"check\" />\n</button>\n<ng-content/>\n" }]
+                    }, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"computedId()\"\n  [attr.value]=\"value() ? 'on' : 'off'\"\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\n  [attr.disabled]=\"disabled() || undefined\"\n  [attr.aria-checked]=\"value() || false\"\n>\n  <lat-icon name=\"check\" />\n</button>\n<ng-content/>\n" }]
         }] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"latitude-ui-widgets-checkbox.mjs","sources":["../../../../packages/widgets/checkbox/lib/checkbox.component.ts","../../../../packages/widgets/checkbox/lib/checkbox.component.html","../../../../packages/widgets/checkbox/latitude-ui-widgets-checkbox.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';\nimport { HTMLInputDirective } from '@latitude-ui/widgets/input';\nimport { IconComponent } from '@latitude-ui/widgets/icons';\n\n@Component({\n  imports: [\n    IconComponent\n  ],\n  exportAs: 'latCheckBox',\n  selector: 'lat-checkbox',\n  templateUrl: './checkbox.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: HTMLInputDirective,\n      useExisting: forwardRef(() => CheckBoxComponent),\n    },\n  ],\n  host: {\n    '(click)': 'toggle()',\n  },\n})\nexport class CheckBoxComponent extends HTMLInputDirective<boolean> {\n  toggle() {\n    if (!this.disabled()) {\n      const value = this.value() ?? false;\n\n      this.writeValue(!value);\n    }\n  }\n}\n","<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"inputId()\"\n  [attr.value]=\"value() ? 'on' : 'off'\"\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\n  [attr.disabled]=\"disabled() || undefined\"\n  [attr.aria-checked]=\"value() || false\"\n>\n  <lat-icon name=\"check\" />\n</button>\n<ng-content/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAuBM,MAAO,iBAAkB,SAAQ,kBAA2B,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,UAAU,CAAC,CAAC,KAAK,CAAC;QACzB;IACF;uGAPW,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,UAAA,EAAA,EAAA,EAAA,SAAA,EAVjB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,kBAAkB;AAC3B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AACjD,aAAA;SACF,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBH,oUAYA,4CDNI,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,MAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAiBJ,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAnB7B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA;wBACP;qBACD,EAAA,QAAA,EACS,aAAa,EAAA,QAAA,EACb,cAAc,EAAA,aAAA,EAET,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,SAAA,EACpC;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,kBAAkB;AAC3B,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AACjD,yBAAA;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,SAAS,EAAE,UAAU;AACtB,qBAAA,EAAA,QAAA,EAAA,oUAAA,EAAA;;;AErBH;;AAEG;;;;"}
+{"version":3,"file":"latitude-ui-widgets-checkbox.mjs","sources":["../../../../packages/widgets/checkbox/lib/checkbox.component.ts","../../../../packages/widgets/checkbox/lib/checkbox.component.html","../../../../packages/widgets/checkbox/latitude-ui-widgets-checkbox.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';\r\nimport { HTMLFormControl } from '@latitude-ui/widgets/core';\r\nimport { IconComponent } from '@latitude-ui/widgets/icons';\r\n\r\n@Component({\r\n  imports: [\r\n    IconComponent\r\n  ],\r\n  exportAs: 'latCheckBox',\r\n  selector: 'lat-checkbox',\r\n  templateUrl: './checkbox.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(() => CheckBoxComponent),\r\n    },\r\n  ],\r\n  host: {\r\n    '(click)': 'toggle()',\r\n  },\r\n})\r\nexport class CheckBoxComponent 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\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"computedId()\"\n  [attr.value]=\"value() ? 'on' : 'off'\"\n  [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\n  [attr.disabled]=\"disabled() || undefined\"\n  [attr.aria-checked]=\"value() || false\"\n>\n  <lat-icon name=\"check\" />\n</button>\n<ng-content/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAuBM,MAAO,iBAAkB,SAAQ,eAAwB,CAAA;IAC7D,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,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,UAAA,EAAA,EAAA,EAAA,SAAA,EAVjB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,eAAe;AACxB,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AACjD,aAAA;SACF,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBH,uUAYA,4CDNI,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,MAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAiBJ,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAnB7B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA;wBACP;qBACD,EAAA,QAAA,EACS,aAAa,EAAA,QAAA,EACb,cAAc,EAAA,aAAA,EAET,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,uBAAuB,CAAC;AACjD,yBAAA;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,SAAS,EAAE,UAAU;AACtB,qBAAA,EAAA,QAAA,EAAA,uUAAA,EAAA;;;AErBH;;AAEG;;;;"}

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

@@ -1,22 +1,180 @@
-import { InjectionToken } from '@angular/core';
-
-const LAT_ASSETS_PATH = new InjectionToken(ngDevMode ? 'LAT_ASSETS_PATH' : '', {
-    factory: () => {
-        return 'assets/latlng';
-    }
-});
+import * as i0 from '@angular/core';
+import { InjectionToken, input, contentChild, computed, Directive, inject, numberAttribute, booleanAttribute, linkedSignal, signal } from '@angular/core';
+import { NgControl } from '@angular/forms';
 
 function noop() {
     //
 }
 
+const ARIA_LABELLEDBY = new InjectionToken('ARIA_LABELLEDBY');
+const ARIA_ERRORMESSAGE = new InjectionToken('ARIA_ERRORMESSAGE');
+
 function uid() {
     return `${Math.random().toString(36).slice(2, 11)}`;
 }
 
+class HTMLFormControlContainer {
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    control = contentChild.required((HTMLFormControl));
+    htmlId = computed(() => this.id() ?? uid(), ...(ngDevMode ? [{ debugName: "htmlId" }] : []));
+    controlId = computed(() => `lat-control-${this.htmlId()}`, ...(ngDevMode ? [{ debugName: "controlId" }] : []));
+    value = computed(() => this.control().value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valueAsString = computed(() => this.control().valueAsString(), ...(ngDevMode ? [{ debugName: "valueAsString" }] : []));
+    status = computed(() => this.control().status(), ...(ngDevMode ? [{ debugName: "status" }] : []));
+    touched = computed(() => this.control().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    dirty = computed(() => this.control().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
+    valid = computed(() => this.control().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : []));
+    errors = computed(() => this.control().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    invalid = computed(() => this.control().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    pending = computed(() => this.control().pending(), ...(ngDevMode ? [{ debugName: "pending" }] : []));
+    pristine = computed(() => this.control().pristine(), ...(ngDevMode ? [{ debugName: "pristine" }] : []));
+    disabled = computed(() => this.control().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = computed(() => this.control().readonly(), ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    required = computed(() => this.control().required(), ...(ngDevMode ? [{ debugName: "required" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HTMLFormControlContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.3", type: HTMLFormControlContainer, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "htmlId()", "attr.size": "size()", "attr.variant": "variant()" } }, queries: [{ propertyName: "control", first: true, predicate: (HTMLFormControl), descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HTMLFormControlContainer, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.id]': 'htmlId()',
+                        '[attr.size]': 'size()',
+                        '[attr.variant]': 'variant()',
+                    }
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HTMLFormControl), { isSignal: true }] }] } });
+
+class HTMLFormControl {
+    dir = inject(NgControl, { self: true });
+    ownerCt = inject(HTMLFormControlContainer, { host: true, optional: true });
+    labelledby = inject(ARIA_LABELLEDBY, { host: true, optional: true });
+    errormessage = inject(ARIA_ERRORMESSAGE, { host: true, optional: true });
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : {}), transform: numberAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
+    autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : {}), transform: booleanAttribute });
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    control = computed(() => this._control(), ...(ngDevMode ? [{ debugName: "control" }] : []));
+    valueAsString = linkedSignal({ ...(ngDevMode ? { debugName: "valueAsString" } : {}), source: () => this._value(),
+        computation: (value) => this.valueStringify(value) });
+    status = computed(() => this._control()?.['statusReactive'](), ...(ngDevMode ? [{ debugName: "status" }] : []));
+    touched = computed(() => this._control()?.['touchedReactive'](), ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    pristine = computed(() => this._control()?.['pristineReactive'](), ...(ngDevMode ? [{ debugName: "pristine" }] : []));
+    valid = computed(() => this.status() === 'VALID', ...(ngDevMode ? [{ debugName: "valid" }] : []));
+    invalid = computed(() => this.status() === 'INVALID', ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    pending = computed(() => this.status() === 'PENDING', ...(ngDevMode ? [{ debugName: "pending" }] : []));
+    disabled = computed(() => this.status() === 'DISABLED', ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    dirty = computed(() => !this.pristine(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
+    errors = computed(() => {
+        this.value();
+        this.status();
+        const control = this.control();
+        return control ? control.errors : null;
+    }, ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    computedId = computed(() => this.ownerCt ? this.ownerCt.controlId() : this.id(), ...(ngDevMode ? [{ debugName: "computedId" }] : []));
+    computedSize = computed(() => this.ownerCt ? this.ownerCt.size() : this.size(), ...(ngDevMode ? [{ debugName: "computedSize" }] : []));
+    computedVariant = computed(() => this.ownerCt ? this.ownerCt.variant() : this.variant(), ...(ngDevMode ? [{ debugName: "computedVariant" }] : []));
+    /** @internal */
+    _value = signal(this.dir.value, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    /** @internal */
+    _control = signal(null, ...(ngDevMode ? [{ debugName: "_control" }] : []));
+    constructor() {
+        this.dir.valueAccessor = {
+            writeValue: (value) => {
+                this._writeValue(value);
+            },
+            registerOnChange: (callback) => {
+                this._markAsChanged = () => callback(this._value());
+                // FIXME: while FromControlNameDirective not register, underline control is undefined
+                Promise.resolve().then(() => {
+                    this._control.update(() => this.dir.control);
+                });
+            },
+            registerOnTouched: (callback) => {
+                this._markAsTouched = () => callback();
+            }
+        };
+    }
+    /**
+     * Sets the "value" property on the input element.
+     */
+    writeValue(value) {
+        if (this._writeValue(value)) {
+            this._markAsChanged();
+        }
+    }
+    /**
+     * Marks the control as `dirty`.
+     */
+    markAsChanged() {
+        this._markAsChanged();
+    }
+    /**
+     * Marks the control as `touched`.
+     */
+    markAsTouched() {
+        this._markAsTouched();
+    }
+    /** @internal */
+    valueEquality(value0, value1) {
+        return Object.is(value0, value1);
+    }
+    /** @internal */
+    valueStringify(value) {
+        return value !== null && value !== undefined ? value.toString() : '';
+    }
+    /** @internal */
+    _writeValue(input) {
+        const value = this._value();
+        if (this.valueEquality(value, input)) {
+            return false;
+        }
+        this._value.set(input);
+        return true;
+    }
+    /** @internal */
+    _markAsTouched = noop;
+    /** @internal */
+    _markAsChanged = noop;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HTMLFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: HTMLFormControl, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", 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 }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.size": "computedSize() || undefined", "attr.variant": "computedVariant() || undefined", "attr.data-id": "computedId() || undefined", "attr.data-dirty": "dirty() || undefined", "attr.data-invalid": "invalid() || undefined", "attr.data-pristine": "pristine() || undefined", "attr.data-disabled": "disabled() || undefined", "attr.data-readonly": "readonly() || undefined", "attr.data-required": "required() || undefined" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HTMLFormControl, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.size]': 'computedSize() || undefined',
+                        '[attr.variant]': 'computedVariant() || undefined',
+                        '[attr.data-id]': 'computedId() || undefined',
+                        '[attr.data-dirty]': 'dirty() || undefined',
+                        '[attr.data-invalid]': 'invalid() || undefined',
+                        '[attr.data-pristine]': 'pristine() || undefined',
+                        '[attr.data-disabled]': 'disabled() || undefined',
+                        '[attr.data-readonly]': 'readonly() || undefined',
+                        '[attr.data-required]': 'required() || undefined'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+const VARIANT_PATTERN = new InjectionToken('VARIANT_PATTERN');
+const BOX_SIZE_PATTERN = new InjectionToken('BOX_SIZE_PATTERN');
+
+const LAT_ASSETS_PATH = new InjectionToken(ngDevMode ? 'LAT_ASSETS_PATH' : '', {
+    factory: () => {
+        return 'assets/latlng';
+    }
+});
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LAT_ASSETS_PATH, noop, uid };
+export { ARIA_ERRORMESSAGE, ARIA_LABELLEDBY, BOX_SIZE_PATTERN, HTMLFormControl, HTMLFormControlContainer, LAT_ASSETS_PATH, VARIANT_PATTERN, noop, uid };
 //# sourceMappingURL=latitude-ui-widgets-core.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"latitude-ui-widgets-core.mjs","sources":["../../../../packages/widgets/core/lib/assets.ts","../../../../packages/widgets/core/lib/noop.ts","../../../../packages/widgets/core/lib/uid.ts","../../../../packages/widgets/core/latitude-ui-widgets-core.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\n\r\nexport const LAT_ASSETS_PATH = new InjectionToken(\r\n  ngDevMode ? 'LAT_ASSETS_PATH' : '',\r\n  {\r\n    factory: () => {\r\n      return 'assets/latlng';\r\n    }\r\n  }\r\n);\r\n","\r\n\r\nexport function noop() {\r\n  //\r\n}\r\n","export function uid(): string {\r\n  return `${Math.random().toString(36).slice(2, 11)}`;\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAGO,MAAM,eAAe,GAAG,IAAI,cAAc,CAC/C,SAAS,GAAG,iBAAiB,GAAG,EAAE,EAClC;IACE,OAAO,EAAE,MAAK;AACZ,QAAA,OAAO,eAAe;IACxB;AACD,CAAA;;SCPa,IAAI,GAAA;;AAEpB;;SCJgB,GAAG,GAAA;AACjB,IAAA,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE;AACrD;;ACFA;;AAEG;;;;"}
+{"version":3,"file":"latitude-ui-widgets-core.mjs","sources":["../../../../packages/widgets/core/lib/noop.ts","../../../../packages/widgets/core/lib/forms/control-aria.ts","../../../../packages/widgets/core/lib/uid.ts","../../../../packages/widgets/core/lib/forms/control-container.ts","../../../../packages/widgets/core/lib/forms/control.ts","../../../../packages/widgets/core/lib/appearance.ts","../../../../packages/widgets/core/lib/assets.ts","../../../../packages/widgets/core/latitude-ui-widgets-core.ts"],"sourcesContent":["\r\n\r\nexport function noop() {\r\n  //\r\n}\r\n","import { InjectionToken, Signal } from '@angular/core';\r\n\r\n\r\nexport const ARIA_LABELLEDBY = new InjectionToken<Signal<string>>('ARIA_LABELLEDBY');\r\nexport const ARIA_ERRORMESSAGE = new InjectionToken<Signal<string>>('ARIA_ERRORMESSAGE');\r\n","export function uid(): string {\r\n  return `${Math.random().toString(36).slice(2, 11)}`;\r\n}\r\n","import { computed, contentChild, Directive, input } from '@angular/core';\r\n\r\nimport { uid } from '../uid';\r\nimport { HTMLFormControlSize, HTMLFormControlVariant, HTMLFormControl } from './control';\r\n\r\n\r\n@Directive({\r\n  host: {\r\n    '[attr.id]': 'htmlId()',\r\n    '[attr.size]': 'size()',\r\n    '[attr.variant]': 'variant()',\r\n  }\r\n})\r\nexport class HTMLFormControlContainer<T> {\r\n  readonly id = input<string>();\r\n  readonly size = input<HTMLFormControlSize>('md');\r\n  readonly variant = input<HTMLFormControlVariant>('default');\r\n\r\n  readonly control = contentChild.required(HTMLFormControl<T>);\r\n\r\n  readonly htmlId = computed(() => this.id() ?? uid());\r\n  readonly controlId = computed(() => `lat-control-${this.htmlId()}`);\r\n\r\n  readonly value = computed(() => this.control().value());\r\n  readonly valueAsString = computed(() => this.control().valueAsString());\r\n\r\n  readonly status = computed(() => this.control().status());\r\n  readonly touched = computed(() => this.control().touched());\r\n\r\n  readonly dirty = computed(() => this.control().dirty());\r\n  readonly valid = computed(() => this.control().valid());\r\n  readonly errors = computed(() => this.control().errors());\r\n  readonly invalid = computed(() => this.control().invalid());\r\n  readonly pending = computed(() => this.control().pending());\r\n  readonly pristine = computed(() => this.control().pristine());\r\n  readonly disabled = computed(() => this.control().disabled());\r\n  readonly readonly = computed(() => this.control().readonly());\r\n  readonly required = computed(() => this.control().required());\r\n}\r\n","import {\r\n  booleanAttribute,\r\n  computed,\r\n  Directive,\r\n  inject,\r\n  input,\r\n  linkedSignal,\r\n  numberAttribute,\r\n  signal\r\n} from '@angular/core';\r\nimport { AbstractControl, FormControlStatus, NgControl } from '@angular/forms';\r\n\r\nimport { BoxSize } from '../appearance';\r\nimport { noop } from '../noop';\r\n\r\nimport { ARIA_ERRORMESSAGE, ARIA_LABELLEDBY } from './control-aria';\r\nimport { HTMLFormControlContainer } from './control-container';\r\n\r\nexport type HTMLFormControlSize = BoxSize;\r\nexport type HTMLFormControlVariant = 'default' | 'inherit' | ({} & string);\r\n\r\n@Directive({\r\n  host: {\r\n    '[attr.size]': 'computedSize() || undefined',\r\n    '[attr.variant]': 'computedVariant() || undefined',\r\n    '[attr.data-id]': 'computedId() || undefined',\r\n    '[attr.data-dirty]': 'dirty() || undefined',\r\n    '[attr.data-invalid]': 'invalid() || undefined',\r\n    '[attr.data-pristine]': 'pristine() || undefined',\r\n    '[attr.data-disabled]': 'disabled() || undefined',\r\n    '[attr.data-readonly]': 'readonly() || undefined',\r\n    '[attr.data-required]': 'required() || undefined'\r\n  }\r\n})\r\nexport class HTMLFormControl<T> {\r\n  readonly dir = inject(NgControl, { self: true });\r\n  readonly ownerCt = inject(HTMLFormControlContainer, { host: true, optional: true });\r\n\r\n  readonly labelledby = inject(ARIA_LABELLEDBY,{ host: true, optional: true });\r\n  readonly errormessage = inject(ARIA_ERRORMESSAGE, { host: true, optional: true });\r\n\r\n  readonly id = input<string>();\r\n  readonly size = input<HTMLFormControlSize>('md');\r\n  readonly variant = input<HTMLFormControlVariant>('default');\r\n  readonly tabindex = input<number, unknown>(0, { transform: numberAttribute });\r\n  readonly readonly = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly required = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly autofocus = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly placeholder = input<string>();\r\n\r\n  readonly value = computed(() => this._value());\r\n  readonly control = computed(() => this._control());\r\n\r\n  readonly valueAsString = linkedSignal({\r\n    source: () => this._value(),\r\n    computation: (value) => this.valueStringify(value)\r\n  });\r\n\r\n  readonly status = computed(() => this._control()?.['statusReactive']() as FormControlStatus);\r\n  readonly touched = computed(() => this._control()?.['touchedReactive']() as boolean);\r\n  readonly pristine = computed(() => this._control()?.['pristineReactive']() as boolean);\r\n\r\n  readonly valid = computed(() => this.status() === 'VALID');\r\n  readonly invalid = computed(() => this.status() === 'INVALID');\r\n  readonly pending = computed(() => this.status() === 'PENDING');\r\n  readonly disabled = computed(() => this.status() === 'DISABLED');\r\n\r\n  readonly dirty = computed(() => !this.pristine());\r\n  readonly errors = computed(() => {\r\n    this.value();\r\n    this.status();\r\n\r\n    const control = this.control();\r\n\r\n    return control ? control.errors : null;\r\n  });\r\n\r\n  readonly computedId = computed(() => this.ownerCt ? this.ownerCt.controlId() : this.id());\r\n  readonly computedSize = computed(() => this.ownerCt ? this.ownerCt.size() : this.size());\r\n  readonly computedVariant = computed(() => this.ownerCt ? this.ownerCt.variant() : this.variant());\r\n\r\n  /** @internal */\r\n  readonly _value = signal<T | null>(this.dir.value);\r\n\r\n  /** @internal */\r\n  readonly _control = signal<AbstractControl | null>(null);\r\n\r\n  constructor() {\r\n    this.dir.valueAccessor = {\r\n      writeValue: (value: T | null) => {\r\n        this._writeValue(value);\r\n      },\r\n      registerOnChange: (callback: (value: T | null) => void) => {\r\n        this._markAsChanged = () => callback(this._value());\r\n\r\n        // FIXME: while FromControlNameDirective not register, underline control is undefined\r\n        Promise.resolve().then(() => {\r\n          this._control.update(() => this.dir.control);\r\n        });\r\n      },\r\n      registerOnTouched: (callback: () => void) => {\r\n        this._markAsTouched = () => callback();\r\n      }\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Sets the \"value\" property on the input element.\r\n   */\r\n  writeValue(value: T | null): void {\r\n    if (this._writeValue(value)) {\r\n      this._markAsChanged();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Marks the control as `dirty`.\r\n   */\r\n  markAsChanged(): void {\r\n    this._markAsChanged();\r\n  }\r\n\r\n  /**\r\n   * Marks the control as `touched`.\r\n   */\r\n  markAsTouched(): void {\r\n    this._markAsTouched();\r\n  }\r\n\r\n  /** @internal */\r\n  valueEquality(value0: T | null, value1: unknown): boolean {\r\n    return Object.is(value0, value1);\r\n  }\r\n\r\n  /** @internal */\r\n  valueStringify(value: unknown): string {\r\n    return value !== null && value !== undefined ? value.toString() : '';\r\n  }\r\n\r\n  /** @internal */\r\n  _writeValue(input: T | null): boolean {\r\n    const value = this._value();\r\n\r\n    if (this.valueEquality(value, input)) {\r\n      return false;\r\n    }\r\n\r\n    this._value.set(input);\r\n\r\n    return true;\r\n  }\r\n\r\n  /** @internal */\r\n  _markAsTouched: VoidFunction = noop;\r\n\r\n  /** @internal */\r\n  _markAsChanged: VoidFunction = noop;\r\n}\r\n","import { InjectionToken } from '@angular/core';\r\n\r\n\r\nexport type BoxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit';\r\n\r\nexport const VARIANT_PATTERN = new InjectionToken<string>('VARIANT_PATTERN');\r\nexport const BOX_SIZE_PATTERN = new InjectionToken<BoxSize>('BOX_SIZE_PATTERN');\r\n","import { InjectionToken } from '@angular/core';\r\n\r\n\r\nexport const LAT_ASSETS_PATH = new InjectionToken(\r\n  ngDevMode ? 'LAT_ASSETS_PATH' : '',\r\n  {\r\n    factory: () => {\r\n      return 'assets/latlng';\r\n    }\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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"}

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

@@ -1,186 +1,40 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, numberAttribute, booleanAttribute, computed, linkedSignal, signal, Directive, contentChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import { noop, uid } from '@latitude-ui/widgets/core';
-import { NgControl } from '@angular/forms';
+import { computed, inject, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { HTMLFormControlContainer, ARIA_LABELLEDBY, ARIA_ERRORMESSAGE } from '@latitude-ui/widgets/core';
 
-const INPUT_OPTIONS = new InjectionToken(ngDevMode ? 'INPUT_OPTIONS' : '', {
-    factory: () => {
-        return {
-            size: 'md',
-            variant: 'default',
-        };
-    }
-});
-
-class HTMLInputDirective {
-    options = inject(INPUT_OPTIONS);
-    dir = inject(NgControl, { self: true });
-    input = inject((InputComponent), { host: true, optional: true });
-    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
-    size = input(this.options.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
-    variant = input(this.options.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : {}), transform: numberAttribute });
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
-    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
-    autofocus = input(undefined, { ...(ngDevMode ? { debugName: "autofocus" } : {}), transform: booleanAttribute });
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
-    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
-    control = computed(() => this._control(), ...(ngDevMode ? [{ debugName: "control" }] : []));
-    valueAsString = linkedSignal({ ...(ngDevMode ? { debugName: "valueAsString" } : {}), source: () => this._value(),
-        computation: (value) => this.valueStringify(value) });
-    status = computed(() => this._control()?.['statusReactive'](), ...(ngDevMode ? [{ debugName: "status" }] : []));
-    touched = computed(() => this._control()?.['touchedReactive'](), ...(ngDevMode ? [{ debugName: "touched" }] : []));
-    pristine = computed(() => this._control()?.['pristineReactive'](), ...(ngDevMode ? [{ debugName: "pristine" }] : []));
-    valid = computed(() => this.status() === 'VALID', ...(ngDevMode ? [{ debugName: "valid" }] : []));
-    invalid = computed(() => this.status() === 'INVALID', ...(ngDevMode ? [{ debugName: "invalid" }] : []));
-    pending = computed(() => this.status() === 'PENDING', ...(ngDevMode ? [{ debugName: "pending" }] : []));
-    disabled = computed(() => this.status() === 'DISABLED', ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    dirty = computed(() => !this.pristine(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
-    errors = computed(() => {
-        this.value();
-        this.status();
-        const control = this.control();
-        return control ? control.errors : null;
-    }, ...(ngDevMode ? [{ debugName: "errors" }] : []));
-    labelId = computed(() => this.input ? this.input.labelId() : undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : []));
-    inputId = computed(() => this.input ? this.input.inputId() : this.id(), ...(ngDevMode ? [{ debugName: "inputId" }] : []));
-    inputSize = computed(() => this.input ? this.input.size() : this.size(), ...(ngDevMode ? [{ debugName: "inputSize" }] : []));
-    inputVariant = computed(() => this.input ? this.input.variant() : this.variant(), ...(ngDevMode ? [{ debugName: "inputVariant" }] : []));
-    outputId = computed(() => this.input ? this.input.outputId() : undefined, ...(ngDevMode ? [{ debugName: "outputId" }] : []));
-    /** @internal */
-    _value = signal(this.dir.value, ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    /** @internal */
-    _control = signal(null, ...(ngDevMode ? [{ debugName: "_control" }] : []));
-    constructor() {
-        this.dir.valueAccessor = {
-            writeValue: (value) => {
-                this._writeValue(value);
-            },
-            registerOnChange: (callback) => {
-                this._markAsChanged = () => callback(this._value());
-                // FIXME: while FromControlNameDirective not register, underline control is undefined
-                Promise.resolve().then(() => {
-                    this._control.update(() => this.dir.control);
-                });
-            },
-            registerOnTouched: (callback) => {
-                this._markAsTouched = () => callback();
-            }
-        };
-    }
-    /**
-     * Sets the "value" property on the input element.
-     */
-    writeValue(value) {
-        if (this._writeValue(value)) {
-            this._markAsChanged();
-        }
-    }
-    /**
-     * Marks the control as `dirty`.
-     */
-    markAsChanged() {
-        this._markAsChanged();
-    }
-    /**
-     * Marks the control as `touched`.
-     */
-    markAsTouched() {
-        this._markAsTouched();
-    }
-    /** @internal */
-    valueEquality(value0, value1) {
-        return Object.is(value0, value1);
-    }
-    /** @internal */
-    valueStringify(value) {
-        return value !== null && value !== undefined ? value.toString() : '';
-    }
-    /** @internal */
-    _writeValue(input) {
-        const value = this._value();
-        if (this.valueEquality(value, input)) {
-            return false;
-        }
-        this._value.set(input);
-        return true;
-    }
-    /** @internal */
-    _markAsTouched = noop;
-    /** @internal */
-    _markAsChanged = noop;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HTMLInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: HTMLInputDirective, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", 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 }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.size": "inputSize() || undefined", "attr.variant": "inputVariant() || undefined", "attr.data-id": "inputId() || undefined", "attr.data-label": "labelId() || undefined", "attr.data-output": "outputId() || undefined", "attr.data-dirty": "dirty() || undefined", "attr.data-invalid": "invalid() || undefined", "attr.data-pristine": "pristine() || undefined", "attr.data-disabled": "disabled() || undefined", "attr.data-readonly": "readonly() || undefined", "attr.data-required": "required() || undefined" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HTMLInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    host: {
-                        role: 'presentation',
-                        '[attr.size]': 'inputSize() || undefined',
-                        '[attr.variant]': 'inputVariant() || undefined',
-                        '[attr.data-id]': 'inputId() || undefined',
-                        '[attr.data-label]': 'labelId() || undefined',
-                        '[attr.data-output]': 'outputId() || undefined',
-                        '[attr.data-dirty]': 'dirty() || undefined',
-                        '[attr.data-invalid]': 'invalid() || undefined',
-                        '[attr.data-pristine]': 'pristine() || undefined',
-                        '[attr.data-disabled]': 'disabled() || undefined',
-                        '[attr.data-readonly]': 'readonly() || undefined',
-                        '[attr.data-required]': 'required() || undefined'
-                    }
-                }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
-
-class InputComponent {
-    options = inject(INPUT_OPTIONS);
-    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
-    size = input(this.options.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
-    variant = input(this.options.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    input = contentChild.required((HTMLInputDirective));
-    htmlId = computed(() => this.id() ?? uid(), ...(ngDevMode ? [{ debugName: "htmlId" }] : []));
+class InputComponent extends HTMLFormControlContainer {
     labelId = computed(() => `lat-label-${this.htmlId()}`, ...(ngDevMode ? [{ debugName: "labelId" }] : []));
-    inputId = computed(() => `lat-input-${this.htmlId()}`, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
     outputId = computed(() => `lat-output-${this.htmlId()}`, ...(ngDevMode ? [{ debugName: "outputId" }] : []));
-    value = computed(() => this.input().value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
-    valueAsString = computed(() => this.input().valueAsString(), ...(ngDevMode ? [{ debugName: "valueAsString" }] : []));
-    status = computed(() => this.input().status(), ...(ngDevMode ? [{ debugName: "status" }] : []));
-    touched = computed(() => this.input().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : []));
-    dirty = computed(() => this.input().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
-    valid = computed(() => this.input().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : []));
-    errors = computed(() => this.input().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : []));
-    invalid = computed(() => this.input().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : []));
-    pending = computed(() => this.input().pending(), ...(ngDevMode ? [{ debugName: "pending" }] : []));
-    pristine = computed(() => this.input().pristine(), ...(ngDevMode ? [{ debugName: "pristine" }] : []));
-    disabled = computed(() => this.input().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    readonly = computed(() => this.input().readonly(), ...(ngDevMode ? [{ debugName: "readonly" }] : []));
-    required = computed(() => this.input().required(), ...(ngDevMode ? [{ debugName: "required" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: InputComponent, isStandalone: true, selector: "lat-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.id": "htmlId()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-label": "labelId()", "attr.data-input": "inputId()", "attr.data-output": "outputId()", "attr.data-dirty": "dirty() || undefined", "attr.data-invalid": "invalid() || undefined", "attr.data-pristine": "pristine() || undefined", "attr.data-disabled": "disabled() || undefined", "attr.data-readonly": "readonly() || undefined", "attr.data-required": "required() || undefined" } }, queries: [{ propertyName: "input", first: true, predicate: (HTMLInputDirective), descendants: true, isSignal: true }], exportAs: ["latInput"], ngImport: i0, template: "<ng-content select=\"lat-label\" />\r\n\r\n<ng-content />\r\n\r\n@if (dirty() && errors()) {\r\n  <ng-content select=\"lat-output\" />\r\n}\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: InputComponent, isStandalone: true, selector: "lat-input", providers: [
+            {
+                provide: ARIA_LABELLEDBY,
+                useFactory: () => inject(InputComponent, { self: true }).labelId
+            },
+            {
+                provide: ARIA_ERRORMESSAGE,
+                useFactory: () => inject(InputComponent, { self: true }).outputId
+            },
+        ], exportAs: ["latInput"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"lat-label\" />\r\n\r\n<ng-content />\r\n\r\n@if (dirty() && errors()) {\r\n  <ng-content select=\"lat-output\" />\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: InputComponent, decorators: [{
             type: Component,
-            args: [{ exportAs: 'latInput', selector: 'lat-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        role: 'presentation',
-                        '[attr.id]': 'htmlId()',
-                        '[attr.data-size]': 'size()',
-                        '[attr.data-variant]': 'variant()',
-                        '[attr.data-label]': 'labelId()',
-                        '[attr.data-input]': 'inputId()',
-                        '[attr.data-output]': 'outputId()',
-                        '[attr.data-dirty]': 'dirty() || undefined',
-                        '[attr.data-invalid]': 'invalid() || undefined',
-                        '[attr.data-pristine]': 'pristine() || undefined',
-                        '[attr.data-disabled]': 'disabled() || undefined',
-                        '[attr.data-readonly]': 'readonly() || undefined',
-                        '[attr.data-required]': 'required() || undefined'
-                    }, template: "<ng-content select=\"lat-label\" />\r\n\r\n<ng-content />\r\n\r\n@if (dirty() && errors()) {\r\n  <ng-content select=\"lat-output\" />\r\n}\r\n" }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HTMLInputDirective), { isSignal: true }] }] } });
+            args: [{ exportAs: 'latInput', selector: 'lat-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ARIA_LABELLEDBY,
+                            useFactory: () => inject(InputComponent, { self: true }).labelId
+                        },
+                        {
+                            provide: ARIA_ERRORMESSAGE,
+                            useFactory: () => inject(InputComponent, { self: true }).outputId
+                        },
+                    ], template: "<ng-content select=\"lat-label\" />\r\n\r\n<ng-content />\r\n\r\n@if (dirty() && errors()) {\r\n  <ng-content select=\"lat-output\" />\r\n}\r\n" }]
+        }] });
 
 class LabelComponent {
     input = inject((InputComponent), { host: true });
     id = computed(() => this.input.labelId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
-    htmlFor = computed(() => this.input.inputId(), ...(ngDevMode ? [{ debugName: "htmlFor" }] : []));
+    htmlFor = computed(() => this.input.controlId(), ...(ngDevMode ? [{ debugName: "htmlFor" }] : []));
     required = computed(() => this.input.required(), ...(ngDevMode ? [{ debugName: "required" }] : []));
     readonly = computed(() => this.input.readonly(), ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -197,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class OutputComponent {
     input = inject((InputComponent), { host: true });
     id = computed(() => this.input.outputId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
-    htmlFor = computed(() => this.input.inputId(), ...(ngDevMode ? [{ debugName: "htmlFor" }] : []));
+    htmlFor = computed(() => this.input.controlId(), ...(ngDevMode ? [{ debugName: "htmlFor" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: OutputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: OutputComponent, isStandalone: true, selector: "lat-output", host: { attributes: { "role": "presentation" }, properties: { "attr.id": "null" } }, exportAs: ["latOutput"], ngImport: i0, template: "<output [attr.id]=\"id()\" [attr.for]=\"htmlFor()\">\r\n  <ng-content></ng-content>\r\n</output>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -213,5 +67,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { HTMLInputDirective, INPUT_OPTIONS, InputComponent, LabelComponent, OutputComponent };
+export { InputComponent, LabelComponent, OutputComponent };
 //# sourceMappingURL=latitude-ui-widgets-input.mjs.map