@evotor-dev/ui-kit 7.4.2 → 7.4.4
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/esm2020/lib/components/evo-autocomplete/components/evo-autocomplete/evo-autocomplete.component.mjs +2 -2
- package/esm2020/lib/components/evo-dropdown/evo-dropdown.component.mjs +21 -7
- package/esm2020/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.mjs +2 -2
- package/fesm2015/evotor-dev-ui-kit.mjs +23 -9
- package/fesm2015/evotor-dev-ui-kit.mjs.map +1 -1
- package/fesm2020/evotor-dev-ui-kit.mjs +23 -9
- package/fesm2020/evotor-dev-ui-kit.mjs.map +1 -1
- package/lib/components/evo-dropdown/evo-dropdown.component.d.ts +5 -2
- package/package.json +1 -1
|
@@ -1790,10 +1790,10 @@ class EvoAutocompleteComponent {
|
|
|
1790
1790
|
}
|
|
1791
1791
|
}
|
|
1792
1792
|
EvoAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.NgControl }], target: i0.ɵɵFactoryTarget.Component });
|
|
1793
|
-
EvoAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoAutocompleteComponent, selector: "evo-autocomplete", inputs: { size: "size", isOpen: "isOpen", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", markFirst: "markFirst", placeholder: "placeholder", typeToSearchText: "typeToSearchText", addTagText: "addTagText", loadingText: "loadingText", clearAllText: "clearAllText", dropdownPosition: "dropdownPosition", appendTo: "appendTo", loading: "loading", closeOnSelect: "closeOnSelect", hideSelected: "hideSelected", selectOnTab: "selectOnTab", openOnEnter: "openOnEnter", maxSelectedItems: "maxSelectedItems", groupBy: "groupBy", groupValue: "groupValue", bufferAmount: "bufferAmount", virtualScroll: "virtualScroll", selectableGroup: "selectableGroup", selectableGroupAsModel: "selectableGroupAsModel", searchFn: "searchFn", clearOnBackspace: "clearOnBackspace", typeahead: "typeahead", multiple: "multiple", multipleInline: "multipleInline", addTag: "addTag", clearable: "clearable", errorsMessages: "errorsMessages", compareWith: "compareWith", _notFoundText: ["notFoundText", "_notFoundText"], editQuery: "editQuery", searchable: "searchable", setSelectbox: ["isSelectbox", "setSelectbox"], setTheme: ["theme", "setTheme"] }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd" }, queries: [{ propertyName: "labelTemp", first: true, predicate: ["labelTemp"], descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemp", first: true, predicate: ["multiLabelTemp"], descendants: true, read: TemplateRef }, { propertyName: "optionTemp", first: true, predicate: ["optionTemp"], descendants: true, read: TemplateRef }, { propertyName: "optgroupTemp", first: true, predicate: ["optgroupTemp"], descendants: true, read: TemplateRef }, { propertyName: "headerTemp", first: true, predicate: ["headerTemp"], descendants: true, read: TemplateRef }, { propertyName: "footerTemp", first: true, predicate: ["footerTemp"], descendants: true, read: TemplateRef }, { propertyName: "notFoundTemp", first: true, predicate: ["notFoundTemp"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<div class=\"evo-autocomplete\" [evoUiClass]=\"classes\">\n <ng-select\n [items]=\"items\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [markFirst]=\"markFirst\"\n [placeholder]=\"placeholder\"\n [notFoundText]=\"notFoundText\"\n [typeToSearchText]=\"typeToSearchText\"\n [addTagText]=\"addTagText\"\n [loadingText]=\"loadingText\"\n [clearAllText]=\"clearAllText\"\n [dropdownPosition]=\"dropdownPosition\"\n [appendTo]=\"appendTo\"\n [loading]=\"loading\"\n [closeOnSelect]=\"closeOnSelect\"\n [hideSelected]=\"hideSelected\"\n [selectOnTab]=\"selectOnTab\"\n [openOnEnter]=\"openOnEnter\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [virtualScroll]=\"virtualScroll\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [searchFn]=\"searchFn\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [typeahead]=\"typeahead\"\n [multiple]=\"multiple || multipleInline\"\n [addTag]=\"addTag\"\n [searchable]=\"searchable\"\n [clearable]=\"clearable\"\n [isOpen]=\"isOpen\"\n [editableSearchTerm]=\"editQuery\"\n [disabled]=\"control.disabled\"\n [compareWith]=\"compareWith\"\n [(ngModel)]=\"value\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openEvent.emit($event)\"\n (close)=\"closeEvent.emit($event)\"\n (search)=\"searchEvent.emit($event)\"\n (clear)=\"clearEvent.emit($event)\"\n (add)=\"addEvent.emit($event)\"\n (remove)=\"removeEvent.emit($event)\"\n (scroll)=\"scrollEvent.emit($event)\"\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n >\n <!-- Selected Item Template -->\n <ng-template *ngIf=\"labelTemp\" ng-label-tmp let-item=\"item\">\n <ng-template *ngTemplateOutlet=\"labelTemp; context: { item: item }\"></ng-template>\n </ng-template>\n\n <!-- Overall Label For All Selected Items Template -->\n <ng-template *ngIf=\"multiLabelTemp\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-template *ngTemplateOutlet=\"multiLabelTemp; context: { items: items, clear: clear }\"></ng-template>\n </ng-template>\n\n <!-- Options header template -->\n <ng-template *ngIf=\"headerTemp\" ng-header-tmp>\n <ng-template *ngTemplateOutlet=\"headerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n\n <!-- Option Template -->\n <ng-template\n *ngIf=\"optionTemp\"\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n let-search=\"searchTerm\"\n let-item$=\"item$\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionTemp; context: { item: item, index: index, searchTerm: search, item$: item$}\"\n ></ng-template>\n </ng-template>\n\n <ng-container *ngIf=\"multipleInline && !multiLabelTemp\">\n <ng-template ng-multi-label-tmp let-items=\"items\">\n <div class=\"ng-value\">{{ getMultipleInlineItemsLabels(items) }}</div>\n </ng-template>\n </ng-container>\n\n <!-- Options group template -->\n <ng-template *ngIf=\"optgroupTemp\" ng-optgroup-tmp let-item=\"item\" let-index=\"index\">\n <ng-template *ngTemplateOutlet=\"optgroupTemp; context: { item: item, index: index }\"></ng-template>\n </ng-template>\n\n <!-- Search Text Templates -->\n <ng-template ng-typetosearch-tmp>\n <div *ngIf=\"typeToSearchText\" class=\"ng-option disabled\">{{typeToSearchText}}</div>\n </ng-template>\n <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n <div class=\"ng-option disabled\">{{loadingText}}</div>\n </ng-template>\n\n <ng-container *ngIf=\"notFoundTemp; else defaultNotFoundTemplate\">\n <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n <ng-template *ngTemplateOutlet=\"notFoundTemp; context: {searchTerm: searchTerm}\"></ng-template>\n </ng-template>\n </ng-container>\n <ng-template #defaultNotFoundTemplate>\n <ng-template ng-notfound-tmp>\n <div class=\"ng-option disabled\">{{notFoundText}}</div>\n </ng-template>\n </ng-template>\n\n <!-- Options footer template -->\n <ng-template *ngIf=\"footerTemp\" ng-footer-tmp>\n <ng-template *ngTemplateOutlet=\"footerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n </ng-select>\n <evo-control-error\n *ngIf=\"hasErrors && errorsMessages\"\n [errors]=\"control.errors\"\n [errorsMessages]=\"errorsMessages\"\n ></evo-control-error>\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}evo-autocomplete{--evo-dropdown-max-height: 310px;--evo-autocomplete-option-overflow: hidden;--evo-autocomplete-option-text-overflow: ellipsis;--evo-autocomplete-option-white-space: nowrap;--evo-autocomplete-optgroup-overflow: hidden;--evo-autocomplete-optgroup-text-overflow: ellipsis;--evo-autocomplete-optgroup-white-space: nowrap;--evo-autocomplete-arrow-icon-color: #212121;--evo-autocomplete-option-v-padding: 12px;--evo-autocomplete-option-h-padding: 16px;--evo-autocomplete-panel-border-radius: 8px;--evo-autocomplete-panel-shadow: 0px 8px 10px rgba(0, 0, 0, .14), 0px 3px 14px rgba(0, 0, 0, .12)}evo-autocomplete .evo-autocomplete{--inner-input-padding-right: 40px;position:relative;display:block}evo-autocomplete .evo-autocomplete ng-select[ng-reflect-clearable=false]{--inner-input-padding-right: 16px}evo-autocomplete .evo-autocomplete__icon{display:block;flex:0 0 24px;width:24px;height:24px}evo-autocomplete .evo-autocomplete__icon_clear{position:absolute;top:12px;right:12px;z-index:1001;cursor:pointer;transition:fill .3s;fill:#91b1b8}evo-autocomplete .evo-autocomplete__icon_clear:hover{fill:#a7c1c6}evo-autocomplete .evo-autocomplete__icon_clear:active{fill:#829fa6}evo-autocomplete .evo-autocomplete__icon_dropdown{fill:#212121}evo-autocomplete .evo-autocomplete .ng-input{padding:0 var(--inner-input-padding-right) 0 16px}evo-autocomplete .evo-autocomplete .ng-placeholder{color:#9b9b9b}evo-autocomplete .evo-autocomplete .ng-value-container{align-items:center;min-width:0;overflow:hidden}evo-autocomplete .evo-autocomplete .ng-value{overflow:hidden;text-overflow:ellipsis}evo-autocomplete .evo-autocomplete .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;position:relative;align-items:center;margin:0;padding:0 12px 0 16px;line-height:var(--evo-input-height)}evo-autocomplete .evo-autocomplete .ng-select-container.ng-has-value .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center;color:#91b1b8;transition:color .3s}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:hover{color:#a7c1c6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:active{color:#829fa6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched{display:block;cursor:pointer}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched svg{display:block;fill:currentColor}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader{display:flex;justify-content:center;align-items:center;width:16px;height:100%;margin:0 0 0 8px;border:none;transform:none;animation:none}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader:before{content:\"\";display:block;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}evo-autocomplete .evo-autocomplete .ng-optgroup{font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600}evo-autocomplete .evo-autocomplete .ng-optgroup evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete .ng-option{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer}evo-autocomplete .evo-autocomplete .ng-option evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-option.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-option.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-option.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single:not(.ng-select-focused) .ng-select-container .ng-value-container .ng-value{visibility:visible}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single.ng-select-focused .ng-select-container .ng-value-container .ng-value{visibility:var(--evo-autocomplete-option-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel{z-index:3001;display:block;max-height:var(--evo-dropdown-max-height, 310px);margin:4px 0;background-color:#fff;border-radius:var(--evo-autocomplete-panel-border-radius);box-shadow:var(--evo-autocomplete-panel-shadow);overflow:hidden}evo-autocomplete .evo-autocomplete .ng-dropdown-panel.ng-select-top{bottom:100%}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items{max-height:inherit}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{overflow:var(--evo-autocomplete-option-overflow);white-space:var(--evo-autocomplete-option-white-space);text-overflow:var(--evo-autocomplete-option-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{overflow:var(--evo-autocomplete-optgroup-overflow);white-space:var(--evo-autocomplete-optgroup-white-space);text-overflow:var(--evo-autocomplete-optgroup-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:16px;background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{background-color:#c6c6c6;border:6px solid #FFFFFF;border-radius:16px}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-button{display:none}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper .ng-arrow{display:block;width:24px;height:24px;background-color:var(--evo-autocomplete-arrow-icon-color);mask-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z%22 %2F%3E%3C%2Fsvg%3E\");background-position:center;transition:transform .25s}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select.ng-select-opened .ng-arrow{transform:rotate(180deg);transform-origin:center center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused{z-index:11}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-select-container{box-shadow:0 0 2px #91b1b8}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-clearable .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-value-icon{display:none}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-input{display:none}evo-autocomplete .evo-autocomplete .ng-select.ng-select-focused .ng-select-container,evo-autocomplete .evo-autocomplete .ng-select.ng-select-opened .ng-select-container{border:solid 1px #74706F}evo-autocomplete .evo-autocomplete.evo-autocomplete_touched.evo-autocomplete_invalid .ng-select:not(.ng-select-opened) .ng-select-container{border-color:#ff1817!important}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container .ng-arrow{opacity:.3}evo-autocomplete .evo-autocomplete .ng-input>input[readonly]{-webkit-user-select:auto!important;user-select:auto!important}\n"], components: [{ type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: EvoControlErrorComponent, selector: "evo-control-error", inputs: ["errors", "errorsMessages", "showCount"] }], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { type: i2.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { type: i2.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1793
|
+
EvoAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoAutocompleteComponent, selector: "evo-autocomplete", inputs: { size: "size", isOpen: "isOpen", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", markFirst: "markFirst", placeholder: "placeholder", typeToSearchText: "typeToSearchText", addTagText: "addTagText", loadingText: "loadingText", clearAllText: "clearAllText", dropdownPosition: "dropdownPosition", appendTo: "appendTo", loading: "loading", closeOnSelect: "closeOnSelect", hideSelected: "hideSelected", selectOnTab: "selectOnTab", openOnEnter: "openOnEnter", maxSelectedItems: "maxSelectedItems", groupBy: "groupBy", groupValue: "groupValue", bufferAmount: "bufferAmount", virtualScroll: "virtualScroll", selectableGroup: "selectableGroup", selectableGroupAsModel: "selectableGroupAsModel", searchFn: "searchFn", clearOnBackspace: "clearOnBackspace", typeahead: "typeahead", multiple: "multiple", multipleInline: "multipleInline", addTag: "addTag", clearable: "clearable", errorsMessages: "errorsMessages", compareWith: "compareWith", _notFoundText: ["notFoundText", "_notFoundText"], editQuery: "editQuery", searchable: "searchable", setSelectbox: ["isSelectbox", "setSelectbox"], setTheme: ["theme", "setTheme"] }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd" }, queries: [{ propertyName: "labelTemp", first: true, predicate: ["labelTemp"], descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemp", first: true, predicate: ["multiLabelTemp"], descendants: true, read: TemplateRef }, { propertyName: "optionTemp", first: true, predicate: ["optionTemp"], descendants: true, read: TemplateRef }, { propertyName: "optgroupTemp", first: true, predicate: ["optgroupTemp"], descendants: true, read: TemplateRef }, { propertyName: "headerTemp", first: true, predicate: ["headerTemp"], descendants: true, read: TemplateRef }, { propertyName: "footerTemp", first: true, predicate: ["footerTemp"], descendants: true, read: TemplateRef }, { propertyName: "notFoundTemp", first: true, predicate: ["notFoundTemp"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<div class=\"evo-autocomplete\" [evoUiClass]=\"classes\">\n <ng-select\n [items]=\"items\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [markFirst]=\"markFirst\"\n [placeholder]=\"placeholder\"\n [notFoundText]=\"notFoundText\"\n [typeToSearchText]=\"typeToSearchText\"\n [addTagText]=\"addTagText\"\n [loadingText]=\"loadingText\"\n [clearAllText]=\"clearAllText\"\n [dropdownPosition]=\"dropdownPosition\"\n [appendTo]=\"appendTo\"\n [loading]=\"loading\"\n [closeOnSelect]=\"closeOnSelect\"\n [hideSelected]=\"hideSelected\"\n [selectOnTab]=\"selectOnTab\"\n [openOnEnter]=\"openOnEnter\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [virtualScroll]=\"virtualScroll\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [searchFn]=\"searchFn\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [typeahead]=\"typeahead\"\n [multiple]=\"multiple || multipleInline\"\n [addTag]=\"addTag\"\n [searchable]=\"searchable\"\n [clearable]=\"clearable\"\n [isOpen]=\"isOpen\"\n [editableSearchTerm]=\"editQuery\"\n [disabled]=\"control.disabled\"\n [compareWith]=\"compareWith\"\n [(ngModel)]=\"value\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openEvent.emit($event)\"\n (close)=\"closeEvent.emit($event)\"\n (search)=\"searchEvent.emit($event)\"\n (clear)=\"clearEvent.emit($event)\"\n (add)=\"addEvent.emit($event)\"\n (remove)=\"removeEvent.emit($event)\"\n (scroll)=\"scrollEvent.emit($event)\"\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n >\n <!-- Selected Item Template -->\n <ng-template *ngIf=\"labelTemp\" ng-label-tmp let-item=\"item\">\n <ng-template *ngTemplateOutlet=\"labelTemp; context: { item: item }\"></ng-template>\n </ng-template>\n\n <!-- Overall Label For All Selected Items Template -->\n <ng-template *ngIf=\"multiLabelTemp\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-template *ngTemplateOutlet=\"multiLabelTemp; context: { items: items, clear: clear }\"></ng-template>\n </ng-template>\n\n <!-- Options header template -->\n <ng-template *ngIf=\"headerTemp\" ng-header-tmp>\n <ng-template *ngTemplateOutlet=\"headerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n\n <!-- Option Template -->\n <ng-template\n *ngIf=\"optionTemp\"\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n let-search=\"searchTerm\"\n let-item$=\"item$\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionTemp; context: { item: item, index: index, searchTerm: search, item$: item$}\"\n ></ng-template>\n </ng-template>\n\n <ng-container *ngIf=\"multipleInline && !multiLabelTemp\">\n <ng-template ng-multi-label-tmp let-items=\"items\">\n <div class=\"ng-value\">{{ getMultipleInlineItemsLabels(items) }}</div>\n </ng-template>\n </ng-container>\n\n <!-- Options group template -->\n <ng-template *ngIf=\"optgroupTemp\" ng-optgroup-tmp let-item=\"item\" let-index=\"index\">\n <ng-template *ngTemplateOutlet=\"optgroupTemp; context: { item: item, index: index }\"></ng-template>\n </ng-template>\n\n <!-- Search Text Templates -->\n <ng-template ng-typetosearch-tmp>\n <div *ngIf=\"typeToSearchText\" class=\"ng-option disabled\">{{typeToSearchText}}</div>\n </ng-template>\n <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n <div class=\"ng-option disabled\">{{loadingText}}</div>\n </ng-template>\n\n <ng-container *ngIf=\"notFoundTemp; else defaultNotFoundTemplate\">\n <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n <ng-template *ngTemplateOutlet=\"notFoundTemp; context: {searchTerm: searchTerm}\"></ng-template>\n </ng-template>\n </ng-container>\n <ng-template #defaultNotFoundTemplate>\n <ng-template ng-notfound-tmp>\n <div class=\"ng-option disabled\">{{notFoundText}}</div>\n </ng-template>\n </ng-template>\n\n <!-- Options footer template -->\n <ng-template *ngIf=\"footerTemp\" ng-footer-tmp>\n <ng-template *ngTemplateOutlet=\"footerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n </ng-select>\n <evo-control-error\n *ngIf=\"hasErrors && errorsMessages\"\n [errors]=\"control.errors\"\n [errorsMessages]=\"errorsMessages\"\n ></evo-control-error>\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}evo-autocomplete{--evo-dropdown-max-height: 310px;--evo-autocomplete-option-overflow: hidden;--evo-autocomplete-option-text-overflow: ellipsis;--evo-autocomplete-option-white-space: nowrap;--evo-autocomplete-optgroup-overflow: hidden;--evo-autocomplete-optgroup-text-overflow: ellipsis;--evo-autocomplete-optgroup-white-space: nowrap;--evo-autocomplete-arrow-icon-color: #212121;--evo-autocomplete-option-v-padding: 12px;--evo-autocomplete-option-h-padding: 16px;--evo-autocomplete-panel-border-radius: 8px;--evo-autocomplete-panel-shadow: 0px 8px 10px rgba(0, 0, 0, .14), 0px 3px 14px rgba(0, 0, 0, .12)}evo-autocomplete .evo-autocomplete{--inner-input-padding-right: 40px;position:relative;display:block}evo-autocomplete .evo-autocomplete ng-select[ng-reflect-clearable=false]{--inner-input-padding-right: 16px}evo-autocomplete .evo-autocomplete__icon{display:block;flex:0 0 24px;width:24px;height:24px}evo-autocomplete .evo-autocomplete__icon_clear{position:absolute;top:12px;right:12px;z-index:1001;cursor:pointer;transition:fill .3s;fill:#91b1b8}evo-autocomplete .evo-autocomplete__icon_clear:hover{fill:#a7c1c6}evo-autocomplete .evo-autocomplete__icon_clear:active{fill:#829fa6}evo-autocomplete .evo-autocomplete__icon_dropdown{fill:#212121}evo-autocomplete .evo-autocomplete .ng-input{padding:0 var(--inner-input-padding-right) 0 16px}evo-autocomplete .evo-autocomplete .ng-placeholder{color:#9b9b9b}evo-autocomplete .evo-autocomplete .ng-value-container{align-items:center;min-width:0;overflow:hidden}evo-autocomplete .evo-autocomplete .ng-value{overflow:hidden;text-overflow:ellipsis}evo-autocomplete .evo-autocomplete .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;position:relative;align-items:center;margin:0;padding:0 12px 0 16px;line-height:var(--evo-input-height)}evo-autocomplete .evo-autocomplete .ng-select-container.ng-has-value .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center;color:#91b1b8;transition:color .3s}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:hover{color:#a7c1c6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:active{color:#829fa6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched{display:block;cursor:pointer}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched svg{display:block;fill:currentColor}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader{display:flex;justify-content:center;align-items:center;width:16px;height:100%;margin:0 0 0 8px;border:none;transform:none;animation:none}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader:before{content:\"\";display:block;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}evo-autocomplete .evo-autocomplete .ng-optgroup{font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600}evo-autocomplete .evo-autocomplete .ng-optgroup evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete .ng-option{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer}evo-autocomplete .evo-autocomplete .ng-option evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-option.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-option.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-option.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single:not(.ng-select-focused) .ng-select-container .ng-value-container .ng-value{visibility:visible}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single.ng-select-focused .ng-select-container .ng-value-container .ng-value{visibility:var(--evo-autocomplete-option-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel{z-index:3001;display:block;margin:4px 0;background-color:#fff;border-radius:var(--evo-autocomplete-panel-border-radius);box-shadow:var(--evo-autocomplete-panel-shadow);overflow:hidden}evo-autocomplete .evo-autocomplete .ng-dropdown-panel.ng-select-top{bottom:100%}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items{max-height:var(--evo-dropdown-max-height, 310px)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{overflow:var(--evo-autocomplete-option-overflow);white-space:var(--evo-autocomplete-option-white-space);text-overflow:var(--evo-autocomplete-option-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{overflow:var(--evo-autocomplete-optgroup-overflow);white-space:var(--evo-autocomplete-optgroup-white-space);text-overflow:var(--evo-autocomplete-optgroup-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:16px;background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{background-color:#c6c6c6;border:6px solid #FFFFFF;border-radius:16px}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-button{display:none}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper .ng-arrow{display:block;width:24px;height:24px;background-color:var(--evo-autocomplete-arrow-icon-color);mask-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z%22 %2F%3E%3C%2Fsvg%3E\");background-position:center;transition:transform .25s}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select.ng-select-opened .ng-arrow{transform:rotate(180deg);transform-origin:center center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused{z-index:11}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-select-container{box-shadow:0 0 2px #91b1b8}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-clearable .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-value-icon{display:none}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-input{display:none}evo-autocomplete .evo-autocomplete .ng-select.ng-select-focused .ng-select-container,evo-autocomplete .evo-autocomplete .ng-select.ng-select-opened .ng-select-container{border:solid 1px #74706F}evo-autocomplete .evo-autocomplete.evo-autocomplete_touched.evo-autocomplete_invalid .ng-select:not(.ng-select-opened) .ng-select-container{border-color:#ff1817!important}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container .ng-arrow{opacity:.3}evo-autocomplete .evo-autocomplete .ng-input>input[readonly]{-webkit-user-select:auto!important;user-select:auto!important}\n"], components: [{ type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: EvoControlErrorComponent, selector: "evo-control-error", inputs: ["errors", "errorsMessages", "showCount"] }], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { type: i2.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { type: i2.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1794
1794
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoAutocompleteComponent, decorators: [{
|
|
1795
1795
|
type: Component,
|
|
1796
|
-
args: [{ selector: 'evo-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"evo-autocomplete\" [evoUiClass]=\"classes\">\n <ng-select\n [items]=\"items\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [markFirst]=\"markFirst\"\n [placeholder]=\"placeholder\"\n [notFoundText]=\"notFoundText\"\n [typeToSearchText]=\"typeToSearchText\"\n [addTagText]=\"addTagText\"\n [loadingText]=\"loadingText\"\n [clearAllText]=\"clearAllText\"\n [dropdownPosition]=\"dropdownPosition\"\n [appendTo]=\"appendTo\"\n [loading]=\"loading\"\n [closeOnSelect]=\"closeOnSelect\"\n [hideSelected]=\"hideSelected\"\n [selectOnTab]=\"selectOnTab\"\n [openOnEnter]=\"openOnEnter\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [virtualScroll]=\"virtualScroll\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [searchFn]=\"searchFn\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [typeahead]=\"typeahead\"\n [multiple]=\"multiple || multipleInline\"\n [addTag]=\"addTag\"\n [searchable]=\"searchable\"\n [clearable]=\"clearable\"\n [isOpen]=\"isOpen\"\n [editableSearchTerm]=\"editQuery\"\n [disabled]=\"control.disabled\"\n [compareWith]=\"compareWith\"\n [(ngModel)]=\"value\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openEvent.emit($event)\"\n (close)=\"closeEvent.emit($event)\"\n (search)=\"searchEvent.emit($event)\"\n (clear)=\"clearEvent.emit($event)\"\n (add)=\"addEvent.emit($event)\"\n (remove)=\"removeEvent.emit($event)\"\n (scroll)=\"scrollEvent.emit($event)\"\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n >\n <!-- Selected Item Template -->\n <ng-template *ngIf=\"labelTemp\" ng-label-tmp let-item=\"item\">\n <ng-template *ngTemplateOutlet=\"labelTemp; context: { item: item }\"></ng-template>\n </ng-template>\n\n <!-- Overall Label For All Selected Items Template -->\n <ng-template *ngIf=\"multiLabelTemp\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-template *ngTemplateOutlet=\"multiLabelTemp; context: { items: items, clear: clear }\"></ng-template>\n </ng-template>\n\n <!-- Options header template -->\n <ng-template *ngIf=\"headerTemp\" ng-header-tmp>\n <ng-template *ngTemplateOutlet=\"headerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n\n <!-- Option Template -->\n <ng-template\n *ngIf=\"optionTemp\"\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n let-search=\"searchTerm\"\n let-item$=\"item$\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionTemp; context: { item: item, index: index, searchTerm: search, item$: item$}\"\n ></ng-template>\n </ng-template>\n\n <ng-container *ngIf=\"multipleInline && !multiLabelTemp\">\n <ng-template ng-multi-label-tmp let-items=\"items\">\n <div class=\"ng-value\">{{ getMultipleInlineItemsLabels(items) }}</div>\n </ng-template>\n </ng-container>\n\n <!-- Options group template -->\n <ng-template *ngIf=\"optgroupTemp\" ng-optgroup-tmp let-item=\"item\" let-index=\"index\">\n <ng-template *ngTemplateOutlet=\"optgroupTemp; context: { item: item, index: index }\"></ng-template>\n </ng-template>\n\n <!-- Search Text Templates -->\n <ng-template ng-typetosearch-tmp>\n <div *ngIf=\"typeToSearchText\" class=\"ng-option disabled\">{{typeToSearchText}}</div>\n </ng-template>\n <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n <div class=\"ng-option disabled\">{{loadingText}}</div>\n </ng-template>\n\n <ng-container *ngIf=\"notFoundTemp; else defaultNotFoundTemplate\">\n <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n <ng-template *ngTemplateOutlet=\"notFoundTemp; context: {searchTerm: searchTerm}\"></ng-template>\n </ng-template>\n </ng-container>\n <ng-template #defaultNotFoundTemplate>\n <ng-template ng-notfound-tmp>\n <div class=\"ng-option disabled\">{{notFoundText}}</div>\n </ng-template>\n </ng-template>\n\n <!-- Options footer template -->\n <ng-template *ngIf=\"footerTemp\" ng-footer-tmp>\n <ng-template *ngTemplateOutlet=\"footerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n </ng-select>\n <evo-control-error\n *ngIf=\"hasErrors && errorsMessages\"\n [errors]=\"control.errors\"\n [errorsMessages]=\"errorsMessages\"\n ></evo-control-error>\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}evo-autocomplete{--evo-dropdown-max-height: 310px;--evo-autocomplete-option-overflow: hidden;--evo-autocomplete-option-text-overflow: ellipsis;--evo-autocomplete-option-white-space: nowrap;--evo-autocomplete-optgroup-overflow: hidden;--evo-autocomplete-optgroup-text-overflow: ellipsis;--evo-autocomplete-optgroup-white-space: nowrap;--evo-autocomplete-arrow-icon-color: #212121;--evo-autocomplete-option-v-padding: 12px;--evo-autocomplete-option-h-padding: 16px;--evo-autocomplete-panel-border-radius: 8px;--evo-autocomplete-panel-shadow: 0px 8px 10px rgba(0, 0, 0, .14), 0px 3px 14px rgba(0, 0, 0, .12)}evo-autocomplete .evo-autocomplete{--inner-input-padding-right: 40px;position:relative;display:block}evo-autocomplete .evo-autocomplete ng-select[ng-reflect-clearable=false]{--inner-input-padding-right: 16px}evo-autocomplete .evo-autocomplete__icon{display:block;flex:0 0 24px;width:24px;height:24px}evo-autocomplete .evo-autocomplete__icon_clear{position:absolute;top:12px;right:12px;z-index:1001;cursor:pointer;transition:fill .3s;fill:#91b1b8}evo-autocomplete .evo-autocomplete__icon_clear:hover{fill:#a7c1c6}evo-autocomplete .evo-autocomplete__icon_clear:active{fill:#829fa6}evo-autocomplete .evo-autocomplete__icon_dropdown{fill:#212121}evo-autocomplete .evo-autocomplete .ng-input{padding:0 var(--inner-input-padding-right) 0 16px}evo-autocomplete .evo-autocomplete .ng-placeholder{color:#9b9b9b}evo-autocomplete .evo-autocomplete .ng-value-container{align-items:center;min-width:0;overflow:hidden}evo-autocomplete .evo-autocomplete .ng-value{overflow:hidden;text-overflow:ellipsis}evo-autocomplete .evo-autocomplete .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;position:relative;align-items:center;margin:0;padding:0 12px 0 16px;line-height:var(--evo-input-height)}evo-autocomplete .evo-autocomplete .ng-select-container.ng-has-value .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center;color:#91b1b8;transition:color .3s}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:hover{color:#a7c1c6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:active{color:#829fa6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched{display:block;cursor:pointer}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched svg{display:block;fill:currentColor}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader{display:flex;justify-content:center;align-items:center;width:16px;height:100%;margin:0 0 0 8px;border:none;transform:none;animation:none}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader:before{content:\"\";display:block;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}evo-autocomplete .evo-autocomplete .ng-optgroup{font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600}evo-autocomplete .evo-autocomplete .ng-optgroup evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete .ng-option{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer}evo-autocomplete .evo-autocomplete .ng-option evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-option.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-option.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-option.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single:not(.ng-select-focused) .ng-select-container .ng-value-container .ng-value{visibility:visible}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single.ng-select-focused .ng-select-container .ng-value-container .ng-value{visibility:var(--evo-autocomplete-option-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel{z-index:3001;display:block;max-height:var(--evo-dropdown-max-height, 310px);margin:4px 0;background-color:#fff;border-radius:var(--evo-autocomplete-panel-border-radius);box-shadow:var(--evo-autocomplete-panel-shadow);overflow:hidden}evo-autocomplete .evo-autocomplete .ng-dropdown-panel.ng-select-top{bottom:100%}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items{max-height:inherit}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{overflow:var(--evo-autocomplete-option-overflow);white-space:var(--evo-autocomplete-option-white-space);text-overflow:var(--evo-autocomplete-option-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{overflow:var(--evo-autocomplete-optgroup-overflow);white-space:var(--evo-autocomplete-optgroup-white-space);text-overflow:var(--evo-autocomplete-optgroup-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:16px;background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{background-color:#c6c6c6;border:6px solid #FFFFFF;border-radius:16px}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-button{display:none}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper .ng-arrow{display:block;width:24px;height:24px;background-color:var(--evo-autocomplete-arrow-icon-color);mask-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z%22 %2F%3E%3C%2Fsvg%3E\");background-position:center;transition:transform .25s}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select.ng-select-opened .ng-arrow{transform:rotate(180deg);transform-origin:center center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused{z-index:11}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-select-container{box-shadow:0 0 2px #91b1b8}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-clearable .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-value-icon{display:none}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-input{display:none}evo-autocomplete .evo-autocomplete .ng-select.ng-select-focused .ng-select-container,evo-autocomplete .evo-autocomplete .ng-select.ng-select-opened .ng-select-container{border:solid 1px #74706F}evo-autocomplete .evo-autocomplete.evo-autocomplete_touched.evo-autocomplete_invalid .ng-select:not(.ng-select-opened) .ng-select-container{border-color:#ff1817!important}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container .ng-arrow{opacity:.3}evo-autocomplete .evo-autocomplete .ng-input>input[readonly]{-webkit-user-select:auto!important;user-select:auto!important}\n"] }]
|
|
1796
|
+
args: [{ selector: 'evo-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"evo-autocomplete\" [evoUiClass]=\"classes\">\n <ng-select\n [items]=\"items\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [markFirst]=\"markFirst\"\n [placeholder]=\"placeholder\"\n [notFoundText]=\"notFoundText\"\n [typeToSearchText]=\"typeToSearchText\"\n [addTagText]=\"addTagText\"\n [loadingText]=\"loadingText\"\n [clearAllText]=\"clearAllText\"\n [dropdownPosition]=\"dropdownPosition\"\n [appendTo]=\"appendTo\"\n [loading]=\"loading\"\n [closeOnSelect]=\"closeOnSelect\"\n [hideSelected]=\"hideSelected\"\n [selectOnTab]=\"selectOnTab\"\n [openOnEnter]=\"openOnEnter\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [virtualScroll]=\"virtualScroll\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [searchFn]=\"searchFn\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [typeahead]=\"typeahead\"\n [multiple]=\"multiple || multipleInline\"\n [addTag]=\"addTag\"\n [searchable]=\"searchable\"\n [clearable]=\"clearable\"\n [isOpen]=\"isOpen\"\n [editableSearchTerm]=\"editQuery\"\n [disabled]=\"control.disabled\"\n [compareWith]=\"compareWith\"\n [(ngModel)]=\"value\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openEvent.emit($event)\"\n (close)=\"closeEvent.emit($event)\"\n (search)=\"searchEvent.emit($event)\"\n (clear)=\"clearEvent.emit($event)\"\n (add)=\"addEvent.emit($event)\"\n (remove)=\"removeEvent.emit($event)\"\n (scroll)=\"scrollEvent.emit($event)\"\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n >\n <!-- Selected Item Template -->\n <ng-template *ngIf=\"labelTemp\" ng-label-tmp let-item=\"item\">\n <ng-template *ngTemplateOutlet=\"labelTemp; context: { item: item }\"></ng-template>\n </ng-template>\n\n <!-- Overall Label For All Selected Items Template -->\n <ng-template *ngIf=\"multiLabelTemp\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-template *ngTemplateOutlet=\"multiLabelTemp; context: { items: items, clear: clear }\"></ng-template>\n </ng-template>\n\n <!-- Options header template -->\n <ng-template *ngIf=\"headerTemp\" ng-header-tmp>\n <ng-template *ngTemplateOutlet=\"headerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n\n <!-- Option Template -->\n <ng-template\n *ngIf=\"optionTemp\"\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n let-search=\"searchTerm\"\n let-item$=\"item$\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionTemp; context: { item: item, index: index, searchTerm: search, item$: item$}\"\n ></ng-template>\n </ng-template>\n\n <ng-container *ngIf=\"multipleInline && !multiLabelTemp\">\n <ng-template ng-multi-label-tmp let-items=\"items\">\n <div class=\"ng-value\">{{ getMultipleInlineItemsLabels(items) }}</div>\n </ng-template>\n </ng-container>\n\n <!-- Options group template -->\n <ng-template *ngIf=\"optgroupTemp\" ng-optgroup-tmp let-item=\"item\" let-index=\"index\">\n <ng-template *ngTemplateOutlet=\"optgroupTemp; context: { item: item, index: index }\"></ng-template>\n </ng-template>\n\n <!-- Search Text Templates -->\n <ng-template ng-typetosearch-tmp>\n <div *ngIf=\"typeToSearchText\" class=\"ng-option disabled\">{{typeToSearchText}}</div>\n </ng-template>\n <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n <div class=\"ng-option disabled\">{{loadingText}}</div>\n </ng-template>\n\n <ng-container *ngIf=\"notFoundTemp; else defaultNotFoundTemplate\">\n <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n <ng-template *ngTemplateOutlet=\"notFoundTemp; context: {searchTerm: searchTerm}\"></ng-template>\n </ng-template>\n </ng-container>\n <ng-template #defaultNotFoundTemplate>\n <ng-template ng-notfound-tmp>\n <div class=\"ng-option disabled\">{{notFoundText}}</div>\n </ng-template>\n </ng-template>\n\n <!-- Options footer template -->\n <ng-template *ngIf=\"footerTemp\" ng-footer-tmp>\n <ng-template *ngTemplateOutlet=\"footerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n </ng-select>\n <evo-control-error\n *ngIf=\"hasErrors && errorsMessages\"\n [errors]=\"control.errors\"\n [errorsMessages]=\"errorsMessages\"\n ></evo-control-error>\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}evo-autocomplete{--evo-dropdown-max-height: 310px;--evo-autocomplete-option-overflow: hidden;--evo-autocomplete-option-text-overflow: ellipsis;--evo-autocomplete-option-white-space: nowrap;--evo-autocomplete-optgroup-overflow: hidden;--evo-autocomplete-optgroup-text-overflow: ellipsis;--evo-autocomplete-optgroup-white-space: nowrap;--evo-autocomplete-arrow-icon-color: #212121;--evo-autocomplete-option-v-padding: 12px;--evo-autocomplete-option-h-padding: 16px;--evo-autocomplete-panel-border-radius: 8px;--evo-autocomplete-panel-shadow: 0px 8px 10px rgba(0, 0, 0, .14), 0px 3px 14px rgba(0, 0, 0, .12)}evo-autocomplete .evo-autocomplete{--inner-input-padding-right: 40px;position:relative;display:block}evo-autocomplete .evo-autocomplete ng-select[ng-reflect-clearable=false]{--inner-input-padding-right: 16px}evo-autocomplete .evo-autocomplete__icon{display:block;flex:0 0 24px;width:24px;height:24px}evo-autocomplete .evo-autocomplete__icon_clear{position:absolute;top:12px;right:12px;z-index:1001;cursor:pointer;transition:fill .3s;fill:#91b1b8}evo-autocomplete .evo-autocomplete__icon_clear:hover{fill:#a7c1c6}evo-autocomplete .evo-autocomplete__icon_clear:active{fill:#829fa6}evo-autocomplete .evo-autocomplete__icon_dropdown{fill:#212121}evo-autocomplete .evo-autocomplete .ng-input{padding:0 var(--inner-input-padding-right) 0 16px}evo-autocomplete .evo-autocomplete .ng-placeholder{color:#9b9b9b}evo-autocomplete .evo-autocomplete .ng-value-container{align-items:center;min-width:0;overflow:hidden}evo-autocomplete .evo-autocomplete .ng-value{overflow:hidden;text-overflow:ellipsis}evo-autocomplete .evo-autocomplete .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;position:relative;align-items:center;margin:0;padding:0 12px 0 16px;line-height:var(--evo-input-height)}evo-autocomplete .evo-autocomplete .ng-select-container.ng-has-value .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center;color:#91b1b8;transition:color .3s}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:hover{color:#a7c1c6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:active{color:#829fa6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched{display:block;cursor:pointer}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched svg{display:block;fill:currentColor}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader{display:flex;justify-content:center;align-items:center;width:16px;height:100%;margin:0 0 0 8px;border:none;transform:none;animation:none}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader:before{content:\"\";display:block;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}evo-autocomplete .evo-autocomplete .ng-optgroup{font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600}evo-autocomplete .evo-autocomplete .ng-optgroup evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete .ng-option{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer}evo-autocomplete .evo-autocomplete .ng-option evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-option.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-option.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-option.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single:not(.ng-select-focused) .ng-select-container .ng-value-container .ng-value{visibility:visible}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single.ng-select-focused .ng-select-container .ng-value-container .ng-value{visibility:var(--evo-autocomplete-option-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel{z-index:3001;display:block;margin:4px 0;background-color:#fff;border-radius:var(--evo-autocomplete-panel-border-radius);box-shadow:var(--evo-autocomplete-panel-shadow);overflow:hidden}evo-autocomplete .evo-autocomplete .ng-dropdown-panel.ng-select-top{bottom:100%}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items{max-height:var(--evo-dropdown-max-height, 310px)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{overflow:var(--evo-autocomplete-option-overflow);white-space:var(--evo-autocomplete-option-white-space);text-overflow:var(--evo-autocomplete-option-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{overflow:var(--evo-autocomplete-optgroup-overflow);white-space:var(--evo-autocomplete-optgroup-white-space);text-overflow:var(--evo-autocomplete-optgroup-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:16px;background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{background-color:#c6c6c6;border:6px solid #FFFFFF;border-radius:16px}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-button{display:none}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper .ng-arrow{display:block;width:24px;height:24px;background-color:var(--evo-autocomplete-arrow-icon-color);mask-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z%22 %2F%3E%3C%2Fsvg%3E\");background-position:center;transition:transform .25s}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select.ng-select-opened .ng-arrow{transform:rotate(180deg);transform-origin:center center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused{z-index:11}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-select-container{box-shadow:0 0 2px #91b1b8}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-clearable .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-value-icon{display:none}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-input{display:none}evo-autocomplete .evo-autocomplete .ng-select.ng-select-focused .ng-select-container,evo-autocomplete .evo-autocomplete .ng-select.ng-select-opened .ng-select-container{border:solid 1px #74706F}evo-autocomplete .evo-autocomplete.evo-autocomplete_touched.evo-autocomplete_invalid .ng-select:not(.ng-select-opened) .ng-select-container{border-color:#ff1817!important}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container .ng-arrow{opacity:.3}evo-autocomplete .evo-autocomplete .ng-input>input[readonly]{-webkit-user-select:auto!important;user-select:auto!important}\n"] }]
|
|
1797
1797
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.NgControl }]; }, propDecorators: { size: [{
|
|
1798
1798
|
type: Input
|
|
1799
1799
|
}], isOpen: [{
|
|
@@ -7187,8 +7187,10 @@ class EvoDropdownComponent {
|
|
|
7187
7187
|
this.viewContainerRef = viewContainerRef;
|
|
7188
7188
|
this.ngZone = ngZone;
|
|
7189
7189
|
this.cdr = cdr;
|
|
7190
|
+
this.closeOnOutsideClick = true;
|
|
7190
7191
|
this.scrollStrategy = 'close';
|
|
7191
7192
|
this.isOpenChange = new EventEmitter();
|
|
7193
|
+
this.outsideClick = new EventEmitter();
|
|
7192
7194
|
this.connectedPositions = DEFAULT_POSITION;
|
|
7193
7195
|
this.destroy$ = new Subject();
|
|
7194
7196
|
this._isOpen = false;
|
|
@@ -7203,7 +7205,9 @@ class EvoDropdownComponent {
|
|
|
7203
7205
|
}
|
|
7204
7206
|
}
|
|
7205
7207
|
set positions(value) {
|
|
7206
|
-
this.connectedPositions = value
|
|
7208
|
+
this.connectedPositions = value
|
|
7209
|
+
? [].concat(value).map((p) => EVO_DROPDOWN_POSITION_DESCRIPTION[p] || p)
|
|
7210
|
+
: DEFAULT_POSITION;
|
|
7207
7211
|
}
|
|
7208
7212
|
get element() {
|
|
7209
7213
|
var _a, _b;
|
|
@@ -7245,6 +7249,12 @@ class EvoDropdownComponent {
|
|
|
7245
7249
|
this.destroy$.next();
|
|
7246
7250
|
this.destroy$.unsubscribe();
|
|
7247
7251
|
}
|
|
7252
|
+
onOverlayOutsideClick(event) {
|
|
7253
|
+
this.outsideClick.emit(event);
|
|
7254
|
+
if (this.closeOnOutsideClick) {
|
|
7255
|
+
this.close();
|
|
7256
|
+
}
|
|
7257
|
+
}
|
|
7248
7258
|
/**
|
|
7249
7259
|
* Listens to the scroll in the dropdown container and closes it
|
|
7250
7260
|
*/
|
|
@@ -7255,8 +7265,8 @@ class EvoDropdownComponent {
|
|
|
7255
7265
|
this.scrollEventSubscription = this.ngZone.runOutsideAngular(() => {
|
|
7256
7266
|
return fromEvent(document, 'scroll', { capture: true })
|
|
7257
7267
|
.pipe(throttleTime(10), filter((scrollEvent) => {
|
|
7258
|
-
return (scrollEvent.target instanceof HTMLElement || scrollEvent.target instanceof HTMLDocument)
|
|
7259
|
-
|
|
7268
|
+
return ((scrollEvent.target instanceof HTMLElement || scrollEvent.target instanceof HTMLDocument) &&
|
|
7269
|
+
(scrollEvent.target.contains(this.element) || !this.element));
|
|
7260
7270
|
}), take(1), takeUntil(this.destroy$))
|
|
7261
7271
|
.subscribe(() => {
|
|
7262
7272
|
this.ngZone.run(() => {
|
|
@@ -7267,16 +7277,20 @@ class EvoDropdownComponent {
|
|
|
7267
7277
|
}
|
|
7268
7278
|
}
|
|
7269
7279
|
EvoDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoDropdownComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7270
|
-
EvoDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoDropdownComponent, selector: "evo-dropdown", inputs: { scrollStrategy: "scrollStrategy", dropdownOrigin: "dropdownOrigin", isOpen: "isOpen", positions: "positions" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<ng-template\n cdkConnectedOverlay\n [
|
|
7280
|
+
EvoDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoDropdownComponent, selector: "evo-dropdown", inputs: { closeOnOutsideClick: "closeOnOutsideClick", scrollStrategy: "scrollStrategy", dropdownOrigin: "dropdownOrigin", isOpen: "isOpen", positions: "positions" }, outputs: { isOpenChange: "isOpenChange", outsideClick: "outsideClick" }, ngImport: i0, template: "<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayOrigin]=\"dropdownOrigin\"\n [cdkConnectedOverlayPositions]=\"connectedPositions\"\n (detach)=\"close()\"\n (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n>\n <ng-content></ng-content>\n</ng-template>\n", directives: [{ type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7271
7281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoDropdownComponent, decorators: [{
|
|
7272
7282
|
type: Component,
|
|
7273
|
-
args: [{ selector: 'evo-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template\n cdkConnectedOverlay\n [
|
|
7274
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
7283
|
+
args: [{ selector: 'evo-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayOrigin]=\"dropdownOrigin\"\n [cdkConnectedOverlayPositions]=\"connectedPositions\"\n (detach)=\"close()\"\n (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
7284
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { closeOnOutsideClick: [{
|
|
7285
|
+
type: Input
|
|
7286
|
+
}], scrollStrategy: [{
|
|
7275
7287
|
type: Input
|
|
7276
7288
|
}], dropdownOrigin: [{
|
|
7277
7289
|
type: Input
|
|
7278
7290
|
}], isOpenChange: [{
|
|
7279
7291
|
type: Output
|
|
7292
|
+
}], outsideClick: [{
|
|
7293
|
+
type: Output
|
|
7280
7294
|
}], isOpen: [{
|
|
7281
7295
|
type: Input
|
|
7282
7296
|
}], positions: [{
|
|
@@ -7388,7 +7402,7 @@ class EvoNavbarItemComponent {
|
|
|
7388
7402
|
}
|
|
7389
7403
|
}
|
|
7390
7404
|
EvoNavbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7391
|
-
EvoNavbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoNavbarItemComponent, selector: "evo-navbar-item", inputs: { item: "item", isNested: "isNested", isMobileView: "isMobileView", subMenuPositions: "subMenuPositions" }, outputs: { openSubMenu: "openSubMenu", closeSubMenu: "closeSubMenu" }, ngImport: i0, template: "<!-- TODO: delete $any alias after update to ng12-->\n<ng-container *evoLet=\"$any(item) as linkItem\">\n <a\n *ngIf=\"linkItem.href; else routerLink\"\n #origin=\"evoDropdownOrigin\"\n evoDropdownOrigin\n class=\"evo-navbar__link evo-navbar__link_external\"\n [attr.href]=\"linkItem.href\"\n [attr.target]=\"linkItem.target\"\n [class.evo-navbar__link_nested]=\"isNested\"\n [class.evo-navbar__link_highlighted]=\"origin.isDropdownOpen\"\n (mouseenter)=\"open(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <span class=\"evo-navbar__link-title\">{{ linkItem.title }}</span>\n\n <ng-container *ngTemplateOutlet=\"subNav; context: {origin: origin}\"></ng-container>\n </a>\n\n <ng-template #routerLink>\n <ng-container *evoLet=\"isMobileView && !!linkItem.subItems?.length as isRootItemJustOpenSubMenu\">\n <span\n *ngIf=\"isRootItemJustOpenSubMenu; else defaultRootItem\"\n #origin=\"evoDropdownOrigin\"\n evoDropdownOrigin\n class=\"evo-navbar__link\"\n [class.evo-navbar__link_highlighted]=\"origin.isDropdownOpen\"\n (click)=\"toggle(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <span class=\"evo-navbar__link-title\">{{ linkItem.title }}</span>\n\n <ng-container *ngTemplateOutlet=\"subNav; context: {origin: origin}\"></ng-container>\n </span>\n\n <ng-template #defaultRootItem>\n <a\n #origin=\"evoDropdownOrigin\"\n evoDropdownOrigin\n class=\"evo-navbar__link\"\n [class.evo-navbar__link_nested]=\"isNested\"\n [class.evo-navbar__link_highlighted]=\"origin.isDropdownOpen\"\n [routerLink]=\"linkItem.routerLink\"\n [routerLinkActive]=\"isNested ? ['evo-navbar__link_active'] : []\"\n [routerLinkActiveOptions]=\"{exact: !!linkItem.isExactPath}\"\n [preserveFragment]=\"!!linkItem.preserveFragment\"\n [queryParamsHandling]=\"linkItem.queryParamsHandling\"\n [fragment]=\"linkItem.fragment\"\n [queryParams]=\"linkItem.queryParams\"\n [skipLocationChange]=\"linkItem.skipLocationChange\"\n [replaceUrl]=\"linkItem.replaceUrl\"\n [state]=\"linkItem.state\"\n (mouseenter)=\"open(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <span class=\"evo-navbar__link-title\">{{ linkItem.title }}</span>\n\n <ng-container *ngTemplateOutlet=\"subNav; context: {origin: origin}\"></ng-container>\n </a>\n </ng-template>\n </ng-container>\n </ng-template>\n\n <ng-template #subNav let-origin=\"origin\">\n <evo-dropdown\n *ngIf=\"linkItem.subItems?.length\"\n [positions]=\"subMenuPositions\"\n [dropdownOrigin]=\"origin\"\n [(isOpen)]=\"origin.isDropdownOpen\"\n >\n <section\n class=\"evo-navbar__sub\"\n (mouseenter)=\"open(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <div class=\"evo-navbar__sub-content\">\n <evo-navbar-item\n *ngFor=\"let subItem of linkItem.subItems\"\n [item]=\"subItem\"\n [isNested]=\"true\"\n [isMobileView]=\"isMobileView\"\n (click)=\"close(origin)\"\n ></evo-navbar-item>\n </div>\n </section>\n </evo-dropdown>\n </ng-template>\n</ng-container>\n", styles: [":host{display:block;flex-shrink:0}.evo-navbar__link{display:block;flex-shrink:0;padding:9px 8px;color:#212121;font-size:14px;line-height:22px;-webkit-user-select:none;user-select:none}@media (min-width: 768px){.evo-navbar__link:not(.evo-navbar__link_nested):hover .evo-navbar__link-title{background:#FFFFFF}}.evo-navbar__link_nested{padding:12px 16px}.evo-navbar__link_nested .evo-navbar__link-title{padding:0;font-weight:400;border-radius:0}.evo-navbar__link_nested:hover{background:#F4F6F8}.evo-navbar__link_nested.evo-navbar__link_active{color:#fff;background:#F05023}.evo-navbar__link_highlighted .evo-navbar__link-title{background:#FFFFFF}.evo-navbar__link-title{display:block;max-width:100%;padding:4px 8px;overflow:hidden;font-weight:600;white-space:nowrap;text-overflow:ellipsis;border-radius:4px}.evo-navbar__sub{--evo-navbar-dropdown-max-width: 85vw;--evo-navbar-dropdown-max-height: 310px;flex-shrink:0;max-width:85vw;max-width:var(--evo-navbar-dropdown-max-width)}.evo-navbar__sub-content{display:flex;flex-flow:column;max-height:310px;max-height:var(--evo-navbar-dropdown-max-height);margin-top:4px;overflow:auto;background:#FFFFFF;border-radius:8px;box-shadow:0 8px 10px #00000024,0 3px 14px #0000001f}\n"], components: [{ type: EvoDropdownComponent, selector: "evo-dropdown", inputs: ["scrollStrategy", "dropdownOrigin", "isOpen", "positions"], outputs: ["isOpenChange"] }, { type: EvoNavbarItemComponent, selector: "evo-navbar-item", inputs: ["item", "isNested", "isMobileView", "subMenuPositions"], outputs: ["openSubMenu", "closeSubMenu"] }], directives: [{ type: EvoLetDirective, selector: "[evoLet]", inputs: ["evoLet"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: EvoDropdownOriginDirective, selector: "[evoDropdownOrigin]", exportAs: ["evoDropdownOrigin"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7405
|
+
EvoNavbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoNavbarItemComponent, selector: "evo-navbar-item", inputs: { item: "item", isNested: "isNested", isMobileView: "isMobileView", subMenuPositions: "subMenuPositions" }, outputs: { openSubMenu: "openSubMenu", closeSubMenu: "closeSubMenu" }, ngImport: i0, template: "<!-- TODO: delete $any alias after update to ng12-->\n<ng-container *evoLet=\"$any(item) as linkItem\">\n <a\n *ngIf=\"linkItem.href; else routerLink\"\n #origin=\"evoDropdownOrigin\"\n evoDropdownOrigin\n class=\"evo-navbar__link evo-navbar__link_external\"\n [attr.href]=\"linkItem.href\"\n [attr.target]=\"linkItem.target\"\n [class.evo-navbar__link_nested]=\"isNested\"\n [class.evo-navbar__link_highlighted]=\"origin.isDropdownOpen\"\n (mouseenter)=\"open(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <span class=\"evo-navbar__link-title\">{{ linkItem.title }}</span>\n\n <ng-container *ngTemplateOutlet=\"subNav; context: {origin: origin}\"></ng-container>\n </a>\n\n <ng-template #routerLink>\n <ng-container *evoLet=\"isMobileView && !!linkItem.subItems?.length as isRootItemJustOpenSubMenu\">\n <span\n *ngIf=\"isRootItemJustOpenSubMenu; else defaultRootItem\"\n #origin=\"evoDropdownOrigin\"\n evoDropdownOrigin\n class=\"evo-navbar__link\"\n [class.evo-navbar__link_highlighted]=\"origin.isDropdownOpen\"\n (click)=\"toggle(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <span class=\"evo-navbar__link-title\">{{ linkItem.title }}</span>\n\n <ng-container *ngTemplateOutlet=\"subNav; context: {origin: origin}\"></ng-container>\n </span>\n\n <ng-template #defaultRootItem>\n <a\n #origin=\"evoDropdownOrigin\"\n evoDropdownOrigin\n class=\"evo-navbar__link\"\n [class.evo-navbar__link_nested]=\"isNested\"\n [class.evo-navbar__link_highlighted]=\"origin.isDropdownOpen\"\n [routerLink]=\"linkItem.routerLink\"\n [routerLinkActive]=\"isNested ? ['evo-navbar__link_active'] : []\"\n [routerLinkActiveOptions]=\"{exact: !!linkItem.isExactPath}\"\n [preserveFragment]=\"!!linkItem.preserveFragment\"\n [queryParamsHandling]=\"linkItem.queryParamsHandling\"\n [fragment]=\"linkItem.fragment\"\n [queryParams]=\"linkItem.queryParams\"\n [skipLocationChange]=\"linkItem.skipLocationChange\"\n [replaceUrl]=\"linkItem.replaceUrl\"\n [state]=\"linkItem.state\"\n (mouseenter)=\"open(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <span class=\"evo-navbar__link-title\">{{ linkItem.title }}</span>\n\n <ng-container *ngTemplateOutlet=\"subNav; context: {origin: origin}\"></ng-container>\n </a>\n </ng-template>\n </ng-container>\n </ng-template>\n\n <ng-template #subNav let-origin=\"origin\">\n <evo-dropdown\n *ngIf=\"linkItem.subItems?.length\"\n [positions]=\"subMenuPositions\"\n [dropdownOrigin]=\"origin\"\n [(isOpen)]=\"origin.isDropdownOpen\"\n >\n <section\n class=\"evo-navbar__sub\"\n (mouseenter)=\"open(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <div class=\"evo-navbar__sub-content\">\n <evo-navbar-item\n *ngFor=\"let subItem of linkItem.subItems\"\n [item]=\"subItem\"\n [isNested]=\"true\"\n [isMobileView]=\"isMobileView\"\n (click)=\"close(origin)\"\n ></evo-navbar-item>\n </div>\n </section>\n </evo-dropdown>\n </ng-template>\n</ng-container>\n", styles: [":host{display:block;flex-shrink:0}.evo-navbar__link{display:block;flex-shrink:0;padding:9px 8px;color:#212121;font-size:14px;line-height:22px;-webkit-user-select:none;user-select:none}@media (min-width: 768px){.evo-navbar__link:not(.evo-navbar__link_nested):hover .evo-navbar__link-title{background:#FFFFFF}}.evo-navbar__link_nested{padding:12px 16px}.evo-navbar__link_nested .evo-navbar__link-title{padding:0;font-weight:400;border-radius:0}.evo-navbar__link_nested:hover{background:#F4F6F8}.evo-navbar__link_nested.evo-navbar__link_active{color:#fff;background:#F05023}.evo-navbar__link_highlighted .evo-navbar__link-title{background:#FFFFFF}.evo-navbar__link-title{display:block;max-width:100%;padding:4px 8px;overflow:hidden;font-weight:600;white-space:nowrap;text-overflow:ellipsis;border-radius:4px}.evo-navbar__sub{--evo-navbar-dropdown-max-width: 85vw;--evo-navbar-dropdown-max-height: 310px;flex-shrink:0;max-width:85vw;max-width:var(--evo-navbar-dropdown-max-width)}.evo-navbar__sub-content{display:flex;flex-flow:column;max-height:310px;max-height:var(--evo-navbar-dropdown-max-height);margin-top:4px;overflow:auto;background:#FFFFFF;border-radius:8px;box-shadow:0 8px 10px #00000024,0 3px 14px #0000001f}\n"], components: [{ type: EvoDropdownComponent, selector: "evo-dropdown", inputs: ["closeOnOutsideClick", "scrollStrategy", "dropdownOrigin", "isOpen", "positions"], outputs: ["isOpenChange", "outsideClick"] }, { type: EvoNavbarItemComponent, selector: "evo-navbar-item", inputs: ["item", "isNested", "isMobileView", "subMenuPositions"], outputs: ["openSubMenu", "closeSubMenu"] }], directives: [{ type: EvoLetDirective, selector: "[evoLet]", inputs: ["evoLet"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: EvoDropdownOriginDirective, selector: "[evoDropdownOrigin]", exportAs: ["evoDropdownOrigin"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7392
7406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoNavbarItemComponent, decorators: [{
|
|
7393
7407
|
type: Component,
|
|
7394
7408
|
args: [{ selector: 'evo-navbar-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- TODO: delete $any alias after update to ng12-->\n<ng-container *evoLet=\"$any(item) as linkItem\">\n <a\n *ngIf=\"linkItem.href; else routerLink\"\n #origin=\"evoDropdownOrigin\"\n evoDropdownOrigin\n class=\"evo-navbar__link evo-navbar__link_external\"\n [attr.href]=\"linkItem.href\"\n [attr.target]=\"linkItem.target\"\n [class.evo-navbar__link_nested]=\"isNested\"\n [class.evo-navbar__link_highlighted]=\"origin.isDropdownOpen\"\n (mouseenter)=\"open(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <span class=\"evo-navbar__link-title\">{{ linkItem.title }}</span>\n\n <ng-container *ngTemplateOutlet=\"subNav; context: {origin: origin}\"></ng-container>\n </a>\n\n <ng-template #routerLink>\n <ng-container *evoLet=\"isMobileView && !!linkItem.subItems?.length as isRootItemJustOpenSubMenu\">\n <span\n *ngIf=\"isRootItemJustOpenSubMenu; else defaultRootItem\"\n #origin=\"evoDropdownOrigin\"\n evoDropdownOrigin\n class=\"evo-navbar__link\"\n [class.evo-navbar__link_highlighted]=\"origin.isDropdownOpen\"\n (click)=\"toggle(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <span class=\"evo-navbar__link-title\">{{ linkItem.title }}</span>\n\n <ng-container *ngTemplateOutlet=\"subNav; context: {origin: origin}\"></ng-container>\n </span>\n\n <ng-template #defaultRootItem>\n <a\n #origin=\"evoDropdownOrigin\"\n evoDropdownOrigin\n class=\"evo-navbar__link\"\n [class.evo-navbar__link_nested]=\"isNested\"\n [class.evo-navbar__link_highlighted]=\"origin.isDropdownOpen\"\n [routerLink]=\"linkItem.routerLink\"\n [routerLinkActive]=\"isNested ? ['evo-navbar__link_active'] : []\"\n [routerLinkActiveOptions]=\"{exact: !!linkItem.isExactPath}\"\n [preserveFragment]=\"!!linkItem.preserveFragment\"\n [queryParamsHandling]=\"linkItem.queryParamsHandling\"\n [fragment]=\"linkItem.fragment\"\n [queryParams]=\"linkItem.queryParams\"\n [skipLocationChange]=\"linkItem.skipLocationChange\"\n [replaceUrl]=\"linkItem.replaceUrl\"\n [state]=\"linkItem.state\"\n (mouseenter)=\"open(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <span class=\"evo-navbar__link-title\">{{ linkItem.title }}</span>\n\n <ng-container *ngTemplateOutlet=\"subNav; context: {origin: origin}\"></ng-container>\n </a>\n </ng-template>\n </ng-container>\n </ng-template>\n\n <ng-template #subNav let-origin=\"origin\">\n <evo-dropdown\n *ngIf=\"linkItem.subItems?.length\"\n [positions]=\"subMenuPositions\"\n [dropdownOrigin]=\"origin\"\n [(isOpen)]=\"origin.isDropdownOpen\"\n >\n <section\n class=\"evo-navbar__sub\"\n (mouseenter)=\"open(origin)\"\n (mouseleave)=\"close(origin)\"\n >\n <div class=\"evo-navbar__sub-content\">\n <evo-navbar-item\n *ngFor=\"let subItem of linkItem.subItems\"\n [item]=\"subItem\"\n [isNested]=\"true\"\n [isMobileView]=\"isMobileView\"\n (click)=\"close(origin)\"\n ></evo-navbar-item>\n </div>\n </section>\n </evo-dropdown>\n </ng-template>\n</ng-container>\n", styles: [":host{display:block;flex-shrink:0}.evo-navbar__link{display:block;flex-shrink:0;padding:9px 8px;color:#212121;font-size:14px;line-height:22px;-webkit-user-select:none;user-select:none}@media (min-width: 768px){.evo-navbar__link:not(.evo-navbar__link_nested):hover .evo-navbar__link-title{background:#FFFFFF}}.evo-navbar__link_nested{padding:12px 16px}.evo-navbar__link_nested .evo-navbar__link-title{padding:0;font-weight:400;border-radius:0}.evo-navbar__link_nested:hover{background:#F4F6F8}.evo-navbar__link_nested.evo-navbar__link_active{color:#fff;background:#F05023}.evo-navbar__link_highlighted .evo-navbar__link-title{background:#FFFFFF}.evo-navbar__link-title{display:block;max-width:100%;padding:4px 8px;overflow:hidden;font-weight:600;white-space:nowrap;text-overflow:ellipsis;border-radius:4px}.evo-navbar__sub{--evo-navbar-dropdown-max-width: 85vw;--evo-navbar-dropdown-max-height: 310px;flex-shrink:0;max-width:85vw;max-width:var(--evo-navbar-dropdown-max-width)}.evo-navbar__sub-content{display:flex;flex-flow:column;max-height:310px;max-height:var(--evo-navbar-dropdown-max-height);margin-top:4px;overflow:auto;background:#FFFFFF;border-radius:8px;box-shadow:0 8px 10px #00000024,0 3px 14px #0000001f}\n"] }]
|