@tekus/design-system 5.0.0 → 5.0.2
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/components/button/src/button.component.d.ts +2 -2
- package/fesm2022/tekus-design-system-components-button.mjs +5 -5
- package/fesm2022/tekus-design-system-components-button.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-fallback-view.mjs +2 -2
- package/fesm2022/tekus-design-system-components-fallback-view.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-typography.mjs +2 -2
- package/fesm2022/tekus-design-system-components-typography.mjs.map +1 -1
- package/fesm2022/tekus-design-system-core-types.mjs +4 -0
- package/fesm2022/tekus-design-system-core-types.mjs.map +1 -1
- package/fesm2022/tekus-design-system-core.mjs +4 -0
- package/fesm2022/tekus-design-system-core.mjs.map +1 -1
- package/package.json +21 -49
- package/tokens/colors/_colors.scss +84 -85
- package/tokens/index.scss +0 -1
- package/components/dropdown-list/index.d.ts +0 -5
- package/components/dropdown-list/public-api.d.ts +0 -1
- package/components/dropdown-list/src/dropdown-list.component.d.ts +0 -113
- package/components/forms/form-autocomplete-field/index.d.ts +0 -5
- package/components/forms/form-autocomplete-field/public-api.d.ts +0 -1
- package/components/forms/form-autocomplete-field/src/form-autocomplete-field.component.d.ts +0 -173
- package/components/forms/form-chips-autocomplete-field/index.d.ts +0 -5
- package/components/forms/form-chips-autocomplete-field/public-api.d.ts +0 -1
- package/components/forms/form-chips-autocomplete-field/src/form-chips-autocomplete-field.component.d.ts +0 -124
- package/components/forms/form-input-field/index.d.ts +0 -5
- package/components/forms/form-input-field/public-api.d.ts +0 -1
- package/components/forms/form-input-field/src/form-input-field.component.d.ts +0 -137
- package/components/forms/index.d.ts +0 -5
- package/components/forms/public-api.d.ts +0 -3
- package/components/search-bar/index.d.ts +0 -5
- package/components/search-bar/public-api.d.ts +0 -1
- package/components/search-bar/src/search-bar.component.d.ts +0 -25
- package/fesm2022/tekus-design-system-components-dropdown-list.mjs +0 -147
- package/fesm2022/tekus-design-system-components-dropdown-list.mjs.map +0 -1
- package/fesm2022/tekus-design-system-components-forms-form-autocomplete-field.mjs +0 -268
- package/fesm2022/tekus-design-system-components-forms-form-autocomplete-field.mjs.map +0 -1
- package/fesm2022/tekus-design-system-components-forms-form-chips-autocomplete-field.mjs +0 -193
- package/fesm2022/tekus-design-system-components-forms-form-chips-autocomplete-field.mjs.map +0 -1
- package/fesm2022/tekus-design-system-components-forms-form-input-field.mjs +0 -212
- package/fesm2022/tekus-design-system-components-forms-form-input-field.mjs.map +0 -1
- package/fesm2022/tekus-design-system-components-forms.mjs +0 -640
- package/fesm2022/tekus-design-system-components-forms.mjs.map +0 -1
- package/fesm2022/tekus-design-system-components-search-bar.mjs +0 -56
- package/fesm2022/tekus-design-system-components-search-bar.mjs.map +0 -1
- package/fesm2022/tekus-design-system-services-design-tokens.mjs +0 -47
- package/fesm2022/tekus-design-system-services-design-tokens.mjs.map +0 -1
- package/fesm2022/tekus-design-system-services-typography.mjs +0 -91
- package/fesm2022/tekus-design-system-services-typography.mjs.map +0 -1
- package/services/design-tokens/index.d.ts +0 -5
- package/services/design-tokens/public-api.d.ts +0 -1
- package/services/design-tokens/src/design-tokens.service.d.ts +0 -10
- package/services/typography/index.d.ts +0 -5
- package/services/typography/public-api.d.ts +0 -1
- package/services/typography/src/typography.service.d.ts +0 -8
- package/tokens/typography/_typography.scss +0 -6
- package/tokens/typography/font-size/_font-size.scss +0 -16
- package/tokens/typography/font-weight/_font-weight.scss +0 -14
- package/tokens/typography/letter-spacing/_letter-spacing.scss +0 -12
- package/tokens/typography/line-height/_line-height.scss +0 -16
- package/tokens/typography/variants/_variants.scss +0 -211
|
@@ -1,212 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Output, Input, Component } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/forms';
|
|
4
|
-
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
|
-
import { merge } from 'rxjs';
|
|
6
|
-
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
7
|
-
import { NgStyle } from '@angular/common';
|
|
8
|
-
import * as i2 from '@angular/material/input';
|
|
9
|
-
import { MatInputModule } from '@angular/material/input';
|
|
10
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
11
|
-
|
|
12
|
-
class FormInputFieldComponent {
|
|
13
|
-
/**
|
|
14
|
-
* @ignore
|
|
15
|
-
* Class constructor
|
|
16
|
-
*/
|
|
17
|
-
constructor() {
|
|
18
|
-
/**
|
|
19
|
-
* What color palette to use
|
|
20
|
-
* @default 'accent'
|
|
21
|
-
*/
|
|
22
|
-
this.theme = 'accent';
|
|
23
|
-
/**
|
|
24
|
-
* Optional field input type
|
|
25
|
-
* @default 'text'
|
|
26
|
-
*/
|
|
27
|
-
this.type = 'text';
|
|
28
|
-
/**
|
|
29
|
-
* Whether the field is required
|
|
30
|
-
* @default true
|
|
31
|
-
*/
|
|
32
|
-
this.required = true;
|
|
33
|
-
/**
|
|
34
|
-
* Form field label behavior
|
|
35
|
-
* @default 'auto'
|
|
36
|
-
*/
|
|
37
|
-
this.floatLabel = 'auto';
|
|
38
|
-
/**
|
|
39
|
-
* Form field appearance
|
|
40
|
-
* @default 'fill'
|
|
41
|
-
*/
|
|
42
|
-
this.appearance = 'fill';
|
|
43
|
-
/**
|
|
44
|
-
* Form field reserved space for one line by default.
|
|
45
|
-
* @default 'dynamic'
|
|
46
|
-
*/
|
|
47
|
-
this.subscriptSizing = 'dynamic';
|
|
48
|
-
/**
|
|
49
|
-
* Input field label
|
|
50
|
-
*/
|
|
51
|
-
this.fieldLabel = '';
|
|
52
|
-
/**
|
|
53
|
-
* Input field placeholder
|
|
54
|
-
* @default ''
|
|
55
|
-
*/
|
|
56
|
-
this.placeHolder = '';
|
|
57
|
-
/**
|
|
58
|
-
* Input field control
|
|
59
|
-
* @ignore
|
|
60
|
-
*/
|
|
61
|
-
this.formControl = new FormControl('');
|
|
62
|
-
/**
|
|
63
|
-
* Input field error message
|
|
64
|
-
* @ignore
|
|
65
|
-
*/
|
|
66
|
-
this.errorMessage = '';
|
|
67
|
-
/**
|
|
68
|
-
* Optional validators for the field
|
|
69
|
-
* @default ''
|
|
70
|
-
*/
|
|
71
|
-
this.validatorsWithMessages = {};
|
|
72
|
-
/**
|
|
73
|
-
* Optional async validators for the field
|
|
74
|
-
* @default ''
|
|
75
|
-
*/
|
|
76
|
-
this.asyncValidatorsWithMessages = {};
|
|
77
|
-
/**
|
|
78
|
-
* Input field changes handler
|
|
79
|
-
*/
|
|
80
|
-
this.inputStatus = new EventEmitter();
|
|
81
|
-
merge(this.formControl.statusChanges, this.formControl.valueChanges)
|
|
82
|
-
.pipe(takeUntilDestroyed())
|
|
83
|
-
.subscribe(() => {
|
|
84
|
-
this.updateErrorMessage();
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* Component lifecycle method
|
|
89
|
-
* @ignore
|
|
90
|
-
*/
|
|
91
|
-
ngOnInit() {
|
|
92
|
-
this.applyValidators();
|
|
93
|
-
}
|
|
94
|
-
/**
|
|
95
|
-
* Component lifecycle method
|
|
96
|
-
* @ignore
|
|
97
|
-
*/
|
|
98
|
-
ngOnChanges(changes) {
|
|
99
|
-
if (changes['validatorsWithMessages'] ||
|
|
100
|
-
changes['asyncValidatorsWithMessages']) {
|
|
101
|
-
this.applyValidators();
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
/**
|
|
105
|
-
* @ignore
|
|
106
|
-
* Component lifecycle method
|
|
107
|
-
*/
|
|
108
|
-
isThereAnyValidator(validatorsWithMessages) {
|
|
109
|
-
return Object.keys(validatorsWithMessages).length > 0;
|
|
110
|
-
}
|
|
111
|
-
/**
|
|
112
|
-
* Applies all the passed validators
|
|
113
|
-
* @ignore
|
|
114
|
-
*/
|
|
115
|
-
applyValidators() {
|
|
116
|
-
const hasSyncValidators = this.isThereAnyValidator(this.validatorsWithMessages);
|
|
117
|
-
const hasAsyncValidators = this.isThereAnyValidator(this.asyncValidatorsWithMessages);
|
|
118
|
-
const activeValidators = hasSyncValidators
|
|
119
|
-
? Object.values(this.validatorsWithMessages).map(validatorWithMessage => validatorWithMessage.validator)
|
|
120
|
-
: [];
|
|
121
|
-
const activeAsyncValidators = hasAsyncValidators
|
|
122
|
-
? Object.values(this.asyncValidatorsWithMessages).map(validatorWithMessage => validatorWithMessage.validator)
|
|
123
|
-
: [];
|
|
124
|
-
if (hasSyncValidators || hasAsyncValidators) {
|
|
125
|
-
this.formControl.setValidators(activeValidators);
|
|
126
|
-
this.formControl.setAsyncValidators(activeAsyncValidators);
|
|
127
|
-
this.formControl.updateValueAndValidity();
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
/**
|
|
131
|
-
* Checks if there is any validation error
|
|
132
|
-
* @ignore
|
|
133
|
-
*/
|
|
134
|
-
checkValidationErrors(errors, validatorsWithMessages) {
|
|
135
|
-
for (const errorKey in errors) {
|
|
136
|
-
if (validatorsWithMessages[errorKey]) {
|
|
137
|
-
this.errorMessage = validatorsWithMessages[errorKey].message;
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
/**
|
|
142
|
-
* Emits the formControl variable every time the field value changes
|
|
143
|
-
* @ignore
|
|
144
|
-
*/
|
|
145
|
-
onInputChanged() {
|
|
146
|
-
this.inputStatus.emit(this.formControl);
|
|
147
|
-
}
|
|
148
|
-
/**
|
|
149
|
-
* Updates the error message every time the input value changes
|
|
150
|
-
* @ignore
|
|
151
|
-
*/
|
|
152
|
-
updateErrorMessage() {
|
|
153
|
-
this.errorMessage = '';
|
|
154
|
-
const errors = this.formControl.errors;
|
|
155
|
-
if (!errors) {
|
|
156
|
-
this.errorMessage = '';
|
|
157
|
-
return;
|
|
158
|
-
}
|
|
159
|
-
this.checkValidationErrors(errors, this.validatorsWithMessages);
|
|
160
|
-
this.checkValidationErrors(errors, this.asyncValidatorsWithMessages);
|
|
161
|
-
this.onInputChanged();
|
|
162
|
-
}
|
|
163
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
164
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FormInputFieldComponent, isStandalone: true, selector: "tk-form-input-field", inputs: { fieldWidth: "fieldWidth", fieldTitle: "fieldTitle", theme: "theme", type: "type", required: "required", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", fieldLabel: "fieldLabel", placeHolder: "placeHolder", inputPrefix: "inputPrefix", inputSuffix: "inputSuffix", validatorsWithMessages: "validatorsWithMessages", asyncValidatorsWithMessages: "asyncValidatorsWithMessages" }, outputs: { inputStatus: "inputStatus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"section\" [ngStyle]=\"{ width: fieldWidth ? 'fit-content' : '100%' }\">\n @if (fieldTitle) {\n <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n }\n <mat-form-field\n class=\"form__field\"\n [color]=\"theme\"\n [appearance]=\"appearance\"\n [floatLabel]=\"floatLabel\"\n [subscriptSizing]=\"subscriptSizing\"\n [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n <input\n matInput\n [type]=\"type\"\n [required]=\"required\"\n (input)=\"onInputChanged()\"\n [placeholder]=\"placeHolder\"\n [formControl]=\"formControl\"\n (blur)=\"updateErrorMessage()\" />\n @if (inputPrefix) {\n <span class=\"form__field__label\" matTextPrefix\n >{{ inputPrefix }} </span\n >\n }\n @if (inputSuffix) {\n <span class=\"form__field__label\" matTextSuffix>{{ inputSuffix }}</span>\n }\n @if (formControl.invalid) {\n <mat-error class=\"form__field__error\">{{ errorMessage }}</mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".section{gap:.5rem;display:flex;flex-wrap:wrap;max-width:100%;align-items:center;justify-content:flex-start}.form__field{flex:1;height:100%;width:20rem;display:flex;max-width:100%;min-width:10rem;font-size:clamp(.8rem,.657rem + .381vw,1rem)}.form__field__label{font-weight:400;font-style:normal;line-height:.98438em;font-size:clamp(.688rem,.554rem + .357vw,.875rem)}.form__field__error{font-weight:400;font-style:normal;font-size:clamp(.688rem,.554rem + .357vw,.875rem)}.field__title{margin:0;padding:0;max-width:100%;font-weight:500;overflow:hidden;font-style:normal;align-self:center;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(.9rem,.852rem + .276vw,1.1rem)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
165
|
-
}
|
|
166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormInputFieldComponent, decorators: [{
|
|
167
|
-
type: Component,
|
|
168
|
-
args: [{ selector: 'tk-form-input-field', standalone: true, imports: [
|
|
169
|
-
NgStyle,
|
|
170
|
-
FormsModule,
|
|
171
|
-
MatInputModule,
|
|
172
|
-
MatFormFieldModule,
|
|
173
|
-
ReactiveFormsModule,
|
|
174
|
-
], template: "<div class=\"section\" [ngStyle]=\"{ width: fieldWidth ? 'fit-content' : '100%' }\">\n @if (fieldTitle) {\n <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n }\n <mat-form-field\n class=\"form__field\"\n [color]=\"theme\"\n [appearance]=\"appearance\"\n [floatLabel]=\"floatLabel\"\n [subscriptSizing]=\"subscriptSizing\"\n [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n <input\n matInput\n [type]=\"type\"\n [required]=\"required\"\n (input)=\"onInputChanged()\"\n [placeholder]=\"placeHolder\"\n [formControl]=\"formControl\"\n (blur)=\"updateErrorMessage()\" />\n @if (inputPrefix) {\n <span class=\"form__field__label\" matTextPrefix\n >{{ inputPrefix }} </span\n >\n }\n @if (inputSuffix) {\n <span class=\"form__field__label\" matTextSuffix>{{ inputSuffix }}</span>\n }\n @if (formControl.invalid) {\n <mat-error class=\"form__field__error\">{{ errorMessage }}</mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".section{gap:.5rem;display:flex;flex-wrap:wrap;max-width:100%;align-items:center;justify-content:flex-start}.form__field{flex:1;height:100%;width:20rem;display:flex;max-width:100%;min-width:10rem;font-size:clamp(.8rem,.657rem + .381vw,1rem)}.form__field__label{font-weight:400;font-style:normal;line-height:.98438em;font-size:clamp(.688rem,.554rem + .357vw,.875rem)}.form__field__error{font-weight:400;font-style:normal;font-size:clamp(.688rem,.554rem + .357vw,.875rem)}.field__title{margin:0;padding:0;max-width:100%;font-weight:500;overflow:hidden;font-style:normal;align-self:center;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(.9rem,.852rem + .276vw,1.1rem)}\n"] }]
|
|
175
|
-
}], ctorParameters: () => [], propDecorators: { fieldWidth: [{
|
|
176
|
-
type: Input
|
|
177
|
-
}], fieldTitle: [{
|
|
178
|
-
type: Input
|
|
179
|
-
}], theme: [{
|
|
180
|
-
type: Input
|
|
181
|
-
}], type: [{
|
|
182
|
-
type: Input
|
|
183
|
-
}], required: [{
|
|
184
|
-
type: Input
|
|
185
|
-
}], floatLabel: [{
|
|
186
|
-
type: Input
|
|
187
|
-
}], appearance: [{
|
|
188
|
-
type: Input
|
|
189
|
-
}], subscriptSizing: [{
|
|
190
|
-
type: Input
|
|
191
|
-
}], fieldLabel: [{
|
|
192
|
-
type: Input
|
|
193
|
-
}], placeHolder: [{
|
|
194
|
-
type: Input
|
|
195
|
-
}], inputPrefix: [{
|
|
196
|
-
type: Input
|
|
197
|
-
}], inputSuffix: [{
|
|
198
|
-
type: Input
|
|
199
|
-
}], validatorsWithMessages: [{
|
|
200
|
-
type: Input
|
|
201
|
-
}], asyncValidatorsWithMessages: [{
|
|
202
|
-
type: Input
|
|
203
|
-
}], inputStatus: [{
|
|
204
|
-
type: Output
|
|
205
|
-
}] } });
|
|
206
|
-
|
|
207
|
-
/**
|
|
208
|
-
* Generated bundle index. Do not edit.
|
|
209
|
-
*/
|
|
210
|
-
|
|
211
|
-
export { FormInputFieldComponent };
|
|
212
|
-
//# sourceMappingURL=tekus-design-system-components-forms-form-input-field.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-forms-form-input-field.mjs","sources":["../../../projects/design-system/components/forms/form-input-field/src/form-input-field.component.ts","../../../projects/design-system/components/forms/form-input-field/src/form-input-field.component.html","../../../projects/design-system/components/forms/form-input-field/tekus-design-system-components-forms-form-input-field.ts"],"sourcesContent":["import {\n Input,\n OnInit,\n Output,\n Component,\n OnChanges,\n EventEmitter,\n SimpleChanges,\n} from '@angular/core';\nimport {\n FormControl,\n FormsModule,\n ValidatorFn,\n AsyncValidatorFn,\n ValidationErrors,\n ReactiveFormsModule,\n} from '@angular/forms';\nimport { merge } from 'rxjs';\nimport {\n FloatLabelType,\n SubscriptSizing,\n MatFormFieldModule,\n MatFormFieldAppearance,\n} from '@angular/material/form-field';\nimport { NgStyle } from '@angular/common';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ValidatorWithMessage } from '@tekus/design-system/core/types';\n\n@Component({\n selector: 'tk-form-input-field',\n standalone: true,\n imports: [\n NgStyle,\n FormsModule,\n MatInputModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n ],\n templateUrl: './form-input-field.component.html',\n styleUrl: './form-input-field.component.scss',\n})\nexport class FormInputFieldComponent implements OnInit, OnChanges {\n /**\n * Optional input field width\n * @default 100%\n */\n @Input()\n public fieldWidth?: string;\n\n /**\n * Optional input field title\n * @default null\n */\n @Input()\n public fieldTitle?: string;\n\n /**\n * What color palette to use\n * @default 'accent'\n */\n @Input()\n public theme?: ThemePalette = 'accent';\n\n /**\n * Optional field input type\n * @default 'text'\n */\n @Input()\n public type = 'text';\n\n /**\n * Whether the field is required\n * @default true\n */\n @Input()\n public required = true;\n\n /**\n * Form field label behavior\n * @default 'auto'\n */\n @Input()\n public floatLabel: FloatLabelType = 'auto';\n\n /**\n * Form field appearance\n * @default 'fill'\n */\n @Input()\n public appearance: MatFormFieldAppearance = 'fill';\n\n /**\n * Form field reserved space for one line by default.\n * @default 'dynamic'\n */\n @Input()\n public subscriptSizing: SubscriptSizing = 'dynamic';\n\n /**\n * Input field label\n */\n @Input()\n public fieldLabel = '';\n\n /**\n * Input field placeholder\n * @default ''\n */\n @Input()\n public placeHolder = '';\n\n /**\n * Optional Input field text prefix\n * @default ''\n */\n @Input()\n public inputPrefix?: string;\n\n /**\n * Optional Input field text suffix\n * @default ''\n */\n @Input()\n public inputSuffix?: string;\n\n /**\n * Input field control\n * @ignore\n */\n public formControl = new FormControl('');\n\n /**\n * Input field error message\n * @ignore\n */\n public errorMessage: string = '';\n\n /**\n * Optional validators for the field\n * @default ''\n */\n @Input()\n public validatorsWithMessages: { [key: string]: ValidatorWithMessage } = {};\n\n /**\n * Optional async validators for the field\n * @default ''\n */\n @Input()\n public asyncValidatorsWithMessages: { [key: string]: ValidatorWithMessage } =\n {};\n\n /**\n * Input field changes handler\n */\n @Output()\n public inputStatus = new EventEmitter<FormControl>();\n\n /**\n * @ignore\n * Class constructor\n */\n constructor() {\n merge(this.formControl.statusChanges, this.formControl.valueChanges)\n .pipe(takeUntilDestroyed())\n .subscribe(() => {\n this.updateErrorMessage();\n });\n }\n\n /**\n * Component lifecycle method\n * @ignore\n */\n ngOnInit(): void {\n this.applyValidators();\n }\n\n /**\n * Component lifecycle method\n * @ignore\n */\n ngOnChanges(changes: SimpleChanges): void {\n if (\n changes['validatorsWithMessages'] ||\n changes['asyncValidatorsWithMessages']\n ) {\n this.applyValidators();\n }\n }\n\n /**\n * @ignore\n * Component lifecycle method\n */\n private isThereAnyValidator(validatorsWithMessages: {\n [key: string]: ValidatorWithMessage;\n }): boolean {\n return Object.keys(validatorsWithMessages).length > 0;\n }\n\n /**\n * Applies all the passed validators\n * @ignore\n */\n private applyValidators(): void {\n const hasSyncValidators = this.isThereAnyValidator(\n this.validatorsWithMessages\n );\n\n const hasAsyncValidators = this.isThereAnyValidator(\n this.asyncValidatorsWithMessages\n );\n\n const activeValidators: ValidatorFn[] = hasSyncValidators\n ? Object.values(this.validatorsWithMessages).map(\n validatorWithMessage => validatorWithMessage.validator\n )\n : [];\n\n const activeAsyncValidators: AsyncValidatorFn[] = hasAsyncValidators\n ? Object.values(this.asyncValidatorsWithMessages).map(\n validatorWithMessage =>\n validatorWithMessage.validator as AsyncValidatorFn\n )\n : [];\n\n if (hasSyncValidators || hasAsyncValidators) {\n this.formControl.setValidators(activeValidators);\n this.formControl.setAsyncValidators(activeAsyncValidators);\n this.formControl.updateValueAndValidity();\n }\n }\n\n /**\n * Checks if there is any validation error\n * @ignore\n */\n private checkValidationErrors(\n errors: ValidationErrors | null,\n validatorsWithMessages: {\n [key: string]: ValidatorWithMessage;\n }\n ): void {\n for (const errorKey in errors) {\n if (validatorsWithMessages[errorKey]) {\n this.errorMessage = validatorsWithMessages[errorKey].message;\n }\n }\n }\n\n /**\n * Emits the formControl variable every time the field value changes\n * @ignore\n */\n public onInputChanged(): void {\n this.inputStatus.emit(this.formControl);\n }\n\n /**\n * Updates the error message every time the input value changes\n * @ignore\n */\n public updateErrorMessage(): void {\n this.errorMessage = '';\n const errors = this.formControl.errors;\n\n if (!errors) {\n this.errorMessage = '';\n return;\n }\n\n this.checkValidationErrors(errors, this.validatorsWithMessages);\n this.checkValidationErrors(errors, this.asyncValidatorsWithMessages);\n this.onInputChanged();\n }\n}\n","<div class=\"section\" [ngStyle]=\"{ width: fieldWidth ? 'fit-content' : '100%' }\">\n @if (fieldTitle) {\n <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n }\n <mat-form-field\n class=\"form__field\"\n [color]=\"theme\"\n [appearance]=\"appearance\"\n [floatLabel]=\"floatLabel\"\n [subscriptSizing]=\"subscriptSizing\"\n [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n <input\n matInput\n [type]=\"type\"\n [required]=\"required\"\n (input)=\"onInputChanged()\"\n [placeholder]=\"placeHolder\"\n [formControl]=\"formControl\"\n (blur)=\"updateErrorMessage()\" />\n @if (inputPrefix) {\n <span class=\"form__field__label\" matTextPrefix\n >{{ inputPrefix }} </span\n >\n }\n @if (inputSuffix) {\n <span class=\"form__field__label\" matTextSuffix>{{ inputSuffix }}</span>\n }\n @if (formControl.invalid) {\n <mat-error class=\"form__field__error\">{{ errorMessage }}</mat-error>\n }\n </mat-form-field>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|