@datarailsshared/datarailsshared 1.6.181 → 1.6.185
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/datarailsshared-datarailsshared-1.6.185.tgz +0 -0
- package/esm2022/lib/dr-inputs/dr-select/dr-select.component.mjs +8 -6
- package/esm2022/public-api.mjs +1 -1
- package/fesm2022/datarailsshared-datarailsshared.mjs +7 -5
- package/fesm2022/datarailsshared-datarailsshared.mjs.map +1 -1
- package/lib/dr-inputs/dr-select/dr-select.component.d.ts +2 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -1
- package/datarailsshared-datarailsshared-1.6.181.tgz +0 -0
|
@@ -1721,13 +1721,13 @@ class DrSelectComponent {
|
|
|
1721
1721
|
i0.ɵɵattribute("id", ctx.hostId);
|
|
1722
1722
|
i0.ɵɵclassMap(ctx.type);
|
|
1723
1723
|
i0.ɵɵclassProp("textView", ctx.asTextView);
|
|
1724
|
-
} }, inputs: { type: "type", clearInputTextAfterSelection: "clearInputTextAfterSelection", className: "className", items: "items", addTag: "addTag", appendTo: "appendTo", bindLabel: "bindLabel", bindValue: "bindValue", clearable: "clearable", searchable: "searchable", isDisplayingSearchInHeader: "isDisplayingSearchInHeader", minItemsToDisplaySearchInHeader: "minItemsToDisplaySearchInHeader", searchFn: "searchFn", multiple: "multiple", multipleHeightIncreased: "multipleHeightIncreased", hideSelected: "hideSelected", maxSelectedItems: "maxSelectedItems", placeholder: "placeholder", loading: "loading", loadingText: "loadingText", readonly: "readonly", disabled: "disabled", groupBy: "groupBy", optionWithDescription: "optionWithDescription", id: "id", keyDownFn: "keyDownFn", selectedItem: "selectedItem", dropdownClass: "dropdownClass", closeOnSelect: "closeOnSelect", textView: "textView", autofocus: "autofocus", isOpen: "isOpen", noValuePadding: "noValuePadding", selectOnTabKeyPress: "selectOnTabKeyPress", virtualScroll: "virtualScroll", typeahead: "typeahead" }, outputs: { search: "search", scrollToEnd: "scrollToEnd", change: "change", open: "open", closeUp: "closeUp" }, features: [i0.ɵɵProvidersFeature([
|
|
1724
|
+
} }, inputs: { type: "type", clearInputTextAfterSelection: "clearInputTextAfterSelection", className: "className", items: "items", addTag: "addTag", appendTo: "appendTo", bindLabel: "bindLabel", bindValue: "bindValue", clearable: "clearable", compareWith: "compareWith", searchable: "searchable", isDisplayingSearchInHeader: "isDisplayingSearchInHeader", minItemsToDisplaySearchInHeader: "minItemsToDisplaySearchInHeader", searchFn: "searchFn", multiple: "multiple", multipleHeightIncreased: "multipleHeightIncreased", hideSelected: "hideSelected", maxSelectedItems: "maxSelectedItems", placeholder: "placeholder", loading: "loading", loadingText: "loadingText", readonly: "readonly", disabled: "disabled", groupBy: "groupBy", optionWithDescription: "optionWithDescription", id: "id", keyDownFn: "keyDownFn", selectedItem: "selectedItem", dropdownClass: "dropdownClass", closeOnSelect: "closeOnSelect", textView: "textView", autofocus: "autofocus", isOpen: "isOpen", noValuePadding: "noValuePadding", selectOnTabKeyPress: "selectOnTabKeyPress", virtualScroll: "virtualScroll", typeahead: "typeahead" }, outputs: { search: "search", scrollToEnd: "scrollToEnd", change: "change", open: "open", closeUp: "closeUp" }, features: [i0.ɵɵProvidersFeature([
|
|
1725
1725
|
{
|
|
1726
1726
|
provide: NG_VALUE_ACCESSOR,
|
|
1727
1727
|
useExisting: DrSelectComponent,
|
|
1728
1728
|
multi: true,
|
|
1729
1729
|
},
|
|
1730
|
-
])], decls: 12, vars:
|
|
1730
|
+
])], decls: 12, vars: 40, consts: [[1, "dr-select", 3, "ngModel", "items", "bindLabel", "bindValue", "multiple", "addTag", "appendTo", "clearable", "searchable", "hideSelected", "placeholder", "loading", "loadingText", "readonly", "closeOnSelect", "disabled", "labelForId", "maxSelectedItems", "keyDownFn", "searchFn", "isOpen", "groupBy", "selectOnTab", "virtualScroll", "typeahead", "compareWith", "ngModelChange", "search", "scrollToEnd", "keydown.tab", "change", "open", "close"], ["selectComponent", ""], [4, "ngIf"], ["ng-loadingspinner-tmp", ""], ["class", "search-icon dr-icon-search", 4, "ngIf"], ["ng-header-tmp", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "search", 1, "dr-select__search", 3, "ngModel", "ngModelChange"], ["ng-label-tmp", ""], ["ng-multi-label-tmp", ""], ["ng-option-tmp", ""], [1, "dr-select__option-with-desc__wrapper"], [1, "dr-select__option-with-desc__description"], ["ng-footer-tmp", ""], ["ng-optgroup-tmp", ""], ["class", "dr-select__loading", 3, "drSpinner", "drSpinnerType", "drSpinnerSize", "drSpinnerNoOverlay", 4, "ngIf"], [1, "dr-select__loading", 3, "drSpinner", "drSpinnerType", "drSpinnerSize", "drSpinnerNoOverlay"], [1, "search-icon", "dr-icon-search"]], template: function DrSelectComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1731
1731
|
i0.ɵɵelementStart(0, "ng-select", 0, 1);
|
|
1732
1732
|
i0.ɵɵlistener("ngModelChange", function DrSelectComponent_Template_ng_select_ngModelChange_0_listener($event) { return ctx.selectedItem = $event; })("search", function DrSelectComponent_Template_ng_select_search_0_listener($event) { return ctx.search.emit($event); })("scrollToEnd", function DrSelectComponent_Template_ng_select_scrollToEnd_0_listener($event) { return ctx.scrollToEnd.emit($event); })("keydown.tab", function DrSelectComponent_Template_ng_select_keydown_tab_0_listener($event) { return ctx.onTabKeypress($event); })("change", function DrSelectComponent_Template_ng_select_change_0_listener() { return ctx.onValueSelected(ctx.selectedItem); })("open", function DrSelectComponent_Template_ng_select_open_0_listener($event) { ctx.open.emit($event); return ctx.onDropdownOpen(); })("close", function DrSelectComponent_Template_ng_select_close_0_listener($event) { return ctx.onClose($event); });
|
|
1733
1733
|
i0.ɵɵtemplate(2, DrSelectComponent_2_Template, 1, 0, null, 2);
|
|
@@ -1744,7 +1744,7 @@ class DrSelectComponent {
|
|
|
1744
1744
|
} if (rf & 2) {
|
|
1745
1745
|
const _r0 = i0.ɵɵreference(1);
|
|
1746
1746
|
i0.ɵɵclassProp("ng-select--no-value-padding", ctx.noValuePadding)("ng-select--multiple-height-increased", ctx.multipleHeightIncreased);
|
|
1747
|
-
i0.ɵɵproperty("ngModel", ctx.selectedItem)("items", ctx.items)("bindLabel", ctx.bindLabel)("bindValue", ctx.bindValue)("multiple", ctx.multiple)("addTag", ctx.addTag)("appendTo", ctx.appendTo)("clearable", ctx.clearable)("searchable", ctx.searchable)("hideSelected", ctx.hideSelected)("placeholder", ctx.placeholder)("loading", ctx.loading)("loadingText", ctx.loadingText)("readonly", ctx.readonly)("closeOnSelect", ctx.closeOnSelect)("disabled", ctx.disabled)("labelForId", ctx.id)("maxSelectedItems", ctx.maxSelectedItems)("keyDownFn", ctx.keyDownFn)("searchFn", ctx.searchFn)("isOpen", (ctx.type !== "search-input" || !!(_r0.searchTerm == null ? null : _r0.searchTerm.length)) && ctx.isOpen)("groupBy", ctx.groupBy)("selectOnTab", ctx.selectOnTabKeyPress)("virtualScroll", ctx.virtualScroll)("typeahead", ctx.typeahead);
|
|
1747
|
+
i0.ɵɵproperty("ngModel", ctx.selectedItem)("items", ctx.items)("bindLabel", ctx.bindLabel)("bindValue", ctx.bindValue)("multiple", ctx.multiple)("addTag", ctx.addTag)("appendTo", ctx.appendTo)("clearable", ctx.clearable)("searchable", ctx.searchable)("hideSelected", ctx.hideSelected)("placeholder", ctx.placeholder)("loading", ctx.loading)("loadingText", ctx.loadingText)("readonly", ctx.readonly)("closeOnSelect", ctx.closeOnSelect)("disabled", ctx.disabled)("labelForId", ctx.id)("maxSelectedItems", ctx.maxSelectedItems)("keyDownFn", ctx.keyDownFn)("searchFn", ctx.searchFn)("isOpen", (ctx.type !== "search-input" || !!(_r0.searchTerm == null ? null : _r0.searchTerm.length)) && ctx.isOpen)("groupBy", ctx.groupBy)("selectOnTab", ctx.selectOnTabKeyPress)("virtualScroll", ctx.virtualScroll)("typeahead", ctx.typeahead)("compareWith", ctx.compareWith);
|
|
1748
1748
|
i0.ɵɵattribute("autofocus", ctx.autofocus);
|
|
1749
1749
|
i0.ɵɵadvance(2);
|
|
1750
1750
|
i0.ɵɵproperty("ngIf", ctx.optionHeaderTemplate);
|
|
@@ -1764,7 +1764,7 @@ class DrSelectComponent {
|
|
|
1764
1764
|
i0.ɵɵproperty("ngIf", ctx.groupBy);
|
|
1765
1765
|
i0.ɵɵadvance(2);
|
|
1766
1766
|
i0.ɵɵproperty("ngIf", ctx.type === "search-input");
|
|
1767
|
-
} }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i3.NgSelectComponent, i3.NgOptgroupTemplateDirective, i3.NgOptionTemplateDirective, i3.NgLabelTemplateDirective, i3.NgMultiLabelTemplateDirective, i3.NgHeaderTemplateDirective, i3.NgFooterTemplateDirective, i3.NgLoadingSpinnerTemplateDirective, DrSpinnerDirective, DrInputComponent], styles: ["[_nghost-%COMP%]{width:100%;height:32px;font-family:Poppins,sans-serif}.textView[_nghost-%COMP%] {width:auto}.textView[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border:none!important;cursor:pointer}.textView[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container{padding:0;color:#4646ce}.textView[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container:hover{text-decoration-line:underline}.textView[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none}.textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container, .textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:hover, .textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#fff!important;border:none!important;cursor:default}.textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value, .textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value, .textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}.textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}.textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-value-container:hover{text-decoration-line:none}.no-left-border-radius[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.no-right-border-radius[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.no-right-border[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-right:none!important}.no-left-border[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-left:none!important}[_nghost-%COMP%] ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9ea1aa;box-shadow:none!important}[_nghost-%COMP%] ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}[_nghost-%COMP%] ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-input{font-size:14px;line-height:24px;font-weight:400;top:0!important;padding:0 50px 0 8px!important;color:#333}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-input input::placeholder{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;padding:0 0 0 8px;height:100%;overflow:auto}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f}[_nghost-%COMP%] ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;max-height:58px}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:12px;line-height:16px;font-weight:400;color:#333;height:24px;padding:2px 16px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{padding:0!important}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea74\";font-size:20px;color:#333}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon, [_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container, [_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:hover, [_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#f0f1f4!important;border:1px solid #aeabac!important}[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value, [_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value, [_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow{color:#aeabac}[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow:before{color:#aeabac}[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}[_nghost-%COMP%] ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container, [_nghost-%COMP%] ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#bf1d30}[_nghost-%COMP%] ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container{max-height:88px}[_nghost-%COMP%] ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container .ng-value-container{max-height:88px}[_nghost-%COMP%] ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value, [_nghost-%COMP%] ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value{padding:0}[_nghost-%COMP%] ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value .ng-select-user-label, [_nghost-%COMP%] ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-select-user-label{height:100%}.ng-invalid.ng-touched[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-color:#bf1d30}[_nghost-%COMP%] .dr-select__loading[_ngcontent-%COMP%]{position:relative;height:32px;width:24px}.search-input[_nghost-%COMP%]{position:relative}.search-input[_nghost-%COMP%] .search-icon[_ngcontent-%COMP%]{position:absolute;top:4px;right:16px;color:#6d6e6f;z-index:1001}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-radius:16px}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none!important}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-clear-wrapper{display:flex;justify-content:center;align-items:center;right:40px;top:1px;width:24px;height:24px}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-clear-wrapper .ng-clear{font-size:24px;font-weight:300;color:#6d6e6f}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-input, .search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 16px!important;width:calc(100% - 63px)}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-input input, .search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container input{height:100%} ng-dropdown-panel.ng-dropdown-panel.dr-select{font-family:Poppins,sans-serif;border:1px solid #dfe0e3;border-radius:4px!important;margin:8px 0;box-shadow:0 4px 8px 1px #00000040;background-color:#fff;overflow:hidden;padding:8px 0} ng-dropdown-panel.ng-dropdown-panel.dr-select.textView{width:auto!important} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px;background:#fff} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f5f5f5} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected, ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#eaeaff;color:#333} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span, ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:400!important} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled{cursor:default} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div{color:#aeabac} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div.dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#aeabac} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]{font-size:14px;line-height:22px;color:#aeabac;cursor:default} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:not(:first-of-type){border-top:1px solid #dfe0e3} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:hover{background:#fff} ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper{color:#333} ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{max-width:-moz-fit-content;max-width:fit-content;word-break:break-word;white-space:normal;color:#6d6e6f;font-weight:400;font-size:12px;line-height:20px} ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description, ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected.ng-option-marked .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#6d6e6f} .ng-dropdown-panel--with-search .ng-dropdown-header{border-bottom:none}.custom-backdrop[_ngcontent-%COMP%]{position:fixed;inset:0;overflow:hidden;pointer-events:none}"] }); }
|
|
1767
|
+
} }, dependencies: [i1$2.NgControlStatus, i1$2.NgModel, i1.NgIf, i1.NgTemplateOutlet, i3.NgSelectComponent, i3.NgOptgroupTemplateDirective, i3.NgOptionTemplateDirective, i3.NgLabelTemplateDirective, i3.NgMultiLabelTemplateDirective, i3.NgHeaderTemplateDirective, i3.NgFooterTemplateDirective, i3.NgLoadingSpinnerTemplateDirective, DrSpinnerDirective, DrInputComponent], styles: ["[_nghost-%COMP%]{width:100%;height:32px;font-family:Poppins,sans-serif}.textView[_nghost-%COMP%] {width:auto}.textView[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border:none!important;cursor:pointer}.textView[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container{padding:0;color:#4646ce}.textView[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container:hover{text-decoration-line:underline}.textView[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none}.textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container, .textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:hover, .textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#fff!important;border:none!important;cursor:default}.textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value, .textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value, .textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}.textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}.textView[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-value-container:hover{text-decoration-line:none}.no-left-border-radius[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.no-right-border-radius[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.no-right-border[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-right:none!important}.no-left-border[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-left:none!important}[_nghost-%COMP%] ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9ea1aa;box-shadow:none!important}[_nghost-%COMP%] ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}[_nghost-%COMP%] ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-input{font-size:14px;line-height:24px;font-weight:400;top:0!important;padding:0 50px 0 8px!important;color:#333}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-input input::placeholder{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;padding:0 0 0 8px;height:100%;overflow:auto}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f}[_nghost-%COMP%] ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;max-height:58px}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:12px;line-height:16px;font-weight:400;color:#333;height:24px;padding:2px 16px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{padding:0!important}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea75\";font-size:20px;color:#333}[_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon, [_nghost-%COMP%] ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container, [_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:hover, [_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#f0f1f4!important;border:1px solid #aeabac!important}[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value, [_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value, [_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow{color:#aeabac}[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow:before{color:#aeabac}[_nghost-%COMP%] ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}[_nghost-%COMP%] ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container, [_nghost-%COMP%] ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#bf1d30}[_nghost-%COMP%] ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container{max-height:88px}[_nghost-%COMP%] ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container .ng-value-container{max-height:88px}[_nghost-%COMP%] ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value, [_nghost-%COMP%] ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value{padding:0}[_nghost-%COMP%] ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value .ng-select-user-label, [_nghost-%COMP%] ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-select-user-label{height:100%}.ng-invalid.ng-touched[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-color:#bf1d30}[_nghost-%COMP%] .dr-select__loading[_ngcontent-%COMP%]{position:relative;height:32px;width:24px}.search-input[_nghost-%COMP%]{position:relative}.search-input[_nghost-%COMP%] .search-icon[_ngcontent-%COMP%]{position:absolute;top:4px;right:16px;color:#6d6e6f;z-index:1001}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container{border-radius:16px}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none!important}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-clear-wrapper{display:flex;justify-content:center;align-items:center;right:40px;top:1px;width:24px;height:24px}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-clear-wrapper .ng-clear{font-size:24px;font-weight:300;color:#6d6e6f}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-input, .search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 16px!important;width:calc(100% - 63px)}.search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-input input, .search-input[_nghost-%COMP%] ng-select.ng-select .ng-select-container .ng-value-container input{height:100%} ng-dropdown-panel.ng-dropdown-panel.dr-select{font-family:Poppins,sans-serif;border:1px solid #dfe0e3;border-radius:4px!important;margin:8px 0;box-shadow:0 4px 8px 1px #00000040;background-color:#fff;overflow:hidden;padding:8px 0} ng-dropdown-panel.ng-dropdown-panel.dr-select.textView{width:auto!important} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px;background:#fff} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f5f5f5} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected, ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#eaeaff;color:#333} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span, ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:400!important} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled{cursor:default} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div{color:#aeabac} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div.dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#aeabac} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]{font-size:14px;line-height:22px;color:#aeabac;cursor:default} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:not(:first-of-type){border-top:1px solid #dfe0e3} ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:hover{background:#fff} ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper{color:#333} ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{max-width:-moz-fit-content;max-width:fit-content;word-break:break-word;white-space:normal;color:#6d6e6f;font-weight:400;font-size:12px;line-height:20px} ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description, ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected.ng-option-marked .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#6d6e6f} .ng-dropdown-panel--with-search .ng-dropdown-header{border-bottom:none}.custom-backdrop[_ngcontent-%COMP%]{position:fixed;inset:0;overflow:hidden;pointer-events:none}"] }); }
|
|
1768
1768
|
}
|
|
1769
1769
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrSelectComponent, [{
|
|
1770
1770
|
type: Component,
|
|
@@ -1774,7 +1774,7 @@ class DrSelectComponent {
|
|
|
1774
1774
|
useExisting: DrSelectComponent,
|
|
1775
1775
|
multi: true,
|
|
1776
1776
|
},
|
|
1777
|
-
], template: "<ng-select\n [(ngModel)]=\"selectedItem\"\n [items]=\"items\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [multiple]=\"multiple\"\n [addTag]=\"addTag\"\n [appendTo]=\"appendTo\"\n [clearable]=\"clearable\"\n [searchable]=\"searchable\"\n [hideSelected]=\"hideSelected\"\n [placeholder]=\"placeholder\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText\"\n [readonly]=\"readonly\"\n [closeOnSelect]=\"closeOnSelect\"\n [disabled]=\"disabled\"\n [labelForId]=\"id\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [keyDownFn]=\"keyDownFn\"\n [searchFn]=\"searchFn\"\n [isOpen]=\"(type !== 'search-input' || !!selectComponent.searchTerm?.length) && isOpen\"\n [groupBy]=\"groupBy\"\n [attr.autofocus]=\"autofocus\"\n [selectOnTab]=\"selectOnTabKeyPress\"\n [virtualScroll]=\"virtualScroll\"\n [typeahead]=\"typeahead\"\n (search)=\"search.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit($event)\"\n (keydown.tab)=\"onTabKeypress($event)\"\n (change)=\"onValueSelected(selectedItem)\"\n (open)=\"open.emit($event); onDropdownOpen()\"\n (close)=\"onClose($event)\"\n class=\"dr-select\"\n [class.ng-select--no-value-padding]=\"noValuePadding\"\n [class.ng-select--multiple-height-increased]=\"multipleHeightIncreased\"\n #selectComponent>\n <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n </ng-template>\n <ng-template\n ng-header-tmp\n *ngIf=\"!optionHeaderTemplate && isDisplayingSearchInHeader && items?.length >= minItemsToDisplaySearchInHeader\"\n let-item=\"item\">\n <dr-input\n class=\"dr-select__search\"\n [ngModel]=\"selectComponent.searchTerm\"\n (ngModelChange)=\"selectComponent.itemsList.filter($event + '')\"\n type=\"search\">\n </dr-input>\n </ng-template>\n <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"multiLabelTemplate\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-container [ngTemplateOutlet]=\"multiLabelTemplate\" [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\" let-item$=\"item$\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ item: item, item$: item$ }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"optionWithDescription\" ng-option-tmp let-item=\"item\">\n <div class=\"dr-select__option-with-desc__wrapper\">\n <div>{{ item.name }}</div>\n <div class=\"dr-select__option-with-desc__description\">{{ item?.description }}</div>\n </div>\n </ng-template>\n <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n <ng-container\n [ngTemplateOutlet]=\"optionFooterTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, close: selectComponent.close.bind(selectComponent) }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"groupBy\" ng-optgroup-tmp let-item=\"item\">\n {{ item[groupBy] }}\n </ng-template>\n <ng-template ng-loadingspinner-tmp>\n <div\n *ngIf=\"loading\"\n class=\"dr-select__loading\"\n [drSpinner]=\"loading\"\n [drSpinnerType]=\"'circle'\"\n [drSpinnerSize]=\"'small'\"\n [drSpinnerNoOverlay]=\"true\"></div>\n </ng-template>\n</ng-select>\n<i *ngIf=\"type === 'search-input'\" class=\"search-icon dr-icon-search\"></i>\n", styles: [":host{width:100%;height:32px;font-family:Poppins,sans-serif}:host.textView::ng-deep{width:auto}:host.textView::ng-deep ng-select.ng-select .ng-select-container{border:none!important;cursor:pointer}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0;color:#4646ce}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container:hover{text-decoration-line:underline}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#fff!important;border:none!important;cursor:default}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-value-container:hover{text-decoration-line:none}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9ea1aa;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{font-size:14px;line-height:24px;font-weight:400;top:0!important;padding:0 50px 0 8px!important;color:#333}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:12px;line-height:16px;font-weight:400;color:#333;height:24px;padding:2px 16px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea74\";font-size:20px;color:#333}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#f0f1f4!important;border:1px solid #aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow:before{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#bf1d30}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container{max-height:88px}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container .ng-value-container{max-height:88px}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value{padding:0}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value .ng-select-user-label,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-select-user-label{height:100%}:host.ng-invalid.ng-touched::ng-deep ng-select.ng-select .ng-select-container{border-color:#bf1d30}:host .dr-select__loading{position:relative;height:32px;width:24px}:host.search-input{position:relative}:host.search-input .search-icon{position:absolute;top:4px;right:16px;color:#6d6e6f;z-index:1001}:host.search-input::ng-deep ng-select.ng-select .ng-select-container{border-radius:16px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none!important}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper{display:flex;justify-content:center;align-items:center;right:40px;top:1px;width:24px;height:24px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper .ng-clear{font-size:24px;font-weight:300;color:#6d6e6f}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 16px!important;width:calc(100% - 63px)}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container input{height:100%}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{font-family:Poppins,sans-serif;border:1px solid #dfe0e3;border-radius:4px!important;margin:8px 0;box-shadow:0 4px 8px 1px #00000040;background-color:#fff;overflow:hidden;padding:8px 0}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.textView{width:auto!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px;background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f5f5f5}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#eaeaff;color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:400!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div.dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]{font-size:14px;line-height:22px;color:#aeabac;cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:not(:first-of-type){border-top:1px solid #dfe0e3}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:hover{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper{color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{max-width:-moz-fit-content;max-width:fit-content;word-break:break-word;white-space:normal;color:#6d6e6f;font-weight:400;font-size:12px;line-height:20px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected.ng-option-marked .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#6d6e6f}::ng-deep .ng-dropdown-panel--with-search .ng-dropdown-header{border-bottom:none}.custom-backdrop{position:fixed;inset:0;overflow:hidden;pointer-events:none}\n"] }]
|
|
1777
|
+
], template: "<ng-select\n [(ngModel)]=\"selectedItem\"\n [items]=\"items\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [multiple]=\"multiple\"\n [addTag]=\"addTag\"\n [appendTo]=\"appendTo\"\n [clearable]=\"clearable\"\n [searchable]=\"searchable\"\n [hideSelected]=\"hideSelected\"\n [placeholder]=\"placeholder\"\n [loading]=\"loading\"\n [loadingText]=\"loadingText\"\n [readonly]=\"readonly\"\n [closeOnSelect]=\"closeOnSelect\"\n [disabled]=\"disabled\"\n [labelForId]=\"id\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [keyDownFn]=\"keyDownFn\"\n [searchFn]=\"searchFn\"\n [isOpen]=\"(type !== 'search-input' || !!selectComponent.searchTerm?.length) && isOpen\"\n [groupBy]=\"groupBy\"\n [attr.autofocus]=\"autofocus\"\n [selectOnTab]=\"selectOnTabKeyPress\"\n [virtualScroll]=\"virtualScroll\"\n [typeahead]=\"typeahead\"\n (search)=\"search.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit($event)\"\n (keydown.tab)=\"onTabKeypress($event)\"\n [compareWith]=\"compareWith\"\n (change)=\"onValueSelected(selectedItem)\"\n (open)=\"open.emit($event); onDropdownOpen()\"\n (close)=\"onClose($event)\"\n class=\"dr-select\"\n [class.ng-select--no-value-padding]=\"noValuePadding\"\n [class.ng-select--multiple-height-increased]=\"multipleHeightIncreased\"\n #selectComponent>\n <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n </ng-template>\n <ng-template\n ng-header-tmp\n *ngIf=\"!optionHeaderTemplate && isDisplayingSearchInHeader && items?.length >= minItemsToDisplaySearchInHeader\"\n let-item=\"item\">\n <dr-input\n class=\"dr-select__search\"\n [ngModel]=\"selectComponent.searchTerm\"\n (ngModelChange)=\"selectComponent.itemsList.filter($event + '')\"\n type=\"search\">\n </dr-input>\n </ng-template>\n <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"multiLabelTemplate\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <ng-container [ngTemplateOutlet]=\"multiLabelTemplate\" [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n </ng-container>\n </ng-template>\n <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\" let-item$=\"item$\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ item: item, item$: item$ }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"optionWithDescription\" ng-option-tmp let-item=\"item\">\n <div class=\"dr-select__option-with-desc__wrapper\">\n <div>{{ item.name }}</div>\n <div class=\"dr-select__option-with-desc__description\">{{ item?.description }}</div>\n </div>\n </ng-template>\n <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\n <ng-container\n [ngTemplateOutlet]=\"optionFooterTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, close: selectComponent.close.bind(selectComponent) }\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"groupBy\" ng-optgroup-tmp let-item=\"item\">\n {{ item[groupBy] }}\n </ng-template>\n <ng-template ng-loadingspinner-tmp>\n <div\n *ngIf=\"loading\"\n class=\"dr-select__loading\"\n [drSpinner]=\"loading\"\n [drSpinnerType]=\"'circle'\"\n [drSpinnerSize]=\"'small'\"\n [drSpinnerNoOverlay]=\"true\"></div>\n </ng-template>\n</ng-select>\n<i *ngIf=\"type === 'search-input'\" class=\"search-icon dr-icon-search\"></i>\n", styles: [":host{width:100%;height:32px;font-family:Poppins,sans-serif}:host.textView::ng-deep{width:auto}:host.textView::ng-deep ng-select.ng-select .ng-select-container{border:none!important;cursor:pointer}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0;color:#4646ce}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-value-container:hover{text-decoration-line:underline}:host.textView::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#fff!important;border:none!important;cursor:default}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host.textView::ng-deep ng-select.ng-select.ng-select-disabled .ng-value-container:hover{text-decoration-line:none}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px;border:1px solid #9ea1aa;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#4646ce}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{font-size:14px;line-height:24px;font-weight:400;top:0!important;padding:0 50px 0 8px!important;color:#333}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input input::placeholder{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{margin-right:7px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow{border:none;width:auto;height:auto;display:flex;text-decoration-line:none;top:0}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:before{font-family:DataRails!important;content:\"\\ea17\";font-size:24px;color:#6d6e6f}:host ::ng-deep ng-select.ng-select.ng-select-opened .ng-select-container{border-radius:6px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{font-size:14px;line-height:24px;font-weight:400;max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:12px;line-height:16px;font-weight:400;color:#333;height:24px;padding:2px 16px;margin:2px 4px 2px 0;background:#f0f1f4;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0!important;width:20px;display:flex;align-items:center;color:transparent;margin-left:4px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:before{font-family:DataRails!important;content:\"\\ea75\";font-size:20px;color:#333}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#f0f1f4!important;border:1px solid #aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#aeabac!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-arrow:before{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-input input::placeholder{color:#aeabac}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#bf1d30}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container{max-height:88px}:host ::ng-deep ng-select.ng-select--multiple-height-increased.ng-select-multiple .ng-select-container .ng-value-container{max-height:88px}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value{padding:0}:host ::ng-deep ng-select.ng-select--no-value-padding .ng-select-container .ng-value-container .ng-value .ng-select-user-label,:host ::ng-deep ng-select.ng-select--no-value-padding.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-select-user-label{height:100%}:host.ng-invalid.ng-touched::ng-deep ng-select.ng-select .ng-select-container{border-color:#bf1d30}:host .dr-select__loading{position:relative;height:32px;width:24px}:host.search-input{position:relative}:host.search-input .search-icon{position:absolute;top:4px;right:16px;color:#6d6e6f;z-index:1001}:host.search-input::ng-deep ng-select.ng-select .ng-select-container{border-radius:16px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-arrow-wrapper{display:none!important}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper{display:flex;justify-content:center;align-items:center;right:40px;top:1px;width:24px;height:24px}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-clear-wrapper .ng-clear{font-size:24px;font-weight:300;color:#6d6e6f}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 16px!important;width:calc(100% - 63px)}:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-input input,:host.search-input::ng-deep ng-select.ng-select .ng-select-container .ng-value-container input{height:100%}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{font-family:Poppins,sans-serif;border:1px solid #dfe0e3;border-radius:4px!important;margin:8px 0;box-shadow:0 4px 8px 1px #00000040;background-color:#fff;overflow:hidden;padding:8px 0}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.textView{width:auto!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px;background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#f5f5f5}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#eaeaff;color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:400!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled{cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled>div.dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#aeabac}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]{font-size:14px;line-height:22px;color:#aeabac;cursor:default}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:not(:first-of-type){border-top:1px solid #dfe0e3}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-disabled[role=group]:hover{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper{color:#333}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{max-width:-moz-fit-content;max-width:fit-content;word-break:break-word;white-space:normal;color:#6d6e6f;font-weight:400;font-size:12px;line-height:20px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected.ng-option-marked .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#6d6e6f}::ng-deep .ng-dropdown-panel--with-search .ng-dropdown-header{border-bottom:none}.custom-backdrop{position:fixed;inset:0;overflow:hidden;pointer-events:none}\n"] }]
|
|
1778
1778
|
}], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, { type: [{
|
|
1779
1779
|
type: Input
|
|
1780
1780
|
}, {
|
|
@@ -1796,6 +1796,8 @@ class DrSelectComponent {
|
|
|
1796
1796
|
type: Input
|
|
1797
1797
|
}], clearable: [{
|
|
1798
1798
|
type: Input
|
|
1799
|
+
}], compareWith: [{
|
|
1800
|
+
type: Input
|
|
1799
1801
|
}], searchable: [{
|
|
1800
1802
|
type: Input
|
|
1801
1803
|
}], isDisplayingSearchInHeader: [{
|