@tekus/design-system 4.0.1 → 4.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/esm2022/components/forms/tk-form-autocomplete-field/tk-form-autocomplete-field.component.mjs +3 -3
- package/esm2022/components/forms/tk-form-chips-autocomplete-field/tk-form-chips-autocomplete-field.component.mjs +3 -3
- package/esm2022/components/forms/tk-form-input-field/tk-form-input-field.component.mjs +3 -3
- package/fesm2022/tekus-design-system-components-forms-tk-form-autocomplete-field.mjs +2 -2
- package/fesm2022/tekus-design-system-components-forms-tk-form-autocomplete-field.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-forms-tk-form-chips-autocomplete-field.mjs +2 -2
- package/fesm2022/tekus-design-system-components-forms-tk-form-chips-autocomplete-field.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-forms-tk-form-input-field.mjs +2 -2
- package/fesm2022/tekus-design-system-components-forms-tk-form-input-field.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-forms.mjs +6 -6
- package/fesm2022/tekus-design-system-components-forms.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -126,7 +126,7 @@ class TkFormChipsAutocompleteFieldComponent {
|
|
|
126
126
|
return this.allKeywords.filter(keyword => keyword.ViewValue.toLowerCase().includes(filterValue));
|
|
127
127
|
}
|
|
128
128
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormChipsAutocompleteFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
129
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: TkFormChipsAutocompleteFieldComponent, isStandalone: true, selector: "lib-tk-form-chips-autocomplete-field", inputs: { fieldLabel: "fieldLabel", placeHolder: "placeHolder", fieldTitle: "fieldTitle", theme: "theme", subscriptSizing: "subscriptSizing", fieldWidth: "fieldWidth", appearance: "appearance", allKeywords: "allKeywords" }, outputs: { inputStatus: "inputStatus", selectedKeywords: "selectedKeywords" }, viewQueries: [{ propertyName: "keywordInput", first: true, predicate: ["keywordInput"], descendants: true }], ngImport: i0, template: "<
|
|
129
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: TkFormChipsAutocompleteFieldComponent, isStandalone: true, selector: "lib-tk-form-chips-autocomplete-field", inputs: { fieldLabel: "fieldLabel", placeHolder: "placeHolder", fieldTitle: "fieldTitle", theme: "theme", subscriptSizing: "subscriptSizing", fieldWidth: "fieldWidth", appearance: "appearance", allKeywords: "allKeywords" }, outputs: { inputStatus: "inputStatus", selectedKeywords: "selectedKeywords" }, viewQueries: [{ propertyName: "keywordInput", first: true, predicate: ["keywordInput"], descendants: 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 [subscriptSizing]=\"subscriptSizing\"\n [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Keyword selection\">\n @for (keyword of keywords; track keyword.Value) {\n <mat-chip-row (removed)=\"remove(keyword)\">\n {{ keyword.ViewValue }}\n <button\n matChipRemove\n [attr.aria-label]=\"'remove ' + keyword.ViewValue\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n #keywordInput\n [matAutocomplete]=\"auto\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeHolder\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"selected($event)\">\n @for (keyword of filteredKeywords | async; track keyword.Value) {\n <mat-option [value]=\"keyword.Value\">{{ keyword.ViewValue }}</mat-option>\n }\n </mat-autocomplete>\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)}.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: "pipe", type: AsyncPipe, name: "async" }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
130
130
|
}
|
|
131
131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormChipsAutocompleteFieldComponent, decorators: [{
|
|
132
132
|
type: Component,
|
|
@@ -140,7 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
140
140
|
MatFormFieldModule,
|
|
141
141
|
ReactiveFormsModule,
|
|
142
142
|
MatAutocompleteModule,
|
|
143
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
143
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, 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 [subscriptSizing]=\"subscriptSizing\"\n [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Keyword selection\">\n @for (keyword of keywords; track keyword.Value) {\n <mat-chip-row (removed)=\"remove(keyword)\">\n {{ keyword.ViewValue }}\n <button\n matChipRemove\n [attr.aria-label]=\"'remove ' + keyword.ViewValue\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n #keywordInput\n [matAutocomplete]=\"auto\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeHolder\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"selected($event)\">\n @for (keyword of filteredKeywords | async; track keyword.Value) {\n <mat-option [value]=\"keyword.Value\">{{ keyword.ViewValue }}</mat-option>\n }\n </mat-autocomplete>\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)}.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"] }]
|
|
144
144
|
}], ctorParameters: () => [], propDecorators: { fieldLabel: [{
|
|
145
145
|
type: Input
|
|
146
146
|
}], placeHolder: [{
|
package/fesm2022/tekus-design-system-components-forms-tk-form-chips-autocomplete-field.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-forms-tk-form-chips-autocomplete-field.mjs","sources":["../../../projects/design-system/components/forms/tk-form-chips-autocomplete-field/tk-form-chips-autocomplete-field.component.ts","../../../projects/design-system/components/forms/tk-form-chips-autocomplete-field/tk-form-chips-autocomplete-field.component.html","../../../projects/design-system/components/forms/tk-form-chips-autocomplete-field/tekus-design-system-components-forms-tk-form-chips-autocomplete-field.ts"],"sourcesContent":["import {\n Input,\n Output,\n Component,\n ViewChild,\n ElementRef,\n EventEmitter,\n ChangeDetectionStrategy,\n} from '@angular/core';\nimport {\n SubscriptSizing,\n MatFormFieldModule,\n MatFormFieldAppearance,\n} from '@angular/material/form-field';\nimport {\n MatAutocompleteModule,\n MatAutocompleteSelectedEvent,\n} from '@angular/material/autocomplete';\nimport { Option } from './models/option.model';\nimport { map, Observable, startWith } from 'rxjs';\nimport { AsyncPipe, NgStyle } from '@angular/common';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { MatButtonModule } from '@angular/material/button';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n selector: 'lib-tk-form-chips-autocomplete-field',\n standalone: true,\n imports: [\n NgStyle,\n AsyncPipe,\n FormsModule,\n MatIconModule,\n MatChipsModule,\n MatButtonModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n MatAutocompleteModule,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './tk-form-chips-autocomplete-field.component.html',\n styleUrl: './tk-form-chips-autocomplete-field.component.scss',\n})\nexport class TkFormChipsAutocompleteFieldComponent {\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 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 * Form field reserved space for one line by default.\n * @default 'dynamic'\n */\n @Input()\n public subscriptSizing: SubscriptSizing = 'dynamic';\n\n /**\n * Optional input field width\n * @default 100%\n */\n @Input()\n public fieldWidth?: string;\n\n /**\n * Form field appearance\n * @default 'fill'\n */\n @Input()\n public appearance: MatFormFieldAppearance = 'fill';\n\n /**\n * Input field control\n * @ignore\n */\n public formControl = new FormControl('');\n /**\n * Selected keywords\n * @ignore\n */\n public keywords: Option[] = [];\n\n /**\n * Input field changes handler\n */\n @Output()\n public inputStatus = new EventEmitter<FormControl>();\n\n /**\n * Keywords changes handler\n */\n @Output()\n public selectedKeywords = new EventEmitter<(string | number)[]>();\n\n /**\n * Separator constants\n * @ignore\n */\n public readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n\n /**\n * Options to be displayed\n * @ignore\n */\n @Input()\n public allKeywords: Option[] = [];\n\n /**\n * Filtered keywords after the input field changes\n * @ignore\n */\n public readonly filteredKeywords: Observable<Option[]>;\n\n /**\n * Keyword Input element reference\n * @ignore\n */\n @ViewChild('keywordInput') keywordInput!: ElementRef<HTMLInputElement>;\n\n /**\n * @ignore\n * Class constructor\n */\n constructor() {\n this.filteredKeywords = this.formControl.valueChanges.pipe(\n startWith(null),\n map((keyword: string | null) =>\n keyword ? this._filter(String(keyword)) : this.allKeywords.slice()\n )\n );\n }\n\n /**\n * Handles every keyword deletion\n * @ignore\n */\n public remove(keyword: Option): void {\n const index = this.keywords.indexOf(keyword);\n\n if (index >= 0) {\n this.keywords.splice(index, 1);\n this.onKeywordsChanged();\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 * Emits the selected keywords every time they changed\n * @ignore\n */\n public onKeywordsChanged(): void {\n this.selectedKeywords.emit(this.keywords.map(keyword => keyword.Value));\n }\n\n /**\n * Handles the autocomplete selection\n * @ignore\n */\n public selected(event: MatAutocompleteSelectedEvent): void {\n const value = event.option.value;\n const selectedKeyword = this.allKeywords.find(\n option => option.Value === value\n );\n\n if (\n selectedKeyword &&\n !this.keywords.some(keyword => keyword.Value === selectedKeyword.Value)\n ) {\n this.keywords.push(selectedKeyword);\n this.onKeywordsChanged();\n }\n\n this.keywordInput.nativeElement.value = '';\n this.formControl.setValue(null);\n }\n\n /**\n * Filters the keywords based on the input\n * @ignore\n */\n private _filter(value: string): Option[] {\n this.onInputChanged();\n const filterValue = value.toLowerCase();\n\n return this.allKeywords.filter(keyword =>\n keyword.ViewValue.toLowerCase().includes(filterValue)\n );\n }\n}\n","<section\n class=\"section\"\n [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 [subscriptSizing]=\"subscriptSizing\"\n [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Keyword selection\">\n @for (keyword of keywords; track keyword.Value) {\n <mat-chip-row (removed)=\"remove(keyword)\">\n {{ keyword.ViewValue }}\n <button matChipRemove [attr.aria-label]=\"'remove ' + keyword.ViewValue\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n #keywordInput\n [matAutocomplete]=\"auto\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeHolder\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"selected($event)\">\n @for (keyword of filteredKeywords | async; track keyword.Value) {\n <mat-option [value]=\"keyword.Value\">{{ keyword.ViewValue }}</mat-option>\n }\n </mat-autocomplete>\n </mat-form-field>\n</section>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-forms-tk-form-chips-autocomplete-field.mjs","sources":["../../../projects/design-system/components/forms/tk-form-chips-autocomplete-field/tk-form-chips-autocomplete-field.component.ts","../../../projects/design-system/components/forms/tk-form-chips-autocomplete-field/tk-form-chips-autocomplete-field.component.html","../../../projects/design-system/components/forms/tk-form-chips-autocomplete-field/tekus-design-system-components-forms-tk-form-chips-autocomplete-field.ts"],"sourcesContent":["import {\n Input,\n Output,\n Component,\n ViewChild,\n ElementRef,\n EventEmitter,\n ChangeDetectionStrategy,\n} from '@angular/core';\nimport {\n SubscriptSizing,\n MatFormFieldModule,\n MatFormFieldAppearance,\n} from '@angular/material/form-field';\nimport {\n MatAutocompleteModule,\n MatAutocompleteSelectedEvent,\n} from '@angular/material/autocomplete';\nimport { Option } from './models/option.model';\nimport { map, Observable, startWith } from 'rxjs';\nimport { AsyncPipe, NgStyle } from '@angular/common';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { MatButtonModule } from '@angular/material/button';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n selector: 'lib-tk-form-chips-autocomplete-field',\n standalone: true,\n imports: [\n NgStyle,\n AsyncPipe,\n FormsModule,\n MatIconModule,\n MatChipsModule,\n MatButtonModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n MatAutocompleteModule,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './tk-form-chips-autocomplete-field.component.html',\n styleUrl: './tk-form-chips-autocomplete-field.component.scss',\n})\nexport class TkFormChipsAutocompleteFieldComponent {\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 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 * Form field reserved space for one line by default.\n * @default 'dynamic'\n */\n @Input()\n public subscriptSizing: SubscriptSizing = 'dynamic';\n\n /**\n * Optional input field width\n * @default 100%\n */\n @Input()\n public fieldWidth?: string;\n\n /**\n * Form field appearance\n * @default 'fill'\n */\n @Input()\n public appearance: MatFormFieldAppearance = 'fill';\n\n /**\n * Input field control\n * @ignore\n */\n public formControl = new FormControl('');\n /**\n * Selected keywords\n * @ignore\n */\n public keywords: Option[] = [];\n\n /**\n * Input field changes handler\n */\n @Output()\n public inputStatus = new EventEmitter<FormControl>();\n\n /**\n * Keywords changes handler\n */\n @Output()\n public selectedKeywords = new EventEmitter<(string | number)[]>();\n\n /**\n * Separator constants\n * @ignore\n */\n public readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n\n /**\n * Options to be displayed\n * @ignore\n */\n @Input()\n public allKeywords: Option[] = [];\n\n /**\n * Filtered keywords after the input field changes\n * @ignore\n */\n public readonly filteredKeywords: Observable<Option[]>;\n\n /**\n * Keyword Input element reference\n * @ignore\n */\n @ViewChild('keywordInput') keywordInput!: ElementRef<HTMLInputElement>;\n\n /**\n * @ignore\n * Class constructor\n */\n constructor() {\n this.filteredKeywords = this.formControl.valueChanges.pipe(\n startWith(null),\n map((keyword: string | null) =>\n keyword ? this._filter(String(keyword)) : this.allKeywords.slice()\n )\n );\n }\n\n /**\n * Handles every keyword deletion\n * @ignore\n */\n public remove(keyword: Option): void {\n const index = this.keywords.indexOf(keyword);\n\n if (index >= 0) {\n this.keywords.splice(index, 1);\n this.onKeywordsChanged();\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 * Emits the selected keywords every time they changed\n * @ignore\n */\n public onKeywordsChanged(): void {\n this.selectedKeywords.emit(this.keywords.map(keyword => keyword.Value));\n }\n\n /**\n * Handles the autocomplete selection\n * @ignore\n */\n public selected(event: MatAutocompleteSelectedEvent): void {\n const value = event.option.value;\n const selectedKeyword = this.allKeywords.find(\n option => option.Value === value\n );\n\n if (\n selectedKeyword &&\n !this.keywords.some(keyword => keyword.Value === selectedKeyword.Value)\n ) {\n this.keywords.push(selectedKeyword);\n this.onKeywordsChanged();\n }\n\n this.keywordInput.nativeElement.value = '';\n this.formControl.setValue(null);\n }\n\n /**\n * Filters the keywords based on the input\n * @ignore\n */\n private _filter(value: string): Option[] {\n this.onInputChanged();\n const filterValue = value.toLowerCase();\n\n return this.allKeywords.filter(keyword =>\n keyword.ViewValue.toLowerCase().includes(filterValue)\n );\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 [subscriptSizing]=\"subscriptSizing\"\n [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Keyword selection\">\n @for (keyword of keywords; track keyword.Value) {\n <mat-chip-row (removed)=\"remove(keyword)\">\n {{ keyword.ViewValue }}\n <button\n matChipRemove\n [attr.aria-label]=\"'remove ' + keyword.ViewValue\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n #keywordInput\n [matAutocomplete]=\"auto\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeHolder\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"selected($event)\">\n @for (keyword of filteredKeywords | async; track keyword.Value) {\n <mat-option [value]=\"keyword.Value\">{{ keyword.ViewValue }}</mat-option>\n }\n </mat-autocomplete>\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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"}
|
|
@@ -162,7 +162,7 @@ class TkFormInputFieldComponent {
|
|
|
162
162
|
this.onInputChanged();
|
|
163
163
|
}
|
|
164
164
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
165
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: TkFormInputFieldComponent, isStandalone: true, selector: "lib-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: "<
|
|
165
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: TkFormInputFieldComponent, isStandalone: true, selector: "lib-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"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.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"] }] }); }
|
|
166
166
|
}
|
|
167
167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormInputFieldComponent, decorators: [{
|
|
168
168
|
type: Component,
|
|
@@ -172,7 +172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
172
172
|
MatInputModule,
|
|
173
173
|
MatFormFieldModule,
|
|
174
174
|
ReactiveFormsModule,
|
|
175
|
-
], template: "<
|
|
175
|
+
], 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"] }]
|
|
176
176
|
}], ctorParameters: () => [], propDecorators: { fieldWidth: [{
|
|
177
177
|
type: Input
|
|
178
178
|
}], fieldTitle: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-forms-tk-form-input-field.mjs","sources":["../../../projects/design-system/components/forms/tk-form-input-field/tk-form-input-field.component.ts","../../../projects/design-system/components/forms/tk-form-input-field/tk-form-input-field.component.html","../../../projects/design-system/components/forms/tk-form-input-field/tekus-design-system-components-forms-tk-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 './models/validator-with-message.model';\n\n@Component({\n selector: 'lib-tk-form-input-field',\n standalone: true,\n imports: [\n NgStyle,\n FormsModule,\n MatInputModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n ],\n templateUrl: './tk-form-input-field.component.html',\n styleUrl: './tk-form-input-field.component.scss',\n})\nexport class TkFormInputFieldComponent 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","<section\n class=\"section\"\n [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 } @if (inputSuffix) {\n <span class=\"form__field__label\" matTextSuffix>{{ inputSuffix }}</span>\n } @if (formControl.invalid) {\n <mat-error class=\"form__field__error\">{{ errorMessage }}</mat-error>\n }\n </mat-form-field>\n</section>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-forms-tk-form-input-field.mjs","sources":["../../../projects/design-system/components/forms/tk-form-input-field/tk-form-input-field.component.ts","../../../projects/design-system/components/forms/tk-form-input-field/tk-form-input-field.component.html","../../../projects/design-system/components/forms/tk-form-input-field/tekus-design-system-components-forms-tk-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 './models/validator-with-message.model';\n\n@Component({\n selector: 'lib-tk-form-input-field',\n standalone: true,\n imports: [\n NgStyle,\n FormsModule,\n MatInputModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n ],\n templateUrl: './tk-form-input-field.component.html',\n styleUrl: './tk-form-input-field.component.scss',\n})\nexport class TkFormInputFieldComponent 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":";;;;;;;;;;;;MA2Ca,yBAAyB,CAAA;AAqHpC;;;AAGG;AACH,IAAA,WAAA,GAAA;AA1GA;;;AAGG;QAEI,IAAK,CAAA,KAAA,GAAkB,QAAQ,CAAC;AAEvC;;;AAGG;QAEI,IAAI,CAAA,IAAA,GAAG,MAAM,CAAC;AAErB;;;AAGG;QAEI,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAC;AAEvB;;;AAGG;QAEI,IAAU,CAAA,UAAA,GAAmB,MAAM,CAAC;AAE3C;;;AAGG;QAEI,IAAU,CAAA,UAAA,GAA2B,MAAM,CAAC;AAEnD;;;AAGG;QAEI,IAAe,CAAA,eAAA,GAAoB,SAAS,CAAC;AAEpD;;AAEG;QAEI,IAAU,CAAA,UAAA,GAAG,EAAE,CAAC;AAEvB;;;AAGG;QAEI,IAAW,CAAA,WAAA,GAAG,EAAE,CAAC;AAgBxB;;;AAGG;AACI,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;AAEzC;;;AAGG;QACI,IAAY,CAAA,YAAA,GAAW,EAAE,CAAC;AAEjC;;;AAGG;QAEI,IAAsB,CAAA,sBAAA,GAA4C,EAAE,CAAC;AAE5E;;;AAGG;QAEI,IAA2B,CAAA,2BAAA,GAChC,EAAE,CAAC;AAEL;;AAEG;AAEI,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAe,CAAC;AAOnD,QAAA,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;aACjE,IAAI,CAAC,kBAAkB,EAAE,CAAC;aAC1B,SAAS,CAAC,MAAK;YACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC5B,SAAC,CAAC,CAAC;KACN;AAED;;;AAGG;IACH,QAAQ,GAAA;QACN,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;AAED;;;AAGG;AACH,IAAA,WAAW,CAAC,OAAsB,EAAA;QAChC,IACE,OAAO,CAAC,wBAAwB,CAAC;AACjC,YAAA,OAAO,CAAC,6BAA6B,CAAC,EACtC;YACA,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;KACF;AAED;;;AAGG;AACK,IAAA,mBAAmB,CAAC,sBAE3B,EAAA;QACC,OAAO,MAAM,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KACvD;AAED;;;AAGG;IACK,eAAe,GAAA;QACrB,MAAM,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,CAChD,IAAI,CAAC,sBAAsB,CAC5B,CAAC;QAEF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CACjD,IAAI,CAAC,2BAA2B,CACjC,CAAC;QAEF,MAAM,gBAAgB,GAAkB,iBAAiB;AACvD,cAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,GAAG,CAC5C,oBAAoB,IAAI,oBAAoB,CAAC,SAAS,CACvD;cACD,EAAE,CAAC;QAEP,MAAM,qBAAqB,GAAuB,kBAAkB;AAClE,cAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,GAAG,CACjD,oBAAoB,IAClB,oBAAoB,CAAC,SAA6B,CACrD;cACD,EAAE,CAAC;AAEP,QAAA,IAAI,iBAAiB,IAAI,kBAAkB,EAAE;AAC3C,YAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;AACjD,YAAA,IAAI,CAAC,WAAW,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;AAC3D,YAAA,IAAI,CAAC,WAAW,CAAC,sBAAsB,EAAE,CAAC;SAC3C;KACF;AAED;;;AAGG;IACK,qBAAqB,CAC3B,MAA+B,EAC/B,sBAEC,EAAA;AAED,QAAA,KAAK,MAAM,QAAQ,IAAI,MAAM,EAAE;AAC7B,YAAA,IAAI,sBAAsB,CAAC,QAAQ,CAAC,EAAE;gBACpC,IAAI,CAAC,YAAY,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;aAC9D;SACF;KACF;AAED;;;AAGG;IACI,cAAc,GAAA;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACzC;AAED;;;AAGG;IACI,kBAAkB,GAAA;AACvB,QAAA,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;AACvB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;QAEvC,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;YACvB,OAAO;SACR;QAED,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;QAChE,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;QACrE,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;+GA1OU,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,wBAAA,EAAA,2BAAA,EAAA,6BAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3CtC,4lCAiCA,EAAA,MAAA,EAAA,CAAA,uqBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDCI,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACP,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,wIAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,yHAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,IAAA,EAAA,aAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACd,kBAAkB,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAClB,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAKV,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAbrC,SAAS;+BACE,yBAAyB,EAAA,UAAA,EACvB,IAAI,EACP,OAAA,EAAA;wBACP,OAAO;wBACP,WAAW;wBACX,cAAc;wBACd,kBAAkB;wBAClB,mBAAmB;AACpB,qBAAA,EAAA,QAAA,EAAA,4lCAAA,EAAA,MAAA,EAAA,CAAA,uqBAAA,CAAA,EAAA,CAAA;wDAUM,UAAU,EAAA,CAAA;sBADhB,KAAK;gBAQC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBAQC,KAAK,EAAA,CAAA;sBADX,KAAK;gBAQC,IAAI,EAAA,CAAA;sBADV,KAAK;gBAQC,QAAQ,EAAA,CAAA;sBADd,KAAK;gBAQC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBAQC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBAQC,eAAe,EAAA,CAAA;sBADrB,KAAK;gBAOC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBAQC,WAAW,EAAA,CAAA;sBADjB,KAAK;gBAQC,WAAW,EAAA,CAAA;sBADjB,KAAK;gBAQC,WAAW,EAAA,CAAA;sBADjB,KAAK;gBAoBC,sBAAsB,EAAA,CAAA;sBAD5B,KAAK;gBAQC,2BAA2B,EAAA,CAAA;sBADjC,KAAK;gBAQC,WAAW,EAAA,CAAA;sBADjB,MAAM;;;AE7JT;;AAEG;;;;"}
|
|
@@ -171,7 +171,7 @@ class TkFormInputFieldComponent {
|
|
|
171
171
|
this.onInputChanged();
|
|
172
172
|
}
|
|
173
173
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
174
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: TkFormInputFieldComponent, isStandalone: true, selector: "lib-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: "<
|
|
174
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: TkFormInputFieldComponent, isStandalone: true, selector: "lib-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"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.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"] }] }); }
|
|
175
175
|
}
|
|
176
176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormInputFieldComponent, decorators: [{
|
|
177
177
|
type: Component,
|
|
@@ -181,7 +181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
181
181
|
MatInputModule,
|
|
182
182
|
MatFormFieldModule,
|
|
183
183
|
ReactiveFormsModule,
|
|
184
|
-
], template: "<
|
|
184
|
+
], 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"] }]
|
|
185
185
|
}], ctorParameters: () => [], propDecorators: { fieldWidth: [{
|
|
186
186
|
type: Input
|
|
187
187
|
}], fieldTitle: [{
|
|
@@ -398,7 +398,7 @@ class TkFormAutocompleteFieldComponent {
|
|
|
398
398
|
this.subscriptions?.unsubscribe();
|
|
399
399
|
}
|
|
400
400
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormAutocompleteFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
401
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: TkFormAutocompleteFieldComponent, isStandalone: true, selector: "lib-tk-form-autocomplete-field", inputs: { fieldWidth: "fieldWidth", theme: "theme", appearance: "appearance", subscriptSizing: "subscriptSizing", autoActiveFirstOption: "autoActiveFirstOption", autoSelectActiveOption: "autoSelectActiveOption", type: "type", required: "required", fieldTitle: "fieldTitle", fieldLabel: "fieldLabel", placeHolder: "placeHolder", options: "options" }, outputs: { optionSelected: "optionSelected", inputStatus: "inputStatus", bottomReached: "bottomReached" }, viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<
|
|
401
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: TkFormAutocompleteFieldComponent, isStandalone: true, selector: "lib-tk-form-autocomplete-field", inputs: { fieldWidth: "fieldWidth", theme: "theme", appearance: "appearance", subscriptSizing: "subscriptSizing", autoActiveFirstOption: "autoActiveFirstOption", autoSelectActiveOption: "autoSelectActiveOption", type: "type", required: "required", fieldTitle: "fieldTitle", fieldLabel: "fieldLabel", placeHolder: "placeHolder", options: "options" }, outputs: { optionSelected: "optionSelected", inputStatus: "inputStatus", bottomReached: "bottomReached" }, viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: 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 [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 aria-label=\"Option\"\n [required]=\"required\"\n [matAutocomplete]=\"auto\"\n (input)=\"onInputChanged()\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeHolder\" />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n [autoActiveFirstOption]=\"autoActiveFirstOption\"\n [autoSelectActiveOption]=\"autoSelectActiveOption\"\n (optionSelected)=\"onSelectionChanged($event.option.value)\">\n @for (option of filteredOptions | async; track option.Value) {\n <mat-option [value]=\"option\">\n <span>{{ option.ViewValue }}</span>\n </mat-option>\n }\n </mat-autocomplete>\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)}.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: "pipe", type: AsyncPipe, name: "async" }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }] }); }
|
|
402
402
|
}
|
|
403
403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormAutocompleteFieldComponent, decorators: [{
|
|
404
404
|
type: Component,
|
|
@@ -410,7 +410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
410
410
|
MatFormFieldModule,
|
|
411
411
|
ReactiveFormsModule,
|
|
412
412
|
MatAutocompleteModule,
|
|
413
|
-
], template: "<
|
|
413
|
+
], 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 [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 aria-label=\"Option\"\n [required]=\"required\"\n [matAutocomplete]=\"auto\"\n (input)=\"onInputChanged()\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeHolder\" />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n [autoActiveFirstOption]=\"autoActiveFirstOption\"\n [autoSelectActiveOption]=\"autoSelectActiveOption\"\n (optionSelected)=\"onSelectionChanged($event.option.value)\">\n @for (option of filteredOptions | async; track option.Value) {\n <mat-option [value]=\"option\">\n <span>{{ option.ViewValue }}</span>\n </mat-option>\n }\n </mat-autocomplete>\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)}.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"] }]
|
|
414
414
|
}], propDecorators: { fieldWidth: [{
|
|
415
415
|
type: Input
|
|
416
416
|
}], theme: [{
|
|
@@ -556,7 +556,7 @@ class TkFormChipsAutocompleteFieldComponent {
|
|
|
556
556
|
return this.allKeywords.filter(keyword => keyword.ViewValue.toLowerCase().includes(filterValue));
|
|
557
557
|
}
|
|
558
558
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormChipsAutocompleteFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
559
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: TkFormChipsAutocompleteFieldComponent, isStandalone: true, selector: "lib-tk-form-chips-autocomplete-field", inputs: { fieldLabel: "fieldLabel", placeHolder: "placeHolder", fieldTitle: "fieldTitle", theme: "theme", subscriptSizing: "subscriptSizing", fieldWidth: "fieldWidth", appearance: "appearance", allKeywords: "allKeywords" }, outputs: { inputStatus: "inputStatus", selectedKeywords: "selectedKeywords" }, viewQueries: [{ propertyName: "keywordInput", first: true, predicate: ["keywordInput"], descendants: true }], ngImport: i0, template: "<
|
|
559
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: TkFormChipsAutocompleteFieldComponent, isStandalone: true, selector: "lib-tk-form-chips-autocomplete-field", inputs: { fieldLabel: "fieldLabel", placeHolder: "placeHolder", fieldTitle: "fieldTitle", theme: "theme", subscriptSizing: "subscriptSizing", fieldWidth: "fieldWidth", appearance: "appearance", allKeywords: "allKeywords" }, outputs: { inputStatus: "inputStatus", selectedKeywords: "selectedKeywords" }, viewQueries: [{ propertyName: "keywordInput", first: true, predicate: ["keywordInput"], descendants: 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 [subscriptSizing]=\"subscriptSizing\"\n [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Keyword selection\">\n @for (keyword of keywords; track keyword.Value) {\n <mat-chip-row (removed)=\"remove(keyword)\">\n {{ keyword.ViewValue }}\n <button\n matChipRemove\n [attr.aria-label]=\"'remove ' + keyword.ViewValue\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n #keywordInput\n [matAutocomplete]=\"auto\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeHolder\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"selected($event)\">\n @for (keyword of filteredKeywords | async; track keyword.Value) {\n <mat-option [value]=\"keyword.Value\">{{ keyword.ViewValue }}</mat-option>\n }\n </mat-autocomplete>\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)}.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: "pipe", type: AsyncPipe, name: "async" }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
560
560
|
}
|
|
561
561
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormChipsAutocompleteFieldComponent, decorators: [{
|
|
562
562
|
type: Component,
|
|
@@ -570,7 +570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
570
570
|
MatFormFieldModule,
|
|
571
571
|
ReactiveFormsModule,
|
|
572
572
|
MatAutocompleteModule,
|
|
573
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
573
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, 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 [subscriptSizing]=\"subscriptSizing\"\n [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Keyword selection\">\n @for (keyword of keywords; track keyword.Value) {\n <mat-chip-row (removed)=\"remove(keyword)\">\n {{ keyword.ViewValue }}\n <button\n matChipRemove\n [attr.aria-label]=\"'remove ' + keyword.ViewValue\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n #keywordInput\n [matAutocomplete]=\"auto\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeHolder\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"selected($event)\">\n @for (keyword of filteredKeywords | async; track keyword.Value) {\n <mat-option [value]=\"keyword.Value\">{{ keyword.ViewValue }}</mat-option>\n }\n </mat-autocomplete>\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)}.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"] }]
|
|
574
574
|
}], ctorParameters: () => [], propDecorators: { fieldLabel: [{
|
|
575
575
|
type: Input
|
|
576
576
|
}], placeHolder: [{
|