@tailng-ui/components 0.15.0 → 0.16.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 +2 -2
- package/src/lib/form/form-field/tng-form-field.component.d.ts +15 -0
- package/src/lib/form/form-field/tng-form-field.component.d.ts.map +1 -0
- package/src/lib/form/form-field/tng-form-field.component.js +50 -0
- package/src/lib/form/form-field/tng-form-field.component.js.map +1 -0
- package/src/lib/form/index.d.ts +2 -0
- package/src/lib/form/index.d.ts.map +1 -1
- package/src/lib/form/index.js +2 -0
- package/src/lib/form/index.js.map +1 -1
- package/src/lib/form/input/tng-input.component.d.ts +45 -12
- package/src/lib/form/input/tng-input.component.d.ts.map +1 -1
- package/src/lib/form/input/tng-input.component.js +102 -5
- package/src/lib/form/input/tng-input.component.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tailng-ui/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/tailng/tailng-ui"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@tailng-ui/primitives": "^0.
|
|
10
|
+
"@tailng-ui/primitives": "^0.16.0"
|
|
11
11
|
},
|
|
12
12
|
"peerDependencies": {
|
|
13
13
|
"@angular/core": "^21.1.0",
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export type TngFormFieldAppearance = 'outline' | 'solid' | 'ghost';
|
|
2
|
+
export type TngFormFieldSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
export type TngFormFieldTone = 'neutral' | 'primary' | 'success' | 'danger';
|
|
4
|
+
export declare class TngFormFieldComponent {
|
|
5
|
+
readonly appearance: import("@angular/core").InputSignal<TngFormFieldAppearance>;
|
|
6
|
+
readonly size: import("@angular/core").InputSignal<TngFormFieldSize>;
|
|
7
|
+
readonly tone: import("@angular/core").InputSignal<TngFormFieldTone>;
|
|
8
|
+
readonly fullWidth: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
|
|
9
|
+
protected readonly dataSlot: "form-field-wrapper";
|
|
10
|
+
protected get dataAppearance(): TngFormFieldAppearance;
|
|
11
|
+
protected get dataSize(): TngFormFieldSize;
|
|
12
|
+
protected get dataTone(): TngFormFieldTone;
|
|
13
|
+
protected get dataFullWidth(): '' | null;
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=tng-form-field.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tng-form-field.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/form-field/tng-form-field.component.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5E,qBAMa,qBAAqB;IAChC,SAAgB,UAAU,8DAA4C;IACtE,SAAgB,IAAI,wDAAiC;IACrD,SAAgB,IAAI,wDAAsC;IAE1D,SAAgB,SAAS,8EAEtB;IAGH,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,oBAAoB,CAAU;IAG5D,SAAS,KAAK,cAAc,IAAI,sBAAsB,CAErD;IAGD,SAAS,KAAK,QAAQ,IAAI,gBAAgB,CAEzC;IAGD,SAAS,KAAK,QAAQ,IAAI,gBAAgB,CAEzC;IAGD,SAAS,KAAK,aAAa,IAAI,EAAE,GAAG,IAAI,CAEvC;CACF"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { Component, HostBinding, input } from '@angular/core';
|
|
3
|
+
import { booleanAttribute } from '@angular/core';
|
|
4
|
+
import { TngInputGroup, TngPrefix, TngSuffix } from '@tailng-ui/primitives';
|
|
5
|
+
let TngFormFieldComponent = class TngFormFieldComponent {
|
|
6
|
+
appearance = input('outline');
|
|
7
|
+
size = input('md');
|
|
8
|
+
tone = input('neutral');
|
|
9
|
+
fullWidth = input(true, {
|
|
10
|
+
transform: booleanAttribute,
|
|
11
|
+
});
|
|
12
|
+
dataSlot = 'form-field-wrapper';
|
|
13
|
+
get dataAppearance() {
|
|
14
|
+
return this.appearance();
|
|
15
|
+
}
|
|
16
|
+
get dataSize() {
|
|
17
|
+
return this.size();
|
|
18
|
+
}
|
|
19
|
+
get dataTone() {
|
|
20
|
+
return this.tone();
|
|
21
|
+
}
|
|
22
|
+
get dataFullWidth() {
|
|
23
|
+
return this.fullWidth() ? '' : null;
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
__decorate([
|
|
27
|
+
HostBinding('attr.data-slot')
|
|
28
|
+
], TngFormFieldComponent.prototype, "dataSlot", void 0);
|
|
29
|
+
__decorate([
|
|
30
|
+
HostBinding('attr.data-appearance')
|
|
31
|
+
], TngFormFieldComponent.prototype, "dataAppearance", null);
|
|
32
|
+
__decorate([
|
|
33
|
+
HostBinding('attr.data-size')
|
|
34
|
+
], TngFormFieldComponent.prototype, "dataSize", null);
|
|
35
|
+
__decorate([
|
|
36
|
+
HostBinding('attr.data-tone')
|
|
37
|
+
], TngFormFieldComponent.prototype, "dataTone", null);
|
|
38
|
+
__decorate([
|
|
39
|
+
HostBinding('attr.data-full-width')
|
|
40
|
+
], TngFormFieldComponent.prototype, "dataFullWidth", null);
|
|
41
|
+
TngFormFieldComponent = __decorate([
|
|
42
|
+
Component({
|
|
43
|
+
selector: 'tng-form-field',
|
|
44
|
+
imports: [TngInputGroup, TngPrefix, TngSuffix],
|
|
45
|
+
templateUrl: './tng-form-field.component.html',
|
|
46
|
+
styleUrl: './tng-form-field.component.css',
|
|
47
|
+
})
|
|
48
|
+
], TngFormFieldComponent);
|
|
49
|
+
export { TngFormFieldComponent };
|
|
50
|
+
//# sourceMappingURL=tng-form-field.component.js.map
|
|
@@ -0,0 +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"],"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;AAYrE,IAAM,qBAAqB,GAA3B,MAAM,qBAAqB;IAChB,UAAU,GAAG,KAAK,CAAyB,SAAS,CAAC,CAAC;IACtD,IAAI,GAAG,KAAK,CAAmB,IAAI,CAAC,CAAC;IACrC,IAAI,GAAG,KAAK,CAAmB,SAAS,CAAC,CAAC;IAE1C,SAAS,GAAG,KAAK,CAA4B,IAAI,EAAE;QACjE,SAAS,EAAE,gBAAgB;KAC5B,CAAC,CAAC;IAGgB,QAAQ,GAAG,oBAA6B,CAAC;IAG5D,IAAc,cAAc;QAC1B,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAGD,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAGD,IAAc,QAAQ;QACpB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAGD,IAAc,aAAa;QACzB,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACtC,CAAC;CACF,CAAA;AArBoB;IADlB,WAAW,CAAC,gBAAgB,CAAC;uDAC8B;AAG5D;IADC,WAAW,CAAC,sBAAsB,CAAC;2DAGnC;AAGD;IADC,WAAW,CAAC,gBAAgB,CAAC;qDAG7B;AAGD;IADC,WAAW,CAAC,gBAAgB,CAAC;qDAG7B;AAGD;IADC,WAAW,CAAC,sBAAsB,CAAC;0DAGnC;AA9BU,qBAAqB;IANjC,SAAS,CAAC;QACT,QAAQ,EAAE,gBAAgB;QAC1B,OAAO,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,CAAC;QAC9C,WAAW,EAAE,iCAAiC;QAC9C,QAAQ,EAAE,gCAAgC;KAC3C,CAAC;GACW,qBAAqB,CA+BjC","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"]}
|
package/src/lib/form/index.d.ts
CHANGED
|
@@ -12,6 +12,8 @@ export * from './combobox/tng-combobox.component';
|
|
|
12
12
|
export { TngComboboxComponent } from './combobox/tng-combobox.component';
|
|
13
13
|
export * from './datepicker/tng-datepicker.component';
|
|
14
14
|
export { TngDatepickerComponent } from './datepicker/tng-datepicker.component';
|
|
15
|
+
export * from './form-field/tng-form-field.component';
|
|
16
|
+
export { TngFormFieldComponent } from './form-field/tng-form-field.component';
|
|
15
17
|
export * from './input/tng-input.component';
|
|
16
18
|
export { TngInputComponent } from './input/tng-input.component';
|
|
17
19
|
export * from './input-otp';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AACrF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AACvF,cAAc,mDAAmD,CAAC;AAClE,OAAO,EAAE,6BAA6B,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AACrF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AACvF,cAAc,mDAAmD,CAAC;AAClE,OAAO,EAAE,6BAA6B,EAAE,MAAM,mDAAmD,CAAC;AAClG,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,uDAAuD,CAAC;AACtE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uDAAuD,CAAC;AACtG,cAAc,yCAAyC,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC"}
|
package/src/lib/form/index.js
CHANGED
|
@@ -12,6 +12,8 @@ export * from './combobox/tng-combobox.component';
|
|
|
12
12
|
export { TngComboboxComponent } from './combobox/tng-combobox.component';
|
|
13
13
|
export * from './datepicker/tng-datepicker.component';
|
|
14
14
|
export { TngDatepickerComponent } from './datepicker/tng-datepicker.component';
|
|
15
|
+
export * from './form-field/tng-form-field.component';
|
|
16
|
+
export { TngFormFieldComponent } from './form-field/tng-form-field.component';
|
|
15
17
|
export * from './input/tng-input.component';
|
|
16
18
|
export { TngInputComponent } from './input/tng-input.component';
|
|
17
19
|
export * from './input-otp';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AACrF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AACvF,cAAc,mDAAmD,CAAC;AAClE,OAAO,EAAE,6BAA6B,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AACrF,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AACvF,cAAc,mDAAmD,CAAC;AAClE,OAAO,EAAE,6BAA6B,EAAE,MAAM,mDAAmD,CAAC;AAClG,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,uDAAuD,CAAC;AACtE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uDAAuD,CAAC;AACtG,cAAc,yCAAyC,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC","sourcesContent":["export * from './autocomplete/tng-autocomplete.component';\nexport { TngAutocompleteComponent } from './autocomplete/tng-autocomplete.component';\nexport * from './button-toggle/tng-button-toggle.component';\nexport { TngButtonToggleComponent } from './button-toggle/tng-button-toggle.component';\nexport * from './button-toggle/tng-button-toggle-group.component';\nexport { TngButtonToggleGroupComponent } from './button-toggle/tng-button-toggle-group.component';\nexport * from './checkbox/tng-checkbox.component';\nexport { TngCheckboxComponent } from './checkbox/tng-checkbox.component';\nexport * from './chips/tng-chips.component';\nexport { TngChipsComponent } from './chips/tng-chips.component';\nexport * from './combobox/tng-combobox.component';\nexport { TngComboboxComponent } from './combobox/tng-combobox.component';\nexport * from './datepicker/tng-datepicker.component';\nexport { TngDatepickerComponent } from './datepicker/tng-datepicker.component';\nexport * from './form-field/tng-form-field.component';\nexport { TngFormFieldComponent } from './form-field/tng-form-field.component';\nexport * from './input/tng-input.component';\nexport { TngInputComponent } from './input/tng-input.component';\nexport * from './input-otp';\nexport { TngInputOtpComponent } from './input-otp';\nexport * from './label/tng-label.component';\nexport { TngLabelComponent } from './label/tng-label.component';\nexport * from './multi-autocomplete/tng-multi-autocomplete.component';\nexport { TngMultiAutocompleteComponent } from './multi-autocomplete/tng-multi-autocomplete.component';\nexport * from './multiselect/tng-multiselect.component';\nexport { TngMultiSelectComponent } from './multiselect/tng-multiselect.component';\nexport * from './radio/tng-radio.component';\nexport { TngRadioComponent } from './radio/tng-radio.component';\nexport * from './select/tng-select.component';\nexport { TngSelectComponent } from './select/tng-select.component';\nexport * from './slider/tng-slider.component';\nexport { TngSliderComponent } from './slider/tng-slider.component';\nexport * from './switch/tng-switch.component';\nexport { TngSwitchComponent } from './switch/tng-switch.component';\nexport * from './textarea/tng-textarea.component';\nexport { TngTextareaComponent } from './textarea/tng-textarea.component';\nexport * from './toggle/tng-toggle.component';\nexport { TngToggleComponent } from './toggle/tng-toggle.component';\nexport * from './toggle-group/tng-toggle-group.component';\nexport { TngToggleGroupComponent } from './toggle-group/tng-toggle-group.component';\n"]}
|
|
@@ -1,16 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
readonly
|
|
8
|
-
|
|
1
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
2
|
+
import { type TngInputType } from '@tailng-ui/primitives';
|
|
3
|
+
import { type TngFormFieldAppearance, type TngFormFieldSize, type TngFormFieldTone } from '../form-field/tng-form-field.component';
|
|
4
|
+
type NullableBooleanInput = boolean | null | string | undefined;
|
|
5
|
+
export declare function readTngInputEventValue(event: unknown): string | null;
|
|
6
|
+
export declare class TngInputComponent implements ControlValueAccessor {
|
|
7
|
+
readonly appearance: import("@angular/core").InputSignal<TngFormFieldAppearance>;
|
|
8
|
+
readonly size: import("@angular/core").InputSignal<TngFormFieldSize>;
|
|
9
|
+
readonly tone: import("@angular/core").InputSignal<TngFormFieldTone>;
|
|
9
10
|
readonly fullWidth: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
readonly ariaDescribedBy: import("@angular/core").InputSignal<string | null>;
|
|
12
|
+
readonly ariaInvalid: import("@angular/core").InputSignalWithTransform<boolean | null, NullableBooleanInput>;
|
|
13
|
+
readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
|
|
14
|
+
readonly ariaLabelledby: import("@angular/core").InputSignal<string | null>;
|
|
15
|
+
readonly ariaRequired: import("@angular/core").InputSignalWithTransform<boolean | null, NullableBooleanInput>;
|
|
16
|
+
readonly autocomplete: import("@angular/core").InputSignal<string | null>;
|
|
17
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
|
|
18
|
+
readonly id: import("@angular/core").InputSignal<string | null>;
|
|
19
|
+
readonly name: import("@angular/core").InputSignal<string | null>;
|
|
20
|
+
readonly placeholder: import("@angular/core").InputSignal<string | null>;
|
|
21
|
+
readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
|
|
22
|
+
readonly required: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
|
|
23
|
+
readonly type: import("@angular/core").InputSignal<TngInputType>;
|
|
24
|
+
readonly value: import("@angular/core").InputSignal<string | null>;
|
|
25
|
+
readonly valueChange: import("@angular/core").OutputEmitterRef<string>;
|
|
26
|
+
readonly inputEvent: import("@angular/core").OutputEmitterRef<Event>;
|
|
27
|
+
readonly blurEvent: import("@angular/core").OutputEmitterRef<FocusEvent>;
|
|
28
|
+
private cvaValue;
|
|
29
|
+
private cvaDisabled;
|
|
30
|
+
private usingCva;
|
|
31
|
+
private onChange;
|
|
32
|
+
private onTouched;
|
|
33
|
+
protected readonly dataSlot: "input-component";
|
|
34
|
+
protected get dataAppearance(): TngFormFieldAppearance;
|
|
35
|
+
protected get dataSize(): TngFormFieldSize;
|
|
36
|
+
protected get dataTone(): TngFormFieldTone;
|
|
14
37
|
protected get dataFullWidth(): '' | null;
|
|
38
|
+
protected get effectiveValue(): string;
|
|
39
|
+
protected get effectiveDisabled(): boolean;
|
|
40
|
+
writeValue(value: unknown): void;
|
|
41
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
42
|
+
registerOnTouched(fn: () => void): void;
|
|
43
|
+
setDisabledState(isDisabled: boolean): void;
|
|
44
|
+
onInput(event: unknown): void;
|
|
45
|
+
onBlur(event: FocusEvent): void;
|
|
46
|
+
protected normalizeAttrValue(value: string | null | undefined): string | null;
|
|
15
47
|
}
|
|
48
|
+
export {};
|
|
16
49
|
//# sourceMappingURL=tng-input.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tng-input.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tng-input.component.d.ts","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAqB,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,wCAAwC,CAAC;AAEhD,KAAK,oBAAoB,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAUhE,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAWpE;AAED,qBAaa,iBAAkB,YAAW,oBAAoB;IAC5D,SAAgB,UAAU,8DAA4C;IACtE,SAAgB,IAAI,wDAAiC;IACrD,SAAgB,IAAI,wDAAsC;IAC1D,SAAgB,SAAS,8EAEtB;IAEH,SAAgB,eAAe,qDAA8B;IAC7D,SAAgB,WAAW,yFAExB;IACH,SAAgB,SAAS,qDAA8B;IACvD,SAAgB,cAAc,qDAA8B;IAC5D,SAAgB,YAAY,yFAEzB;IACH,SAAgB,YAAY,qDAA8B;IAC1D,SAAgB,QAAQ,8EAErB;IACH,SAAgB,EAAE,qDAA8B;IAChD,SAAgB,IAAI,qDAA8B;IAClD,SAAgB,WAAW,qDAA8B;IACzD,SAAgB,QAAQ,8EAErB;IACH,SAAgB,QAAQ,8EAErB;IACH,SAAgB,IAAI,oDAA+B;IACnD,SAAgB,KAAK,qDAA8B;IAEnD,SAAgB,WAAW,mDAAoB;IAC/C,SAAgB,UAAU,kDAAqC;IAC/D,SAAgB,SAAS,uDAAyC;IAElE,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,SAAS,CAAwB;IAGzC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,iBAAiB,CAAU;IAGzD,SAAS,KAAK,cAAc,IAAI,sBAAsB,CAErD;IAGD,SAAS,KAAK,QAAQ,IAAI,gBAAgB,CAEzC;IAGD,SAAS,KAAK,QAAQ,IAAI,gBAAgB,CAEzC;IAGD,SAAS,KAAK,aAAa,IAAI,EAAE,GAAG,IAAI,CAEvC;IAED,SAAS,KAAK,cAAc,IAAI,MAAM,CAGrC;IAED,SAAS,KAAK,iBAAiB,IAAI,OAAO,CAEzC;IAEM,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKhC,gBAAgB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI;IAInD,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAIvC,gBAAgB,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;IAI3C,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAiB7B,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAKtC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI;CAG9E"}
|
|
@@ -1,16 +1,65 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { Component, HostBinding, input } from '@angular/core';
|
|
2
|
+
import { Component, forwardRef, HostBinding, input, output, } from '@angular/core';
|
|
3
3
|
import { booleanAttribute } from '@angular/core';
|
|
4
|
-
import {
|
|
4
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
|
+
import { coerceTngInputNullableBoolean, TngInput, } from '@tailng-ui/primitives';
|
|
6
|
+
import { TngFormFieldComponent, } from '../form-field/tng-form-field.component';
|
|
7
|
+
function normalizeStringValue(value) {
|
|
8
|
+
if (value === undefined || value === null) {
|
|
9
|
+
return null;
|
|
10
|
+
}
|
|
11
|
+
return value;
|
|
12
|
+
}
|
|
13
|
+
export function readTngInputEventValue(event) {
|
|
14
|
+
if (!(event instanceof Event)) {
|
|
15
|
+
return null;
|
|
16
|
+
}
|
|
17
|
+
const target = event.target;
|
|
18
|
+
if (!(target instanceof HTMLInputElement)) {
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
return target.value;
|
|
22
|
+
}
|
|
5
23
|
let TngInputComponent = class TngInputComponent {
|
|
6
24
|
appearance = input('outline');
|
|
7
25
|
size = input('md');
|
|
8
26
|
tone = input('neutral');
|
|
9
|
-
/** Default true so forms look consistent out-of-the-box */
|
|
10
27
|
fullWidth = input(true, {
|
|
11
28
|
transform: booleanAttribute,
|
|
12
29
|
});
|
|
13
|
-
|
|
30
|
+
ariaDescribedBy = input(null);
|
|
31
|
+
ariaInvalid = input(null, {
|
|
32
|
+
transform: coerceTngInputNullableBoolean,
|
|
33
|
+
});
|
|
34
|
+
ariaLabel = input(null);
|
|
35
|
+
ariaLabelledby = input(null);
|
|
36
|
+
ariaRequired = input(null, {
|
|
37
|
+
transform: coerceTngInputNullableBoolean,
|
|
38
|
+
});
|
|
39
|
+
autocomplete = input(null);
|
|
40
|
+
disabled = input(false, {
|
|
41
|
+
transform: booleanAttribute,
|
|
42
|
+
});
|
|
43
|
+
id = input(null);
|
|
44
|
+
name = input(null);
|
|
45
|
+
placeholder = input(null);
|
|
46
|
+
readonly = input(false, {
|
|
47
|
+
transform: booleanAttribute,
|
|
48
|
+
});
|
|
49
|
+
required = input(false, {
|
|
50
|
+
transform: booleanAttribute,
|
|
51
|
+
});
|
|
52
|
+
type = input('text');
|
|
53
|
+
value = input(null);
|
|
54
|
+
valueChange = output();
|
|
55
|
+
inputEvent = output({ alias: 'input' });
|
|
56
|
+
blurEvent = output({ alias: 'blur' });
|
|
57
|
+
cvaValue = null;
|
|
58
|
+
cvaDisabled = false;
|
|
59
|
+
usingCva = false;
|
|
60
|
+
onChange = () => { };
|
|
61
|
+
onTouched = () => { };
|
|
62
|
+
dataSlot = 'input-component';
|
|
14
63
|
get dataAppearance() {
|
|
15
64
|
return this.appearance();
|
|
16
65
|
}
|
|
@@ -23,6 +72,47 @@ let TngInputComponent = class TngInputComponent {
|
|
|
23
72
|
get dataFullWidth() {
|
|
24
73
|
return this.fullWidth() ? '' : null;
|
|
25
74
|
}
|
|
75
|
+
get effectiveValue() {
|
|
76
|
+
const value = this.usingCva ? this.cvaValue : this.value();
|
|
77
|
+
return value ?? '';
|
|
78
|
+
}
|
|
79
|
+
get effectiveDisabled() {
|
|
80
|
+
return this.cvaDisabled || this.disabled();
|
|
81
|
+
}
|
|
82
|
+
writeValue(value) {
|
|
83
|
+
this.usingCva = true;
|
|
84
|
+
this.cvaValue = typeof value === 'string' ? value : value == null ? null : String(value);
|
|
85
|
+
}
|
|
86
|
+
registerOnChange(fn) {
|
|
87
|
+
this.onChange = fn;
|
|
88
|
+
}
|
|
89
|
+
registerOnTouched(fn) {
|
|
90
|
+
this.onTouched = fn;
|
|
91
|
+
}
|
|
92
|
+
setDisabledState(isDisabled) {
|
|
93
|
+
this.cvaDisabled = isDisabled;
|
|
94
|
+
}
|
|
95
|
+
onInput(event) {
|
|
96
|
+
const value = readTngInputEventValue(event);
|
|
97
|
+
if (value === null) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
if (this.usingCva) {
|
|
101
|
+
this.cvaValue = value;
|
|
102
|
+
}
|
|
103
|
+
this.onChange(value);
|
|
104
|
+
this.valueChange.emit(value);
|
|
105
|
+
if (event instanceof Event) {
|
|
106
|
+
this.inputEvent.emit(event);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
onBlur(event) {
|
|
110
|
+
this.onTouched();
|
|
111
|
+
this.blurEvent.emit(event);
|
|
112
|
+
}
|
|
113
|
+
normalizeAttrValue(value) {
|
|
114
|
+
return normalizeStringValue(value);
|
|
115
|
+
}
|
|
26
116
|
};
|
|
27
117
|
__decorate([
|
|
28
118
|
HostBinding('attr.data-slot')
|
|
@@ -42,9 +132,16 @@ __decorate([
|
|
|
42
132
|
TngInputComponent = __decorate([
|
|
43
133
|
Component({
|
|
44
134
|
selector: 'tng-input',
|
|
45
|
-
imports: [
|
|
135
|
+
imports: [TngFormFieldComponent, TngInput],
|
|
46
136
|
templateUrl: './tng-input.component.html',
|
|
47
137
|
styleUrl: './tng-input.component.css',
|
|
138
|
+
providers: [
|
|
139
|
+
{
|
|
140
|
+
provide: NG_VALUE_ACCESSOR,
|
|
141
|
+
useExisting: forwardRef(() => TngInputComponent),
|
|
142
|
+
multi: true,
|
|
143
|
+
},
|
|
144
|
+
],
|
|
48
145
|
})
|
|
49
146
|
], TngInputComponent);
|
|
50
147
|
export { TngInputComponent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tng-input.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"tng-input.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/form/input/tng-input.component.ts"],"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 { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport {\n coerceTngInputNullableBoolean,\n TngInput,\n type TngInputType,\n} from '@tailng-ui/primitives';\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 normalizeStringValue(value: string | null | undefined): string | null {\n if (value === undefined || value === null) {\n return null;\n }\n\n return value;\n}\n\nexport function readTngInputEventValue(event: unknown): string | null {\n if (!(event instanceof Event)) {\n return null;\n }\n\n const target = event.target;\n if (!(target instanceof HTMLInputElement)) {\n return null;\n }\n\n return target.value;\n}\n\n@Component({\n selector: 'tng-input',\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 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 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 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 public readonly value = input<string | null>(null);\n\n public readonly valueChange = output<string>();\n public readonly inputEvent = output<Event>({ alias: 'input' });\n public readonly blurEvent = output<FocusEvent>({ alias: 'blur' });\n\n private cvaValue: string | null = null;\n private cvaDisabled = false;\n private usingCva = false;\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\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 protected get effectiveValue(): string {\n const value = this.usingCva ? this.cvaValue : this.value();\n return value ?? '';\n }\n\n protected get effectiveDisabled(): boolean {\n return this.cvaDisabled || this.disabled();\n }\n\n public writeValue(value: unknown): void {\n this.usingCva = true;\n this.cvaValue = typeof value === 'string' ? value : value == null ? null : 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 public onInput(event: unknown): void {\n const value = readTngInputEventValue(event);\n if (value === null) {\n return;\n }\n\n if (this.usingCva) {\n this.cvaValue = value;\n }\n\n this.onChange(value);\n this.valueChange.emit(value);\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 normalizeStringValue(value);\n }\n}\n"]}
|