@tekus/design-system 4.0.0 → 4.0.1
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/forms/tk-form-autocomplete-field/tk-form-autocomplete-field.component.d.ts +6 -1
- package/components/forms/tk-form-input-field/tk-form-input-field.component.d.ts +6 -1
- package/esm2022/components/forms/tk-form-autocomplete-field/tk-form-autocomplete-field.component.mjs +10 -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 +10 -3
- package/fesm2022/tekus-design-system-components-forms-tk-form-autocomplete-field.mjs +9 -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 +9 -2
- package/fesm2022/tekus-design-system-components-forms-tk-form-input-field.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-forms.mjs +20 -6
- package/fesm2022/tekus-design-system-components-forms.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-forms-tk-form-autocomplete-field.mjs","sources":["../../../projects/design-system/components/forms/tk-form-autocomplete-field/tk-form-autocomplete-field.component.ts","../../../projects/design-system/components/forms/tk-form-autocomplete-field/tk-form-autocomplete-field.component.html","../../../projects/design-system/components/forms/tk-form-autocomplete-field/tekus-design-system-components-forms-tk-form-autocomplete-field.ts"],"sourcesContent":["import {\n Input,\n Output,\n OnInit,\n Component,\n ViewChild,\n OnDestroy,\n EventEmitter,\n AfterViewInit,\n} from '@angular/core';\nimport {\n SubscriptSizing,\n MatFormFieldModule,\n MatFormFieldAppearance,\n} from '@angular/material/form-field';\nimport {\n MatAutocomplete,\n MatAutocompleteModule,\n} from '@angular/material/autocomplete';\nimport { Option } from './models/option.model';\nimport { AsyncPipe, NgStyle } from '@angular/common';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { map, Observable, startWith, Subscription } from 'rxjs';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n selector: 'lib-tk-form-autocomplete-field',\n standalone: true,\n imports: [\n NgStyle,\n AsyncPipe,\n FormsModule,\n MatInputModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n MatAutocompleteModule,\n ],\n templateUrl: './tk-form-autocomplete-field.component.html',\n styleUrl: './tk-form-autocomplete-field.component.scss',\n})\nexport class TkFormAutocompleteFieldComponent\n implements OnInit, OnDestroy, AfterViewInit\n{\n /**\n * Input field control\n * @ignore\n */\n public formControl = new FormControl<string | Option>('');\n\n /**\n * Optional input field width\n * @default 100%\n */\n @Input()\n public fieldWidth?: 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 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 * Whether the first option should be highlighted when the autocomplete panel is opened\n * @default true\n */\n @Input()\n public autoActiveFirstOption?: boolean = true;\n\n /**\n * Whether the active option should be selected as the user is navigating.\n * @default true\n */\n @Input()\n public autoSelectActiveOption?: boolean = true;\n\n /**\n * Whether the field is required\n * @default true\n */\n @Input()\n public required = true;\n\n /**\n * Optional input field title\n * @default null\n */\n @Input()\n public fieldTitle?: string;\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 * Filtered options\n * @ignore\n */\n public filteredOptions!: Observable<Option[]>;\n\n /**\n * Options to be displayed\n * @ignore\n */\n @Input()\n public options: Option[] = [];\n\n /**\n * Option changes handler\n */\n @Output()\n public optionSelected = new EventEmitter<string | number>();\n\n /**\n * Input field changes handler\n */\n @Output()\n public inputStatus = new EventEmitter<FormControl>();\n\n /**\n * Autocomplete bottom reached handler\n */\n @Output()\n public bottomReached = new EventEmitter<void>();\n\n /**\n * Subscriptions property to handle all subscriptions\n * @ignore\n */\n private subscriptions: Subscription = new Subscription();\n\n /**\n * Mat-autocomplete reference\n * @ignore\n */\n @ViewChild('auto') matAutocomplete!: MatAutocomplete;\n\n /**\n * Component lifecycle method\n * @ignore\n */\n ngOnInit(): void {\n this.filteredOptions = this.formControl.valueChanges.pipe(\n startWith(''),\n map(value => {\n const option = typeof value === 'string' ? value : value?.ViewValue;\n return option ? this._filterOptions(option) : this.options.slice();\n })\n );\n }\n\n /**\n * Component lifecycle method\n * @ignore\n */\n ngAfterViewInit(): void {\n this.initAutocompleteListener();\n }\n\n /**\n * Starts the autocomplete subscriptions\n * @ignore\n */\n public initAutocompleteListener(): void {\n const openedSubscription = this.onAutocompleteOpened();\n const closedSubscription = this.onAutocompleteClosed();\n\n this.subscriptions.add(openedSubscription);\n this.subscriptions.add(closedSubscription);\n }\n\n /**\n * Handles the autocomplete opened event\n * @ignore\n */\n private onAutocompleteOpened(): Subscription {\n return this.matAutocomplete.opened.subscribe(() => {\n setTimeout(() => {\n const panel = this.matAutocomplete.panel?.nativeElement;\n if (panel) {\n panel.addEventListener('scroll', this.onScroll.bind(this));\n }\n });\n });\n }\n\n /**\n * Handles the autocomplete closed event\n * @ignore\n */\n private onAutocompleteClosed(): Subscription {\n return this.matAutocomplete.closed.subscribe(() => {\n const panel = this.matAutocomplete.panel?.nativeElement;\n if (panel) {\n panel.removeEventListener('scroll', this.onScroll.bind(this));\n }\n });\n }\n\n /**\n * Handles the scrolling event\n * @ignore\n */\n private onScroll(event: Event) {\n const panel = event.target as HTMLElement;\n const scrollTop = panel.scrollTop;\n const scrollHeight = panel.scrollHeight;\n const offsetHeight = panel.offsetHeight;\n\n if (scrollTop + offsetHeight >= scrollHeight) {\n this.onScrolledToEnd();\n }\n }\n\n /**\n * Emits the bottomReached when the user reaches the end of the autocomplete panel\n * @ignore\n */\n private onScrolledToEnd(): void {\n this.bottomReached.emit();\n }\n\n /**\n * Conditions the options' view to display the view value\n * @ignore\n */\n public displayFn(option: Option | null): string {\n return option?.ViewValue ? option.ViewValue : '';\n }\n\n /**\n * Filters the options according to the input value\n * @ignore\n */\n private _filterOptions(value: string): Option[] {\n const filterValue = value.toLowerCase();\n\n return this.options.filter(option =>\n option.ViewValue.toLowerCase().includes(filterValue)\n );\n }\n\n /**\n * Emits the selected option every time it changes\n * @ignore\n */\n public onSelectionChanged(option: Option): void {\n this.optionSelected.emit(option.Value);\n }\n\n /**\n * Emits the formControl variable every time the input value changes\n * @ignore\n */\n public onInputChanged(): void {\n this.inputStatus.emit(this.formControl);\n }\n\n /**\n * Unsubscribe from all subscriptions when the component is destroyed\n * @ignore\n */\n ngOnDestroy() {\n this.subscriptions?.unsubscribe();\n }\n}\n","<section class=\"section\">\n @if (fieldTitle) {\n <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n }\n <div class=\"field\" [ngStyle]=\"{ width: fieldWidth }\">\n <mat-form-field\n class=\"form__field\"\n [color]=\"theme\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\">\n <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n <input\n matInput\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</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-autocomplete-field.mjs","sources":["../../../projects/design-system/components/forms/tk-form-autocomplete-field/tk-form-autocomplete-field.component.ts","../../../projects/design-system/components/forms/tk-form-autocomplete-field/tk-form-autocomplete-field.component.html","../../../projects/design-system/components/forms/tk-form-autocomplete-field/tekus-design-system-components-forms-tk-form-autocomplete-field.ts"],"sourcesContent":["import {\n Input,\n Output,\n OnInit,\n Component,\n ViewChild,\n OnDestroy,\n EventEmitter,\n AfterViewInit,\n} from '@angular/core';\nimport {\n SubscriptSizing,\n MatFormFieldModule,\n MatFormFieldAppearance,\n} from '@angular/material/form-field';\nimport {\n MatAutocomplete,\n MatAutocompleteModule,\n} from '@angular/material/autocomplete';\nimport { Option } from './models/option.model';\nimport { AsyncPipe, NgStyle } from '@angular/common';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { map, Observable, startWith, Subscription } from 'rxjs';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n selector: 'lib-tk-form-autocomplete-field',\n standalone: true,\n imports: [\n NgStyle,\n AsyncPipe,\n FormsModule,\n MatInputModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n MatAutocompleteModule,\n ],\n templateUrl: './tk-form-autocomplete-field.component.html',\n styleUrl: './tk-form-autocomplete-field.component.scss',\n})\nexport class TkFormAutocompleteFieldComponent\n implements OnInit, OnDestroy, AfterViewInit\n{\n /**\n * Input field control\n * @ignore\n */\n public formControl = new FormControl<string | Option>('');\n\n /**\n * Optional input field width\n * @default 100%\n */\n @Input()\n public fieldWidth?: 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 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 * Whether the first option should be highlighted when the autocomplete panel is opened\n * @default true\n */\n @Input()\n public autoActiveFirstOption?: boolean = true;\n\n /**\n * Whether the active option should be selected as the user is navigating.\n * @default true\n */\n @Input()\n public autoSelectActiveOption?: boolean = true;\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 * Optional input field title\n * @default null\n */\n @Input()\n public fieldTitle?: string;\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 * Filtered options\n * @ignore\n */\n public filteredOptions!: Observable<Option[]>;\n\n /**\n * Options to be displayed\n * @ignore\n */\n @Input()\n public options: Option[] = [];\n\n /**\n * Option changes handler\n */\n @Output()\n public optionSelected = new EventEmitter<string | number>();\n\n /**\n * Input field changes handler\n */\n @Output()\n public inputStatus = new EventEmitter<FormControl>();\n\n /**\n * Autocomplete bottom reached handler\n */\n @Output()\n public bottomReached = new EventEmitter<void>();\n\n /**\n * Subscriptions property to handle all subscriptions\n * @ignore\n */\n private subscriptions: Subscription = new Subscription();\n\n /**\n * Mat-autocomplete reference\n * @ignore\n */\n @ViewChild('auto') matAutocomplete!: MatAutocomplete;\n\n /**\n * Component lifecycle method\n * @ignore\n */\n ngOnInit(): void {\n this.filteredOptions = this.formControl.valueChanges.pipe(\n startWith(''),\n map(value => {\n const option = typeof value === 'string' ? value : value?.ViewValue;\n return option ? this._filterOptions(option) : this.options.slice();\n })\n );\n }\n\n /**\n * Component lifecycle method\n * @ignore\n */\n ngAfterViewInit(): void {\n this.initAutocompleteListener();\n }\n\n /**\n * Starts the autocomplete subscriptions\n * @ignore\n */\n public initAutocompleteListener(): void {\n const openedSubscription = this.onAutocompleteOpened();\n const closedSubscription = this.onAutocompleteClosed();\n\n this.subscriptions.add(openedSubscription);\n this.subscriptions.add(closedSubscription);\n }\n\n /**\n * Handles the autocomplete opened event\n * @ignore\n */\n private onAutocompleteOpened(): Subscription {\n return this.matAutocomplete.opened.subscribe(() => {\n setTimeout(() => {\n const panel = this.matAutocomplete.panel?.nativeElement;\n if (panel) {\n panel.addEventListener('scroll', this.onScroll.bind(this));\n }\n });\n });\n }\n\n /**\n * Handles the autocomplete closed event\n * @ignore\n */\n private onAutocompleteClosed(): Subscription {\n return this.matAutocomplete.closed.subscribe(() => {\n const panel = this.matAutocomplete.panel?.nativeElement;\n if (panel) {\n panel.removeEventListener('scroll', this.onScroll.bind(this));\n }\n });\n }\n\n /**\n * Handles the scrolling event\n * @ignore\n */\n private onScroll(event: Event) {\n const panel = event.target as HTMLElement;\n const scrollTop = panel.scrollTop;\n const scrollHeight = panel.scrollHeight;\n const offsetHeight = panel.offsetHeight;\n\n if (scrollTop + offsetHeight >= scrollHeight) {\n this.onScrolledToEnd();\n }\n }\n\n /**\n * Emits the bottomReached when the user reaches the end of the autocomplete panel\n * @ignore\n */\n private onScrolledToEnd(): void {\n this.bottomReached.emit();\n }\n\n /**\n * Conditions the options' view to display the view value\n * @ignore\n */\n public displayFn(option: Option | null): string {\n return option?.ViewValue ? option.ViewValue : '';\n }\n\n /**\n * Filters the options according to the input value\n * @ignore\n */\n private _filterOptions(value: string): Option[] {\n const filterValue = value.toLowerCase();\n\n return this.options.filter(option =>\n option.ViewValue.toLowerCase().includes(filterValue)\n );\n }\n\n /**\n * Emits the selected option every time it changes\n * @ignore\n */\n public onSelectionChanged(option: Option): void {\n this.optionSelected.emit(option.Value);\n }\n\n /**\n * Emits the formControl variable every time the input value changes\n * @ignore\n */\n public onInputChanged(): void {\n this.inputStatus.emit(this.formControl);\n }\n\n /**\n * Unsubscribe from all subscriptions when the component is destroyed\n * @ignore\n */\n ngOnDestroy() {\n this.subscriptions?.unsubscribe();\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 <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</section>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -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: "<section
|
|
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: "<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", 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: "<section
|
|
143
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<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", 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 class=\"section\">\n @if (fieldTitle) {\n <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n }\n <div class=\"field\" [ngStyle]=\"{ width: fieldWidth }\">\n <mat-form-field\n class=\"form__field\"\n [color]=\"theme\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\">\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\">{{\n keyword.ViewValue\n }}</mat-option>\n }\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</section>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;MA8Ca,qCAAqC,CAAA;AAiGhD;;;AAGG;AACH,IAAA,WAAA,GAAA;AApGA;;AAEG;QAEI,IAAU,CAAA,UAAA,GAAG,EAAE,CAAC;AAEvB;;;AAGG;QAEI,IAAW,CAAA,WAAA,GAAG,EAAE,CAAC;AASxB;;;AAGG;QAEI,IAAK,CAAA,KAAA,GAAkB,QAAQ,CAAC;AAEvC;;;AAGG;QAEI,IAAe,CAAA,eAAA,GAAoB,SAAS,CAAC;AASpD;;;AAGG;QAEI,IAAU,CAAA,UAAA,GAA2B,MAAM,CAAC;AAEnD;;;AAGG;AACI,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;AACzC;;;AAGG;QACI,IAAQ,CAAA,QAAA,GAAa,EAAE,CAAC;AAE/B;;AAEG;AAEI,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAe,CAAC;AAErD;;AAEG;AAEI,QAAA,IAAA,CAAA,gBAAgB,GAAG,IAAI,YAAY,EAAuB,CAAC;AAElE;;;AAGG;AACa,QAAA,IAAA,CAAA,kBAAkB,GAAa,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE9D;;;AAGG;QAEI,IAAW,CAAA,WAAA,GAAa,EAAE,CAAC;QAmBhC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CACxD,SAAS,CAAC,IAAI,CAAC,EACf,GAAG,CAAC,CAAC,OAAsB,KACzB,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CACnE,CACF,CAAC;KACH;AAED;;;AAGG;AACI,IAAA,MAAM,CAAC,OAAe,EAAA;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAE7C,QAAA,IAAI,KAAK,IAAI,CAAC,EAAE;YACd,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;AAED;;;AAGG;IACI,cAAc,GAAA;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACzC;AAED;;;AAGG;IACI,iBAAiB,GAAA;QACtB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;KACzE;AAED;;;AAGG;AACI,IAAA,QAAQ,CAAC,KAAmC,EAAA;AACjD,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AACjC,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAC3C,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,CACjC,CAAC;AAEF,QAAA,IACE,eAAe;AACf,YAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,KAAK,eAAe,CAAC,KAAK,CAAC,EACvE;AACA,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACpC,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;QAED,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,GAAG,EAAE,CAAC;AAC3C,QAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KACjC;AAED;;;AAGG;AACK,IAAA,OAAO,CAAC,KAAa,EAAA;QAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;AACtB,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;QAExC,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,IACpC,OAAO,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CACtD,CAAC;KACH;+GA5KU,qCAAqC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAArC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qCAAqC,6fC9ClD,+9CA0CA,EAAA,MAAA,EAAA,CAAA,6hBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVI,OAAO,EACP,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,SAAS,6CACT,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,UAAA,EAAA,IAAA,EACX,aAAa,EACb,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,cAAc,4uBACd,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,kBAAkB,EAClB,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,UAAA,EAAA,IAAA,EAAA,mBAAmB,iNACnB,qBAAqB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,uBAAA,EAAA,wBAAA,EAAA,kBAAA,EAAA,YAAA,EAAA,eAAA,EAAA,OAAA,EAAA,8BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,mDAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,yBAAA,EAAA,4BAAA,EAAA,cAAA,EAAA,yBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAMZ,qCAAqC,EAAA,UAAA,EAAA,CAAA;kBAlBjD,SAAS;+BACE,sCAAsC,EAAA,UAAA,EACpC,IAAI,EACP,OAAA,EAAA;wBACP,OAAO;wBACP,SAAS;wBACT,WAAW;wBACX,aAAa;wBACb,cAAc;wBACd,eAAe;wBACf,kBAAkB;wBAClB,mBAAmB;wBACnB,qBAAqB;qBACtB,EACgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+9CAAA,EAAA,MAAA,EAAA,CAAA,6hBAAA,CAAA,EAAA,CAAA;wDASxC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBAQC,WAAW,EAAA,CAAA;sBADjB,KAAK;gBAQC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBAQC,KAAK,EAAA,CAAA;sBADX,KAAK;gBAQC,eAAe,EAAA,CAAA;sBADrB,KAAK;gBAQC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBAQC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBAkBC,WAAW,EAAA,CAAA;sBADjB,MAAM;gBAOA,gBAAgB,EAAA,CAAA;sBADtB,MAAM;gBAcA,WAAW,EAAA,CAAA;sBADjB,KAAK;gBAaqB,YAAY,EAAA,CAAA;sBAAtC,SAAS;uBAAC,cAAc,CAAA;;;AE7I3B;;AAEG;;;;"}
|
|
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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"}
|
|
@@ -21,6 +21,11 @@ class TkFormInputFieldComponent {
|
|
|
21
21
|
* @default 'accent'
|
|
22
22
|
*/
|
|
23
23
|
this.theme = 'accent';
|
|
24
|
+
/**
|
|
25
|
+
* Optional field input type
|
|
26
|
+
* @default 'text'
|
|
27
|
+
*/
|
|
28
|
+
this.type = 'text';
|
|
24
29
|
/**
|
|
25
30
|
* Whether the field is required
|
|
26
31
|
* @default true
|
|
@@ -157,7 +162,7 @@ class TkFormInputFieldComponent {
|
|
|
157
162
|
this.onInputChanged();
|
|
158
163
|
}
|
|
159
164
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
160
|
-
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", 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: "<section
|
|
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: "<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", 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"] }] }); }
|
|
161
166
|
}
|
|
162
167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormInputFieldComponent, decorators: [{
|
|
163
168
|
type: Component,
|
|
@@ -167,13 +172,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
167
172
|
MatInputModule,
|
|
168
173
|
MatFormFieldModule,
|
|
169
174
|
ReactiveFormsModule,
|
|
170
|
-
], template: "<section
|
|
175
|
+
], template: "<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", 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"] }]
|
|
171
176
|
}], ctorParameters: () => [], propDecorators: { fieldWidth: [{
|
|
172
177
|
type: Input
|
|
173
178
|
}], fieldTitle: [{
|
|
174
179
|
type: Input
|
|
175
180
|
}], theme: [{
|
|
176
181
|
type: Input
|
|
182
|
+
}], type: [{
|
|
183
|
+
type: Input
|
|
177
184
|
}], required: [{
|
|
178
185
|
type: Input
|
|
179
186
|
}], floatLabel: [{
|
|
@@ -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 * 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 class=\"section\">\n @if (fieldTitle) {\n <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n }\n <div class=\"field\" [ngStyle]=\"{ width: fieldWidth }\">\n <mat-form-field\n class=\"form__field\"\n [color]=\"theme\"\n [appearance]=\"appearance\"\n [floatLabel]=\"floatLabel\"\n [subscriptSizing]=\"subscriptSizing\">\n <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n <input\n matInput\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</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","<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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"}
|
|
@@ -30,6 +30,11 @@ class TkFormInputFieldComponent {
|
|
|
30
30
|
* @default 'accent'
|
|
31
31
|
*/
|
|
32
32
|
this.theme = 'accent';
|
|
33
|
+
/**
|
|
34
|
+
* Optional field input type
|
|
35
|
+
* @default 'text'
|
|
36
|
+
*/
|
|
37
|
+
this.type = 'text';
|
|
33
38
|
/**
|
|
34
39
|
* Whether the field is required
|
|
35
40
|
* @default true
|
|
@@ -166,7 +171,7 @@ class TkFormInputFieldComponent {
|
|
|
166
171
|
this.onInputChanged();
|
|
167
172
|
}
|
|
168
173
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
169
|
-
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", 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: "<section
|
|
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: "<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", 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"] }] }); }
|
|
170
175
|
}
|
|
171
176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormInputFieldComponent, decorators: [{
|
|
172
177
|
type: Component,
|
|
@@ -176,13 +181,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
176
181
|
MatInputModule,
|
|
177
182
|
MatFormFieldModule,
|
|
178
183
|
ReactiveFormsModule,
|
|
179
|
-
], template: "<section
|
|
184
|
+
], template: "<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", 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"] }]
|
|
180
185
|
}], ctorParameters: () => [], propDecorators: { fieldWidth: [{
|
|
181
186
|
type: Input
|
|
182
187
|
}], fieldTitle: [{
|
|
183
188
|
type: Input
|
|
184
189
|
}], theme: [{
|
|
185
190
|
type: Input
|
|
191
|
+
}], type: [{
|
|
192
|
+
type: Input
|
|
186
193
|
}], required: [{
|
|
187
194
|
type: Input
|
|
188
195
|
}], floatLabel: [{
|
|
@@ -239,6 +246,11 @@ class TkFormAutocompleteFieldComponent {
|
|
|
239
246
|
* @default true
|
|
240
247
|
*/
|
|
241
248
|
this.autoSelectActiveOption = true;
|
|
249
|
+
/**
|
|
250
|
+
* Optional field input type
|
|
251
|
+
* @default 'text'
|
|
252
|
+
*/
|
|
253
|
+
this.type = 'text';
|
|
242
254
|
/**
|
|
243
255
|
* Whether the field is required
|
|
244
256
|
* @default true
|
|
@@ -386,7 +398,7 @@ class TkFormAutocompleteFieldComponent {
|
|
|
386
398
|
this.subscriptions?.unsubscribe();
|
|
387
399
|
}
|
|
388
400
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormAutocompleteFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
389
|
-
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", 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: "<section
|
|
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: "<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 <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</section>\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"] }] }); }
|
|
390
402
|
}
|
|
391
403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormAutocompleteFieldComponent, decorators: [{
|
|
392
404
|
type: Component,
|
|
@@ -398,7 +410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
398
410
|
MatFormFieldModule,
|
|
399
411
|
ReactiveFormsModule,
|
|
400
412
|
MatAutocompleteModule,
|
|
401
|
-
], template: "<section
|
|
413
|
+
], template: "<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 <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</section>\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"] }]
|
|
402
414
|
}], propDecorators: { fieldWidth: [{
|
|
403
415
|
type: Input
|
|
404
416
|
}], theme: [{
|
|
@@ -411,6 +423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
411
423
|
type: Input
|
|
412
424
|
}], autoSelectActiveOption: [{
|
|
413
425
|
type: Input
|
|
426
|
+
}], type: [{
|
|
427
|
+
type: Input
|
|
414
428
|
}], required: [{
|
|
415
429
|
type: Input
|
|
416
430
|
}], fieldTitle: [{
|
|
@@ -542,7 +556,7 @@ class TkFormChipsAutocompleteFieldComponent {
|
|
|
542
556
|
return this.allKeywords.filter(keyword => keyword.ViewValue.toLowerCase().includes(filterValue));
|
|
543
557
|
}
|
|
544
558
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormChipsAutocompleteFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
545
|
-
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: "<section
|
|
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: "<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", 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 }); }
|
|
546
560
|
}
|
|
547
561
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: TkFormChipsAutocompleteFieldComponent, decorators: [{
|
|
548
562
|
type: Component,
|
|
@@ -556,7 +570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
556
570
|
MatFormFieldModule,
|
|
557
571
|
ReactiveFormsModule,
|
|
558
572
|
MatAutocompleteModule,
|
|
559
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section
|
|
573
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<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", 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"] }]
|
|
560
574
|
}], ctorParameters: () => [], propDecorators: { fieldLabel: [{
|
|
561
575
|
type: Input
|
|
562
576
|
}], placeHolder: [{
|