@tekus/design-system 1.0.6 → 2.0.0

package/components/dropdown-list/dropdown-list.component.d.ts

@@ -0,0 +1,113 @@
+import { DropdownListItem } from './models/dropdown-list-item.model';
+import { OnInit, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class DropdownListComponent implements OnInit {
+    /**
+     * Search field input value
+     * @ignore
+     */
+    inputValue: string;
+    /**
+     * Selected value
+     * @ignore
+     */
+    selectedValue: {
+        Value: string;
+        ViewValue: string;
+    };
+    /**
+     * Filtered data
+     * @ignore
+     */
+    filteredData: DropdownListItem[];
+    /**
+     * Is dropdown list visible
+     * @ignore
+     */
+    isDropDownListVisible: boolean;
+    /**
+     * Icon
+     * @ignore
+     */
+    readonly faXmark: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    /**
+     * Icon
+     * @ignore
+     */
+    readonly faCheck: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    /**
+     * Icon
+     * @ignore
+     */
+    readonly faCaretUp: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    /**
+     * Icon
+     * @ignore
+     */
+    readonly faCaretDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    /**
+     * Data for dropdown list
+     */
+    data: DropdownListItem[];
+    /**
+     * Dropdown list hint label
+     * @default ''
+     */
+    hintLabel: string;
+    /**
+     * Dropdown list search field placeholder
+     * @default ''
+     */
+    searchFieldPlaceHolder: string;
+    /**
+     * Width of the dropdown list
+     * @default 13rem
+     */
+    width?: string;
+    /**
+     * What background color to use
+     * @default #fff
+     */
+    backgroundColor?: string;
+    /**
+     * Selected value changes handler
+     */
+    selectedValueChange: EventEmitter<string>;
+    /**
+     * @ignore
+     * Component lifecycle method
+     */
+    ngOnInit(): void;
+    /**
+     * @ignore
+     * Component method to load data
+     */
+    private loadData;
+    /**
+     * @ignore
+     * Component method to handle click on dropdown list
+     */
+    onClickDropDownList(): void;
+    /**
+     * @ignore
+     * Component method to handle click on clear selected value
+     */
+    onClickClearSelectedValue(): void;
+    /**
+     * @ignore
+     * Component method to handle click on clear input value
+     */
+    onClickClearInputValue(): void;
+    /**
+     * @ignore
+     * Component method to handle click on dropdown list item
+     */
+    onClickListItem(item: DropdownListItem): void;
+    /**
+     * @ignore
+     * Component method to filter data
+     */
+    filter(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownListComponent, never>;
+    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>;
+}

package/components/dropdown-list/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/components/dropdown-list" />
+export * from './public-api';

package/components/dropdown-list/models/dropdown-list-item.model.d.ts

@@ -0,0 +1,4 @@
+export interface DropdownListItem {
+    Value: any;
+    ViewValue: any;
+}

package/components/dropdown-list/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './dropdown-list.component';
+export * from './models/dropdown-list-item.model';

package/esm2022/components/dropdown-list/dropdown-list.component.mjs

@@ -0,0 +1,137 @@
+import { faXmark, faCheck, faCaretUp, faCaretDown, } from '@fortawesome/pro-solid-svg-icons';
+import { FormsModule } from '@angular/forms';
+import { NgClass, NgFor, NgIf, NgStyle } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { Input, Output, Component, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@fortawesome/angular-fontawesome";
+export class DropdownListComponent {
+    constructor() {
+        /**
+         * Search field input value
+         * @ignore
+         */
+        this.inputValue = '';
+        /**
+         * Selected value
+         * @ignore
+         */
+        this.selectedValue = { Value: '', ViewValue: '' };
+        /**
+         * Is dropdown list visible
+         * @ignore
+         */
+        this.isDropDownListVisible = false;
+        /**
+         * Icon
+         * @ignore
+         */
+        this.faXmark = faXmark;
+        /**
+         * Icon
+         * @ignore
+         */
+        this.faCheck = faCheck;
+        /**
+         * Icon
+         * @ignore
+         */
+        this.faCaretUp = faCaretUp;
+        /**
+         * Icon
+         * @ignore
+         */
+        this.faCaretDown = faCaretDown;
+        /**
+         * Dropdown list hint label
+         * @default ''
+         */
+        this.hintLabel = '';
+        /**
+         * Dropdown list search field placeholder
+         * @default ''
+         */
+        this.searchFieldPlaceHolder = '';
+        /**
+         * Selected value changes handler
+         */
+        this.selectedValueChange = new EventEmitter();
+    }
+    /**
+     * @ignore
+     * Component lifecycle method
+     */
+    ngOnInit() {
+        this.loadData();
+    }
+    /**
+     * @ignore
+     * Component method to load data
+     */
+    loadData() {
+        if (this.data && this.data.length > 0) {
+            this.filteredData = this.data.slice();
+        }
+    }
+    /**
+     * @ignore
+     * Component method to handle click on dropdown list
+     */
+    onClickDropDownList() {
+        this.isDropDownListVisible = !this.isDropDownListVisible;
+    }
+    /**
+     * @ignore
+     * Component method to handle click on clear selected value
+     */
+    onClickClearSelectedValue() {
+        this.selectedValue.Value = '';
+        this.selectedValue.ViewValue = '';
+        this.selectedValueChange.emit(this.selectedValue.Value);
+    }
+    /**
+     * @ignore
+     * Component method to handle click on clear input value
+     */
+    onClickClearInputValue() {
+        this.inputValue = '';
+        this.filter();
+    }
+    /**
+     * @ignore
+     * Component method to handle click on dropdown list item
+     */
+    onClickListItem(item) {
+        this.selectedValue.Value = item.Value;
+        this.selectedValue.ViewValue = item.ViewValue;
+        this.selectedValueChange.emit(item.Value);
+    }
+    /**
+     * @ignore
+     * Component method to filter data
+     */
+    filter() {
+        const filterValue = this.inputValue.toLowerCase();
+        this.filteredData = this.data.filter(option => String(option.ViewValue).toLowerCase().trim().includes(filterValue));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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: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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DropdownListComponent, decorators: [{
+            type: Component,
+            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: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"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], hintLabel: [{
+                type: Input
+            }], searchFieldPlaceHolder: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], selectedValueChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvZHJvcGRvd24tbGlzdC9kcm9wZG93bi1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1zeXN0ZW0vY29tcG9uZW50cy9kcm9wZG93bi1saXN0L2Ryb3Bkb3duLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLE9BQU8sRUFDUCxPQUFPLEVBQ1AsU0FBUyxFQUNULFdBQVcsR0FDWixNQUFNLGtDQUFrQyxDQUFDO0FBQzFDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDaEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFFckUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQVUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVMvRSxNQUFNLE9BQU8scUJBQXFCO0lBUGxDO1FBUUU7OztXQUdHO1FBQ0ksZUFBVSxHQUFHLEVBQUUsQ0FBQztRQUV2Qjs7O1dBR0c7UUFDSSxrQkFBYSxHQUFHLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsRUFBRSxFQUFFLENBQUM7UUFRcEQ7OztXQUdHO1FBQ0ksMEJBQXFCLEdBQUcsS0FBSyxDQUFDO1FBRXJDOzs7V0FHRztRQUNhLFlBQU8sR0FBRyxPQUFPLENBQUM7UUFDbEM7OztXQUdHO1FBQ2EsWUFBTyxHQUFHLE9BQU8sQ0FBQztRQUNsQzs7O1dBR0c7UUFDYSxjQUFTLEdBQUcsU0FBUyxDQUFDO1FBQ3RDOzs7V0FHRztRQUNhLGdCQUFXLEdBQUcsV0FBVyxDQUFDO1FBTzFDOzs7V0FHRztRQUVILGNBQVMsR0FBRyxFQUFFLENBQUM7UUFFZjs7O1dBR0c7UUFFSCwyQkFBc0IsR0FBRyxFQUFFLENBQUM7UUFnQjVCOztXQUVHO1FBRUgsd0JBQW1CLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztLQW1FbEQ7SUFqRUM7OztPQUdHO0lBQ0gsUUFBUTtRQUNOLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNsQixDQUFDO0lBRUQ7OztPQUdHO0lBQ0ssUUFBUTtRQUNkLElBQUksSUFBSSxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUUsQ0FBQztZQUN0QyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDeEMsQ0FBQztJQUNILENBQUM7SUFFRDs7O09BR0c7SUFDSSxtQkFBbUI7UUFDeEIsSUFBSSxDQUFDLHFCQUFxQixHQUFHLENBQUMsSUFBSSxDQUFDLHFCQUFxQixDQUFDO0lBQzNELENBQUM7SUFFRDs7O09BR0c7SUFDSSx5QkFBeUI7UUFDOUIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBQzlCLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztRQUNsQyxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDMUQsQ0FBQztJQUVEOzs7T0FHRztJQUNJLHNCQUFzQjtRQUMzQixJQUFJLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDaEIsQ0FBQztJQUVEOzs7T0FHRztJQUNJLGVBQWUsQ0FBQyxJQUFzQjtRQUMzQyxJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ3RDLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDOUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUVEOzs7T0FHRztJQUNJLE1BQU07UUFDWCxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ2xELElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FDNUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLENBQ3BFLENBQUM7SUFDSixDQUFDOytHQXJKVSxxQkFBcUI7bUdBQXJCLHFCQUFxQixrU0NuQmxDLDYxRUFrRUEsK3FFRG5EWSxPQUFPLDJFQUFFLE9BQU8sb0ZBQUUsS0FBSyxtSEFBRSxJQUFJLDRGQUFFLFdBQVcsOG1CQUFFLGlCQUFpQjs7NEZBSTVELHFCQUFxQjtrQkFQakMsU0FBUzsrQkFDRSx1QkFBdUIsY0FDckIsSUFBSSxXQUNQLENBQUMsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsQ0FBQzs4QkFxRC9ELElBQUk7c0JBQVosS0FBSztnQkFPTixTQUFTO3NCQURSLEtBQUs7Z0JBUU4sc0JBQXNCO3NCQURyQixLQUFLO2dCQVFOLEtBQUs7c0JBREosS0FBSztnQkFRTixlQUFlO3NCQURkLEtBQUs7Z0JBT04sbUJBQW1CO3NCQURsQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgZmFYbWFyayxcbiAgZmFDaGVjayxcbiAgZmFDYXJldFVwLFxuICBmYUNhcmV0RG93bixcbn0gZnJvbSAnQGZvcnRhd2Vzb21lL3Byby1zb2xpZC1zdmctaWNvbnMnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBOZ0NsYXNzLCBOZ0ZvciwgTmdJZiwgTmdTdHlsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBGb250QXdlc29tZU1vZHVsZSB9IGZyb20gJ0Bmb3J0YXdlc29tZS9hbmd1bGFyLWZvbnRhd2Vzb21lJztcbmltcG9ydCB7IERyb3Bkb3duTGlzdEl0ZW0gfSBmcm9tICcuL21vZGVscy9kcm9wZG93bi1saXN0LWl0ZW0ubW9kZWwnO1xuaW1wb3J0IHsgSW5wdXQsIE91dHB1dCwgT25Jbml0LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItdGtzLWRyb3Bkb3duLWxpc3QnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdTdHlsZSwgTmdDbGFzcywgTmdGb3IsIE5nSWYsIEZvcm1zTW9kdWxlLCBGb250QXdlc29tZU1vZHVsZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9kcm9wZG93bi1saXN0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZHJvcGRvd24tbGlzdC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBEcm9wZG93bkxpc3RDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAvKipcbiAgICogU2VhcmNoIGZpZWxkIGlucHV0IHZhbHVlXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHB1YmxpYyBpbnB1dFZhbHVlID0gJyc7XG5cbiAgLyoqXG4gICAqIFNlbGVjdGVkIHZhbHVlXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHB1YmxpYyBzZWxlY3RlZFZhbHVlID0geyBWYWx1ZTogJycsIFZpZXdWYWx1ZTogJycgfTtcblxuICAvKipcbiAgICogRmlsdGVyZWQgZGF0YVxuICAgKiBAaWdub3JlXG4gICAqL1xuICBwdWJsaWMgZmlsdGVyZWREYXRhITogRHJvcGRvd25MaXN0SXRlbVtdO1xuXG4gIC8qKlxuICAgKiBJcyBkcm9wZG93biBsaXN0IHZpc2libGVcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgcHVibGljIGlzRHJvcERvd25MaXN0VmlzaWJsZSA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBJY29uXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHB1YmxpYyByZWFkb25seSBmYVhtYXJrID0gZmFYbWFyaztcbiAgLyoqXG4gICAqIEljb25cbiAgICogQGlnbm9yZVxuICAgKi9cbiAgcHVibGljIHJlYWRvbmx5IGZhQ2hlY2sgPSBmYUNoZWNrO1xuICAvKipcbiAgICogSWNvblxuICAgKiBAaWdub3JlXG4gICAqL1xuICBwdWJsaWMgcmVhZG9ubHkgZmFDYXJldFVwID0gZmFDYXJldFVwO1xuICAvKipcbiAgICogSWNvblxuICAgKiBAaWdub3JlXG4gICAqL1xuICBwdWJsaWMgcmVhZG9ubHkgZmFDYXJldERvd24gPSBmYUNhcmV0RG93bjtcblxuICAvKipcbiAgICogRGF0YSBmb3IgZHJvcGRvd24gbGlzdFxuICAgKi9cbiAgQElucHV0KCkgZGF0YSE6IERyb3Bkb3duTGlzdEl0ZW1bXTtcblxuICAvKipcbiAgICogRHJvcGRvd24gbGlzdCBoaW50IGxhYmVsXG4gICAqIEBkZWZhdWx0ICcnXG4gICAqL1xuICBASW5wdXQoKVxuICBoaW50TGFiZWwgPSAnJztcblxuICAvKipcbiAgICogRHJvcGRvd24gbGlzdCBzZWFyY2ggZmllbGQgcGxhY2Vob2xkZXJcbiAgICogQGRlZmF1bHQgJydcbiAgICovXG4gIEBJbnB1dCgpXG4gIHNlYXJjaEZpZWxkUGxhY2VIb2xkZXIgPSAnJztcblxuICAvKipcbiAgICogV2lkdGggb2YgdGhlIGRyb3Bkb3duIGxpc3RcbiAgICogQGRlZmF1bHQgMTNyZW1cbiAgICovXG4gIEBJbnB1dCgpXG4gIHdpZHRoPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBXaGF0IGJhY2tncm91bmQgY29sb3IgdG8gdXNlXG4gICAqIEBkZWZhdWx0ICNmZmZcbiAgICovXG4gIEBJbnB1dCgpXG4gIGJhY2tncm91bmRDb2xvcj86IHN0cmluZztcblxuICAvKipcbiAgICogU2VsZWN0ZWQgdmFsdWUgY2hhbmdlcyBoYW5kbGVyXG4gICAqL1xuICBAT3V0cHV0KClcbiAgc2VsZWN0ZWRWYWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqIENvbXBvbmVudCBsaWZlY3ljbGUgbWV0aG9kXG4gICAqL1xuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmxvYWREYXRhKCk7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKiBDb21wb25lbnQgbWV0aG9kIHRvIGxvYWQgZGF0YVxuICAgKi9cbiAgcHJpdmF0ZSBsb2FkRGF0YSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5kYXRhICYmIHRoaXMuZGF0YS5sZW5ndGggPiAwKSB7XG4gICAgICB0aGlzLmZpbHRlcmVkRGF0YSA9IHRoaXMuZGF0YS5zbGljZSgpO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqIENvbXBvbmVudCBtZXRob2QgdG8gaGFuZGxlIGNsaWNrIG9uIGRyb3Bkb3duIGxpc3RcbiAgICovXG4gIHB1YmxpYyBvbkNsaWNrRHJvcERvd25MaXN0KCk6IHZvaWQge1xuICAgIHRoaXMuaXNEcm9wRG93bkxpc3RWaXNpYmxlID0gIXRoaXMuaXNEcm9wRG93bkxpc3RWaXNpYmxlO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICogQ29tcG9uZW50IG1ldGhvZCB0byBoYW5kbGUgY2xpY2sgb24gY2xlYXIgc2VsZWN0ZWQgdmFsdWVcbiAgICovXG4gIHB1YmxpYyBvbkNsaWNrQ2xlYXJTZWxlY3RlZFZhbHVlKCk6IHZvaWQge1xuICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZS5WYWx1ZSA9ICcnO1xuICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZS5WaWV3VmFsdWUgPSAnJztcbiAgICB0aGlzLnNlbGVjdGVkVmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkVmFsdWUuVmFsdWUpO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICogQ29tcG9uZW50IG1ldGhvZCB0byBoYW5kbGUgY2xpY2sgb24gY2xlYXIgaW5wdXQgdmFsdWVcbiAgICovXG4gIHB1YmxpYyBvbkNsaWNrQ2xlYXJJbnB1dFZhbHVlKCk6IHZvaWQge1xuICAgIHRoaXMuaW5wdXRWYWx1ZSA9ICcnO1xuICAgIHRoaXMuZmlsdGVyKCk7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKiBDb21wb25lbnQgbWV0aG9kIHRvIGhhbmRsZSBjbGljayBvbiBkcm9wZG93biBsaXN0IGl0ZW1cbiAgICovXG4gIHB1YmxpYyBvbkNsaWNrTGlzdEl0ZW0oaXRlbTogRHJvcGRvd25MaXN0SXRlbSk6IHZvaWQge1xuICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZS5WYWx1ZSA9IGl0ZW0uVmFsdWU7XG4gICAgdGhpcy5zZWxlY3RlZFZhbHVlLlZpZXdWYWx1ZSA9IGl0ZW0uVmlld1ZhbHVlO1xuICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZUNoYW5nZS5lbWl0KGl0ZW0uVmFsdWUpO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICogQ29tcG9uZW50IG1ldGhvZCB0byBmaWx0ZXIgZGF0YVxuICAgKi9cbiAgcHVibGljIGZpbHRlcigpOiB2b2lkIHtcbiAgICBjb25zdCBmaWx0ZXJWYWx1ZSA9IHRoaXMuaW5wdXRWYWx1ZS50b0xvd2VyQ2FzZSgpO1xuICAgIHRoaXMuZmlsdGVyZWREYXRhID0gdGhpcy5kYXRhLmZpbHRlcihvcHRpb24gPT5cbiAgICAgIFN0cmluZyhvcHRpb24uVmlld1ZhbHVlKS50b0xvd2VyQ2FzZSgpLnRyaW0oKS5pbmNsdWRlcyhmaWx0ZXJWYWx1ZSlcbiAgICApO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZHJvcGRvd25fX2xpc3RcIj5cbiAgPGRpdlxuICAgIGNsYXNzPVwiZHJvcGRvd25fX2xpc3RfX3NlbGVjdGVkX19pdGVtX19maWVsZFwiXG4gICAgW25nU3R5bGVdPVwieyAnYmFja2dyb3VuZC1jb2xvcic6IGJhY2tncm91bmRDb2xvciwgd2lkdGg6IHdpZHRoIH1cIj5cbiAgICA8bGFiZWwgW2F0dHIuYXJpYS1sYWJlbF09XCJzZWxlY3RlZFZhbHVlLlZpZXdWYWx1ZVwiIGZvcj1cInNlbGVjdGVkVmFsdWVcIj5cbiAgICAgIDxpbnB1dFxuICAgICAgICBjbGFzcz1cImRyb3Bkb3duX19saXN0X19zZWxlY3RlZF9faXRlbVwiXG4gICAgICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICAgICAgcmVhZG9ubHk9XCJ0cnVlXCJcbiAgICAgICAgaWQ9XCJzZWxlY3RlZFZhbHVlXCJcbiAgICAgICAgbmFtZT1cInNlbGVjdGVkVmFsdWVcIlxuICAgICAgICBbdmFsdWVdPVwiXG4gICAgICAgICAgc2VsZWN0ZWRWYWx1ZS5WaWV3VmFsdWUgPyBzZWxlY3RlZFZhbHVlLlZpZXdWYWx1ZSA6IGhpbnRMYWJlbFxuICAgICAgICBcIiAvPlxuICAgIDwvbGFiZWw+XG4gICAgPGZhLWljb25cbiAgICAgIGNsYXNzPVwiZHJvcGRvd25fX2xpc3RfX2NsZWFyX19tYXJrX19pY29uXCJcbiAgICAgIFtpY29uXT1cImZhWG1hcmtcIlxuICAgICAgKm5nSWY9XCJzZWxlY3RlZFZhbHVlLlZpZXdWYWx1ZSAhPT0gJydcIlxuICAgICAgKGNsaWNrKT1cIm9uQ2xpY2tDbGVhclNlbGVjdGVkVmFsdWUoKVwiPjwvZmEtaWNvbj5cbiAgICA8ZmEtaWNvblxuICAgICAgY2xhc3M9XCJkcm9wZG93bl9fbGlzdF9fY2FyZXRfX2ljb25cIlxuICAgICAgW2ljb25dPVwiaXNEcm9wRG93bkxpc3RWaXNpYmxlID8gZmFDYXJldFVwIDogZmFDYXJldERvd25cIlxuICAgICAgKGNsaWNrKT1cIm9uQ2xpY2tEcm9wRG93bkxpc3QoKVwiPjwvZmEtaWNvbj5cbiAgPC9kaXY+XG4gIDxkaXZcbiAgICBbY2xhc3NdPVwiXG4gICAgICBpc0Ryb3BEb3duTGlzdFZpc2libGVcbiAgICAgICAgPyAnZHJvcGRvd25fX2xpc3RfX2NvbGxhcHNpYmxlLS1vcGVuIGRyb3Bkb3duX19saXN0X19jb2xsYXBzaWJsZSdcbiAgICAgICAgOiAnZHJvcGRvd25fX2xpc3RfX2NvbGxhcHNpYmxlJ1xuICAgIFwiXG4gICAgW25nU3R5bGVdPVwieyAnYmFja2dyb3VuZC1jb2xvcic6IGJhY2tncm91bmRDb2xvciwgd2lkdGg6IHdpZHRoIH1cIj5cbiAgICA8ZGl2IGNsYXNzPVwiZHJvcGRvd25fX2xpc3RfX3NlYXJjaF9fZmllbGRcIj5cbiAgICAgIDxpbnB1dFxuICAgICAgICBjbGFzcz1cImRyb3Bkb3duX19saXN0X19zZWFyY2hfX2ZpZWxkX19pbnB1dFwiXG4gICAgICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICAgICAgKGlucHV0KT1cImZpbHRlcigpXCJcbiAgICAgICAgKGZvY3VzKT1cImZpbHRlcigpXCJcbiAgICAgICAgWyhuZ01vZGVsKV09XCJpbnB1dFZhbHVlXCJcbiAgICAgICAgW3BsYWNlaG9sZGVyXT1cInNlYXJjaEZpZWxkUGxhY2VIb2xkZXJcIiAvPlxuICAgICAgPGZhLWljb25cbiAgICAgICAgY2xhc3M9XCJkcm9wZG93bl9fbGlzdF9fY2xlYXJfX21hcmtfX2ljb25cIlxuICAgICAgICBbaWNvbl09XCJmYVhtYXJrXCJcbiAgICAgICAgKm5nSWY9XCJpbnB1dFZhbHVlICE9PSAnJ1wiXG4gICAgICAgIChjbGljayk9XCJvbkNsaWNrQ2xlYXJJbnB1dFZhbHVlKClcIj48L2ZhLWljb24+XG4gICAgPC9kaXY+XG4gICAgPHVsIGNsYXNzPVwiZHJvcGRvd25fX2xpc3RfX2l0ZW1zXCI+XG4gICAgICA8bGlcbiAgICAgICAgW25nQ2xhc3NdPVwiXG4gICAgICAgICAgZmlsdGVyZWRWYWx1ZS5WaWV3VmFsdWUgPT09IHNlbGVjdGVkVmFsdWUuVmlld1ZhbHVlXG4gICAgICAgICAgICA/ICdkcm9wZG93bl9fbGlzdF9faXRlbSBkcm9wZG93bl9fbGlzdF9faXRlbS0tc2VsZWN0ZWQnXG4gICAgICAgICAgICA6ICdkcm9wZG93bl9fbGlzdF9faXRlbSdcbiAgICAgICAgXCJcbiAgICAgICAgdGFiaW5kZXg9XCIwXCJcbiAgICAgICAgKGNsaWNrKT1cIm9uQ2xpY2tMaXN0SXRlbShmaWx0ZXJlZFZhbHVlKVwiXG4gICAgICAgICpuZ0Zvcj1cImxldCBmaWx0ZXJlZFZhbHVlIG9mIGZpbHRlcmVkRGF0YVwiXG4gICAgICAgIChrZXlkb3duLmVudGVyKT1cIm9uQ2xpY2tMaXN0SXRlbShmaWx0ZXJlZFZhbHVlKVwiPlxuICAgICAgICB7eyBmaWx0ZXJlZFZhbHVlLlZpZXdWYWx1ZSB9fVxuICAgICAgICA8ZmEtaWNvblxuICAgICAgICAgIGNsYXNzPVwiZHJvcGRvd25fX2xpc3RfX2l0ZW1fX2NoZWNrZWRfX2ljb25cIlxuICAgICAgICAgIFtpY29uXT1cImZhQ2hlY2tcIlxuICAgICAgICAgICpuZ0lmPVwiZmlsdGVyZWRWYWx1ZS5WaWV3VmFsdWUgPT09IHNlbGVjdGVkVmFsdWUuVmlld1ZhbHVlXCI+PC9mYS1pY29uPlxuICAgICAgPC9saT5cbiAgICA8L3VsPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19

package/esm2022/components/dropdown-list/models/dropdown-list-item.model.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbGlzdC1pdGVtLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGVzaWduLXN5c3RlbS9jb21wb25lbnRzL2Ryb3Bkb3duLWxpc3QvbW9kZWxzL2Ryb3Bkb3duLWxpc3QtaXRlbS5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueSAqL1xuZXhwb3J0IGludGVyZmFjZSBEcm9wZG93bkxpc3RJdGVtIHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgVmFsdWU6IGFueTtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgVmlld1ZhbHVlOiBhbnk7XG59XG4iXX0=

package/esm2022/components/dropdown-list/public-api.mjs

@@ -0,0 +1,3 @@
+export * from './dropdown-list.component';
+export * from './models/dropdown-list-item.model';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1zeXN0ZW0vY29tcG9uZW50cy9kcm9wZG93bi1saXN0L3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLG1DQUFtQyxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9kcm9wZG93bi1saXN0LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL21vZGVscy9kcm9wZG93bi1saXN0LWl0ZW0ubW9kZWwnXG4iXX0=

package/esm2022/components/dropdown-list/tekus-design-system-components-dropdown-list.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVrdXMtZGVzaWduLXN5c3RlbS1jb21wb25lbnRzLWRyb3Bkb3duLWxpc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvZHJvcGRvd24tbGlzdC90ZWt1cy1kZXNpZ24tc3lzdGVtLWNvbXBvbmVudHMtZHJvcGRvd24tbGlzdC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuIl19

package/esm2022/components/search-bar/search-bar.component.mjs

@@ -30,8 +30,8 @@ export class SearchBarComponent {
         this.inputValue = '';
         this.inputValueChange.emit('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchBarComponent, isStandalone: true, selector: "lib-tks-search-bar", inputs: { hintLabel: "hintLabel", backgroundColor: "backgroundColor" }, outputs: { inputValueChange: "inputValueChange" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: SearchBarComponent, isStandalone: true, selector: "lib-tks-search-bar", inputs: { hintLabel: "hintLabel", backgroundColor: "backgroundColor" }, outputs: { inputValueChange: "inputValueChange" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `<div
     class="search__bar"
     (mouseenter)="onMouseEnter()"
     [ngStyle]="{ 'background-color': backgroundColor }">
@@ -48,9 +48,9 @@ export class SearchBarComponent {
       *ngIf="inputValue !== ''"
       (click)="onInputClear()"></fa-icon>
     <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
-  </div>`, isInline: true, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__input:focus{width:13rem}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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"] }] }); }
+  </div>`, isInline: true, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__input:focus{width:13rem}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule], template: `<div
     class="search__bar"
@@ -69,7 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       *ngIf="inputValue !== ''"
       (click)="onInputClear()"></fa-icon>
     <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
-  </div>`, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__input:focus{width:13rem}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"] }]
+  </div>`, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__input:focus{width:13rem}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"] }]
         }], propDecorators: { searchInput: [{
                 type: ViewChild,
                 args: ['searchInput', { static: false }]
@@ -80,4 +80,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], inputValueChange: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvc2VhcmNoLWJhci9zZWFyY2gtYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEVBQ1QsU0FBUyxFQUVULFlBQVksR0FDYixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDekQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE9BQU8sRUFBRSxNQUFNLGtDQUFrQyxDQUFDOzs7O0FBMEI5RSxNQUFNLE9BQU8sa0JBQWtCO0lBeEIvQjtRQXlCUyxlQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ1AsWUFBTyxHQUFHLE9BQU8sQ0FBQztRQUNsQixzQkFBaUIsR0FBRyxpQkFBaUIsQ0FBQztRQUl0RDs7V0FFRztRQUVILGNBQVMsR0FBRyxFQUFFLENBQUM7UUFRZjs7V0FFRztRQUVILHFCQUFnQixHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0FjL0M7SUFaUSxhQUFhO1FBQ2xCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQzlDLENBQUM7SUFFTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ3pDLENBQUM7SUFFTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxVQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDakMsQ0FBQzsrR0FwQ1Usa0JBQWtCO21HQUFsQixrQkFBa0IscVRBcEJuQjs7Ozs7Ozs7Ozs7Ozs7Ozs7U0FpQkgsNHRCQWxCRyxJQUFJLDZGQUFXLE9BQU8sMEVBQUUsV0FBVyw4bUJBQUUsaUJBQWlCOzs0RkFxQnJELGtCQUFrQjtrQkF4QjlCLFNBQVM7K0JBQ0Usb0JBQW9CLGNBQ2xCLElBQUksV0FDUCxDQUFDLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsQ0FBQyxZQUN2RDs7Ozs7Ozs7Ozs7Ozs7Ozs7U0FpQkg7OEJBUXNDLFdBQVc7c0JBQXZELFNBQVM7dUJBQUMsYUFBYSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTtnQkFNM0MsU0FBUztzQkFEUixLQUFLO2dCQU9OLGVBQWU7c0JBRGQsS0FBSztnQkFPTixnQkFBZ0I7c0JBRGYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIElucHV0LFxuICBPdXRwdXQsXG4gIENvbXBvbmVudCxcbiAgVmlld0NoaWxkLFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBOZ0NsYXNzLCBOZ1N0eWxlLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEZvbnRBd2Vzb21lTW9kdWxlIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2FuZ3VsYXItZm9udGF3ZXNvbWUnO1xuaW1wb3J0IHsgZmFNYWduaWZ5aW5nR2xhc3MsIGZhWG1hcmsgfSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXNvbGlkLXN2Zy1pY29ucyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi10a3Mtc2VhcmNoLWJhcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0lmLCBOZ0NsYXNzLCBOZ1N0eWxlLCBGb3Jtc01vZHVsZSwgRm9udEF3ZXNvbWVNb2R1bGVdLFxuICB0ZW1wbGF0ZTogYDxkaXZcbiAgICBjbGFzcz1cInNlYXJjaF9fYmFyXCJcbiAgICAobW91c2VlbnRlcik9XCJvbk1vdXNlRW50ZXIoKVwiXG4gICAgW25nU3R5bGVdPVwieyAnYmFja2dyb3VuZC1jb2xvcic6IGJhY2tncm91bmRDb2xvciB9XCI+XG4gICAgPGlucHV0XG4gICAgICBjbGFzcz1cInNlYXJjaF9fYmFyX19pbnB1dFwiXG4gICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAjc2VhcmNoSW5wdXRcbiAgICAgIFsobmdNb2RlbCldPVwiaW5wdXRWYWx1ZVwiXG4gICAgICBbcGxhY2Vob2xkZXJdPVwiaGludExhYmVsXCJcbiAgICAgIChpbnB1dCk9XCJvbklucHV0Q2hhbmdlKClcIiAvPlxuICAgIDxmYS1pY29uXG4gICAgICBjbGFzcz1cInNlYXJjaF9fYmFyX19jbGVhcl9fbWFya19faWNvblwiXG4gICAgICBbaWNvbl09XCJmYVhtYXJrXCJcbiAgICAgICpuZ0lmPVwiaW5wdXRWYWx1ZSAhPT0gJydcIlxuICAgICAgKGNsaWNrKT1cIm9uSW5wdXRDbGVhcigpXCI+PC9mYS1pY29uPlxuICAgIDxmYS1pY29uIFtpY29uXT1cImZhTWFnbmlmeWluZ0dsYXNzXCI+PC9mYS1pY29uPlxuICA8L2Rpdj5gLFxuICBzdHlsZVVybHM6IFsnLi9zZWFyY2gtYmFyLmNvbXBvbmVudC5jc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgU2VhcmNoQmFyQ29tcG9uZW50IHtcbiAgcHVibGljIGlucHV0VmFsdWUgPSAnJztcbiAgcHVibGljIHJlYWRvbmx5IGZhWG1hcmsgPSBmYVhtYXJrO1xuICBwdWJsaWMgcmVhZG9ubHkgZmFNYWduaWZ5aW5nR2xhc3MgPSBmYU1hZ25pZnlpbmdHbGFzcztcblxuICBAVmlld0NoaWxkKCdzZWFyY2hJbnB1dCcsIHsgc3RhdGljOiBmYWxzZSB9KSBzZWFyY2hJbnB1dCE6IEVsZW1lbnRSZWY7XG5cbiAgLyoqXG4gICAqIFNlYXJjaCBiYXIgaGludCBsYWJlbFxuICAgKi9cbiAgQElucHV0KClcbiAgaGludExhYmVsID0gJyc7XG5cbiAgLyoqXG4gICAqIFdoYXQgYmFja2dyb3VuZCBjb2xvciB0byB1c2VcbiAgICovXG4gIEBJbnB1dCgpXG4gIGJhY2tncm91bmRDb2xvcj86IHN0cmluZztcblxuICAvKipcbiAgICogSW5wdXQgY2hhbmdlcyBoYW5kbGVyXG4gICAqL1xuICBAT3V0cHV0KClcbiAgaW5wdXRWYWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIHB1YmxpYyBvbklucHV0Q2hhbmdlKCk6IHZvaWQge1xuICAgIHRoaXMuaW5wdXRWYWx1ZUNoYW5nZS5lbWl0KHRoaXMuaW5wdXRWYWx1ZSk7XG4gIH1cblxuICBwdWJsaWMgb25Nb3VzZUVudGVyKCk6IHZvaWQge1xuICAgIHRoaXMuc2VhcmNoSW5wdXQubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICB9XG5cbiAgcHVibGljIG9uSW5wdXRDbGVhcigpIHtcbiAgICB0aGlzLmlucHV0VmFsdWUgPSAnJztcbiAgICB0aGlzLmlucHV0VmFsdWVDaGFuZ2UuZW1pdCgnJyk7XG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tc3lzdGVtL2NvbXBvbmVudHMvc2VhcmNoLWJhci9zZWFyY2gtYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEVBQ1QsU0FBUyxFQUVULFlBQVksR0FDYixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDekQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE9BQU8sRUFBRSxNQUFNLGtDQUFrQyxDQUFDOzs7O0FBMEI5RSxNQUFNLE9BQU8sa0JBQWtCO0lBeEIvQjtRQXlCUyxlQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ1AsWUFBTyxHQUFHLE9BQU8sQ0FBQztRQUNsQixzQkFBaUIsR0FBRyxpQkFBaUIsQ0FBQztRQUl0RDs7V0FFRztRQUVILGNBQVMsR0FBRyxFQUFFLENBQUM7UUFRZjs7V0FFRztRQUVILHFCQUFnQixHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0FjL0M7SUFaUSxhQUFhO1FBQ2xCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQzlDLENBQUM7SUFFTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ3pDLENBQUM7SUFFTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxVQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDakMsQ0FBQzsrR0FwQ1Usa0JBQWtCO21HQUFsQixrQkFBa0IscVRBcEJuQjs7Ozs7Ozs7Ozs7Ozs7Ozs7U0FpQkgscXNCQWxCRyxJQUFJLDZGQUFXLE9BQU8sMEVBQUUsV0FBVyw4bUJBQUUsaUJBQWlCOzs0RkFxQnJELGtCQUFrQjtrQkF4QjlCLFNBQVM7K0JBQ0Usb0JBQW9CLGNBQ2xCLElBQUksV0FDUCxDQUFDLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsQ0FBQyxZQUN2RDs7Ozs7Ozs7Ozs7Ozs7Ozs7U0FpQkg7OEJBUXNDLFdBQVc7c0JBQXZELFNBQVM7dUJBQUMsYUFBYSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTtnQkFNM0MsU0FBUztzQkFEUixLQUFLO2dCQU9OLGVBQWU7c0JBRGQsS0FBSztnQkFPTixnQkFBZ0I7c0JBRGYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIElucHV0LFxuICBPdXRwdXQsXG4gIENvbXBvbmVudCxcbiAgVmlld0NoaWxkLFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBOZ0NsYXNzLCBOZ1N0eWxlLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEZvbnRBd2Vzb21lTW9kdWxlIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2FuZ3VsYXItZm9udGF3ZXNvbWUnO1xuaW1wb3J0IHsgZmFNYWduaWZ5aW5nR2xhc3MsIGZhWG1hcmsgfSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXNvbGlkLXN2Zy1pY29ucyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi10a3Mtc2VhcmNoLWJhcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0lmLCBOZ0NsYXNzLCBOZ1N0eWxlLCBGb3Jtc01vZHVsZSwgRm9udEF3ZXNvbWVNb2R1bGVdLFxuICB0ZW1wbGF0ZTogYDxkaXZcbiAgICBjbGFzcz1cInNlYXJjaF9fYmFyXCJcbiAgICAobW91c2VlbnRlcik9XCJvbk1vdXNlRW50ZXIoKVwiXG4gICAgW25nU3R5bGVdPVwieyAnYmFja2dyb3VuZC1jb2xvcic6IGJhY2tncm91bmRDb2xvciB9XCI+XG4gICAgPGlucHV0XG4gICAgICBjbGFzcz1cInNlYXJjaF9fYmFyX19pbnB1dFwiXG4gICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAjc2VhcmNoSW5wdXRcbiAgICAgIFsobmdNb2RlbCldPVwiaW5wdXRWYWx1ZVwiXG4gICAgICBbcGxhY2Vob2xkZXJdPVwiaGludExhYmVsXCJcbiAgICAgIChpbnB1dCk9XCJvbklucHV0Q2hhbmdlKClcIiAvPlxuICAgIDxmYS1pY29uXG4gICAgICBjbGFzcz1cInNlYXJjaF9fYmFyX19jbGVhcl9fbWFya19faWNvblwiXG4gICAgICBbaWNvbl09XCJmYVhtYXJrXCJcbiAgICAgICpuZ0lmPVwiaW5wdXRWYWx1ZSAhPT0gJydcIlxuICAgICAgKGNsaWNrKT1cIm9uSW5wdXRDbGVhcigpXCI+PC9mYS1pY29uPlxuICAgIDxmYS1pY29uIFtpY29uXT1cImZhTWFnbmlmeWluZ0dsYXNzXCI+PC9mYS1pY29uPlxuICA8L2Rpdj5gLFxuICBzdHlsZVVybHM6IFsnLi9zZWFyY2gtYmFyLmNvbXBvbmVudC5jc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgU2VhcmNoQmFyQ29tcG9uZW50IHtcbiAgcHVibGljIGlucHV0VmFsdWUgPSAnJztcbiAgcHVibGljIHJlYWRvbmx5IGZhWG1hcmsgPSBmYVhtYXJrO1xuICBwdWJsaWMgcmVhZG9ubHkgZmFNYWduaWZ5aW5nR2xhc3MgPSBmYU1hZ25pZnlpbmdHbGFzcztcblxuICBAVmlld0NoaWxkKCdzZWFyY2hJbnB1dCcsIHsgc3RhdGljOiBmYWxzZSB9KSBzZWFyY2hJbnB1dCE6IEVsZW1lbnRSZWY7XG5cbiAgLyoqXG4gICAqIFNlYXJjaCBiYXIgaGludCBsYWJlbFxuICAgKi9cbiAgQElucHV0KClcbiAgaGludExhYmVsID0gJyc7XG5cbiAgLyoqXG4gICAqIFdoYXQgYmFja2dyb3VuZCBjb2xvciB0byB1c2VcbiAgICovXG4gIEBJbnB1dCgpXG4gIGJhY2tncm91bmRDb2xvcj86IHN0cmluZztcblxuICAvKipcbiAgICogSW5wdXQgY2hhbmdlcyBoYW5kbGVyXG4gICAqL1xuICBAT3V0cHV0KClcbiAgaW5wdXRWYWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIHB1YmxpYyBvbklucHV0Q2hhbmdlKCk6IHZvaWQge1xuICAgIHRoaXMuaW5wdXRWYWx1ZUNoYW5nZS5lbWl0KHRoaXMuaW5wdXRWYWx1ZSk7XG4gIH1cblxuICBwdWJsaWMgb25Nb3VzZUVudGVyKCk6IHZvaWQge1xuICAgIHRoaXMuc2VhcmNoSW5wdXQubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICB9XG5cbiAgcHVibGljIG9uSW5wdXRDbGVhcigpIHtcbiAgICB0aGlzLmlucHV0VmFsdWUgPSAnJztcbiAgICB0aGlzLmlucHV0VmFsdWVDaGFuZ2UuZW1pdCgnJyk7XG4gIH1cbn1cbiJdfQ==

package/fesm2022/tekus-design-system-components-dropdown-list.mjs

@@ -0,0 +1,144 @@
+import { faXmark, faCheck, faCaretUp, faCaretDown } from '@fortawesome/pro-solid-svg-icons';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { NgStyle, NgClass, NgFor, NgIf } from '@angular/common';
+import * as i2 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output } from '@angular/core';
+
+class DropdownListComponent {
+    constructor() {
+        /**
+         * Search field input value
+         * @ignore
+         */
+        this.inputValue = '';
+        /**
+         * Selected value
+         * @ignore
+         */
+        this.selectedValue = { Value: '', ViewValue: '' };
+        /**
+         * Is dropdown list visible
+         * @ignore
+         */
+        this.isDropDownListVisible = false;
+        /**
+         * Icon
+         * @ignore
+         */
+        this.faXmark = faXmark;
+        /**
+         * Icon
+         * @ignore
+         */
+        this.faCheck = faCheck;
+        /**
+         * Icon
+         * @ignore
+         */
+        this.faCaretUp = faCaretUp;
+        /**
+         * Icon
+         * @ignore
+         */
+        this.faCaretDown = faCaretDown;
+        /**
+         * Dropdown list hint label
+         * @default ''
+         */
+        this.hintLabel = '';
+        /**
+         * Dropdown list search field placeholder
+         * @default ''
+         */
+        this.searchFieldPlaceHolder = '';
+        /**
+         * Selected value changes handler
+         */
+        this.selectedValueChange = new EventEmitter();
+    }
+    /**
+     * @ignore
+     * Component lifecycle method
+     */
+    ngOnInit() {
+        this.loadData();
+    }
+    /**
+     * @ignore
+     * Component method to load data
+     */
+    loadData() {
+        if (this.data && this.data.length > 0) {
+            this.filteredData = this.data.slice();
+        }
+    }
+    /**
+     * @ignore
+     * Component method to handle click on dropdown list
+     */
+    onClickDropDownList() {
+        this.isDropDownListVisible = !this.isDropDownListVisible;
+    }
+    /**
+     * @ignore
+     * Component method to handle click on clear selected value
+     */
+    onClickClearSelectedValue() {
+        this.selectedValue.Value = '';
+        this.selectedValue.ViewValue = '';
+        this.selectedValueChange.emit(this.selectedValue.Value);
+    }
+    /**
+     * @ignore
+     * Component method to handle click on clear input value
+     */
+    onClickClearInputValue() {
+        this.inputValue = '';
+        this.filter();
+    }
+    /**
+     * @ignore
+     * Component method to handle click on dropdown list item
+     */
+    onClickListItem(item) {
+        this.selectedValue.Value = item.Value;
+        this.selectedValue.ViewValue = item.ViewValue;
+        this.selectedValueChange.emit(item.Value);
+    }
+    /**
+     * @ignore
+     * Component method to filter data
+     */
+    filter() {
+        const filterValue = this.inputValue.toLowerCase();
+        this.filteredData = this.data.filter(option => String(option.ViewValue).toLowerCase().trim().includes(filterValue));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", 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: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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DropdownListComponent, decorators: [{
+            type: Component,
+            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: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"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], hintLabel: [{
+                type: Input
+            }], searchFieldPlaceHolder: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], selectedValueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownListComponent };
+//# sourceMappingURL=tekus-design-system-components-dropdown-list.mjs.map

package/fesm2022/tekus-design-system-components-dropdown-list.mjs.map

@@ -0,0 +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/fesm2022/tekus-design-system-components-search-bar.mjs

@@ -31,8 +31,8 @@ class SearchBarComponent {
         this.inputValue = '';
         this.inputValueChange.emit('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchBarComponent, isStandalone: true, selector: "lib-tks-search-bar", inputs: { hintLabel: "hintLabel", backgroundColor: "backgroundColor" }, outputs: { inputValueChange: "inputValueChange" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `<div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: SearchBarComponent, isStandalone: true, selector: "lib-tks-search-bar", inputs: { hintLabel: "hintLabel", backgroundColor: "backgroundColor" }, outputs: { inputValueChange: "inputValueChange" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `<div
     class="search__bar"
     (mouseenter)="onMouseEnter()"
     [ngStyle]="{ 'background-color': backgroundColor }">
@@ -49,9 +49,9 @@ class SearchBarComponent {
       *ngIf="inputValue !== ''"
       (click)="onInputClear()"></fa-icon>
     <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
-  </div>`, isInline: true, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__input:focus{width:13rem}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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"] }] }); }
+  </div>`, isInline: true, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__input:focus{width:13rem}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-tks-search-bar', standalone: true, imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule], template: `<div
     class="search__bar"
@@ -70,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       *ngIf="inputValue !== ''"
       (click)="onInputClear()"></fa-icon>
     <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
-  </div>`, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__input:focus{width:13rem}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"] }]
+  </div>`, styles: ["*{margin:0;padding:0;box-sizing:border-box}.search__bar{display:flex;cursor:pointer;max-width:15rem;padding:.3rem 0;width:fit-content;align-items:center;justify-content:center;background-color:#fff}.search__bar:hover{border-bottom:2px solid black}.search__bar:hover .search__bar__input{width:13rem}.search__bar__input{width:0;border:none;outline:none;font-weight:500;background:transparent;transition:all ease-in-out .5s;font-size:clamp(.8rem,.675rem + .333vw,.975rem)}.search__bar__input:focus{width:13rem}.search__bar__clear__mark__icon{margin:0 .5rem}.search__bar__clear__mark__icon:hover{scale:1.3;transition:all ease-in-out .1s}\n"] }]
         }], propDecorators: { searchInput: [{
                 type: ViewChild,
                 args: ['searchInput', { static: false }]

package/fesm2022/tekus-design-system-components-search-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-search-bar.mjs","sources":["../../../projects/design-system/components/search-bar/search-bar.component.ts","../../../projects/design-system/components/search-bar/tekus-design-system-components-search-bar.ts"],"sourcesContent":["import {\n  Input,\n  Output,\n  Component,\n  ViewChild,\n  ElementRef,\n  EventEmitter,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgClass, NgStyle, NgIf } from '@angular/common';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';\n\n@Component({\n  selector: 'lib-tks-search-bar',\n  standalone: true,\n  imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule],\n  template: `<div\n    class=\"search__bar\"\n    (mouseenter)=\"onMouseEnter()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor }\">\n    <input\n      class=\"search__bar__input\"\n      type=\"text\"\n      #searchInput\n      [(ngModel)]=\"inputValue\"\n      [placeholder]=\"hintLabel\"\n      (input)=\"onInputChange()\" />\n    <fa-icon\n      class=\"search__bar__clear__mark__icon\"\n      [icon]=\"faXmark\"\n      *ngIf=\"inputValue !== ''\"\n      (click)=\"onInputClear()\"></fa-icon>\n    <fa-icon [icon]=\"faMagnifyingGlass\"></fa-icon>\n  </div>`,\n  styleUrls: ['./search-bar.component.css'],\n})\nexport class SearchBarComponent {\n  public inputValue = '';\n  public readonly faXmark = faXmark;\n  public readonly faMagnifyingGlass = faMagnifyingGlass;\n\n  @ViewChild('searchInput', { static: false }) searchInput!: ElementRef;\n\n  /**\n   * Search bar hint label\n   */\n  @Input()\n  hintLabel = '';\n\n  /**\n   * What background color to use\n   */\n  @Input()\n  backgroundColor?: string;\n\n  /**\n   * Input changes handler\n   */\n  @Output()\n  inputValueChange = new EventEmitter<string>();\n\n  public onInputChange(): void {\n    this.inputValueChange.emit(this.inputValue);\n  }\n\n  public onMouseEnter(): void {\n    this.searchInput.nativeElement.focus();\n  }\n\n  public onInputClear() {\n    this.inputValue = '';\n    this.inputValueChange.emit('');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-search-bar.mjs","sources":["../../../projects/design-system/components/search-bar/search-bar.component.ts","../../../projects/design-system/components/search-bar/tekus-design-system-components-search-bar.ts"],"sourcesContent":["import {\n  Input,\n  Output,\n  Component,\n  ViewChild,\n  ElementRef,\n  EventEmitter,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgClass, NgStyle, NgIf } from '@angular/common';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { faMagnifyingGlass, faXmark } from '@fortawesome/pro-solid-svg-icons';\n\n@Component({\n  selector: 'lib-tks-search-bar',\n  standalone: true,\n  imports: [NgIf, NgClass, NgStyle, FormsModule, FontAwesomeModule],\n  template: `<div\n    class=\"search__bar\"\n    (mouseenter)=\"onMouseEnter()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor }\">\n    <input\n      class=\"search__bar__input\"\n      type=\"text\"\n      #searchInput\n      [(ngModel)]=\"inputValue\"\n      [placeholder]=\"hintLabel\"\n      (input)=\"onInputChange()\" />\n    <fa-icon\n      class=\"search__bar__clear__mark__icon\"\n      [icon]=\"faXmark\"\n      *ngIf=\"inputValue !== ''\"\n      (click)=\"onInputClear()\"></fa-icon>\n    <fa-icon [icon]=\"faMagnifyingGlass\"></fa-icon>\n  </div>`,\n  styleUrls: ['./search-bar.component.css'],\n})\nexport class SearchBarComponent {\n  public inputValue = '';\n  public readonly faXmark = faXmark;\n  public readonly faMagnifyingGlass = faMagnifyingGlass;\n\n  @ViewChild('searchInput', { static: false }) searchInput!: ElementRef;\n\n  /**\n   * Search bar hint label\n   */\n  @Input()\n  hintLabel = '';\n\n  /**\n   * What background color to use\n   */\n  @Input()\n  backgroundColor?: string;\n\n  /**\n   * Input changes handler\n   */\n  @Output()\n  inputValueChange = new EventEmitter<string>();\n\n  public onInputChange(): void {\n    this.inputValueChange.emit(this.inputValue);\n  }\n\n  public onMouseEnter(): void {\n    this.searchInput.nativeElement.focus();\n  }\n\n  public onInputClear() {\n    this.inputValue = '';\n    this.inputValueChange.emit('');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "1.0.6",
+  "version": "2.0.0",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^16.2.0",
@@ -31,6 +31,12 @@
       "esm": "./esm2022/tekus-design-system.mjs",
       "default": "./fesm2022/tekus-design-system.mjs"
     },
+    "./components/dropdown-list": {
+      "types": "./components/dropdown-list/index.d.ts",
+      "esm2022": "./esm2022/components/dropdown-list/tekus-design-system-components-dropdown-list.mjs",
+      "esm": "./esm2022/components/dropdown-list/tekus-design-system-components-dropdown-list.mjs",
+      "default": "./fesm2022/tekus-design-system-components-dropdown-list.mjs"
+    },
     "./components/search-bar": {
       "types": "./components/search-bar/index.d.ts",
       "esm2022": "./esm2022/components/search-bar/tekus-design-system-components-search-bar.mjs",