@tailng-ui/components 0.18.0 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -21,11 +21,11 @@ export class TngFormFieldComponent {
|
|
|
21
21
|
return this.fullWidth() ? '' : null;
|
|
22
22
|
}
|
|
23
23
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: TngFormFieldComponent, isStandalone: true, selector: "tng-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-slot": "this.dataSlot", "attr.data-appearance": "this.dataAppearance", "attr.data-size": "this.dataSize", "attr.data-tone": "this.dataTone", "attr.data-full-width": "this.dataFullWidth" } }, ngImport: i0, template: "<tng-input-group class=\"tng-form-field\">\n <span tngPrefix class=\"tng-form-field-slot-proxy\" data-tng-input-prefix-proxy>\n <ng-content select=\"[tngPrefix], [tngInputLeading]\"></ng-content>\n </span>\n\n <span class=\"tng-form-field-control-proxy\" data-tng-input-control-proxy>\n <ng-content select=\"input[tngInput], textarea[tngInput]\"></ng-content>\n </span>\n\n <span tngSuffix class=\"tng-form-field-slot-proxy\" data-tng-input-suffix-proxy>\n <ng-content select=\"[tngSuffix], [tngInputTrailing]\"></ng-content>\n </span>\n</tng-input-group>\n", styles: ["/*\n * Visual styling lives in the theme contract:\n * libs/tailng-ui/theme/src/lib/component-contracts/form/form-field/form-field.css\n */\n"], dependencies: [{ kind: "component", type: TngInputGroup, selector: "tng-input-group, [tngInputGroup]", inputs: ["hasLeading", "hasTrailing", "disabled", "invalid", "readonly", "controlCount"], exportAs: ["tngInputGroup"] }, { kind: "directive", type: TngPrefix, selector: "[tngPrefix], [tngInputLeading]", exportAs: ["tngPrefix"] }, { kind: "directive", type: TngSuffix, selector: "[tngSuffix], [tngInputTrailing]", exportAs: ["tngSuffix"] }] });
|
|
24
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: TngFormFieldComponent, isStandalone: true, selector: "tng-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-slot": "this.dataSlot", "attr.data-appearance": "this.dataAppearance", "attr.data-size": "this.dataSize", "attr.data-tone": "this.dataTone", "attr.data-full-width": "this.dataFullWidth" } }, ngImport: i0, template: "<tng-input-group class=\"tng-form-field\">\n <span tngPrefix class=\"tng-form-field-slot-proxy\" data-tng-input-prefix-proxy>\n <ng-content select=\"[tngPrefix], [tngInputLeading]\"></ng-content>\n </span>\n\n <span class=\"tng-form-field-control-proxy\" data-tng-input-control-proxy>\n <ng-content select=\"input[tngInput], textarea[tngInput]\"></ng-content>\n </span>\n\n <span tngSuffix class=\"tng-form-field-slot-proxy\" data-tng-input-suffix-proxy>\n <ng-content select=\"[tngSuffix], [tngInputTrailing]\"></ng-content>\n </span>\n</tng-input-group>\n", styles: ["/*\n * Visual styling lives in the theme contract:\n * libs/tailng-ui/theme/src/lib/component-contracts/form/form-field/form-field.css\n */\n\n:host {\n display: inline-flex;\n max-width: 100%;\n}\n\n:host([data-full-width]) {\n width: 100%;\n}\n\n.tng-form-field {\n width: 100%;\n}\n\n:host(:not([data-full-width])) .tng-form-field {\n width: auto;\n}\n\n.tng-form-field-slot-proxy {\n align-items: center;\n display: inline-flex;\n min-width: 0;\n}\n\n.tng-form-field-control-proxy {\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n width: 100%;\n}\n"], dependencies: [{ kind: "component", type: TngInputGroup, selector: "tng-input-group, [tngInputGroup]", inputs: ["hasLeading", "hasTrailing", "disabled", "invalid", "readonly", "controlCount"], exportAs: ["tngInputGroup"] }, { kind: "directive", type: TngPrefix, selector: "[tngPrefix], [tngInputLeading]", exportAs: ["tngPrefix"] }, { kind: "directive", type: TngSuffix, selector: "[tngSuffix], [tngInputTrailing]", exportAs: ["tngSuffix"] }] });
|
|
25
25
|
}
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngFormFieldComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
|
-
args: [{ selector: 'tng-form-field', imports: [TngInputGroup, TngPrefix, TngSuffix], template: "<tng-input-group class=\"tng-form-field\">\n <span tngPrefix class=\"tng-form-field-slot-proxy\" data-tng-input-prefix-proxy>\n <ng-content select=\"[tngPrefix], [tngInputLeading]\"></ng-content>\n </span>\n\n <span class=\"tng-form-field-control-proxy\" data-tng-input-control-proxy>\n <ng-content select=\"input[tngInput], textarea[tngInput]\"></ng-content>\n </span>\n\n <span tngSuffix class=\"tng-form-field-slot-proxy\" data-tng-input-suffix-proxy>\n <ng-content select=\"[tngSuffix], [tngInputTrailing]\"></ng-content>\n </span>\n</tng-input-group>\n", styles: ["/*\n * Visual styling lives in the theme contract:\n * libs/tailng-ui/theme/src/lib/component-contracts/form/form-field/form-field.css\n */\n"] }]
|
|
28
|
+
args: [{ selector: 'tng-form-field', imports: [TngInputGroup, TngPrefix, TngSuffix], template: "<tng-input-group class=\"tng-form-field\">\n <span tngPrefix class=\"tng-form-field-slot-proxy\" data-tng-input-prefix-proxy>\n <ng-content select=\"[tngPrefix], [tngInputLeading]\"></ng-content>\n </span>\n\n <span class=\"tng-form-field-control-proxy\" data-tng-input-control-proxy>\n <ng-content select=\"input[tngInput], textarea[tngInput]\"></ng-content>\n </span>\n\n <span tngSuffix class=\"tng-form-field-slot-proxy\" data-tng-input-suffix-proxy>\n <ng-content select=\"[tngSuffix], [tngInputTrailing]\"></ng-content>\n </span>\n</tng-input-group>\n", styles: ["/*\n * Visual styling lives in the theme contract:\n * libs/tailng-ui/theme/src/lib/component-contracts/form/form-field/form-field.css\n */\n\n:host {\n display: inline-flex;\n max-width: 100%;\n}\n\n:host([data-full-width]) {\n width: 100%;\n}\n\n.tng-form-field {\n width: 100%;\n}\n\n:host(:not([data-full-width])) .tng-form-field {\n width: auto;\n}\n\n.tng-form-field-slot-proxy {\n align-items: center;\n display: inline-flex;\n min-width: 0;\n}\n\n.tng-form-field-control-proxy {\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n width: 100%;\n}\n"] }]
|
|
29
29
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], dataSlot: [{
|
|
30
30
|
type: HostBinding,
|
|
31
31
|
args: ['attr.data-slot']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tng-form-field.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/form-field/tng-form-field.component.ts","../../../../../../../../libs/tailng-ui/components/src/lib/form/form-field/tng-form-field.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;;AAY5E,MAAM,OAAO,qBAAqB;IAChB,UAAU,GAAG,KAAK,CAAyB,SAAS,sDAAC,CAAC;IACtD,IAAI,GAAG,KAAK,CAAmB,IAAI,gDAAC,CAAC;IACrC,IAAI,GAAG,KAAK,CAAmB,SAAS,gDAAC,CAAC;IAE1C,SAAS,GAAG,KAAK,CAA4B,IAAI,sDAC/D,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IAGgB,QAAQ,GAAG,oBAA6B,CAAC;IAE5D,IACc,cAAc;QAC1B,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAED,IACc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,IACc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,IACc,aAAa;QACzB,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACtC,CAAC;uGA9BU,qBAAqB;2FAArB,qBAAqB,2yBCflC,8jBAaA,
|
|
1
|
+
{"version":3,"file":"tng-form-field.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/form-field/tng-form-field.component.ts","../../../../../../../../libs/tailng-ui/components/src/lib/form/form-field/tng-form-field.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;;AAY5E,MAAM,OAAO,qBAAqB;IAChB,UAAU,GAAG,KAAK,CAAyB,SAAS,sDAAC,CAAC;IACtD,IAAI,GAAG,KAAK,CAAmB,IAAI,gDAAC,CAAC;IACrC,IAAI,GAAG,KAAK,CAAmB,SAAS,gDAAC,CAAC;IAE1C,SAAS,GAAG,KAAK,CAA4B,IAAI,sDAC/D,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IAGgB,QAAQ,GAAG,oBAA6B,CAAC;IAE5D,IACc,cAAc;QAC1B,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAED,IACc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,IACc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,IACc,aAAa;QACzB,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACtC,CAAC;uGA9BU,qBAAqB;2FAArB,qBAAqB,2yBCflC,8jBAaA,2oBDFY,aAAa,oMAAE,SAAS,oGAAE,SAAS;;2FAIlC,qBAAqB;kBANjC,SAAS;+BACE,gBAAgB,WACjB,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,CAAC;;sBAa7C,WAAW;uBAAC,gBAAgB;;sBAG5B,WAAW;uBAAC,sBAAsB;;sBAKlC,WAAW;uBAAC,gBAAgB;;sBAK5B,WAAW;uBAAC,gBAAgB;;sBAK5B,WAAW;uBAAC,sBAAsB","sourcesContent":["import { Component, HostBinding, input } from '@angular/core';\nimport { booleanAttribute } from '@angular/core';\n\nimport { TngInputGroup, TngPrefix, TngSuffix } from '@tailng-ui/primitives';\n\nexport type TngFormFieldAppearance = 'outline' | 'solid' | 'ghost';\nexport type TngFormFieldSize = 'sm' | 'md' | 'lg';\nexport type TngFormFieldTone = 'neutral' | 'primary' | 'success' | 'danger';\n\n@Component({\n selector: 'tng-form-field',\n imports: [TngInputGroup, TngPrefix, TngSuffix],\n templateUrl: './tng-form-field.component.html',\n styleUrl: './tng-form-field.component.css',\n})\nexport class TngFormFieldComponent {\n public readonly appearance = input<TngFormFieldAppearance>('outline');\n public readonly size = input<TngFormFieldSize>('md');\n public readonly tone = input<TngFormFieldTone>('neutral');\n\n public readonly fullWidth = input<boolean, boolean | string>(true, {\n transform: booleanAttribute,\n });\n\n @HostBinding('attr.data-slot')\n protected readonly dataSlot = 'form-field-wrapper' as const;\n\n @HostBinding('attr.data-appearance')\n protected get dataAppearance(): TngFormFieldAppearance {\n return this.appearance();\n }\n\n @HostBinding('attr.data-size')\n protected get dataSize(): TngFormFieldSize {\n return this.size();\n }\n\n @HostBinding('attr.data-tone')\n protected get dataTone(): TngFormFieldTone {\n return this.tone();\n }\n\n @HostBinding('attr.data-full-width')\n protected get dataFullWidth(): '' | null {\n return this.fullWidth() ? '' : null;\n }\n}\n","<tng-input-group class=\"tng-form-field\">\n <span tngPrefix class=\"tng-form-field-slot-proxy\" data-tng-input-prefix-proxy>\n <ng-content select=\"[tngPrefix], [tngInputLeading]\"></ng-content>\n </span>\n\n <span class=\"tng-form-field-control-proxy\" data-tng-input-control-proxy>\n <ng-content select=\"input[tngInput], textarea[tngInput]\"></ng-content>\n </span>\n\n <span tngSuffix class=\"tng-form-field-slot-proxy\" data-tng-input-suffix-proxy>\n <ng-content select=\"[tngSuffix], [tngInputTrailing]\"></ng-content>\n </span>\n</tng-input-group>\n"]}
|
|
@@ -133,7 +133,7 @@ export class TngInputComponent {
|
|
|
133
133
|
useExisting: forwardRef(() => TngInputComponent),
|
|
134
134
|
multi: true,
|
|
135
135
|
},
|
|
136
|
-
], ngImport: i0, template: "<tng-form-field\n class=\"tng-input\"\n [appearance]=\"appearance()\"\n [size]=\"size()\"\n [tone]=\"tone()\"\n [fullWidth]=\"fullWidth()\"\n>\n <input\n tngInput\n class=\"tng-input-control\"\n [type]=\"type()\"\n [disabled]=\"effectiveDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledby]=\"ariaLabelledby()\"\n [ariaDescribedBy]=\"ariaDescribedBy()\"\n [ariaInvalid]=\"ariaInvalid()\"\n [ariaRequired]=\"ariaRequired()\"\n [attr.autocomplete]=\"normalizeAttrValue(autocomplete())\"\n [attr.id]=\"normalizeAttrValue(id())\"\n [attr.name]=\"normalizeAttrValue(name())\"\n [attr.placeholder]=\"normalizeAttrValue(placeholder())\"\n [value]=\"effectiveValue\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n />\n</tng-form-field>", styles: [":host {\n display: inline-flex;\n max-width: 100%;\n}\n\n:host([data-full-width]) {\n width: 100%;\n}\n\n.tng-input {\n width: 100%;\n}\n\n:host(:not([data-full-width])) .tng-input {\n width: auto;\n}\n\n/* Optional: make sure the native control fills the form-field */\n.tng-input-control {\n width: 100%;\n}"], dependencies: [{ kind: "component", type: TngFormFieldComponent, selector: "tng-form-field", inputs: ["appearance", "size", "tone", "fullWidth"] }, { kind: "directive", type: TngInput, selector: "input[tngInput], textarea[tngInput]", inputs: ["ariaDescribedBy", "ariaLabel", "ariaLabelledby", "ariaInvalid", "ariaRequired", "disabled", "readonly", "required"], exportAs: ["tngInput"] }] });
|
|
136
|
+
], ngImport: i0, template: "<tng-form-field\n class=\"tng-input\"\n [appearance]=\"appearance()\"\n [size]=\"size()\"\n [tone]=\"tone()\"\n [fullWidth]=\"fullWidth()\"\n>\n <input\n tngInput\n class=\"tng-input-control\"\n [type]=\"type()\"\n [disabled]=\"effectiveDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledby]=\"ariaLabelledby()\"\n [ariaDescribedBy]=\"ariaDescribedBy()\"\n [ariaInvalid]=\"ariaInvalid()\"\n [ariaRequired]=\"ariaRequired()\"\n [attr.autocomplete]=\"normalizeAttrValue(autocomplete())\"\n [attr.id]=\"normalizeAttrValue(id())\"\n [attr.name]=\"normalizeAttrValue(name())\"\n [attr.placeholder]=\"normalizeAttrValue(placeholder())\"\n [value]=\"effectiveValue\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n />\n</tng-form-field>", styles: [":host {\n display: inline-flex;\n max-width: 100%;\n}\n\n:host([data-full-width]) {\n width: 100%;\n}\n\n.tng-input {\n width: 100%;\n}\n\n:host(:not([data-full-width])) .tng-input {\n width: auto;\n}\n\n/* Optional: make sure the native control fills the form-field */\n.tng-input-control {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 0;\n box-sizing: border-box;\n box-shadow: none;\n color: inherit;\n display: block;\n flex: 1 1 auto;\n font: inherit;\n min-width: 0;\n outline: none;\n padding: 0;\n width: 100%;\n}\n\n.tng-input-control::placeholder {\n color: var(--_tng-input-placeholder, var(--tng-semantic-foreground-muted));\n}\n"], dependencies: [{ kind: "component", type: TngFormFieldComponent, selector: "tng-form-field", inputs: ["appearance", "size", "tone", "fullWidth"] }, { kind: "directive", type: TngInput, selector: "input[tngInput], textarea[tngInput]", inputs: ["ariaDescribedBy", "ariaLabel", "ariaLabelledby", "ariaInvalid", "ariaRequired", "disabled", "readonly", "required"], exportAs: ["tngInput"] }] });
|
|
137
137
|
}
|
|
138
138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngInputComponent, decorators: [{
|
|
139
139
|
type: Component,
|
|
@@ -143,7 +143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
143
143
|
useExisting: forwardRef(() => TngInputComponent),
|
|
144
144
|
multi: true,
|
|
145
145
|
},
|
|
146
|
-
], template: "<tng-form-field\n class=\"tng-input\"\n [appearance]=\"appearance()\"\n [size]=\"size()\"\n [tone]=\"tone()\"\n [fullWidth]=\"fullWidth()\"\n>\n <input\n tngInput\n class=\"tng-input-control\"\n [type]=\"type()\"\n [disabled]=\"effectiveDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledby]=\"ariaLabelledby()\"\n [ariaDescribedBy]=\"ariaDescribedBy()\"\n [ariaInvalid]=\"ariaInvalid()\"\n [ariaRequired]=\"ariaRequired()\"\n [attr.autocomplete]=\"normalizeAttrValue(autocomplete())\"\n [attr.id]=\"normalizeAttrValue(id())\"\n [attr.name]=\"normalizeAttrValue(name())\"\n [attr.placeholder]=\"normalizeAttrValue(placeholder())\"\n [value]=\"effectiveValue\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n />\n</tng-form-field>", styles: [":host {\n display: inline-flex;\n max-width: 100%;\n}\n\n:host([data-full-width]) {\n width: 100%;\n}\n\n.tng-input {\n width: 100%;\n}\n\n:host(:not([data-full-width])) .tng-input {\n width: auto;\n}\n\n/* Optional: make sure the native control fills the form-field */\n.tng-input-control {\n width: 100%;\n}"] }]
|
|
146
|
+
], template: "<tng-form-field\n class=\"tng-input\"\n [appearance]=\"appearance()\"\n [size]=\"size()\"\n [tone]=\"tone()\"\n [fullWidth]=\"fullWidth()\"\n>\n <input\n tngInput\n class=\"tng-input-control\"\n [type]=\"type()\"\n [disabled]=\"effectiveDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledby]=\"ariaLabelledby()\"\n [ariaDescribedBy]=\"ariaDescribedBy()\"\n [ariaInvalid]=\"ariaInvalid()\"\n [ariaRequired]=\"ariaRequired()\"\n [attr.autocomplete]=\"normalizeAttrValue(autocomplete())\"\n [attr.id]=\"normalizeAttrValue(id())\"\n [attr.name]=\"normalizeAttrValue(name())\"\n [attr.placeholder]=\"normalizeAttrValue(placeholder())\"\n [value]=\"effectiveValue\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n />\n</tng-form-field>", styles: [":host {\n display: inline-flex;\n max-width: 100%;\n}\n\n:host([data-full-width]) {\n width: 100%;\n}\n\n.tng-input {\n width: 100%;\n}\n\n:host(:not([data-full-width])) .tng-input {\n width: auto;\n}\n\n/* Optional: make sure the native control fills the form-field */\n.tng-input-control {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 0;\n box-sizing: border-box;\n box-shadow: none;\n color: inherit;\n display: block;\n flex: 1 1 auto;\n font: inherit;\n min-width: 0;\n outline: none;\n padding: 0;\n width: 100%;\n}\n\n.tng-input-control::placeholder {\n color: var(--_tng-input-placeholder, var(--tng-semantic-foreground-muted));\n}\n"] }]
|
|
147
147
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaRequired", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputEvent: [{ type: i0.Output, args: ["input"] }], blurEvent: [{ type: i0.Output, args: ["blur"] }], dataSlot: [{
|
|
148
148
|
type: HostBinding,
|
|
149
149
|
args: ['attr.data-slot']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tng-input.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.ts","../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,EACL,6BAA6B,EAC7B,QAAQ,GAET,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,qBAAqB,GAItB,MAAM,wCAAwC,CAAC;;AAIhD,SAAS,aAAa,CAAC,KAAgC;IACrD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IACvD,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IACvB,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACjC,CAAC;AAED,SAAS,cAAc,CAAC,KAAc;IACpC,IAAI,CAAC,CAAC,KAAK,YAAY,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAC3C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,IAAI,CAAC,CAAC,MAAM,YAAY,gBAAgB,CAAC;QAAE,OAAO,IAAI,CAAC;IACvD,OAAO,MAAM,CAAC,KAAK,CAAC;AACtB,CAAC;AAgBD,MAAM,OAAO,iBAAiB;IAC5B,kDAAkD;IAClC,UAAU,GAAG,KAAK,CAAyB,SAAS,sDAAC,CAAC;IACtD,IAAI,GAAG,KAAK,CAAmB,IAAI,gDAAC,CAAC;IACrC,IAAI,GAAG,KAAK,CAAmB,SAAS,gDAAC,CAAC;IAC1C,SAAS,GAAG,KAAK,CAA4B,IAAI,sDAC/D,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IAEH,kCAAkC;IAClB,eAAe,GAAG,KAAK,CAAgB,IAAI,2DAAC,CAAC;IAC7C,WAAW,GAAG,KAAK,CAAuC,IAAI,wDAC5E,SAAS,EAAE,6BAA6B,GACxC,CAAC;IACa,SAAS,GAAG,KAAK,CAAgB,IAAI,qDAAC,CAAC;IACvC,cAAc,GAAG,KAAK,CAAgB,IAAI,0DAAC,CAAC;IAC5C,YAAY,GAAG,KAAK,CAAuC,IAAI,yDAC7E,SAAS,EAAE,6BAA6B,GACxC,CAAC;IAEa,YAAY,GAAG,KAAK,CAAgB,IAAI,wDAAC,CAAC;IAC1C,QAAQ,GAAG,KAAK,CAA4B,KAAK,qDAC/D,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IACa,EAAE,GAAG,KAAK,CAAgB,IAAI,8CAAC,CAAC;IAChC,IAAI,GAAG,KAAK,CAAgB,IAAI,gDAAC,CAAC;IAClC,WAAW,GAAG,KAAK,CAAgB,IAAI,uDAAC,CAAC;IACzC,QAAQ,GAAG,KAAK,CAA4B,KAAK,qDAC/D,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IACa,QAAQ,GAAG,KAAK,CAA4B,KAAK,qDAC/D,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IACa,IAAI,GAAG,KAAK,CAAe,MAAM,gDAAC,CAAC;IAEnD;;;OAGG;IACa,KAAK,GAAG,KAAK,CAAgB,IAAI,iDAAC,CAAC;IAEnD,oBAAoB;IACJ,WAAW,GAAG,MAAM,EAAU,CAAC;IAC/B,UAAU,GAAG,MAAM,CAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/C,SAAS,GAAG,MAAM,CAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAElE,sBAAsB;IACd,QAAQ,GAAG,KAAK,CAAC;IACjB,QAAQ,GAAkB,IAAI,CAAC;IAC/B,WAAW,GAAG,KAAK,CAAC;IAEpB,QAAQ,GAA4B,GAAG,EAAE,CAAC,SAAS,CAAC;IACpD,SAAS,GAAe,GAAG,EAAE,CAAC,SAAS,CAAC;IAEhD,4DAA4D;IAEzC,QAAQ,GAAG,iBAA0B,CAAC;IAEzD,IACc,cAAc;QAC1B,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAED,IACc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,IACc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,IACc,aAAa;QACzB,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACtC,CAAC;IAED,wCAAwC;IACxC,IAAc,cAAc;QAC1B,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QACvD,OAAO,CAAC,IAAI,EAAE,CAAC;IACjB,CAAC;IAED,IAAc,iBAAiB;QAC7B,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC7C,CAAC;IAED,gBAAgB;IACT,UAAU,CAAC,KAAc;QAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,QAAQ;YACX,OAAO,KAAK,KAAK,QAAQ;gBACvB,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,KAAK,IAAI,IAAI;oBACb,CAAC,CAAC,IAAI;oBACN,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAEM,gBAAgB,CAAC,EAA2B;QACjD,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;IACrB,CAAC;IAEM,iBAAiB,CAAC,EAAc;QACrC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IACtB,CAAC;IAEM,gBAAgB,CAAC,UAAmB;QACzC,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;IAChC,CAAC;IAED,yBAAyB;IAClB,OAAO,CAAC,KAAc;QAC3B,MAAM,IAAI,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO;QAE1B,wCAAwC;QACxC,IAAI,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAEnC,6BAA6B;QAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;gBAC3B,kDAAkD;gBAClD,IAAI,KAAK,YAAY,KAAK;oBAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACxD,OAAO;YACT,CAAC;YACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QAED,sDAAsD;QACtD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5B,IAAI,KAAK,YAAY,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAEM,MAAM,CAAC,KAAiB;QAC7B,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;IAES,kBAAkB,CAAC,KAAgC;QAC3D,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;uGAjJU,iBAAiB;2FAAjB,iBAAiB,ypFARjB;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC;gBAChD,KAAK,EAAE,IAAI;aACZ;SACF,0BCnDH,i2BA2BiB,qXDeL,qBAAqB,gHAAE,QAAQ;;2FAW9B,iBAAiB;kBAd7B,SAAS;+BACE,WAAW,cACT,IAAI,WACP,CAAC,qBAAqB,EAAE,QAAQ,CAAC,aAG/B;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,kBAAkB,CAAC;4BAChD,KAAK,EAAE,IAAI;yBACZ;qBACF;;sBAyDA,WAAW;uBAAC,gBAAgB;;sBAG5B,WAAW;uBAAC,sBAAsB;;sBAKlC,WAAW;uBAAC,gBAAgB;;sBAK5B,WAAW;uBAAC,gBAAgB;;sBAK5B,WAAW;uBAAC,sBAAsB","sourcesContent":["import {\n Component,\n forwardRef,\n HostBinding,\n input,\n output,\n} from '@angular/core';\nimport { booleanAttribute } from '@angular/core';\nimport type { ControlValueAccessor} from '@angular/forms';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport {\n coerceTngInputNullableBoolean,\n TngInput,\n type TngInputType,\n} from '@tailng-ui/primitives';\n\nimport {\n TngFormFieldComponent,\n type TngFormFieldAppearance,\n type TngFormFieldSize,\n type TngFormFieldTone,\n} from '../form-field/tng-form-field.component';\n\ntype NullableBooleanInput = boolean | null | string | undefined;\n\nfunction normalizeAttr(value: string | null | undefined): string | null {\n if (value === undefined || value === null) return null;\n const v = value.trim();\n return v.length > 0 ? v : null;\n}\n\nfunction readInputValue(event: unknown): string | null {\n if (!(event instanceof Event)) return null;\n const target = event.target;\n if (!(target instanceof HTMLInputElement)) return null;\n return target.value;\n}\n\n@Component({\n selector: 'tng-input',\n standalone: true,\n imports: [TngFormFieldComponent, TngInput],\n templateUrl: './tng-input.component.html',\n styleUrl: './tng-input.component.css',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TngInputComponent),\n multi: true,\n },\n ],\n})\nexport class TngInputComponent implements ControlValueAccessor {\n // ---- Wrapper (form-field) appearance knobs ----\n public readonly appearance = input<TngFormFieldAppearance>('outline');\n public readonly size = input<TngFormFieldSize>('md');\n public readonly tone = input<TngFormFieldTone>('neutral');\n public readonly fullWidth = input<boolean, boolean | string>(true, {\n transform: booleanAttribute,\n });\n\n // ---- Input API passthrough ----\n public readonly ariaDescribedBy = input<string | null>(null);\n public readonly ariaInvalid = input<boolean | null, NullableBooleanInput>(null, {\n transform: coerceTngInputNullableBoolean,\n });\n public readonly ariaLabel = input<string | null>(null);\n public readonly ariaLabelledby = input<string | null>(null);\n public readonly ariaRequired = input<boolean | null, NullableBooleanInput>(null, {\n transform: coerceTngInputNullableBoolean,\n });\n\n public readonly autocomplete = input<string | null>(null);\n public readonly disabled = input<boolean, boolean | string>(false, {\n transform: booleanAttribute,\n });\n public readonly id = input<string | null>(null);\n public readonly name = input<string | null>(null);\n public readonly placeholder = input<string | null>(null);\n public readonly readonly = input<boolean, boolean | string>(false, {\n transform: booleanAttribute,\n });\n public readonly required = input<boolean, boolean | string>(false, {\n transform: booleanAttribute,\n });\n public readonly type = input<TngInputType>('text');\n\n /**\n * Controlled value input (only used when NOT using CVA).\n * If you bind [value], you should also listen to (valueChange) (or use signals).\n */\n public readonly value = input<string | null>(null);\n\n // ---- Outputs ----\n public readonly valueChange = output<string>();\n public readonly inputEvent = output<Event>({ alias: 'input' });\n public readonly blurEvent = output<FocusEvent>({ alias: 'blur' });\n\n // ---- CVA state ----\n private usingCva = false;\n private cvaValue: string | null = null;\n private cvaDisabled = false;\n\n private onChange: (value: string) => void = () => undefined;\n private onTouched: () => void = () => undefined;\n\n // ---- Host attrs (optional, useful for styling/debug) ----\n @HostBinding('attr.data-slot')\n protected readonly dataSlot = 'input-component' as const;\n\n @HostBinding('attr.data-appearance')\n protected get dataAppearance(): TngFormFieldAppearance {\n return this.appearance();\n }\n\n @HostBinding('attr.data-size')\n protected get dataSize(): TngFormFieldSize {\n return this.size();\n }\n\n @HostBinding('attr.data-tone')\n protected get dataTone(): TngFormFieldTone {\n return this.tone();\n }\n\n @HostBinding('attr.data-full-width')\n protected get dataFullWidth(): '' | null {\n return this.fullWidth() ? '' : null;\n }\n\n // ---- Derived values for template ----\n protected get effectiveValue(): string {\n const v = this.usingCva ? this.cvaValue : this.value();\n return v ?? '';\n }\n\n protected get effectiveDisabled(): boolean {\n return this.cvaDisabled || this.disabled();\n }\n\n // ---- CVA ----\n public writeValue(value: unknown): void {\n this.usingCva = true;\n this.cvaValue =\n typeof value === 'string'\n ? value\n : value == null\n ? null\n : String(value);\n }\n\n public registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n public registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n public setDisabledState(isDisabled: boolean): void {\n this.cvaDisabled = isDisabled;\n }\n\n // ---- DOM handlers ----\n public onInput(event: unknown): void {\n const next = readInputValue(event);\n if (next === null) return;\n\n // If disabled, ignore (optional safety)\n if (this.effectiveDisabled) return;\n\n // Keep CVA in sync when used\n if (this.usingCva) {\n if (this.cvaValue === next) {\n // Still forward the raw event output if you want:\n if (event instanceof Event) this.inputEvent.emit(event);\n return;\n }\n this.cvaValue = next;\n this.onChange(next);\n }\n\n // For controlled-input usage, emit valueChange always\n this.valueChange.emit(next);\n\n if (event instanceof Event) {\n this.inputEvent.emit(event);\n }\n }\n\n public onBlur(event: FocusEvent): void {\n this.onTouched();\n this.blurEvent.emit(event);\n }\n\n protected normalizeAttrValue(value: string | null | undefined): string | null {\n return normalizeAttr(value);\n }\n}","<tng-form-field\n class=\"tng-input\"\n [appearance]=\"appearance()\"\n [size]=\"size()\"\n [tone]=\"tone()\"\n [fullWidth]=\"fullWidth()\"\n>\n <input\n tngInput\n class=\"tng-input-control\"\n [type]=\"type()\"\n [disabled]=\"effectiveDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledby]=\"ariaLabelledby()\"\n [ariaDescribedBy]=\"ariaDescribedBy()\"\n [ariaInvalid]=\"ariaInvalid()\"\n [ariaRequired]=\"ariaRequired()\"\n [attr.autocomplete]=\"normalizeAttrValue(autocomplete())\"\n [attr.id]=\"normalizeAttrValue(id())\"\n [attr.name]=\"normalizeAttrValue(name())\"\n [attr.placeholder]=\"normalizeAttrValue(placeholder())\"\n [value]=\"effectiveValue\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n />\n</tng-form-field>"]}
|
|
1
|
+
{"version":3,"file":"tng-input.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.ts","../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n forwardRef,\n HostBinding,\n input,\n output,\n} from '@angular/core';\nimport { booleanAttribute } from '@angular/core';\nimport type { ControlValueAccessor} from '@angular/forms';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport {\n coerceTngInputNullableBoolean,\n TngInput,\n type TngInputType,\n} from '@tailng-ui/primitives';\n\nimport {\n TngFormFieldComponent,\n type TngFormFieldAppearance,\n type TngFormFieldSize,\n type TngFormFieldTone,\n} from '../form-field/tng-form-field.component';\n\ntype NullableBooleanInput = boolean | null | string | undefined;\n\nfunction normalizeAttr(value: string | null | undefined): string | null {\n if (value === undefined || value === null) return null;\n const v = value.trim();\n return v.length > 0 ? v : null;\n}\n\nfunction readInputValue(event: unknown): string | null {\n if (!(event instanceof Event)) return null;\n const target = event.target;\n if (!(target instanceof HTMLInputElement)) return null;\n return target.value;\n}\n\n@Component({\n selector: 'tng-input',\n standalone: true,\n imports: [TngFormFieldComponent, TngInput],\n templateUrl: './tng-input.component.html',\n styleUrl: './tng-input.component.css',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => TngInputComponent),\n multi: true,\n },\n ],\n})\nexport class TngInputComponent implements ControlValueAccessor {\n // ---- Wrapper (form-field) appearance knobs ----\n public readonly appearance = input<TngFormFieldAppearance>('outline');\n public readonly size = input<TngFormFieldSize>('md');\n public readonly tone = input<TngFormFieldTone>('neutral');\n public readonly fullWidth = input<boolean, boolean | string>(true, {\n transform: booleanAttribute,\n });\n\n // ---- Input API passthrough ----\n public readonly ariaDescribedBy = input<string | null>(null);\n public readonly ariaInvalid = input<boolean | null, NullableBooleanInput>(null, {\n transform: coerceTngInputNullableBoolean,\n });\n public readonly ariaLabel = input<string | null>(null);\n public readonly ariaLabelledby = input<string | null>(null);\n public readonly ariaRequired = input<boolean | null, NullableBooleanInput>(null, {\n transform: coerceTngInputNullableBoolean,\n });\n\n public readonly autocomplete = input<string | null>(null);\n public readonly disabled = input<boolean, boolean | string>(false, {\n transform: booleanAttribute,\n });\n public readonly id = input<string | null>(null);\n public readonly name = input<string | null>(null);\n public readonly placeholder = input<string | null>(null);\n public readonly readonly = input<boolean, boolean | string>(false, {\n transform: booleanAttribute,\n });\n public readonly required = input<boolean, boolean | string>(false, {\n transform: booleanAttribute,\n });\n public readonly type = input<TngInputType>('text');\n\n /**\n * Controlled value input (only used when NOT using CVA).\n * If you bind [value], you should also listen to (valueChange) (or use signals).\n */\n public readonly value = input<string | null>(null);\n\n // ---- Outputs ----\n public readonly valueChange = output<string>();\n public readonly inputEvent = output<Event>({ alias: 'input' });\n public readonly blurEvent = output<FocusEvent>({ alias: 'blur' });\n\n // ---- CVA state ----\n private usingCva = false;\n private cvaValue: string | null = null;\n private cvaDisabled = false;\n\n private onChange: (value: string) => void = () => undefined;\n private onTouched: () => void = () => undefined;\n\n // ---- Host attrs (optional, useful for styling/debug) ----\n @HostBinding('attr.data-slot')\n protected readonly dataSlot = 'input-component' as const;\n\n @HostBinding('attr.data-appearance')\n protected get dataAppearance(): TngFormFieldAppearance {\n return this.appearance();\n }\n\n @HostBinding('attr.data-size')\n protected get dataSize(): TngFormFieldSize {\n return this.size();\n }\n\n @HostBinding('attr.data-tone')\n protected get dataTone(): TngFormFieldTone {\n return this.tone();\n }\n\n @HostBinding('attr.data-full-width')\n protected get dataFullWidth(): '' | null {\n return this.fullWidth() ? '' : null;\n }\n\n // ---- Derived values for template ----\n protected get effectiveValue(): string {\n const v = this.usingCva ? this.cvaValue : this.value();\n return v ?? '';\n }\n\n protected get effectiveDisabled(): boolean {\n return this.cvaDisabled || this.disabled();\n }\n\n // ---- CVA ----\n public writeValue(value: unknown): void {\n this.usingCva = true;\n this.cvaValue =\n typeof value === 'string'\n ? value\n : value == null\n ? null\n : String(value);\n }\n\n public registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n public registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n public setDisabledState(isDisabled: boolean): void {\n this.cvaDisabled = isDisabled;\n }\n\n // ---- DOM handlers ----\n public onInput(event: unknown): void {\n const next = readInputValue(event);\n if (next === null) return;\n\n // If disabled, ignore (optional safety)\n if (this.effectiveDisabled) return;\n\n // Keep CVA in sync when used\n if (this.usingCva) {\n if (this.cvaValue === next) {\n // Still forward the raw event output if you want:\n if (event instanceof Event) this.inputEvent.emit(event);\n return;\n }\n this.cvaValue = next;\n this.onChange(next);\n }\n\n // For controlled-input usage, emit valueChange always\n this.valueChange.emit(next);\n\n if (event instanceof Event) {\n this.inputEvent.emit(event);\n }\n }\n\n public onBlur(event: FocusEvent): void {\n this.onTouched();\n this.blurEvent.emit(event);\n }\n\n protected normalizeAttrValue(value: string | null | undefined): string | null {\n return normalizeAttr(value);\n }\n}","<tng-form-field\n class=\"tng-input\"\n [appearance]=\"appearance()\"\n [size]=\"size()\"\n [tone]=\"tone()\"\n [fullWidth]=\"fullWidth()\"\n>\n <input\n tngInput\n class=\"tng-input-control\"\n [type]=\"type()\"\n [disabled]=\"effectiveDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledby]=\"ariaLabelledby()\"\n [ariaDescribedBy]=\"ariaDescribedBy()\"\n [ariaInvalid]=\"ariaInvalid()\"\n [ariaRequired]=\"ariaRequired()\"\n [attr.autocomplete]=\"normalizeAttrValue(autocomplete())\"\n [attr.id]=\"normalizeAttrValue(id())\"\n [attr.name]=\"normalizeAttrValue(name())\"\n [attr.placeholder]=\"normalizeAttrValue(placeholder())\"\n [value]=\"effectiveValue\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n />\n</tng-form-field>"]}
|