@morozeckiy/dd-lib 0.7.51 → 0.7.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/scss/vars-light.scss +1 -0
- package/fesm2022/morozeckiy-dd-lib.mjs +2 -2
- package/fesm2022/morozeckiy-dd-lib.mjs.map +1 -1
- package/lib/core/services/validators.service.d.ts +2 -2
- package/morozeckiy-dd-lib-0.7.52.tgz +0 -0
- package/package.json +1 -1
- package/morozeckiy-dd-lib-0.7.51.tgz +0 -0
|
@@ -3595,7 +3595,7 @@ class LibSelectComponent extends LibCommonInputTextComponent {
|
|
|
3595
3595
|
useExisting: forwardRef(() => LibSelectComponent),
|
|
3596
3596
|
multi: true,
|
|
3597
3597
|
},
|
|
3598
|
-
], viewQueries: [{ propertyName: "selectEl", first: true, predicate: ["select"], descendants: true, read: ElementRef, static: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInputEl"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\r\n @if (label) {\r\n <label [for]=\"id\" class=\"lib-select__title\">\r\n {{ label }}\r\n @if (required) {\r\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"pos-relative\" data-child=\"input\">\r\n\r\n <input\r\n #select\r\n (change)=\"handleChange()\"\r\n (click)=\"notifyFocusEvent($event)\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleBlur()\"\r\n (focus)=\"handleFocus()\"\r\n [attr.id]=\"selectId\"\r\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\r\n [attr.tabIndex]=\"tabIndex\"\r\n [attr.type]=\"'text'\"\r\n [class.focused]=\"focused\"\r\n [class.invalid]=\"showError\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"true\"\r\n [(ngModel)]=\"inputValue\"\r\n [title]=\"inputValue || ''\"\r\n class=\"text-select select-block\" />\r\n\r\n @if (multiCountValue) {\r\n <div class=\"selected-items-container\"\r\n id=\"selected-{{selectId}}\">\r\n\r\n <dd-lib-horizontal-scroll>\r\n @for (item of checkedItems; track item) {\r\n <div class=\"selected-items__item\">\r\n @if (stringArray()) {\r\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"selected-items__item-title\"></div>\r\n }\r\n @if (keyTitle && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"selected-items__item-title\"></div>\r\n }\r\n @if (keyDesc && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n [title]=\"item[keyDesc]\"\r\n class=\"selected-items__item-desc\"></div>\r\n }\r\n <dd-lib-svg-icon id=\"selected-clear-{{selectId}}\" icon=\"clear\" class=\"cup\"\r\n (click)=\"selectItem(item)\"></dd-lib-svg-icon>\r\n </div>\r\n }\r\n </dd-lib-horizontal-scroll>\r\n </div>\r\n\r\n }\r\n <!-- (blur)=\"notifyFocusEvent($event)\"-->\r\n @if (!checkedItem) {\r\n <dd-lib-svg-icon\r\n (click)=\"notifyFocusEvent($event)\"\r\n [class.black-svg]=\"isShownList\"\r\n [class.disabled]=\"disabled\"\r\n [class.gray-svg]=\"!isShownList\"\r\n [class.up]=\"isShownList\"\r\n id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\r\n\r\n } @else if (clearable && !searchValue) {\r\n <dd-lib-svg-icon\r\n (click)=\"onClear(checkedItem)\"\r\n class=\"clear\"\r\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\r\n }\r\n </div>\r\n\r\n @if (errorTexts.length && showError) {\r\n @for (error of errorTexts; track error) {\r\n <div class=\"lib-select__error\">{{ error }}</div>\r\n }\r\n }\r\n @if (errorText && showSelfError && showError) {\r\n <div class=\"lib-select__error\">{{ errorText }}</div>\r\n }\r\n\r\n @if (isShownList) {\r\n <div\r\n id=\"dropdown\"\r\n [style.max-height]=\"searchOn ? '342px' : '300px'\"\r\n data-child=\"list\"\r\n (ddClickOutside)=\"notifyFocusEvent($event);fullBlur.emit($event)\"\r\n [elements]=\"['lib-select-' + selectId, 'chevron-' + selectId, 'selected-' + selectId, 'selected-clear-' + selectId]\"\r\n ddListKeyboardNavigation\r\n class=\"select-list-wrapper\">\r\n @if (_data()) {\r\n <!-- \u0415\u0441\u043B\u0438 \u0434\u0430\u043D\u043D\u044B\u0435 \u0434\u043B\u044F \u0441\u0435\u0434\u0435\u043A\u0442\u0430 \u043D\u0435 \u043F\u0440\u0438\u0448\u043B\u043E-->\r\n @if (!_data()?.length && noDataError) {\r\n <div class=\"info-container\">\r\n <div class=\"b2-title no-wrap-text\">\r\n {{ noDataError }}\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- \u043F\u043E\u0438\u0441\u043A-->\r\n @if (_data()?.length && _data()!.length > 5 && searchOn) {\r\n <div class=\"search-block\">\r\n <dd-lib-svg-icon\r\n class=\"search-icon\"\r\n id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\r\n <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\r\n [readOnly]=\"readOnly\"\r\n (input)=\"searchInput($event)\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (blur)=\"handleBlur()\"\r\n (focus)=\"handleFocus()\"\r\n [(ngModel)]=\"searchValue\" type=\"text\">\r\n <dd-lib-svg-icon\r\n [style.display]=\"searchValue ? 'block' : 'none'\"\r\n class=\"cup\"\r\n (click)=\"searchValue=''\"\r\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n </div>\r\n }\r\n <!-- \u0415\u0441\u043B\u0438 \u043F\u043E\u0438\u0441\u043A \u043D\u0435 \u0434\u0430\u043B \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432-->\r\n @if (_data()?.length && (_data() | filterByKey: filterList.bind(this))?.length === 0) {\r\n <div class=\"info-container\">\r\n <div class=\"b2-title no-wrap-text\">\r\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\r\n </div>\r\n </div>\r\n }\r\n @if (virtualScroll) {\r\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\r\n <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this)\">\r\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item}\"></ng-container>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n @for (item of _data() | filterByKey: filterList.bind(this); track item) {\r\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item}\"></ng-container>\r\n }\r\n }\r\n } @else {\r\n <div class=\"info-container\">\r\n <div class=\"d-flex gap-12 align-center\">\r\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\r\n <dd-lib-loader></dd-lib-loader>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #rowItem let-item=item>\r\n <div ddSelectableItem [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\r\n (click)=\"selectItem(item)\"\r\n (itemSelected)=\"selectItem(item)\"\r\n [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\r\n [class.s-item-disabled]=\"item.disabled\"\r\n class=\"select-data\">\r\n @if (stringArray()) {\r\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"select-data__title\"></div>\r\n }\r\n @if (keyTitle && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"select-data__title\"></div>\r\n }\r\n @if (keyDesc && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n [title]=\"item[keyDesc]\"\r\n class=\"select-data__desc\"></div>\r\n }\r\n @if (checkSelected(item)) {\r\n <dd-lib-svg-icon\r\n (click)=\"selectItem(checkedItem)\"\r\n class=\"checked\"\r\n id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--gray-bgc)}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items{position:absolute;display:flex;gap:4px;flex-wrap:wrap;z-index:101;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);padding:8px}.selected-items__item{background:var(--disabled-color);color:#fff;padding:12px;border-radius:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--primary-green-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center}.selected-items-container .selected-items__item-title{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: FilterByKeyPipe, name: "filterByKey" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TooltipDirective, selector: "[ddTooltip]", inputs: ["ddTooltip", "withClick", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListKeyboardNavigationDirective, selector: "[ddListKeyboardNavigation]" }, { kind: "directive", type: SelectableItemDirective, selector: "[ddSelectableItem]", outputs: ["itemSelected"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }, { kind: "component", type: LibHorizontalScrollComponent, selector: "dd-lib-horizontal-scroll" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3598
|
+
], viewQueries: [{ propertyName: "selectEl", first: true, predicate: ["select"], descendants: true, read: ElementRef, static: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInputEl"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\r\n @if (label) {\r\n <label [for]=\"id\" class=\"lib-select__title\">\r\n {{ label }}\r\n @if (required) {\r\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"pos-relative\" data-child=\"input\">\r\n\r\n <input\r\n #select\r\n (change)=\"handleChange()\"\r\n (click)=\"notifyFocusEvent($event)\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleBlur()\"\r\n (focus)=\"handleFocus()\"\r\n [attr.id]=\"selectId\"\r\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\r\n [attr.tabIndex]=\"tabIndex\"\r\n [attr.type]=\"'text'\"\r\n [class.focused]=\"focused\"\r\n [class.invalid]=\"showError\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"true\"\r\n [(ngModel)]=\"inputValue\"\r\n [title]=\"inputValue || ''\"\r\n class=\"text-select select-block\" />\r\n\r\n @if (multiCountValue) {\r\n <div class=\"selected-items-container\"\r\n id=\"selected-{{selectId}}\">\r\n\r\n <dd-lib-horizontal-scroll>\r\n @for (item of checkedItems; track item) {\r\n <div class=\"selected-items__item\">\r\n @if (stringArray()) {\r\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"selected-items__item-title\"></div>\r\n }\r\n @if (keyTitle && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"selected-items__item-title\"></div>\r\n }\r\n @if (keyDesc && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n [title]=\"item[keyDesc]\"\r\n class=\"selected-items__item-desc\"></div>\r\n }\r\n <dd-lib-svg-icon id=\"selected-clear-{{selectId}}\" icon=\"clear\" class=\"cup\"\r\n (click)=\"selectItem(item)\"></dd-lib-svg-icon>\r\n </div>\r\n }\r\n </dd-lib-horizontal-scroll>\r\n </div>\r\n\r\n }\r\n <!-- (blur)=\"notifyFocusEvent($event)\"-->\r\n @if (!checkedItem) {\r\n <dd-lib-svg-icon\r\n (click)=\"notifyFocusEvent($event)\"\r\n [class.black-svg]=\"isShownList\"\r\n [class.disabled]=\"disabled\"\r\n [class.gray-svg]=\"!isShownList\"\r\n [class.up]=\"isShownList\"\r\n id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\r\n\r\n } @else if (clearable && !searchValue) {\r\n <dd-lib-svg-icon\r\n (click)=\"onClear(checkedItem)\"\r\n class=\"clear\"\r\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\r\n }\r\n </div>\r\n\r\n @if (errorTexts.length && showError) {\r\n @for (error of errorTexts; track error) {\r\n <div class=\"lib-select__error\">{{ error }}</div>\r\n }\r\n }\r\n @if (errorText && showSelfError && showError) {\r\n <div class=\"lib-select__error\">{{ errorText }}</div>\r\n }\r\n\r\n @if (isShownList) {\r\n <div\r\n id=\"dropdown\"\r\n [style.max-height]=\"searchOn ? '342px' : '300px'\"\r\n data-child=\"list\"\r\n (ddClickOutside)=\"notifyFocusEvent($event);fullBlur.emit($event)\"\r\n [elements]=\"['lib-select-' + selectId, 'chevron-' + selectId, 'selected-' + selectId, 'selected-clear-' + selectId]\"\r\n ddListKeyboardNavigation\r\n class=\"select-list-wrapper\">\r\n @if (_data()) {\r\n <!-- \u0415\u0441\u043B\u0438 \u0434\u0430\u043D\u043D\u044B\u0435 \u0434\u043B\u044F \u0441\u0435\u0434\u0435\u043A\u0442\u0430 \u043D\u0435 \u043F\u0440\u0438\u0448\u043B\u043E-->\r\n @if (!_data()?.length && noDataError) {\r\n <div class=\"info-container\">\r\n <div class=\"b2-title no-wrap-text\">\r\n {{ noDataError }}\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- \u043F\u043E\u0438\u0441\u043A-->\r\n @if (_data()?.length && _data()!.length > 5 && searchOn) {\r\n <div class=\"search-block\">\r\n <dd-lib-svg-icon\r\n class=\"search-icon\"\r\n id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\r\n <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\r\n [readOnly]=\"readOnly\"\r\n (input)=\"searchInput($event)\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (blur)=\"handleBlur()\"\r\n (focus)=\"handleFocus()\"\r\n [(ngModel)]=\"searchValue\" type=\"text\">\r\n <dd-lib-svg-icon\r\n [style.display]=\"searchValue ? 'block' : 'none'\"\r\n class=\"cup\"\r\n (click)=\"searchValue=''\"\r\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n </div>\r\n }\r\n <!-- \u0415\u0441\u043B\u0438 \u043F\u043E\u0438\u0441\u043A \u043D\u0435 \u0434\u0430\u043B \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432-->\r\n @if (_data()?.length && (_data() | filterByKey: filterList.bind(this))?.length === 0) {\r\n <div class=\"info-container\">\r\n <div class=\"b2-title no-wrap-text\">\r\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\r\n </div>\r\n </div>\r\n }\r\n @if (virtualScroll) {\r\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\r\n <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this)\">\r\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item}\"></ng-container>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n @for (item of _data() | filterByKey: filterList.bind(this); track item) {\r\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item}\"></ng-container>\r\n }\r\n }\r\n } @else {\r\n <div class=\"info-container\">\r\n <div class=\"d-flex gap-12 align-center\">\r\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\r\n <dd-lib-loader></dd-lib-loader>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #rowItem let-item=item>\r\n <div ddSelectableItem [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\r\n (click)=\"selectItem(item)\"\r\n (itemSelected)=\"selectItem(item)\"\r\n [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\r\n [class.s-item-disabled]=\"item.disabled\"\r\n class=\"select-data\">\r\n @if (stringArray()) {\r\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"select-data__title\"></div>\r\n }\r\n @if (keyTitle && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"select-data__title\"></div>\r\n }\r\n @if (keyDesc && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n [title]=\"item[keyDesc]\"\r\n class=\"select-data__desc\"></div>\r\n }\r\n @if (checkSelected(item)) {\r\n <dd-lib-svg-icon\r\n (click)=\"selectItem(checkedItem)\"\r\n class=\"checked\"\r\n id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--gray-bgc)}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--blue-card);color:var(--font-light-black-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center}.selected-items-container .selected-items__item-title{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: FilterByKeyPipe, name: "filterByKey" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TooltipDirective, selector: "[ddTooltip]", inputs: ["ddTooltip", "withClick", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListKeyboardNavigationDirective, selector: "[ddListKeyboardNavigation]" }, { kind: "directive", type: SelectableItemDirective, selector: "[ddSelectableItem]", outputs: ["itemSelected"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }, { kind: "component", type: LibHorizontalScrollComponent, selector: "dd-lib-horizontal-scroll" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3599
3599
|
}
|
|
3600
3600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSelectComponent, decorators: [{
|
|
3601
3601
|
type: Component,
|
|
@@ -3622,7 +3622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
3622
3622
|
useExisting: forwardRef(() => LibSelectComponent),
|
|
3623
3623
|
multi: true,
|
|
3624
3624
|
},
|
|
3625
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\r\n @if (label) {\r\n <label [for]=\"id\" class=\"lib-select__title\">\r\n {{ label }}\r\n @if (required) {\r\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"pos-relative\" data-child=\"input\">\r\n\r\n <input\r\n #select\r\n (change)=\"handleChange()\"\r\n (click)=\"notifyFocusEvent($event)\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleBlur()\"\r\n (focus)=\"handleFocus()\"\r\n [attr.id]=\"selectId\"\r\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\r\n [attr.tabIndex]=\"tabIndex\"\r\n [attr.type]=\"'text'\"\r\n [class.focused]=\"focused\"\r\n [class.invalid]=\"showError\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"true\"\r\n [(ngModel)]=\"inputValue\"\r\n [title]=\"inputValue || ''\"\r\n class=\"text-select select-block\" />\r\n\r\n @if (multiCountValue) {\r\n <div class=\"selected-items-container\"\r\n id=\"selected-{{selectId}}\">\r\n\r\n <dd-lib-horizontal-scroll>\r\n @for (item of checkedItems; track item) {\r\n <div class=\"selected-items__item\">\r\n @if (stringArray()) {\r\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"selected-items__item-title\"></div>\r\n }\r\n @if (keyTitle && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"selected-items__item-title\"></div>\r\n }\r\n @if (keyDesc && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n [title]=\"item[keyDesc]\"\r\n class=\"selected-items__item-desc\"></div>\r\n }\r\n <dd-lib-svg-icon id=\"selected-clear-{{selectId}}\" icon=\"clear\" class=\"cup\"\r\n (click)=\"selectItem(item)\"></dd-lib-svg-icon>\r\n </div>\r\n }\r\n </dd-lib-horizontal-scroll>\r\n </div>\r\n\r\n }\r\n <!-- (blur)=\"notifyFocusEvent($event)\"-->\r\n @if (!checkedItem) {\r\n <dd-lib-svg-icon\r\n (click)=\"notifyFocusEvent($event)\"\r\n [class.black-svg]=\"isShownList\"\r\n [class.disabled]=\"disabled\"\r\n [class.gray-svg]=\"!isShownList\"\r\n [class.up]=\"isShownList\"\r\n id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\r\n\r\n } @else if (clearable && !searchValue) {\r\n <dd-lib-svg-icon\r\n (click)=\"onClear(checkedItem)\"\r\n class=\"clear\"\r\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\r\n }\r\n </div>\r\n\r\n @if (errorTexts.length && showError) {\r\n @for (error of errorTexts; track error) {\r\n <div class=\"lib-select__error\">{{ error }}</div>\r\n }\r\n }\r\n @if (errorText && showSelfError && showError) {\r\n <div class=\"lib-select__error\">{{ errorText }}</div>\r\n }\r\n\r\n @if (isShownList) {\r\n <div\r\n id=\"dropdown\"\r\n [style.max-height]=\"searchOn ? '342px' : '300px'\"\r\n data-child=\"list\"\r\n (ddClickOutside)=\"notifyFocusEvent($event);fullBlur.emit($event)\"\r\n [elements]=\"['lib-select-' + selectId, 'chevron-' + selectId, 'selected-' + selectId, 'selected-clear-' + selectId]\"\r\n ddListKeyboardNavigation\r\n class=\"select-list-wrapper\">\r\n @if (_data()) {\r\n <!-- \u0415\u0441\u043B\u0438 \u0434\u0430\u043D\u043D\u044B\u0435 \u0434\u043B\u044F \u0441\u0435\u0434\u0435\u043A\u0442\u0430 \u043D\u0435 \u043F\u0440\u0438\u0448\u043B\u043E-->\r\n @if (!_data()?.length && noDataError) {\r\n <div class=\"info-container\">\r\n <div class=\"b2-title no-wrap-text\">\r\n {{ noDataError }}\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- \u043F\u043E\u0438\u0441\u043A-->\r\n @if (_data()?.length && _data()!.length > 5 && searchOn) {\r\n <div class=\"search-block\">\r\n <dd-lib-svg-icon\r\n class=\"search-icon\"\r\n id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\r\n <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\r\n [readOnly]=\"readOnly\"\r\n (input)=\"searchInput($event)\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (blur)=\"handleBlur()\"\r\n (focus)=\"handleFocus()\"\r\n [(ngModel)]=\"searchValue\" type=\"text\">\r\n <dd-lib-svg-icon\r\n [style.display]=\"searchValue ? 'block' : 'none'\"\r\n class=\"cup\"\r\n (click)=\"searchValue=''\"\r\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n </div>\r\n }\r\n <!-- \u0415\u0441\u043B\u0438 \u043F\u043E\u0438\u0441\u043A \u043D\u0435 \u0434\u0430\u043B \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432-->\r\n @if (_data()?.length && (_data() | filterByKey: filterList.bind(this))?.length === 0) {\r\n <div class=\"info-container\">\r\n <div class=\"b2-title no-wrap-text\">\r\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\r\n </div>\r\n </div>\r\n }\r\n @if (virtualScroll) {\r\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\r\n <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this)\">\r\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item}\"></ng-container>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n @for (item of _data() | filterByKey: filterList.bind(this); track item) {\r\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item}\"></ng-container>\r\n }\r\n }\r\n } @else {\r\n <div class=\"info-container\">\r\n <div class=\"d-flex gap-12 align-center\">\r\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\r\n <dd-lib-loader></dd-lib-loader>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #rowItem let-item=item>\r\n <div ddSelectableItem [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\r\n (click)=\"selectItem(item)\"\r\n (itemSelected)=\"selectItem(item)\"\r\n [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\r\n [class.s-item-disabled]=\"item.disabled\"\r\n class=\"select-data\">\r\n @if (stringArray()) {\r\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"select-data__title\"></div>\r\n }\r\n @if (keyTitle && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"select-data__title\"></div>\r\n }\r\n @if (keyDesc && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n [title]=\"item[keyDesc]\"\r\n class=\"select-data__desc\"></div>\r\n }\r\n @if (checkSelected(item)) {\r\n <dd-lib-svg-icon\r\n (click)=\"selectItem(checkedItem)\"\r\n class=\"checked\"\r\n id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--gray-bgc)}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items{position:absolute;display:flex;gap:4px;flex-wrap:wrap;z-index:101;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);padding:8px}.selected-items__item{background:var(--disabled-color);color:#fff;padding:12px;border-radius:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--primary-green-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center}.selected-items-container .selected-items__item-title{white-space:nowrap}\n"] }]
|
|
3625
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\r\n @if (label) {\r\n <label [for]=\"id\" class=\"lib-select__title\">\r\n {{ label }}\r\n @if (required) {\r\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"pos-relative\" data-child=\"input\">\r\n\r\n <input\r\n #select\r\n (change)=\"handleChange()\"\r\n (click)=\"notifyFocusEvent($event)\"\r\n (input)=\"handleInput($event)\"\r\n (blur)=\"handleBlur()\"\r\n (focus)=\"handleFocus()\"\r\n [attr.id]=\"selectId\"\r\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\r\n [attr.tabIndex]=\"tabIndex\"\r\n [attr.type]=\"'text'\"\r\n [class.focused]=\"focused\"\r\n [class.invalid]=\"showError\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"true\"\r\n [(ngModel)]=\"inputValue\"\r\n [title]=\"inputValue || ''\"\r\n class=\"text-select select-block\" />\r\n\r\n @if (multiCountValue) {\r\n <div class=\"selected-items-container\"\r\n id=\"selected-{{selectId}}\">\r\n\r\n <dd-lib-horizontal-scroll>\r\n @for (item of checkedItems; track item) {\r\n <div class=\"selected-items__item\">\r\n @if (stringArray()) {\r\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"selected-items__item-title\"></div>\r\n }\r\n @if (keyTitle && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"selected-items__item-title\"></div>\r\n }\r\n @if (keyDesc && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n [title]=\"item[keyDesc]\"\r\n class=\"selected-items__item-desc\"></div>\r\n }\r\n <dd-lib-svg-icon id=\"selected-clear-{{selectId}}\" icon=\"clear\" class=\"cup\"\r\n (click)=\"selectItem(item)\"></dd-lib-svg-icon>\r\n </div>\r\n }\r\n </dd-lib-horizontal-scroll>\r\n </div>\r\n\r\n }\r\n <!-- (blur)=\"notifyFocusEvent($event)\"-->\r\n @if (!checkedItem) {\r\n <dd-lib-svg-icon\r\n (click)=\"notifyFocusEvent($event)\"\r\n [class.black-svg]=\"isShownList\"\r\n [class.disabled]=\"disabled\"\r\n [class.gray-svg]=\"!isShownList\"\r\n [class.up]=\"isShownList\"\r\n id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\r\n\r\n } @else if (clearable && !searchValue) {\r\n <dd-lib-svg-icon\r\n (click)=\"onClear(checkedItem)\"\r\n class=\"clear\"\r\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\r\n }\r\n </div>\r\n\r\n @if (errorTexts.length && showError) {\r\n @for (error of errorTexts; track error) {\r\n <div class=\"lib-select__error\">{{ error }}</div>\r\n }\r\n }\r\n @if (errorText && showSelfError && showError) {\r\n <div class=\"lib-select__error\">{{ errorText }}</div>\r\n }\r\n\r\n @if (isShownList) {\r\n <div\r\n id=\"dropdown\"\r\n [style.max-height]=\"searchOn ? '342px' : '300px'\"\r\n data-child=\"list\"\r\n (ddClickOutside)=\"notifyFocusEvent($event);fullBlur.emit($event)\"\r\n [elements]=\"['lib-select-' + selectId, 'chevron-' + selectId, 'selected-' + selectId, 'selected-clear-' + selectId]\"\r\n ddListKeyboardNavigation\r\n class=\"select-list-wrapper\">\r\n @if (_data()) {\r\n <!-- \u0415\u0441\u043B\u0438 \u0434\u0430\u043D\u043D\u044B\u0435 \u0434\u043B\u044F \u0441\u0435\u0434\u0435\u043A\u0442\u0430 \u043D\u0435 \u043F\u0440\u0438\u0448\u043B\u043E-->\r\n @if (!_data()?.length && noDataError) {\r\n <div class=\"info-container\">\r\n <div class=\"b2-title no-wrap-text\">\r\n {{ noDataError }}\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- \u043F\u043E\u0438\u0441\u043A-->\r\n @if (_data()?.length && _data()!.length > 5 && searchOn) {\r\n <div class=\"search-block\">\r\n <dd-lib-svg-icon\r\n class=\"search-icon\"\r\n id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\r\n <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\r\n [readOnly]=\"readOnly\"\r\n (input)=\"searchInput($event)\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (blur)=\"handleBlur()\"\r\n (focus)=\"handleFocus()\"\r\n [(ngModel)]=\"searchValue\" type=\"text\">\r\n <dd-lib-svg-icon\r\n [style.display]=\"searchValue ? 'block' : 'none'\"\r\n class=\"cup\"\r\n (click)=\"searchValue=''\"\r\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n </div>\r\n }\r\n <!-- \u0415\u0441\u043B\u0438 \u043F\u043E\u0438\u0441\u043A \u043D\u0435 \u0434\u0430\u043B \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432-->\r\n @if (_data()?.length && (_data() | filterByKey: filterList.bind(this))?.length === 0) {\r\n <div class=\"info-container\">\r\n <div class=\"b2-title no-wrap-text\">\r\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\r\n </div>\r\n </div>\r\n }\r\n @if (virtualScroll) {\r\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\r\n <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this)\">\r\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item}\"></ng-container>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n @for (item of _data() | filterByKey: filterList.bind(this); track item) {\r\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item}\"></ng-container>\r\n }\r\n }\r\n } @else {\r\n <div class=\"info-container\">\r\n <div class=\"d-flex gap-12 align-center\">\r\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\r\n <dd-lib-loader></dd-lib-loader>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #rowItem let-item=item>\r\n <div ddSelectableItem [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\r\n (click)=\"selectItem(item)\"\r\n (itemSelected)=\"selectItem(item)\"\r\n [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\r\n [class.s-item-disabled]=\"item.disabled\"\r\n class=\"select-data\">\r\n @if (stringArray()) {\r\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"select-data__title\"></div>\r\n }\r\n @if (keyTitle && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n class=\"select-data__title\"></div>\r\n }\r\n @if (keyDesc && !stringArray()) {\r\n <div\r\n [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\r\n [title]=\"item[keyDesc]\"\r\n class=\"select-data__desc\"></div>\r\n }\r\n @if (checkSelected(item)) {\r\n <dd-lib-svg-icon\r\n (click)=\"selectItem(checkedItem)\"\r\n class=\"checked\"\r\n id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--gray-bgc)}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--blue-card);color:var(--font-light-black-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center}.selected-items-container .selected-items__item-title{white-space:nowrap}\n"] }]
|
|
3626
3626
|
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$5.ControlContainer, decorators: [{
|
|
3627
3627
|
type: Optional
|
|
3628
3628
|
}, {
|