@tekus/design-system 1.0.6 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/readme-images/storybook-copy-code.png +0 -0
- package/assets/readme-images/storybook-docs-show-code.png +0 -0
- package/assets/readme-images/storybook-main-page.png +0 -0
- package/assets/readme-images/storybook-use-case.png +0 -0
- package/assets/readme-images/tks-library-import-example.png +0 -0
- package/assets/readme-images/tks-library-module-import.png +0 -0
- package/components/dropdown-list/dropdown-list.component.d.ts +113 -0
- package/components/dropdown-list/index.d.ts +5 -0
- package/components/dropdown-list/models/dropdown-list-item.model.d.ts +4 -0
- package/components/dropdown-list/public-api.d.ts +2 -0
- package/esm2022/components/dropdown-list/dropdown-list.component.mjs +137 -0
- package/esm2022/components/dropdown-list/models/dropdown-list-item.model.mjs +2 -0
- package/esm2022/components/dropdown-list/public-api.mjs +3 -0
- package/esm2022/components/dropdown-list/tekus-design-system-components-dropdown-list.mjs +5 -0
- package/fesm2022/tekus-design-system-components-dropdown-list.mjs +144 -0
- package/fesm2022/tekus-design-system-components-dropdown-list.mjs.map +1 -0
- package/package.json +7 -1
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { DropdownListItem } from './models/dropdown-list-item.model';
|
|
2
|
+
import { OnInit, EventEmitter } from '@angular/core';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class DropdownListComponent implements OnInit {
|
|
5
|
+
/**
|
|
6
|
+
* Search field input value
|
|
7
|
+
* @ignore
|
|
8
|
+
*/
|
|
9
|
+
inputValue: string;
|
|
10
|
+
/**
|
|
11
|
+
* Selected value
|
|
12
|
+
* @ignore
|
|
13
|
+
*/
|
|
14
|
+
selectedValue: {
|
|
15
|
+
Value: string;
|
|
16
|
+
ViewValue: string;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Filtered data
|
|
20
|
+
* @ignore
|
|
21
|
+
*/
|
|
22
|
+
filteredData: DropdownListItem[];
|
|
23
|
+
/**
|
|
24
|
+
* Is dropdown list visible
|
|
25
|
+
* @ignore
|
|
26
|
+
*/
|
|
27
|
+
isDropDownListVisible: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Icon
|
|
30
|
+
* @ignore
|
|
31
|
+
*/
|
|
32
|
+
readonly faXmark: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
33
|
+
/**
|
|
34
|
+
* Icon
|
|
35
|
+
* @ignore
|
|
36
|
+
*/
|
|
37
|
+
readonly faCheck: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
38
|
+
/**
|
|
39
|
+
* Icon
|
|
40
|
+
* @ignore
|
|
41
|
+
*/
|
|
42
|
+
readonly faCaretUp: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
43
|
+
/**
|
|
44
|
+
* Icon
|
|
45
|
+
* @ignore
|
|
46
|
+
*/
|
|
47
|
+
readonly faCaretDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
|
48
|
+
/**
|
|
49
|
+
* Data for dropdown list
|
|
50
|
+
*/
|
|
51
|
+
data: DropdownListItem[];
|
|
52
|
+
/**
|
|
53
|
+
* Dropdown list hint label
|
|
54
|
+
* @default ''
|
|
55
|
+
*/
|
|
56
|
+
hintLabel: string;
|
|
57
|
+
/**
|
|
58
|
+
* Dropdown list search field placeholder
|
|
59
|
+
* @default ''
|
|
60
|
+
*/
|
|
61
|
+
searchFieldPlaceHolder: string;
|
|
62
|
+
/**
|
|
63
|
+
* Width of the dropdown list
|
|
64
|
+
* @default 13rem
|
|
65
|
+
*/
|
|
66
|
+
width?: string;
|
|
67
|
+
/**
|
|
68
|
+
* What background color to use
|
|
69
|
+
* @default #fff
|
|
70
|
+
*/
|
|
71
|
+
backgroundColor?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Selected value changes handler
|
|
74
|
+
*/
|
|
75
|
+
selectedValueChange: EventEmitter<string>;
|
|
76
|
+
/**
|
|
77
|
+
* @ignore
|
|
78
|
+
* Component lifecycle method
|
|
79
|
+
*/
|
|
80
|
+
ngOnInit(): void;
|
|
81
|
+
/**
|
|
82
|
+
* @ignore
|
|
83
|
+
* Component method to load data
|
|
84
|
+
*/
|
|
85
|
+
private loadData;
|
|
86
|
+
/**
|
|
87
|
+
* @ignore
|
|
88
|
+
* Component method to handle click on dropdown list
|
|
89
|
+
*/
|
|
90
|
+
onClickDropDownList(): void;
|
|
91
|
+
/**
|
|
92
|
+
* @ignore
|
|
93
|
+
* Component method to handle click on clear selected value
|
|
94
|
+
*/
|
|
95
|
+
onClickClearSelectedValue(): void;
|
|
96
|
+
/**
|
|
97
|
+
* @ignore
|
|
98
|
+
* Component method to handle click on clear input value
|
|
99
|
+
*/
|
|
100
|
+
onClickClearInputValue(): void;
|
|
101
|
+
/**
|
|
102
|
+
* @ignore
|
|
103
|
+
* Component method to handle click on dropdown list item
|
|
104
|
+
*/
|
|
105
|
+
onClickListItem(item: DropdownListItem): void;
|
|
106
|
+
/**
|
|
107
|
+
* @ignore
|
|
108
|
+
* Component method to filter data
|
|
109
|
+
*/
|
|
110
|
+
filter(): void;
|
|
111
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownListComponent, never>;
|
|
112
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DropdownListComponent, "lib-tks-dropdown-list", never, { "data": { "alias": "data"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; "searchFieldPlaceHolder": { "alias": "searchFieldPlaceHolder"; "required": false; }; "width": { "alias": "width"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, true, never>;
|
|
113
|
+
}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { faXmark, faCheck, faCaretUp, faCaretDown, } from '@fortawesome/pro-solid-svg-icons';
|
|
2
|
+
import { FormsModule } from '@angular/forms';
|
|
3
|
+
import { NgClass, NgFor, NgIf, NgStyle } from '@angular/common';
|
|
4
|
+
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
5
|
+
import { Input, Output, Component, EventEmitter } from '@angular/core';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/forms";
|
|
8
|
+
import * as i2 from "@fortawesome/angular-fontawesome";
|
|
9
|
+
export class DropdownListComponent {
|
|
10
|
+
constructor() {
|
|
11
|
+
/**
|
|
12
|
+
* Search field input value
|
|
13
|
+
* @ignore
|
|
14
|
+
*/
|
|
15
|
+
this.inputValue = '';
|
|
16
|
+
/**
|
|
17
|
+
* Selected value
|
|
18
|
+
* @ignore
|
|
19
|
+
*/
|
|
20
|
+
this.selectedValue = { Value: '', ViewValue: '' };
|
|
21
|
+
/**
|
|
22
|
+
* Is dropdown list visible
|
|
23
|
+
* @ignore
|
|
24
|
+
*/
|
|
25
|
+
this.isDropDownListVisible = false;
|
|
26
|
+
/**
|
|
27
|
+
* Icon
|
|
28
|
+
* @ignore
|
|
29
|
+
*/
|
|
30
|
+
this.faXmark = faXmark;
|
|
31
|
+
/**
|
|
32
|
+
* Icon
|
|
33
|
+
* @ignore
|
|
34
|
+
*/
|
|
35
|
+
this.faCheck = faCheck;
|
|
36
|
+
/**
|
|
37
|
+
* Icon
|
|
38
|
+
* @ignore
|
|
39
|
+
*/
|
|
40
|
+
this.faCaretUp = faCaretUp;
|
|
41
|
+
/**
|
|
42
|
+
* Icon
|
|
43
|
+
* @ignore
|
|
44
|
+
*/
|
|
45
|
+
this.faCaretDown = faCaretDown;
|
|
46
|
+
/**
|
|
47
|
+
* Dropdown list hint label
|
|
48
|
+
* @default ''
|
|
49
|
+
*/
|
|
50
|
+
this.hintLabel = '';
|
|
51
|
+
/**
|
|
52
|
+
* Dropdown list search field placeholder
|
|
53
|
+
* @default ''
|
|
54
|
+
*/
|
|
55
|
+
this.searchFieldPlaceHolder = '';
|
|
56
|
+
/**
|
|
57
|
+
* Selected value changes handler
|
|
58
|
+
*/
|
|
59
|
+
this.selectedValueChange = new EventEmitter();
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* @ignore
|
|
63
|
+
* Component lifecycle method
|
|
64
|
+
*/
|
|
65
|
+
ngOnInit() {
|
|
66
|
+
this.loadData();
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* @ignore
|
|
70
|
+
* Component method to load data
|
|
71
|
+
*/
|
|
72
|
+
loadData() {
|
|
73
|
+
if (this.data && this.data.length > 0) {
|
|
74
|
+
this.filteredData = this.data.slice();
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* @ignore
|
|
79
|
+
* Component method to handle click on dropdown list
|
|
80
|
+
*/
|
|
81
|
+
onClickDropDownList() {
|
|
82
|
+
this.isDropDownListVisible = !this.isDropDownListVisible;
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* @ignore
|
|
86
|
+
* Component method to handle click on clear selected value
|
|
87
|
+
*/
|
|
88
|
+
onClickClearSelectedValue() {
|
|
89
|
+
this.selectedValue.Value = '';
|
|
90
|
+
this.selectedValue.ViewValue = '';
|
|
91
|
+
this.selectedValueChange.emit(this.selectedValue.Value);
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* @ignore
|
|
95
|
+
* Component method to handle click on clear input value
|
|
96
|
+
*/
|
|
97
|
+
onClickClearInputValue() {
|
|
98
|
+
this.inputValue = '';
|
|
99
|
+
this.filter();
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* @ignore
|
|
103
|
+
* Component method to handle click on dropdown list item
|
|
104
|
+
*/
|
|
105
|
+
onClickListItem(item) {
|
|
106
|
+
this.selectedValue.Value = item.Value;
|
|
107
|
+
this.selectedValue.ViewValue = item.ViewValue;
|
|
108
|
+
this.selectedValueChange.emit(item.Value);
|
|
109
|
+
}
|
|
110
|
+
/**
|
|
111
|
+
* @ignore
|
|
112
|
+
* Component method to filter data
|
|
113
|
+
*/
|
|
114
|
+
filter() {
|
|
115
|
+
const filterValue = this.inputValue.toLowerCase();
|
|
116
|
+
this.filteredData = this.data.filter(option => String(option.ViewValue).toLowerCase().trim().includes(filterValue));
|
|
117
|
+
}
|
|
118
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
119
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownListComponent, isStandalone: true, selector: "lib-tks-dropdown-list", inputs: { data: "data", hintLabel: "hintLabel", searchFieldPlaceHolder: "searchFieldPlaceHolder", width: "width", backgroundColor: "backgroundColor" }, outputs: { selectedValueChange: "selectedValueChange" }, ngImport: i0, template: "<div class=\"dropdown__list\">\n <div\n class=\"dropdown__list__selected__item__field\"\n [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n <label [attr.aria-label]=\"selectedValue.ViewValue\" for=\"selectedValue\">\n <input\n class=\"dropdown__list__selected__item\"\n type=\"text\"\n readonly=\"true\"\n id=\"selectedValue\"\n name=\"selectedValue\"\n [value]=\"\n selectedValue.ViewValue ? selectedValue.ViewValue : hintLabel\n \" />\n </label>\n <fa-icon\n class=\"dropdown__list__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"selectedValue.ViewValue !== ''\"\n (click)=\"onClickClearSelectedValue()\"></fa-icon>\n <fa-icon\n class=\"dropdown__list__caret__icon\"\n [icon]=\"isDropDownListVisible ? faCaretUp : faCaretDown\"\n (click)=\"onClickDropDownList()\"></fa-icon>\n </div>\n <div\n [class]=\"\n isDropDownListVisible\n ? 'dropdown__list__collapsible--open dropdown__list__collapsible'\n : 'dropdown__list__collapsible'\n \"\n [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n <div class=\"dropdown__list__search__field\">\n <input\n class=\"dropdown__list__search__field__input\"\n type=\"text\"\n (input)=\"filter()\"\n (focus)=\"filter()\"\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"searchFieldPlaceHolder\" />\n <fa-icon\n class=\"dropdown__list__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"inputValue !== ''\"\n (click)=\"onClickClearInputValue()\"></fa-icon>\n </div>\n <ul class=\"dropdown__list__items\">\n <li\n [ngClass]=\"\n filteredValue.ViewValue === selectedValue.ViewValue\n ? 'dropdown__list__item dropdown__list__item--selected'\n : 'dropdown__list__item'\n \"\n tabindex=\"0\"\n (click)=\"onClickListItem(filteredValue)\"\n *ngFor=\"let filteredValue of filteredData\"\n (keydown.enter)=\"onClickListItem(filteredValue)\">\n {{ filteredValue.ViewValue }}\n <fa-icon\n class=\"dropdown__list__item__checked__icon\"\n [icon]=\"faCheck\"\n *ngIf=\"filteredValue.ViewValue === selectedValue.ViewValue\"></fa-icon>\n </li>\n </ul>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.dropdown__list{position:relative}.dropdown__list__selected__item__field{width:13rem;display:flex;align-items:center;padding:.3rem 0rem;flex-flow:row nowrap;justify-content:space-between;border-bottom:1.2px solid black}.dropdown__list__selected__item{width:100%;border:none;outline:none;display:flex;align-items:center;flex-flow:row nowrap;background:transparent;justify-content:flex-start;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__caret__icon{margin:0 .5rem}.dropdown__list__caret__icon:hover{scale:1.3;cursor:pointer;transition:all ease-in-out .1s}.dropdown__list__collapsible{top:100%;height:0;opacity:0;gap:.5rem;width:13rem;z-index:100;display:flex;overflow:hidden;position:absolute;align-items:center;padding:.5rem .3rem;justify-content:center;flex-flow:column nowrap;background-color:#fff;transition:all .4s ease-in-out}.dropdown__list__collapsible--open{opacity:1;max-height:10rem;height:-moz-fit-content;height:fit-content}.dropdown__list__collapsible--open .dropdown__list__search__field,.dropdown__list__collapsible--open .dropdown__list__items{display:flex}.dropdown__list__search__field{width:100%;display:none;align-items:center;border-radius:.5rem;padding:.3rem .5rem;justify-content:center;border:1px solid black}.dropdown__list__search__field__input{width:100%;border:none;outline:none;font-weight:500;background:transparent;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__clear__mark__icon{margin:0 .5rem}.dropdown__list__clear__mark__icon:hover{scale:1.3;cursor:pointer;transition:all ease-in-out .1s}.dropdown__list__items{width:100%;height:100%;display:none;overflow-y:auto;padding:.1rem 0;align-items:flex-start;flex-flow:column nowrap}.dropdown__list__item{width:100%;display:flex;cursor:pointer;list-style:none;align-items:center;flex-flow:row nowrap;padding:.3rem .2rem;transition:font-size .3s;justify-content:space-between;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__item:hover{font-size:1rem;background-color:#d3d3d3}.dropdown__list__item--selected{background-color:#c1efc3}.dropdown__list__item__checked__icon{color:#2ba130}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
|
|
120
|
+
}
|
|
121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownListComponent, decorators: [{
|
|
122
|
+
type: Component,
|
|
123
|
+
args: [{ selector: 'lib-tks-dropdown-list', standalone: true, imports: [NgStyle, NgClass, NgFor, NgIf, FormsModule, FontAwesomeModule], template: "<div class=\"dropdown__list\">\n <div\n class=\"dropdown__list__selected__item__field\"\n [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n <label [attr.aria-label]=\"selectedValue.ViewValue\" for=\"selectedValue\">\n <input\n class=\"dropdown__list__selected__item\"\n type=\"text\"\n readonly=\"true\"\n id=\"selectedValue\"\n name=\"selectedValue\"\n [value]=\"\n selectedValue.ViewValue ? selectedValue.ViewValue : hintLabel\n \" />\n </label>\n <fa-icon\n class=\"dropdown__list__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"selectedValue.ViewValue !== ''\"\n (click)=\"onClickClearSelectedValue()\"></fa-icon>\n <fa-icon\n class=\"dropdown__list__caret__icon\"\n [icon]=\"isDropDownListVisible ? faCaretUp : faCaretDown\"\n (click)=\"onClickDropDownList()\"></fa-icon>\n </div>\n <div\n [class]=\"\n isDropDownListVisible\n ? 'dropdown__list__collapsible--open dropdown__list__collapsible'\n : 'dropdown__list__collapsible'\n \"\n [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n <div class=\"dropdown__list__search__field\">\n <input\n class=\"dropdown__list__search__field__input\"\n type=\"text\"\n (input)=\"filter()\"\n (focus)=\"filter()\"\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"searchFieldPlaceHolder\" />\n <fa-icon\n class=\"dropdown__list__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"inputValue !== ''\"\n (click)=\"onClickClearInputValue()\"></fa-icon>\n </div>\n <ul class=\"dropdown__list__items\">\n <li\n [ngClass]=\"\n filteredValue.ViewValue === selectedValue.ViewValue\n ? 'dropdown__list__item dropdown__list__item--selected'\n : 'dropdown__list__item'\n \"\n tabindex=\"0\"\n (click)=\"onClickListItem(filteredValue)\"\n *ngFor=\"let filteredValue of filteredData\"\n (keydown.enter)=\"onClickListItem(filteredValue)\">\n {{ filteredValue.ViewValue }}\n <fa-icon\n class=\"dropdown__list__item__checked__icon\"\n [icon]=\"faCheck\"\n *ngIf=\"filteredValue.ViewValue === selectedValue.ViewValue\"></fa-icon>\n </li>\n </ul>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.dropdown__list{position:relative}.dropdown__list__selected__item__field{width:13rem;display:flex;align-items:center;padding:.3rem 0rem;flex-flow:row nowrap;justify-content:space-between;border-bottom:1.2px solid black}.dropdown__list__selected__item{width:100%;border:none;outline:none;display:flex;align-items:center;flex-flow:row nowrap;background:transparent;justify-content:flex-start;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__caret__icon{margin:0 .5rem}.dropdown__list__caret__icon:hover{scale:1.3;cursor:pointer;transition:all ease-in-out .1s}.dropdown__list__collapsible{top:100%;height:0;opacity:0;gap:.5rem;width:13rem;z-index:100;display:flex;overflow:hidden;position:absolute;align-items:center;padding:.5rem .3rem;justify-content:center;flex-flow:column nowrap;background-color:#fff;transition:all .4s ease-in-out}.dropdown__list__collapsible--open{opacity:1;max-height:10rem;height:-moz-fit-content;height:fit-content}.dropdown__list__collapsible--open .dropdown__list__search__field,.dropdown__list__collapsible--open .dropdown__list__items{display:flex}.dropdown__list__search__field{width:100%;display:none;align-items:center;border-radius:.5rem;padding:.3rem .5rem;justify-content:center;border:1px solid black}.dropdown__list__search__field__input{width:100%;border:none;outline:none;font-weight:500;background:transparent;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__clear__mark__icon{margin:0 .5rem}.dropdown__list__clear__mark__icon:hover{scale:1.3;cursor:pointer;transition:all ease-in-out .1s}.dropdown__list__items{width:100%;height:100%;display:none;overflow-y:auto;padding:.1rem 0;align-items:flex-start;flex-flow:column nowrap}.dropdown__list__item{width:100%;display:flex;cursor:pointer;list-style:none;align-items:center;flex-flow:row nowrap;padding:.3rem .2rem;transition:font-size .3s;justify-content:space-between;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__item:hover{font-size:1rem;background-color:#d3d3d3}.dropdown__list__item--selected{background-color:#c1efc3}.dropdown__list__item__checked__icon{color:#2ba130}\n"] }]
|
|
124
|
+
}], propDecorators: { data: [{
|
|
125
|
+
type: Input
|
|
126
|
+
}], hintLabel: [{
|
|
127
|
+
type: Input
|
|
128
|
+
}], searchFieldPlaceHolder: [{
|
|
129
|
+
type: Input
|
|
130
|
+
}], width: [{
|
|
131
|
+
type: Input
|
|
132
|
+
}], backgroundColor: [{
|
|
133
|
+
type: Input
|
|
134
|
+
}], selectedValueChange: [{
|
|
135
|
+
type: Output
|
|
136
|
+
}] } });
|
|
137
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvZHJvcGRvd24tbGlzdC9kcm9wZG93bi1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1zeXN0ZW0vY29tcG9uZW50cy9kcm9wZG93bi1saXN0L2Ryb3Bkb3duLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLE9BQU8sRUFDUCxPQUFPLEVBQ1AsU0FBUyxFQUNULFdBQVcsR0FDWixNQUFNLGtDQUFrQyxDQUFDO0FBQzFDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDaEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFFckUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQVUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVMvRSxNQUFNLE9BQU8scUJBQXFCO0lBUGxDO1FBUUU7OztXQUdHO1FBQ0ksZUFBVSxHQUFHLEVBQUUsQ0FBQztRQUV2Qjs7O1dBR0c7UUFDSSxrQkFBYSxHQUFHLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsRUFBRSxFQUFFLENBQUM7UUFRcEQ7OztXQUdHO1FBQ0ksMEJBQXFCLEdBQUcsS0FBSyxDQUFDO1FBRXJDOzs7V0FHRztRQUNhLFlBQU8sR0FBRyxPQUFPLENBQUM7UUFDbEM7OztXQUdHO1FBQ2EsWUFBTyxHQUFHLE9BQU8sQ0FBQztRQUNsQzs7O1dBR0c7UUFDYSxjQUFTLEdBQUcsU0FBUyxDQUFDO1FBQ3RDOzs7V0FHRztRQUNhLGdCQUFXLEdBQUcsV0FBVyxDQUFDO1FBTzFDOzs7V0FHRztRQUVILGNBQVMsR0FBRyxFQUFFLENBQUM7UUFFZjs7O1dBR0c7UUFFSCwyQkFBc0IsR0FBRyxFQUFFLENBQUM7UUFnQjVCOztXQUVHO1FBRUgsd0JBQW1CLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztLQW1FbEQ7SUFqRUM7OztPQUdHO0lBQ0gsUUFBUTtRQUNOLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNsQixDQUFDO0lBRUQ7OztPQUdHO0lBQ0ssUUFBUTtRQUNkLElBQUksSUFBSSxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDckMsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ3ZDO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNJLG1CQUFtQjtRQUN4QixJQUFJLENBQUMscUJBQXFCLEdBQUcsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUM7SUFDM0QsQ0FBQztJQUVEOzs7T0FHRztJQUNJLHlCQUF5QjtRQUM5QixJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFDOUIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO1FBQ2xDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxRCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0ksc0JBQXNCO1FBQzNCLElBQUksQ0FBQyxVQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUNoQixDQUFDO0lBRUQ7OztPQUdHO0lBQ0ksZUFBZSxDQUFDLElBQXNCO1FBQzNDLElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDdEMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQztRQUM5QyxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRUQ7OztPQUdHO0lBQ0ksTUFBTTtRQUNYLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbEQsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUM1QyxNQUFNLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxDQUFDLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsQ0FDcEUsQ0FBQztJQUNKLENBQUM7K0dBckpVLHFCQUFxQjttR0FBckIscUJBQXFCLGtTQ25CbEMsNjFFQWtFQSx1c0VEbkRZLE9BQU8sMkVBQUUsT0FBTyxvRkFBRSxLQUFLLG1IQUFFLElBQUksNEZBQUUsV0FBVyw4bUJBQUUsaUJBQWlCOzs0RkFJNUQscUJBQXFCO2tCQVBqQyxTQUFTOytCQUNFLHVCQUF1QixjQUNyQixJQUFJLFdBQ1AsQ0FBQyxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsV0FBVyxFQUFFLGlCQUFpQixDQUFDOzhCQXFEL0QsSUFBSTtzQkFBWixLQUFLO2dCQU9OLFNBQVM7c0JBRFIsS0FBSztnQkFRTixzQkFBc0I7c0JBRHJCLEtBQUs7Z0JBUU4sS0FBSztzQkFESixLQUFLO2dCQVFOLGVBQWU7c0JBRGQsS0FBSztnQkFPTixtQkFBbUI7c0JBRGxCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBmYVhtYXJrLFxuICBmYUNoZWNrLFxuICBmYUNhcmV0VXAsXG4gIGZhQ2FyZXREb3duLFxufSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXNvbGlkLXN2Zy1pY29ucyc7XG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IE5nQ2xhc3MsIE5nRm9yLCBOZ0lmLCBOZ1N0eWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEZvbnRBd2Vzb21lTW9kdWxlIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2FuZ3VsYXItZm9udGF3ZXNvbWUnO1xuaW1wb3J0IHsgRHJvcGRvd25MaXN0SXRlbSB9IGZyb20gJy4vbW9kZWxzL2Ryb3Bkb3duLWxpc3QtaXRlbS5tb2RlbCc7XG5pbXBvcnQgeyBJbnB1dCwgT3V0cHV0LCBPbkluaXQsIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi10a3MtZHJvcGRvd24tbGlzdCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ1N0eWxlLCBOZ0NsYXNzLCBOZ0ZvciwgTmdJZiwgRm9ybXNNb2R1bGUsIEZvbnRBd2Vzb21lTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2Ryb3Bkb3duLWxpc3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kcm9wZG93bi1saXN0LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIERyb3Bkb3duTGlzdENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIC8qKlxuICAgKiBTZWFyY2ggZmllbGQgaW5wdXQgdmFsdWVcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgcHVibGljIGlucHV0VmFsdWUgPSAnJztcblxuICAvKipcbiAgICogU2VsZWN0ZWQgdmFsdWVcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgcHVibGljIHNlbGVjdGVkVmFsdWUgPSB7IFZhbHVlOiAnJywgVmlld1ZhbHVlOiAnJyB9O1xuXG4gIC8qKlxuICAgKiBGaWx0ZXJlZCBkYXRhXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHB1YmxpYyBmaWx0ZXJlZERhdGEhOiBEcm9wZG93bkxpc3RJdGVtW107XG5cbiAgLyoqXG4gICAqIElzIGRyb3Bkb3duIGxpc3QgdmlzaWJsZVxuICAgKiBAaWdub3JlXG4gICAqL1xuICBwdWJsaWMgaXNEcm9wRG93bkxpc3RWaXNpYmxlID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIEljb25cbiAgICogQGlnbm9yZVxuICAgKi9cbiAgcHVibGljIHJlYWRvbmx5IGZhWG1hcmsgPSBmYVhtYXJrO1xuICAvKipcbiAgICogSWNvblxuICAgKiBAaWdub3JlXG4gICAqL1xuICBwdWJsaWMgcmVhZG9ubHkgZmFDaGVjayA9IGZhQ2hlY2s7XG4gIC8qKlxuICAgKiBJY29uXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHB1YmxpYyByZWFkb25seSBmYUNhcmV0VXAgPSBmYUNhcmV0VXA7XG4gIC8qKlxuICAgKiBJY29uXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHB1YmxpYyByZWFkb25seSBmYUNhcmV0RG93biA9IGZhQ2FyZXREb3duO1xuXG4gIC8qKlxuICAgKiBEYXRhIGZvciBkcm9wZG93biBsaXN0XG4gICAqL1xuICBASW5wdXQoKSBkYXRhITogRHJvcGRvd25MaXN0SXRlbVtdO1xuXG4gIC8qKlxuICAgKiBEcm9wZG93biBsaXN0IGhpbnQgbGFiZWxcbiAgICogQGRlZmF1bHQgJydcbiAgICovXG4gIEBJbnB1dCgpXG4gIGhpbnRMYWJlbCA9ICcnO1xuXG4gIC8qKlxuICAgKiBEcm9wZG93biBsaXN0IHNlYXJjaCBmaWVsZCBwbGFjZWhvbGRlclxuICAgKiBAZGVmYXVsdCAnJ1xuICAgKi9cbiAgQElucHV0KClcbiAgc2VhcmNoRmllbGRQbGFjZUhvbGRlciA9ICcnO1xuXG4gIC8qKlxuICAgKiBXaWR0aCBvZiB0aGUgZHJvcGRvd24gbGlzdFxuICAgKiBAZGVmYXVsdCAxM3JlbVxuICAgKi9cbiAgQElucHV0KClcbiAgd2lkdGg/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIFdoYXQgYmFja2dyb3VuZCBjb2xvciB0byB1c2VcbiAgICogQGRlZmF1bHQgI2ZmZlxuICAgKi9cbiAgQElucHV0KClcbiAgYmFja2dyb3VuZENvbG9yPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBTZWxlY3RlZCB2YWx1ZSBjaGFuZ2VzIGhhbmRsZXJcbiAgICovXG4gIEBPdXRwdXQoKVxuICBzZWxlY3RlZFZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICogQ29tcG9uZW50IGxpZmVjeWNsZSBtZXRob2RcbiAgICovXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMubG9hZERhdGEoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqIENvbXBvbmVudCBtZXRob2QgdG8gbG9hZCBkYXRhXG4gICAqL1xuICBwcml2YXRlIGxvYWREYXRhKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmRhdGEgJiYgdGhpcy5kYXRhLmxlbmd0aCA+IDApIHtcbiAgICAgIHRoaXMuZmlsdGVyZWREYXRhID0gdGhpcy5kYXRhLnNsaWNlKCk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICogQ29tcG9uZW50IG1ldGhvZCB0byBoYW5kbGUgY2xpY2sgb24gZHJvcGRvd24gbGlzdFxuICAgKi9cbiAgcHVibGljIG9uQ2xpY2tEcm9wRG93bkxpc3QoKTogdm9pZCB7XG4gICAgdGhpcy5pc0Ryb3BEb3duTGlzdFZpc2libGUgPSAhdGhpcy5pc0Ryb3BEb3duTGlzdFZpc2libGU7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKiBDb21wb25lbnQgbWV0aG9kIHRvIGhhbmRsZSBjbGljayBvbiBjbGVhciBzZWxlY3RlZCB2YWx1ZVxuICAgKi9cbiAgcHVibGljIG9uQ2xpY2tDbGVhclNlbGVjdGVkVmFsdWUoKTogdm9pZCB7XG4gICAgdGhpcy5zZWxlY3RlZFZhbHVlLlZhbHVlID0gJyc7XG4gICAgdGhpcy5zZWxlY3RlZFZhbHVlLlZpZXdWYWx1ZSA9ICcnO1xuICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZUNoYW5nZS5lbWl0KHRoaXMuc2VsZWN0ZWRWYWx1ZS5WYWx1ZSk7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKiBDb21wb25lbnQgbWV0aG9kIHRvIGhhbmRsZSBjbGljayBvbiBjbGVhciBpbnB1dCB2YWx1ZVxuICAgKi9cbiAgcHVibGljIG9uQ2xpY2tDbGVhcklucHV0VmFsdWUoKTogdm9pZCB7XG4gICAgdGhpcy5pbnB1dFZhbHVlID0gJyc7XG4gICAgdGhpcy5maWx0ZXIoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqIENvbXBvbmVudCBtZXRob2QgdG8gaGFuZGxlIGNsaWNrIG9uIGRyb3Bkb3duIGxpc3QgaXRlbVxuICAgKi9cbiAgcHVibGljIG9uQ2xpY2tMaXN0SXRlbShpdGVtOiBEcm9wZG93bkxpc3RJdGVtKTogdm9pZCB7XG4gICAgdGhpcy5zZWxlY3RlZFZhbHVlLlZhbHVlID0gaXRlbS5WYWx1ZTtcbiAgICB0aGlzLnNlbGVjdGVkVmFsdWUuVmlld1ZhbHVlID0gaXRlbS5WaWV3VmFsdWU7XG4gICAgdGhpcy5zZWxlY3RlZFZhbHVlQ2hhbmdlLmVtaXQoaXRlbS5WYWx1ZSk7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKiBDb21wb25lbnQgbWV0aG9kIHRvIGZpbHRlciBkYXRhXG4gICAqL1xuICBwdWJsaWMgZmlsdGVyKCk6IHZvaWQge1xuICAgIGNvbnN0IGZpbHRlclZhbHVlID0gdGhpcy5pbnB1dFZhbHVlLnRvTG93ZXJDYXNlKCk7XG4gICAgdGhpcy5maWx0ZXJlZERhdGEgPSB0aGlzLmRhdGEuZmlsdGVyKG9wdGlvbiA9PlxuICAgICAgU3RyaW5nKG9wdGlvbi5WaWV3VmFsdWUpLnRvTG93ZXJDYXNlKCkudHJpbSgpLmluY2x1ZGVzKGZpbHRlclZhbHVlKVxuICAgICk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJkcm9wZG93bl9fbGlzdFwiPlxuICA8ZGl2XG4gICAgY2xhc3M9XCJkcm9wZG93bl9fbGlzdF9fc2VsZWN0ZWRfX2l0ZW1fX2ZpZWxkXCJcbiAgICBbbmdTdHlsZV09XCJ7ICdiYWNrZ3JvdW5kLWNvbG9yJzogYmFja2dyb3VuZENvbG9yLCB3aWR0aDogd2lkdGggfVwiPlxuICAgIDxsYWJlbCBbYXR0ci5hcmlhLWxhYmVsXT1cInNlbGVjdGVkVmFsdWUuVmlld1ZhbHVlXCIgZm9yPVwic2VsZWN0ZWRWYWx1ZVwiPlxuICAgICAgPGlucHV0XG4gICAgICAgIGNsYXNzPVwiZHJvcGRvd25fX2xpc3RfX3NlbGVjdGVkX19pdGVtXCJcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICByZWFkb25seT1cInRydWVcIlxuICAgICAgICBpZD1cInNlbGVjdGVkVmFsdWVcIlxuICAgICAgICBuYW1lPVwic2VsZWN0ZWRWYWx1ZVwiXG4gICAgICAgIFt2YWx1ZV09XCJcbiAgICAgICAgICBzZWxlY3RlZFZhbHVlLlZpZXdWYWx1ZSA/IHNlbGVjdGVkVmFsdWUuVmlld1ZhbHVlIDogaGludExhYmVsXG4gICAgICAgIFwiIC8+XG4gICAgPC9sYWJlbD5cbiAgICA8ZmEtaWNvblxuICAgICAgY2xhc3M9XCJkcm9wZG93bl9fbGlzdF9fY2xlYXJfX21hcmtfX2ljb25cIlxuICAgICAgW2ljb25dPVwiZmFYbWFya1wiXG4gICAgICAqbmdJZj1cInNlbGVjdGVkVmFsdWUuVmlld1ZhbHVlICE9PSAnJ1wiXG4gICAgICAoY2xpY2spPVwib25DbGlja0NsZWFyU2VsZWN0ZWRWYWx1ZSgpXCI+PC9mYS1pY29uPlxuICAgIDxmYS1pY29uXG4gICAgICBjbGFzcz1cImRyb3Bkb3duX19saXN0X19jYXJldF9faWNvblwiXG4gICAgICBbaWNvbl09XCJpc0Ryb3BEb3duTGlzdFZpc2libGUgPyBmYUNhcmV0VXAgOiBmYUNhcmV0RG93blwiXG4gICAgICAoY2xpY2spPVwib25DbGlja0Ryb3BEb3duTGlzdCgpXCI+PC9mYS1pY29uPlxuICA8L2Rpdj5cbiAgPGRpdlxuICAgIFtjbGFzc109XCJcbiAgICAgIGlzRHJvcERvd25MaXN0VmlzaWJsZVxuICAgICAgICA/ICdkcm9wZG93bl9fbGlzdF9fY29sbGFwc2libGUtLW9wZW4gZHJvcGRvd25fX2xpc3RfX2NvbGxhcHNpYmxlJ1xuICAgICAgICA6ICdkcm9wZG93bl9fbGlzdF9fY29sbGFwc2libGUnXG4gICAgXCJcbiAgICBbbmdTdHlsZV09XCJ7ICdiYWNrZ3JvdW5kLWNvbG9yJzogYmFja2dyb3VuZENvbG9yLCB3aWR0aDogd2lkdGggfVwiPlxuICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93bl9fbGlzdF9fc2VhcmNoX19maWVsZFwiPlxuICAgICAgPGlucHV0XG4gICAgICAgIGNsYXNzPVwiZHJvcGRvd25fX2xpc3RfX3NlYXJjaF9fZmllbGRfX2lucHV0XCJcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICAoaW5wdXQpPVwiZmlsdGVyKClcIlxuICAgICAgICAoZm9jdXMpPVwiZmlsdGVyKClcIlxuICAgICAgICBbKG5nTW9kZWwpXT1cImlucHV0VmFsdWVcIlxuICAgICAgICBbcGxhY2Vob2xkZXJdPVwic2VhcmNoRmllbGRQbGFjZUhvbGRlclwiIC8+XG4gICAgICA8ZmEtaWNvblxuICAgICAgICBjbGFzcz1cImRyb3Bkb3duX19saXN0X19jbGVhcl9fbWFya19faWNvblwiXG4gICAgICAgIFtpY29uXT1cImZhWG1hcmtcIlxuICAgICAgICAqbmdJZj1cImlucHV0VmFsdWUgIT09ICcnXCJcbiAgICAgICAgKGNsaWNrKT1cIm9uQ2xpY2tDbGVhcklucHV0VmFsdWUoKVwiPjwvZmEtaWNvbj5cbiAgICA8L2Rpdj5cbiAgICA8dWwgY2xhc3M9XCJkcm9wZG93bl9fbGlzdF9faXRlbXNcIj5cbiAgICAgIDxsaVxuICAgICAgICBbbmdDbGFzc109XCJcbiAgICAgICAgICBmaWx0ZXJlZFZhbHVlLlZpZXdWYWx1ZSA9PT0gc2VsZWN0ZWRWYWx1ZS5WaWV3VmFsdWVcbiAgICAgICAgICAgID8gJ2Ryb3Bkb3duX19saXN0X19pdGVtIGRyb3Bkb3duX19saXN0X19pdGVtLS1zZWxlY3RlZCdcbiAgICAgICAgICAgIDogJ2Ryb3Bkb3duX19saXN0X19pdGVtJ1xuICAgICAgICBcIlxuICAgICAgICB0YWJpbmRleD1cIjBcIlxuICAgICAgICAoY2xpY2spPVwib25DbGlja0xpc3RJdGVtKGZpbHRlcmVkVmFsdWUpXCJcbiAgICAgICAgKm5nRm9yPVwibGV0IGZpbHRlcmVkVmFsdWUgb2YgZmlsdGVyZWREYXRhXCJcbiAgICAgICAgKGtleWRvd24uZW50ZXIpPVwib25DbGlja0xpc3RJdGVtKGZpbHRlcmVkVmFsdWUpXCI+XG4gICAgICAgIHt7IGZpbHRlcmVkVmFsdWUuVmlld1ZhbHVlIH19XG4gICAgICAgIDxmYS1pY29uXG4gICAgICAgICAgY2xhc3M9XCJkcm9wZG93bl9fbGlzdF9faXRlbV9fY2hlY2tlZF9faWNvblwiXG4gICAgICAgICAgW2ljb25dPVwiZmFDaGVja1wiXG4gICAgICAgICAgKm5nSWY9XCJmaWx0ZXJlZFZhbHVlLlZpZXdWYWx1ZSA9PT0gc2VsZWN0ZWRWYWx1ZS5WaWV3VmFsdWVcIj48L2ZhLWljb24+XG4gICAgICA8L2xpPlxuICAgIDwvdWw+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbGlzdC1pdGVtLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGVzaWduLXN5c3RlbS9jb21wb25lbnRzL2Ryb3Bkb3duLWxpc3QvbW9kZWxzL2Ryb3Bkb3duLWxpc3QtaXRlbS5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBEcm9wZG93bkxpc3RJdGVtIHtcbiAgVmFsdWU6IGFueTtcbiAgVmlld1ZhbHVlOiBhbnk7XG59XG4iXX0=
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export * from './dropdown-list.component';
|
|
2
|
+
export * from './models/dropdown-list-item.model';
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1zeXN0ZW0vY29tcG9uZW50cy9kcm9wZG93bi1saXN0L3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLG1DQUFtQyxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9kcm9wZG93bi1saXN0LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL21vZGVscy9kcm9wZG93bi1saXN0LWl0ZW0ubW9kZWwnXG4iXX0=
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generated bundle index. Do not edit.
|
|
3
|
+
*/
|
|
4
|
+
export * from './public-api';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVrdXMtZGVzaWduLXN5c3RlbS1jb21wb25lbnRzLWRyb3Bkb3duLWxpc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvZHJvcGRvd24tbGlzdC90ZWt1cy1kZXNpZ24tc3lzdGVtLWNvbXBvbmVudHMtZHJvcGRvd24tbGlzdC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuIl19
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import { faXmark, faCheck, faCaretUp, faCaretDown } from '@fortawesome/pro-solid-svg-icons';
|
|
2
|
+
import * as i1 from '@angular/forms';
|
|
3
|
+
import { FormsModule } from '@angular/forms';
|
|
4
|
+
import { NgStyle, NgClass, NgFor, NgIf } from '@angular/common';
|
|
5
|
+
import * as i2 from '@fortawesome/angular-fontawesome';
|
|
6
|
+
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
7
|
+
import * as i0 from '@angular/core';
|
|
8
|
+
import { EventEmitter, Component, Input, Output } from '@angular/core';
|
|
9
|
+
|
|
10
|
+
class DropdownListComponent {
|
|
11
|
+
constructor() {
|
|
12
|
+
/**
|
|
13
|
+
* Search field input value
|
|
14
|
+
* @ignore
|
|
15
|
+
*/
|
|
16
|
+
this.inputValue = '';
|
|
17
|
+
/**
|
|
18
|
+
* Selected value
|
|
19
|
+
* @ignore
|
|
20
|
+
*/
|
|
21
|
+
this.selectedValue = { Value: '', ViewValue: '' };
|
|
22
|
+
/**
|
|
23
|
+
* Is dropdown list visible
|
|
24
|
+
* @ignore
|
|
25
|
+
*/
|
|
26
|
+
this.isDropDownListVisible = false;
|
|
27
|
+
/**
|
|
28
|
+
* Icon
|
|
29
|
+
* @ignore
|
|
30
|
+
*/
|
|
31
|
+
this.faXmark = faXmark;
|
|
32
|
+
/**
|
|
33
|
+
* Icon
|
|
34
|
+
* @ignore
|
|
35
|
+
*/
|
|
36
|
+
this.faCheck = faCheck;
|
|
37
|
+
/**
|
|
38
|
+
* Icon
|
|
39
|
+
* @ignore
|
|
40
|
+
*/
|
|
41
|
+
this.faCaretUp = faCaretUp;
|
|
42
|
+
/**
|
|
43
|
+
* Icon
|
|
44
|
+
* @ignore
|
|
45
|
+
*/
|
|
46
|
+
this.faCaretDown = faCaretDown;
|
|
47
|
+
/**
|
|
48
|
+
* Dropdown list hint label
|
|
49
|
+
* @default ''
|
|
50
|
+
*/
|
|
51
|
+
this.hintLabel = '';
|
|
52
|
+
/**
|
|
53
|
+
* Dropdown list search field placeholder
|
|
54
|
+
* @default ''
|
|
55
|
+
*/
|
|
56
|
+
this.searchFieldPlaceHolder = '';
|
|
57
|
+
/**
|
|
58
|
+
* Selected value changes handler
|
|
59
|
+
*/
|
|
60
|
+
this.selectedValueChange = new EventEmitter();
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* @ignore
|
|
64
|
+
* Component lifecycle method
|
|
65
|
+
*/
|
|
66
|
+
ngOnInit() {
|
|
67
|
+
this.loadData();
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* @ignore
|
|
71
|
+
* Component method to load data
|
|
72
|
+
*/
|
|
73
|
+
loadData() {
|
|
74
|
+
if (this.data && this.data.length > 0) {
|
|
75
|
+
this.filteredData = this.data.slice();
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* @ignore
|
|
80
|
+
* Component method to handle click on dropdown list
|
|
81
|
+
*/
|
|
82
|
+
onClickDropDownList() {
|
|
83
|
+
this.isDropDownListVisible = !this.isDropDownListVisible;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* @ignore
|
|
87
|
+
* Component method to handle click on clear selected value
|
|
88
|
+
*/
|
|
89
|
+
onClickClearSelectedValue() {
|
|
90
|
+
this.selectedValue.Value = '';
|
|
91
|
+
this.selectedValue.ViewValue = '';
|
|
92
|
+
this.selectedValueChange.emit(this.selectedValue.Value);
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* @ignore
|
|
96
|
+
* Component method to handle click on clear input value
|
|
97
|
+
*/
|
|
98
|
+
onClickClearInputValue() {
|
|
99
|
+
this.inputValue = '';
|
|
100
|
+
this.filter();
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* @ignore
|
|
104
|
+
* Component method to handle click on dropdown list item
|
|
105
|
+
*/
|
|
106
|
+
onClickListItem(item) {
|
|
107
|
+
this.selectedValue.Value = item.Value;
|
|
108
|
+
this.selectedValue.ViewValue = item.ViewValue;
|
|
109
|
+
this.selectedValueChange.emit(item.Value);
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* @ignore
|
|
113
|
+
* Component method to filter data
|
|
114
|
+
*/
|
|
115
|
+
filter() {
|
|
116
|
+
const filterValue = this.inputValue.toLowerCase();
|
|
117
|
+
this.filteredData = this.data.filter(option => String(option.ViewValue).toLowerCase().trim().includes(filterValue));
|
|
118
|
+
}
|
|
119
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
120
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownListComponent, isStandalone: true, selector: "lib-tks-dropdown-list", inputs: { data: "data", hintLabel: "hintLabel", searchFieldPlaceHolder: "searchFieldPlaceHolder", width: "width", backgroundColor: "backgroundColor" }, outputs: { selectedValueChange: "selectedValueChange" }, ngImport: i0, template: "<div class=\"dropdown__list\">\n <div\n class=\"dropdown__list__selected__item__field\"\n [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n <label [attr.aria-label]=\"selectedValue.ViewValue\" for=\"selectedValue\">\n <input\n class=\"dropdown__list__selected__item\"\n type=\"text\"\n readonly=\"true\"\n id=\"selectedValue\"\n name=\"selectedValue\"\n [value]=\"\n selectedValue.ViewValue ? selectedValue.ViewValue : hintLabel\n \" />\n </label>\n <fa-icon\n class=\"dropdown__list__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"selectedValue.ViewValue !== ''\"\n (click)=\"onClickClearSelectedValue()\"></fa-icon>\n <fa-icon\n class=\"dropdown__list__caret__icon\"\n [icon]=\"isDropDownListVisible ? faCaretUp : faCaretDown\"\n (click)=\"onClickDropDownList()\"></fa-icon>\n </div>\n <div\n [class]=\"\n isDropDownListVisible\n ? 'dropdown__list__collapsible--open dropdown__list__collapsible'\n : 'dropdown__list__collapsible'\n \"\n [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n <div class=\"dropdown__list__search__field\">\n <input\n class=\"dropdown__list__search__field__input\"\n type=\"text\"\n (input)=\"filter()\"\n (focus)=\"filter()\"\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"searchFieldPlaceHolder\" />\n <fa-icon\n class=\"dropdown__list__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"inputValue !== ''\"\n (click)=\"onClickClearInputValue()\"></fa-icon>\n </div>\n <ul class=\"dropdown__list__items\">\n <li\n [ngClass]=\"\n filteredValue.ViewValue === selectedValue.ViewValue\n ? 'dropdown__list__item dropdown__list__item--selected'\n : 'dropdown__list__item'\n \"\n tabindex=\"0\"\n (click)=\"onClickListItem(filteredValue)\"\n *ngFor=\"let filteredValue of filteredData\"\n (keydown.enter)=\"onClickListItem(filteredValue)\">\n {{ filteredValue.ViewValue }}\n <fa-icon\n class=\"dropdown__list__item__checked__icon\"\n [icon]=\"faCheck\"\n *ngIf=\"filteredValue.ViewValue === selectedValue.ViewValue\"></fa-icon>\n </li>\n </ul>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.dropdown__list{position:relative}.dropdown__list__selected__item__field{width:13rem;display:flex;align-items:center;padding:.3rem 0rem;flex-flow:row nowrap;justify-content:space-between;border-bottom:1.2px solid black}.dropdown__list__selected__item{width:100%;border:none;outline:none;display:flex;align-items:center;flex-flow:row nowrap;background:transparent;justify-content:flex-start;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__caret__icon{margin:0 .5rem}.dropdown__list__caret__icon:hover{scale:1.3;cursor:pointer;transition:all ease-in-out .1s}.dropdown__list__collapsible{top:100%;height:0;opacity:0;gap:.5rem;width:13rem;z-index:100;display:flex;overflow:hidden;position:absolute;align-items:center;padding:.5rem .3rem;justify-content:center;flex-flow:column nowrap;background-color:#fff;transition:all .4s ease-in-out}.dropdown__list__collapsible--open{opacity:1;max-height:10rem;height:-moz-fit-content;height:fit-content}.dropdown__list__collapsible--open .dropdown__list__search__field,.dropdown__list__collapsible--open .dropdown__list__items{display:flex}.dropdown__list__search__field{width:100%;display:none;align-items:center;border-radius:.5rem;padding:.3rem .5rem;justify-content:center;border:1px solid black}.dropdown__list__search__field__input{width:100%;border:none;outline:none;font-weight:500;background:transparent;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__clear__mark__icon{margin:0 .5rem}.dropdown__list__clear__mark__icon:hover{scale:1.3;cursor:pointer;transition:all ease-in-out .1s}.dropdown__list__items{width:100%;height:100%;display:none;overflow-y:auto;padding:.1rem 0;align-items:flex-start;flex-flow:column nowrap}.dropdown__list__item{width:100%;display:flex;cursor:pointer;list-style:none;align-items:center;flex-flow:row nowrap;padding:.3rem .2rem;transition:font-size .3s;justify-content:space-between;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__item:hover{font-size:1rem;background-color:#d3d3d3}.dropdown__list__item--selected{background-color:#c1efc3}.dropdown__list__item__checked__icon{color:#2ba130}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
|
|
121
|
+
}
|
|
122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownListComponent, decorators: [{
|
|
123
|
+
type: Component,
|
|
124
|
+
args: [{ selector: 'lib-tks-dropdown-list', standalone: true, imports: [NgStyle, NgClass, NgFor, NgIf, FormsModule, FontAwesomeModule], template: "<div class=\"dropdown__list\">\n <div\n class=\"dropdown__list__selected__item__field\"\n [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n <label [attr.aria-label]=\"selectedValue.ViewValue\" for=\"selectedValue\">\n <input\n class=\"dropdown__list__selected__item\"\n type=\"text\"\n readonly=\"true\"\n id=\"selectedValue\"\n name=\"selectedValue\"\n [value]=\"\n selectedValue.ViewValue ? selectedValue.ViewValue : hintLabel\n \" />\n </label>\n <fa-icon\n class=\"dropdown__list__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"selectedValue.ViewValue !== ''\"\n (click)=\"onClickClearSelectedValue()\"></fa-icon>\n <fa-icon\n class=\"dropdown__list__caret__icon\"\n [icon]=\"isDropDownListVisible ? faCaretUp : faCaretDown\"\n (click)=\"onClickDropDownList()\"></fa-icon>\n </div>\n <div\n [class]=\"\n isDropDownListVisible\n ? 'dropdown__list__collapsible--open dropdown__list__collapsible'\n : 'dropdown__list__collapsible'\n \"\n [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n <div class=\"dropdown__list__search__field\">\n <input\n class=\"dropdown__list__search__field__input\"\n type=\"text\"\n (input)=\"filter()\"\n (focus)=\"filter()\"\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"searchFieldPlaceHolder\" />\n <fa-icon\n class=\"dropdown__list__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"inputValue !== ''\"\n (click)=\"onClickClearInputValue()\"></fa-icon>\n </div>\n <ul class=\"dropdown__list__items\">\n <li\n [ngClass]=\"\n filteredValue.ViewValue === selectedValue.ViewValue\n ? 'dropdown__list__item dropdown__list__item--selected'\n : 'dropdown__list__item'\n \"\n tabindex=\"0\"\n (click)=\"onClickListItem(filteredValue)\"\n *ngFor=\"let filteredValue of filteredData\"\n (keydown.enter)=\"onClickListItem(filteredValue)\">\n {{ filteredValue.ViewValue }}\n <fa-icon\n class=\"dropdown__list__item__checked__icon\"\n [icon]=\"faCheck\"\n *ngIf=\"filteredValue.ViewValue === selectedValue.ViewValue\"></fa-icon>\n </li>\n </ul>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.dropdown__list{position:relative}.dropdown__list__selected__item__field{width:13rem;display:flex;align-items:center;padding:.3rem 0rem;flex-flow:row nowrap;justify-content:space-between;border-bottom:1.2px solid black}.dropdown__list__selected__item{width:100%;border:none;outline:none;display:flex;align-items:center;flex-flow:row nowrap;background:transparent;justify-content:flex-start;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__caret__icon{margin:0 .5rem}.dropdown__list__caret__icon:hover{scale:1.3;cursor:pointer;transition:all ease-in-out .1s}.dropdown__list__collapsible{top:100%;height:0;opacity:0;gap:.5rem;width:13rem;z-index:100;display:flex;overflow:hidden;position:absolute;align-items:center;padding:.5rem .3rem;justify-content:center;flex-flow:column nowrap;background-color:#fff;transition:all .4s ease-in-out}.dropdown__list__collapsible--open{opacity:1;max-height:10rem;height:-moz-fit-content;height:fit-content}.dropdown__list__collapsible--open .dropdown__list__search__field,.dropdown__list__collapsible--open .dropdown__list__items{display:flex}.dropdown__list__search__field{width:100%;display:none;align-items:center;border-radius:.5rem;padding:.3rem .5rem;justify-content:center;border:1px solid black}.dropdown__list__search__field__input{width:100%;border:none;outline:none;font-weight:500;background:transparent;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__clear__mark__icon{margin:0 .5rem}.dropdown__list__clear__mark__icon:hover{scale:1.3;cursor:pointer;transition:all ease-in-out .1s}.dropdown__list__items{width:100%;height:100%;display:none;overflow-y:auto;padding:.1rem 0;align-items:flex-start;flex-flow:column nowrap}.dropdown__list__item{width:100%;display:flex;cursor:pointer;list-style:none;align-items:center;flex-flow:row nowrap;padding:.3rem .2rem;transition:font-size .3s;justify-content:space-between;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.dropdown__list__item:hover{font-size:1rem;background-color:#d3d3d3}.dropdown__list__item--selected{background-color:#c1efc3}.dropdown__list__item__checked__icon{color:#2ba130}\n"] }]
|
|
125
|
+
}], propDecorators: { data: [{
|
|
126
|
+
type: Input
|
|
127
|
+
}], hintLabel: [{
|
|
128
|
+
type: Input
|
|
129
|
+
}], searchFieldPlaceHolder: [{
|
|
130
|
+
type: Input
|
|
131
|
+
}], width: [{
|
|
132
|
+
type: Input
|
|
133
|
+
}], backgroundColor: [{
|
|
134
|
+
type: Input
|
|
135
|
+
}], selectedValueChange: [{
|
|
136
|
+
type: Output
|
|
137
|
+
}] } });
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* Generated bundle index. Do not edit.
|
|
141
|
+
*/
|
|
142
|
+
|
|
143
|
+
export { DropdownListComponent };
|
|
144
|
+
//# sourceMappingURL=tekus-design-system-components-dropdown-list.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-dropdown-list.mjs","sources":["../../../projects/design-system/components/dropdown-list/dropdown-list.component.ts","../../../projects/design-system/components/dropdown-list/dropdown-list.component.html","../../../projects/design-system/components/dropdown-list/tekus-design-system-components-dropdown-list.ts"],"sourcesContent":["import {\n faXmark,\n faCheck,\n faCaretUp,\n faCaretDown,\n} from '@fortawesome/pro-solid-svg-icons';\nimport { FormsModule } from '@angular/forms';\nimport { NgClass, NgFor, NgIf, NgStyle } from '@angular/common';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { DropdownListItem } from './models/dropdown-list-item.model';\nimport { Input, Output, OnInit, Component, EventEmitter } from '@angular/core';\n\n@Component({\n selector: 'lib-tks-dropdown-list',\n standalone: true,\n imports: [NgStyle, NgClass, NgFor, NgIf, FormsModule, FontAwesomeModule],\n templateUrl: './dropdown-list.component.html',\n styleUrls: ['./dropdown-list.component.scss'],\n})\nexport class DropdownListComponent implements OnInit {\n /**\n * Search field input value\n * @ignore\n */\n public inputValue = '';\n\n /**\n * Selected value\n * @ignore\n */\n public selectedValue = { Value: '', ViewValue: '' };\n\n /**\n * Filtered data\n * @ignore\n */\n public filteredData!: DropdownListItem[];\n\n /**\n * Is dropdown list visible\n * @ignore\n */\n public isDropDownListVisible = false;\n\n /**\n * Icon\n * @ignore\n */\n public readonly faXmark = faXmark;\n /**\n * Icon\n * @ignore\n */\n public readonly faCheck = faCheck;\n /**\n * Icon\n * @ignore\n */\n public readonly faCaretUp = faCaretUp;\n /**\n * Icon\n * @ignore\n */\n public readonly faCaretDown = faCaretDown;\n\n /**\n * Data for dropdown list\n */\n @Input() data!: DropdownListItem[];\n\n /**\n * Dropdown list hint label\n * @default ''\n */\n @Input()\n hintLabel = '';\n\n /**\n * Dropdown list search field placeholder\n * @default ''\n */\n @Input()\n searchFieldPlaceHolder = '';\n\n /**\n * Width of the dropdown list\n * @default 13rem\n */\n @Input()\n width?: string;\n\n /**\n * What background color to use\n * @default #fff\n */\n @Input()\n backgroundColor?: string;\n\n /**\n * Selected value changes handler\n */\n @Output()\n selectedValueChange = new EventEmitter<string>();\n\n /**\n * @ignore\n * Component lifecycle method\n */\n ngOnInit(): void {\n this.loadData();\n }\n\n /**\n * @ignore\n * Component method to load data\n */\n private loadData(): void {\n if (this.data && this.data.length > 0) {\n this.filteredData = this.data.slice();\n }\n }\n\n /**\n * @ignore\n * Component method to handle click on dropdown list\n */\n public onClickDropDownList(): void {\n this.isDropDownListVisible = !this.isDropDownListVisible;\n }\n\n /**\n * @ignore\n * Component method to handle click on clear selected value\n */\n public onClickClearSelectedValue(): void {\n this.selectedValue.Value = '';\n this.selectedValue.ViewValue = '';\n this.selectedValueChange.emit(this.selectedValue.Value);\n }\n\n /**\n * @ignore\n * Component method to handle click on clear input value\n */\n public onClickClearInputValue(): void {\n this.inputValue = '';\n this.filter();\n }\n\n /**\n * @ignore\n * Component method to handle click on dropdown list item\n */\n public onClickListItem(item: DropdownListItem): void {\n this.selectedValue.Value = item.Value;\n this.selectedValue.ViewValue = item.ViewValue;\n this.selectedValueChange.emit(item.Value);\n }\n\n /**\n * @ignore\n * Component method to filter data\n */\n public filter(): void {\n const filterValue = this.inputValue.toLowerCase();\n this.filteredData = this.data.filter(option =>\n String(option.ViewValue).toLowerCase().trim().includes(filterValue)\n );\n }\n}\n","<div class=\"dropdown__list\">\n <div\n class=\"dropdown__list__selected__item__field\"\n [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n <label [attr.aria-label]=\"selectedValue.ViewValue\" for=\"selectedValue\">\n <input\n class=\"dropdown__list__selected__item\"\n type=\"text\"\n readonly=\"true\"\n id=\"selectedValue\"\n name=\"selectedValue\"\n [value]=\"\n selectedValue.ViewValue ? selectedValue.ViewValue : hintLabel\n \" />\n </label>\n <fa-icon\n class=\"dropdown__list__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"selectedValue.ViewValue !== ''\"\n (click)=\"onClickClearSelectedValue()\"></fa-icon>\n <fa-icon\n class=\"dropdown__list__caret__icon\"\n [icon]=\"isDropDownListVisible ? faCaretUp : faCaretDown\"\n (click)=\"onClickDropDownList()\"></fa-icon>\n </div>\n <div\n [class]=\"\n isDropDownListVisible\n ? 'dropdown__list__collapsible--open dropdown__list__collapsible'\n : 'dropdown__list__collapsible'\n \"\n [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n <div class=\"dropdown__list__search__field\">\n <input\n class=\"dropdown__list__search__field__input\"\n type=\"text\"\n (input)=\"filter()\"\n (focus)=\"filter()\"\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"searchFieldPlaceHolder\" />\n <fa-icon\n class=\"dropdown__list__clear__mark__icon\"\n [icon]=\"faXmark\"\n *ngIf=\"inputValue !== ''\"\n (click)=\"onClickClearInputValue()\"></fa-icon>\n </div>\n <ul class=\"dropdown__list__items\">\n <li\n [ngClass]=\"\n filteredValue.ViewValue === selectedValue.ViewValue\n ? 'dropdown__list__item dropdown__list__item--selected'\n : 'dropdown__list__item'\n \"\n tabindex=\"0\"\n (click)=\"onClickListItem(filteredValue)\"\n *ngFor=\"let filteredValue of filteredData\"\n (keydown.enter)=\"onClickListItem(filteredValue)\">\n {{ filteredValue.ViewValue }}\n <fa-icon\n class=\"dropdown__list__item__checked__icon\"\n [icon]=\"faCheck\"\n *ngIf=\"filteredValue.ViewValue === selectedValue.ViewValue\"></fa-icon>\n </li>\n </ul>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tekus/design-system",
|
|
3
3
|
"description": "Tekus design system library",
|
|
4
|
-
"version": "1.0
|
|
4
|
+
"version": "1.1.0",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"@angular/core": "^16.2.0",
|
|
@@ -31,6 +31,12 @@
|
|
|
31
31
|
"esm": "./esm2022/tekus-design-system.mjs",
|
|
32
32
|
"default": "./fesm2022/tekus-design-system.mjs"
|
|
33
33
|
},
|
|
34
|
+
"./components/dropdown-list": {
|
|
35
|
+
"types": "./components/dropdown-list/index.d.ts",
|
|
36
|
+
"esm2022": "./esm2022/components/dropdown-list/tekus-design-system-components-dropdown-list.mjs",
|
|
37
|
+
"esm": "./esm2022/components/dropdown-list/tekus-design-system-components-dropdown-list.mjs",
|
|
38
|
+
"default": "./fesm2022/tekus-design-system-components-dropdown-list.mjs"
|
|
39
|
+
},
|
|
34
40
|
"./components/search-bar": {
|
|
35
41
|
"types": "./components/search-bar/index.d.ts",
|
|
36
42
|
"esm2022": "./esm2022/components/search-bar/tekus-design-system-components-search-bar.mjs",
|