@morozeckiy/dd-lib 0.7.118 → 0.7.119
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/README.md +5 -0
- package/fesm2022/morozeckiy-dd-lib.mjs +119 -148
- package/fesm2022/morozeckiy-dd-lib.mjs.map +1 -1
- package/lib/core/dialog/modal-question/modal-question.component.d.ts +15 -0
- package/lib/core/index.d.ts +2 -1
- package/lib/core/services/fetcher.service.d.ts +1 -1
- package/lib/core/services/validators.service.d.ts +2 -2
- package/lib/lib-calendar/lib-calendar.component.d.ts +1 -35
- package/lib/lib-date-input/lib-date-input.component.d.ts +2 -1
- package/lib/lib-search-input/lib-search-input.component.d.ts +9 -73
- package/lib/lib-svg-viewer/lib-svg-viewer.component.d.ts +1 -1
- package/morozeckiy-dd-lib-0.7.118.tgz +0 -0
- package/morozeckiy-dd-lib-0.7.119.tgz +0 -0
- package/package.json +1 -1
- /package/lib/core/dialog/{modal-base/modal-common.component.d.ts → modal-common.component.d.ts} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Output, ViewChild, Input, Component, Injectable, InjectionToken, Inject, Pipe, Directive, HostListener, numberAttribute, TemplateRef, ChangeDetectionStrategy, Injector,
|
|
2
|
+
import { EventEmitter, Output, ViewChild, Input, Component, Injectable, InjectionToken, Inject, Pipe, Directive, HostListener, numberAttribute, TemplateRef, ChangeDetectionStrategy, Injector, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, inject, forwardRef, Optional, ElementRef, Host, SkipSelf, signal, effect, input } from '@angular/core';
|
|
3
3
|
import * as i1$5 from '@angular/forms';
|
|
4
|
-
import { Validators,
|
|
4
|
+
import { Validators, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import { BehaviorSubject, Subject, throwError, fromEvent, of, combineLatest } from 'rxjs';
|
|
6
6
|
import { format, parse, isAfter, isBefore, isValid } from 'date-fns';
|
|
7
7
|
import * as i1$1 from '@angular/common/http';
|
|
@@ -502,7 +502,7 @@ class FetcherService {
|
|
|
502
502
|
const prepareOptions = this.prepareOptions(options);
|
|
503
503
|
return this.http.put(url, body, prepareOptions).pipe(map(res => res.body));
|
|
504
504
|
}
|
|
505
|
-
/** перегоняем
|
|
505
|
+
/** перегоняем обeъкты в форм дату*/
|
|
506
506
|
createFormData(form) {
|
|
507
507
|
const formData = new FormData();
|
|
508
508
|
Object.keys(form).forEach((item) => {
|
|
@@ -1640,7 +1640,7 @@ class ToastComponent {
|
|
|
1640
1640
|
provide: TOAST_CONFIG_TOKEN,
|
|
1641
1641
|
useValue: defaultToastConfig,
|
|
1642
1642
|
}
|
|
1643
|
-
], ngImport: i0, template: "<div class=\"toast {{ data.type }}\" (click)=\"close()\"\r\n [@fadeAnimation]=\"{value: (animationState$ | async), params:\r\n { fadeIn: toastConfig!.animation!.fadeIn, fadeOut: toastConfig!.animation!.fadeOut }}\"\r\n (@fadeAnimation.done)=\"onFadeFinished($event)\">\r\n<!-- <dd-lib-svg-icon [icon]=\"data.type\"></dd-lib-svg-icon>-->\r\n @if (data.type === 'success') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM11.824 6.16L7.288 10.696C7.176 10.808 7.024 10.872 6.864 10.872C6.704 10.872 6.552 10.808 6.44 10.696L4.176 8.432C3.944 8.2 3.944 7.816 4.176 7.584C4.408 7.352 4.792 7.352 5.024 7.584L6.864 9.424L10.976 5.312C11.208 5.08 11.592 5.08 11.824 5.312C12.056 5.544 12.056 5.92 11.824 6.16Z\"\r\n fill=\"#07B700\"/>\r\n </svg>\r\n }\r\n @if (data.type === 'warning') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM7.4 4.8C7.4 4.472 7.672 4.2 8 4.2C8.328 4.2 8.6 4.472 8.6 4.8V8.8C8.6 9.128 8.328 9.4 8 9.4C7.672 9.4 7.4 9.128 7.4 8.8V4.8ZM8.736 11.504C8.696 11.608 8.64 11.688 8.568 11.768C8.488 11.84 8.4 11.896 8.304 11.936C8.208 11.976 8.104 12 8 12C7.896 12 7.792 11.976 7.696 11.936C7.6 11.896 7.512 11.84 7.432 11.768C7.36 11.688 7.304 11.608 7.264 11.504C7.224 11.408 7.2 11.304 7.2 11.2C7.2 11.096 7.224 10.992 7.264 10.896C7.304 10.8 7.36 10.712 7.432 10.632C7.512 10.56 7.6 10.504 7.696 10.464C7.888 10.384 8.112 10.384 8.304 10.464C8.4 10.504 8.488 10.56 8.568 10.632C8.64 10.712 8.696 10.8 8.736 10.896C8.776 10.992 8.8 11.096 8.8 11.2C8.8 11.304 8.776 11.408 8.736 11.504Z\"\r\n fill=\"#FAAD14\"/>\r\n </svg>\r\n\r\n }\r\n @if (data.type === 'danger') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM10.688 9.84C10.92 10.072 10.92 10.456 10.688 10.688C10.568 10.808 10.416 10.864 10.264 10.864C10.112 10.864 9.96 10.808 9.84 10.688L8 8.848L6.16 10.688C6.04 10.808 5.888 10.864 5.736 10.864C5.584 10.864 5.432 10.808 5.312 10.688C5.08 10.456 5.08 10.072 5.312 9.84L7.152 8L5.312 6.16C5.08 5.928 5.08 5.544 5.312 5.312C5.544 5.08 5.928 5.08 6.16 5.312L8 7.152L9.84 5.312C10.072 5.08 10.456 5.08 10.688 5.312C10.92 5.544 10.92 5.928 10.688 6.16L8.848 8L10.688 9.84Z\"\r\n fill=\"#FF3645\"/>\r\n </svg>\r\n\r\n }\r\n @if (data.type === 'info') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16ZM8.6 11.2C8.6 11.528 8.328 11.8 8 11.8C7.672 11.8 7.4 11.528 7.4 11.2V7.2C7.4 6.872 7.672 6.6 8 6.6C8.328 6.6 8.6 6.872 8.6 7.2L8.6 11.2ZM7.264 4.496C7.304 4.392 7.36 4.312 7.432 4.232C7.512 4.16 7.6 4.104 7.696 4.064C7.792 4.024 7.896 4 8 4C8.104 4 8.208 4.024 8.304 4.064C8.4 4.104 8.488 4.16 8.568 4.232C8.64 4.312 8.696 4.392 8.736 4.496C8.776 4.592 8.8 4.696 8.8 4.8C8.8 4.904 8.776 5.008 8.736 5.104C8.696 5.2 8.64 5.288 8.568 5.368C8.488 5.44 8.4 5.496 8.304 5.536C8.112 5.616 7.888 5.616 7.696 5.536C7.6 5.496 7.512 5.44 7.432 5.368C7.36 5.288 7.304 5.2 7.264 5.104C7.224 5.008 7.2 4.904 7.2 4.8C7.2 4.696 7.224 4.592 7.264 4.496Z\"\r\n fill=\"#007BFB\"/>\r\n </svg>\r\n\r\n }\r\n <div class=\"ml-24\">\r\n <div [innerHTML]=\"data.title\"></div>\r\n <div (click)=\"onClickDesc($event)\" [innerHTML]=\"data.description\"></div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.toast{position:relative;margin-bottom:20px;display:flex;align-items:center;padding:20px;background:#eefaf3;border-radius:12px;opacity:1;max-width:350px;width:100
|
|
1643
|
+
], ngImport: i0, template: "<div class=\"toast {{ data.type }}\" (click)=\"close()\"\r\n [@fadeAnimation]=\"{value: (animationState$ | async), params:\r\n { fadeIn: toastConfig!.animation!.fadeIn, fadeOut: toastConfig!.animation!.fadeOut }}\"\r\n (@fadeAnimation.done)=\"onFadeFinished($event)\">\r\n<!-- <dd-lib-svg-icon [icon]=\"data.type\"></dd-lib-svg-icon>-->\r\n @if (data.type === 'success') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM11.824 6.16L7.288 10.696C7.176 10.808 7.024 10.872 6.864 10.872C6.704 10.872 6.552 10.808 6.44 10.696L4.176 8.432C3.944 8.2 3.944 7.816 4.176 7.584C4.408 7.352 4.792 7.352 5.024 7.584L6.864 9.424L10.976 5.312C11.208 5.08 11.592 5.08 11.824 5.312C12.056 5.544 12.056 5.92 11.824 6.16Z\"\r\n fill=\"#07B700\"/>\r\n </svg>\r\n }\r\n @if (data.type === 'warning') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM7.4 4.8C7.4 4.472 7.672 4.2 8 4.2C8.328 4.2 8.6 4.472 8.6 4.8V8.8C8.6 9.128 8.328 9.4 8 9.4C7.672 9.4 7.4 9.128 7.4 8.8V4.8ZM8.736 11.504C8.696 11.608 8.64 11.688 8.568 11.768C8.488 11.84 8.4 11.896 8.304 11.936C8.208 11.976 8.104 12 8 12C7.896 12 7.792 11.976 7.696 11.936C7.6 11.896 7.512 11.84 7.432 11.768C7.36 11.688 7.304 11.608 7.264 11.504C7.224 11.408 7.2 11.304 7.2 11.2C7.2 11.096 7.224 10.992 7.264 10.896C7.304 10.8 7.36 10.712 7.432 10.632C7.512 10.56 7.6 10.504 7.696 10.464C7.888 10.384 8.112 10.384 8.304 10.464C8.4 10.504 8.488 10.56 8.568 10.632C8.64 10.712 8.696 10.8 8.736 10.896C8.776 10.992 8.8 11.096 8.8 11.2C8.8 11.304 8.776 11.408 8.736 11.504Z\"\r\n fill=\"#FAAD14\"/>\r\n </svg>\r\n\r\n }\r\n @if (data.type === 'danger') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM10.688 9.84C10.92 10.072 10.92 10.456 10.688 10.688C10.568 10.808 10.416 10.864 10.264 10.864C10.112 10.864 9.96 10.808 9.84 10.688L8 8.848L6.16 10.688C6.04 10.808 5.888 10.864 5.736 10.864C5.584 10.864 5.432 10.808 5.312 10.688C5.08 10.456 5.08 10.072 5.312 9.84L7.152 8L5.312 6.16C5.08 5.928 5.08 5.544 5.312 5.312C5.544 5.08 5.928 5.08 6.16 5.312L8 7.152L9.84 5.312C10.072 5.08 10.456 5.08 10.688 5.312C10.92 5.544 10.92 5.928 10.688 6.16L8.848 8L10.688 9.84Z\"\r\n fill=\"#FF3645\"/>\r\n </svg>\r\n\r\n }\r\n @if (data.type === 'info') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16ZM8.6 11.2C8.6 11.528 8.328 11.8 8 11.8C7.672 11.8 7.4 11.528 7.4 11.2V7.2C7.4 6.872 7.672 6.6 8 6.6C8.328 6.6 8.6 6.872 8.6 7.2L8.6 11.2ZM7.264 4.496C7.304 4.392 7.36 4.312 7.432 4.232C7.512 4.16 7.6 4.104 7.696 4.064C7.792 4.024 7.896 4 8 4C8.104 4 8.208 4.024 8.304 4.064C8.4 4.104 8.488 4.16 8.568 4.232C8.64 4.312 8.696 4.392 8.736 4.496C8.776 4.592 8.8 4.696 8.8 4.8C8.8 4.904 8.776 5.008 8.736 5.104C8.696 5.2 8.64 5.288 8.568 5.368C8.488 5.44 8.4 5.496 8.304 5.536C8.112 5.616 7.888 5.616 7.696 5.536C7.6 5.496 7.512 5.44 7.432 5.368C7.36 5.288 7.304 5.2 7.264 5.104C7.224 5.008 7.2 4.904 7.2 4.8C7.2 4.696 7.224 4.592 7.264 4.496Z\"\r\n fill=\"#007BFB\"/>\r\n </svg>\r\n\r\n }\r\n <div class=\"ml-24\">\r\n <div [innerHTML]=\"data.title\"></div>\r\n <div (click)=\"onClickDesc($event)\" [innerHTML]=\"data.description\"></div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.toast{position:relative;margin-bottom:20px;display:flex;align-items:center;padding:20px;background:#eefaf3;border-radius:12px;opacity:1;max-width:350px;width:100%;color:#1c1c1c}.toast.success{background-color:var(--light-green-color)}.toast.info{background-color:var(--light-blue-color)}.toast.warning{background-color:var(--yellow-card)}.toast.danger{background-color:var(--red-light-color)}.toast svg{min-width:16px}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [toastAnimations.fadeToast], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1644
1644
|
}
|
|
1645
1645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ToastComponent, decorators: [{
|
|
1646
1646
|
type: Component,
|
|
@@ -1652,7 +1652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
1652
1652
|
provide: TOAST_CONFIG_TOKEN,
|
|
1653
1653
|
useValue: defaultToastConfig,
|
|
1654
1654
|
}
|
|
1655
|
-
], animations: [toastAnimations.fadeToast], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toast {{ data.type }}\" (click)=\"close()\"\r\n [@fadeAnimation]=\"{value: (animationState$ | async), params:\r\n { fadeIn: toastConfig!.animation!.fadeIn, fadeOut: toastConfig!.animation!.fadeOut }}\"\r\n (@fadeAnimation.done)=\"onFadeFinished($event)\">\r\n<!-- <dd-lib-svg-icon [icon]=\"data.type\"></dd-lib-svg-icon>-->\r\n @if (data.type === 'success') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM11.824 6.16L7.288 10.696C7.176 10.808 7.024 10.872 6.864 10.872C6.704 10.872 6.552 10.808 6.44 10.696L4.176 8.432C3.944 8.2 3.944 7.816 4.176 7.584C4.408 7.352 4.792 7.352 5.024 7.584L6.864 9.424L10.976 5.312C11.208 5.08 11.592 5.08 11.824 5.312C12.056 5.544 12.056 5.92 11.824 6.16Z\"\r\n fill=\"#07B700\"/>\r\n </svg>\r\n }\r\n @if (data.type === 'warning') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM7.4 4.8C7.4 4.472 7.672 4.2 8 4.2C8.328 4.2 8.6 4.472 8.6 4.8V8.8C8.6 9.128 8.328 9.4 8 9.4C7.672 9.4 7.4 9.128 7.4 8.8V4.8ZM8.736 11.504C8.696 11.608 8.64 11.688 8.568 11.768C8.488 11.84 8.4 11.896 8.304 11.936C8.208 11.976 8.104 12 8 12C7.896 12 7.792 11.976 7.696 11.936C7.6 11.896 7.512 11.84 7.432 11.768C7.36 11.688 7.304 11.608 7.264 11.504C7.224 11.408 7.2 11.304 7.2 11.2C7.2 11.096 7.224 10.992 7.264 10.896C7.304 10.8 7.36 10.712 7.432 10.632C7.512 10.56 7.6 10.504 7.696 10.464C7.888 10.384 8.112 10.384 8.304 10.464C8.4 10.504 8.488 10.56 8.568 10.632C8.64 10.712 8.696 10.8 8.736 10.896C8.776 10.992 8.8 11.096 8.8 11.2C8.8 11.304 8.776 11.408 8.736 11.504Z\"\r\n fill=\"#FAAD14\"/>\r\n </svg>\r\n\r\n }\r\n @if (data.type === 'danger') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM10.688 9.84C10.92 10.072 10.92 10.456 10.688 10.688C10.568 10.808 10.416 10.864 10.264 10.864C10.112 10.864 9.96 10.808 9.84 10.688L8 8.848L6.16 10.688C6.04 10.808 5.888 10.864 5.736 10.864C5.584 10.864 5.432 10.808 5.312 10.688C5.08 10.456 5.08 10.072 5.312 9.84L7.152 8L5.312 6.16C5.08 5.928 5.08 5.544 5.312 5.312C5.544 5.08 5.928 5.08 6.16 5.312L8 7.152L9.84 5.312C10.072 5.08 10.456 5.08 10.688 5.312C10.92 5.544 10.92 5.928 10.688 6.16L8.848 8L10.688 9.84Z\"\r\n fill=\"#FF3645\"/>\r\n </svg>\r\n\r\n }\r\n @if (data.type === 'info') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16ZM8.6 11.2C8.6 11.528 8.328 11.8 8 11.8C7.672 11.8 7.4 11.528 7.4 11.2V7.2C7.4 6.872 7.672 6.6 8 6.6C8.328 6.6 8.6 6.872 8.6 7.2L8.6 11.2ZM7.264 4.496C7.304 4.392 7.36 4.312 7.432 4.232C7.512 4.16 7.6 4.104 7.696 4.064C7.792 4.024 7.896 4 8 4C8.104 4 8.208 4.024 8.304 4.064C8.4 4.104 8.488 4.16 8.568 4.232C8.64 4.312 8.696 4.392 8.736 4.496C8.776 4.592 8.8 4.696 8.8 4.8C8.8 4.904 8.776 5.008 8.736 5.104C8.696 5.2 8.64 5.288 8.568 5.368C8.488 5.44 8.4 5.496 8.304 5.536C8.112 5.616 7.888 5.616 7.696 5.536C7.6 5.496 7.512 5.44 7.432 5.368C7.36 5.288 7.304 5.2 7.264 5.104C7.224 5.008 7.2 4.904 7.2 4.8C7.2 4.696 7.224 4.592 7.264 4.496Z\"\r\n fill=\"#007BFB\"/>\r\n </svg>\r\n\r\n }\r\n <div class=\"ml-24\">\r\n <div [innerHTML]=\"data.title\"></div>\r\n <div (click)=\"onClickDesc($event)\" [innerHTML]=\"data.description\"></div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.toast{position:relative;margin-bottom:20px;display:flex;align-items:center;padding:20px;background:#eefaf3;border-radius:12px;opacity:1;max-width:350px;width:100
|
|
1655
|
+
], animations: [toastAnimations.fadeToast], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toast {{ data.type }}\" (click)=\"close()\"\r\n [@fadeAnimation]=\"{value: (animationState$ | async), params:\r\n { fadeIn: toastConfig!.animation!.fadeIn, fadeOut: toastConfig!.animation!.fadeOut }}\"\r\n (@fadeAnimation.done)=\"onFadeFinished($event)\">\r\n<!-- <dd-lib-svg-icon [icon]=\"data.type\"></dd-lib-svg-icon>-->\r\n @if (data.type === 'success') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM11.824 6.16L7.288 10.696C7.176 10.808 7.024 10.872 6.864 10.872C6.704 10.872 6.552 10.808 6.44 10.696L4.176 8.432C3.944 8.2 3.944 7.816 4.176 7.584C4.408 7.352 4.792 7.352 5.024 7.584L6.864 9.424L10.976 5.312C11.208 5.08 11.592 5.08 11.824 5.312C12.056 5.544 12.056 5.92 11.824 6.16Z\"\r\n fill=\"#07B700\"/>\r\n </svg>\r\n }\r\n @if (data.type === 'warning') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM7.4 4.8C7.4 4.472 7.672 4.2 8 4.2C8.328 4.2 8.6 4.472 8.6 4.8V8.8C8.6 9.128 8.328 9.4 8 9.4C7.672 9.4 7.4 9.128 7.4 8.8V4.8ZM8.736 11.504C8.696 11.608 8.64 11.688 8.568 11.768C8.488 11.84 8.4 11.896 8.304 11.936C8.208 11.976 8.104 12 8 12C7.896 12 7.792 11.976 7.696 11.936C7.6 11.896 7.512 11.84 7.432 11.768C7.36 11.688 7.304 11.608 7.264 11.504C7.224 11.408 7.2 11.304 7.2 11.2C7.2 11.096 7.224 10.992 7.264 10.896C7.304 10.8 7.36 10.712 7.432 10.632C7.512 10.56 7.6 10.504 7.696 10.464C7.888 10.384 8.112 10.384 8.304 10.464C8.4 10.504 8.488 10.56 8.568 10.632C8.64 10.712 8.696 10.8 8.736 10.896C8.776 10.992 8.8 11.096 8.8 11.2C8.8 11.304 8.776 11.408 8.736 11.504Z\"\r\n fill=\"#FAAD14\"/>\r\n </svg>\r\n\r\n }\r\n @if (data.type === 'danger') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0ZM10.688 9.84C10.92 10.072 10.92 10.456 10.688 10.688C10.568 10.808 10.416 10.864 10.264 10.864C10.112 10.864 9.96 10.808 9.84 10.688L8 8.848L6.16 10.688C6.04 10.808 5.888 10.864 5.736 10.864C5.584 10.864 5.432 10.808 5.312 10.688C5.08 10.456 5.08 10.072 5.312 9.84L7.152 8L5.312 6.16C5.08 5.928 5.08 5.544 5.312 5.312C5.544 5.08 5.928 5.08 6.16 5.312L8 7.152L9.84 5.312C10.072 5.08 10.456 5.08 10.688 5.312C10.92 5.544 10.92 5.928 10.688 6.16L8.848 8L10.688 9.84Z\"\r\n fill=\"#FF3645\"/>\r\n </svg>\r\n\r\n }\r\n @if (data.type === 'info') {\r\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 16C12.408 16 16 12.408 16 8C16 3.592 12.408 0 8 0C3.592 0 0 3.592 0 8C0 12.408 3.592 16 8 16ZM8.6 11.2C8.6 11.528 8.328 11.8 8 11.8C7.672 11.8 7.4 11.528 7.4 11.2V7.2C7.4 6.872 7.672 6.6 8 6.6C8.328 6.6 8.6 6.872 8.6 7.2L8.6 11.2ZM7.264 4.496C7.304 4.392 7.36 4.312 7.432 4.232C7.512 4.16 7.6 4.104 7.696 4.064C7.792 4.024 7.896 4 8 4C8.104 4 8.208 4.024 8.304 4.064C8.4 4.104 8.488 4.16 8.568 4.232C8.64 4.312 8.696 4.392 8.736 4.496C8.776 4.592 8.8 4.696 8.8 4.8C8.8 4.904 8.776 5.008 8.736 5.104C8.696 5.2 8.64 5.288 8.568 5.368C8.488 5.44 8.4 5.496 8.304 5.536C8.112 5.616 7.888 5.616 7.696 5.536C7.6 5.496 7.512 5.44 7.432 5.368C7.36 5.288 7.304 5.2 7.264 5.104C7.224 5.008 7.2 4.904 7.2 4.8C7.2 4.696 7.224 4.592 7.264 4.496Z\"\r\n fill=\"#007BFB\"/>\r\n </svg>\r\n\r\n }\r\n <div class=\"ml-24\">\r\n <div [innerHTML]=\"data.title\"></div>\r\n <div (click)=\"onClickDesc($event)\" [innerHTML]=\"data.description\"></div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.toast{position:relative;margin-bottom:20px;display:flex;align-items:center;padding:20px;background:#eefaf3;border-radius:12px;opacity:1;max-width:350px;width:100%;color:#1c1c1c}.toast.success{background-color:var(--light-green-color)}.toast.info{background-color:var(--light-blue-color)}.toast.warning{background-color:var(--yellow-card)}.toast.danger{background-color:var(--red-light-color)}.toast svg{min-width:16px}\n"] }]
|
|
1656
1656
|
}], ctorParameters: () => [{ type: ToastData }, { type: ToastConfig }, { type: ToastRef }], propDecorators: { callEvent: [{
|
|
1657
1657
|
type: Output
|
|
1658
1658
|
}] } });
|
|
@@ -1915,6 +1915,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
1915
1915
|
type: Input
|
|
1916
1916
|
}] } });
|
|
1917
1917
|
|
|
1918
|
+
class LibButtonComponent extends LibCommonButtonComponent {
|
|
1919
|
+
ngAfterViewInit() {
|
|
1920
|
+
const btn = this.button?.nativeElement;
|
|
1921
|
+
if (btn && btn.attributes?.autofocus) {
|
|
1922
|
+
btn.focus();
|
|
1923
|
+
}
|
|
1924
|
+
}
|
|
1925
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1926
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibButtonComponent, isStandalone: true, selector: "dd-lib-button", inputs: { noPadding: "noPadding", loaderColor: "loaderColor" }, usesInheritance: true, ngImport: i0, template: "<div (click)=\"onClick($event)\" [ngStyle]=\"{width, height}\" class=\"button-container\">\n <button\n #btn\n [attr.tabIndex]=\"disabled ? -1 : 0\"\n [autofocus]=\"autofocus\"\n [class.active]=\"active\"\n [class.disabled]=\"disabled || showLoader\"\n [class.green]=\"btnColor === 'green'\"\n [class.loader]=\"showLoader\"\n [class.no-padding]=\"noPadding\"\n [class.red]=\"btnColor === 'red'\"\n [class.transparent]=\"btnColor === 'transparent'\"\n [class.white]=\"btnColor === 'white'\"\n [class.dark]=\"btnColor === 'dark'\"\n [disabled]=\"disabled || showLoader\"\n [ngStyle]=\"{width, height}\"\n [type]=\"buttonType\"\n class=\"lib-button\"\n role=\"button\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n @if (showLoader) {\n <dd-lib-loader class=\"pos-absolute\" [color]=\"loaderColor\"></dd-lib-loader>\n }\n\n </button>\n</div>\n\n<ng-template #content>\n <span #contentData class=\"d-flex\"><ng-content></ng-content></span>\n</ng-template>\n", styles: [".button-container{display:inline-block}.button-container button{position:relative;display:flex;align-items:center;justify-content:center;height:40px;padding:0 32px;font-size:14px;line-height:24px;font-weight:var(--font-wheit-big);border-radius:12px;outline:none;cursor:pointer;white-space:nowrap;border:1px solid transparent;background-color:var(--btn-green-bgc);color:#fff}@media screen and (max-width: 840px){.button-container button{height:48px}}.button-container button:hover,.button-container button:focus{background-color:var(--btn-green-hover)}.button-container button:active,.button-container button.active{background-color:var(--btn-green-hover)}.button-container button.loader{min-width:100px}.button-container button.white{background-color:var(--btn-light-green-bgc);color:var(--btn-white-color)}.button-container button.white:hover{color:var(--btn-white-hover-color)}.button-container button.transparent{background-color:transparent;color:var(--btn-white-color);border-color:var(--gray-color-200)}.button-container button.transparent:hover{color:var(--btn-white-hover-color)}.button-container button.red{background-color:var(--btn-red-bgc);color:var(--btn-red-color)}.button-container button.red:hover{color:var(--btn-red-hover-color)}.button-container button.dark{background-color:var(--btn-dark-bgc);color:var(--btn-dark-color)}.button-container button.dark:hover{background-color:var(--btn-dark-hover-color)}.button-container button.no-padding{padding:0}.button-container button.disabled{color:var(--disabled-color);background-color:var(--btn-disabled-bgc);pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1927
|
+
}
|
|
1928
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibButtonComponent, decorators: [{
|
|
1929
|
+
type: Component,
|
|
1930
|
+
args: [{ selector: 'dd-lib-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, LibLoaderComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<div (click)=\"onClick($event)\" [ngStyle]=\"{width, height}\" class=\"button-container\">\n <button\n #btn\n [attr.tabIndex]=\"disabled ? -1 : 0\"\n [autofocus]=\"autofocus\"\n [class.active]=\"active\"\n [class.disabled]=\"disabled || showLoader\"\n [class.green]=\"btnColor === 'green'\"\n [class.loader]=\"showLoader\"\n [class.no-padding]=\"noPadding\"\n [class.red]=\"btnColor === 'red'\"\n [class.transparent]=\"btnColor === 'transparent'\"\n [class.white]=\"btnColor === 'white'\"\n [class.dark]=\"btnColor === 'dark'\"\n [disabled]=\"disabled || showLoader\"\n [ngStyle]=\"{width, height}\"\n [type]=\"buttonType\"\n class=\"lib-button\"\n role=\"button\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n @if (showLoader) {\n <dd-lib-loader class=\"pos-absolute\" [color]=\"loaderColor\"></dd-lib-loader>\n }\n\n </button>\n</div>\n\n<ng-template #content>\n <span #contentData class=\"d-flex\"><ng-content></ng-content></span>\n</ng-template>\n", styles: [".button-container{display:inline-block}.button-container button{position:relative;display:flex;align-items:center;justify-content:center;height:40px;padding:0 32px;font-size:14px;line-height:24px;font-weight:var(--font-wheit-big);border-radius:12px;outline:none;cursor:pointer;white-space:nowrap;border:1px solid transparent;background-color:var(--btn-green-bgc);color:#fff}@media screen and (max-width: 840px){.button-container button{height:48px}}.button-container button:hover,.button-container button:focus{background-color:var(--btn-green-hover)}.button-container button:active,.button-container button.active{background-color:var(--btn-green-hover)}.button-container button.loader{min-width:100px}.button-container button.white{background-color:var(--btn-light-green-bgc);color:var(--btn-white-color)}.button-container button.white:hover{color:var(--btn-white-hover-color)}.button-container button.transparent{background-color:transparent;color:var(--btn-white-color);border-color:var(--gray-color-200)}.button-container button.transparent:hover{color:var(--btn-white-hover-color)}.button-container button.red{background-color:var(--btn-red-bgc);color:var(--btn-red-color)}.button-container button.red:hover{color:var(--btn-red-hover-color)}.button-container button.dark{background-color:var(--btn-dark-bgc);color:var(--btn-dark-color)}.button-container button.dark:hover{background-color:var(--btn-dark-hover-color)}.button-container button.no-padding{padding:0}.button-container button.disabled{color:var(--disabled-color);background-color:var(--btn-disabled-bgc);pointer-events:none;cursor:default}\n"] }]
|
|
1931
|
+
}], propDecorators: { noPadding: [{
|
|
1932
|
+
type: Input
|
|
1933
|
+
}], loaderColor: [{
|
|
1934
|
+
type: Input
|
|
1935
|
+
}] } });
|
|
1936
|
+
|
|
1937
|
+
class ModalQuestionComponent {
|
|
1938
|
+
constructor() {
|
|
1939
|
+
this.borderMobile = false;
|
|
1940
|
+
this.showLoader = false;
|
|
1941
|
+
this.btnAccept = 'Подтвердить';
|
|
1942
|
+
this.btnCancel = 'Отменить';
|
|
1943
|
+
this.dialog = inject((DDDialogRef));
|
|
1944
|
+
}
|
|
1945
|
+
onKeydownComponent(event) {
|
|
1946
|
+
if (event.key === 'Escape' || event.key === 'Esc') {
|
|
1947
|
+
this.destroy();
|
|
1948
|
+
}
|
|
1949
|
+
}
|
|
1950
|
+
close(accept) {
|
|
1951
|
+
this.dialog.close(accept);
|
|
1952
|
+
}
|
|
1953
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ModalQuestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1954
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ModalQuestionComponent, isStandalone: true, selector: "dd-modal-question", host: { listeners: { "document:keydown": "onKeydownComponent($event)" } }, ngImport: i0, template: "<div class=\"popup\" [class.border-mobile]=\"borderMobile\">\r\n\r\n <div (click)=\"close()\" class=\"popup__close\"></div>\r\n <div class=\"popup__content\">\r\n <div class=\"flex-column gap-16\">\r\n <div class=\"h5-title\" [innerHTML]=\"modalTitle\"></div>\r\n <div class=\"text-plain\" [innerHTML]=\"modalText\"></div>\r\n </div>\r\n <div class=\"d-flex justify-between full-width\">\r\n <dd-lib-button>{{btnAccept}}</dd-lib-button>\r\n <dd-lib-button btnColor=\"white\">{{btnCancel}}</dd-lib-button>\r\n </div>\r\n </div>\r\n\r\n @if (showLoader) {\r\n <div class=\"loader-modal\">\r\n <dd-lib-loader size=\"giant\"></dd-lib-loader>\r\n </div>\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "component", type: LibButtonComponent, selector: "dd-lib-button", inputs: ["noPadding", "loaderColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1955
|
+
}
|
|
1956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ModalQuestionComponent, decorators: [{
|
|
1957
|
+
type: Component,
|
|
1958
|
+
args: [{ selector: 'dd-modal-question', imports: [
|
|
1959
|
+
LibLoaderComponent,
|
|
1960
|
+
LibButtonComponent
|
|
1961
|
+
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"popup\" [class.border-mobile]=\"borderMobile\">\r\n\r\n <div (click)=\"close()\" class=\"popup__close\"></div>\r\n <div class=\"popup__content\">\r\n <div class=\"flex-column gap-16\">\r\n <div class=\"h5-title\" [innerHTML]=\"modalTitle\"></div>\r\n <div class=\"text-plain\" [innerHTML]=\"modalText\"></div>\r\n </div>\r\n <div class=\"d-flex justify-between full-width\">\r\n <dd-lib-button>{{btnAccept}}</dd-lib-button>\r\n <dd-lib-button btnColor=\"white\">{{btnCancel}}</dd-lib-button>\r\n </div>\r\n </div>\r\n\r\n @if (showLoader) {\r\n <div class=\"loader-modal\">\r\n <dd-lib-loader size=\"giant\"></dd-lib-loader>\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
1962
|
+
}], propDecorators: { onKeydownComponent: [{
|
|
1963
|
+
type: HostListener,
|
|
1964
|
+
args: ['document:keydown', ['$event']]
|
|
1965
|
+
}] } });
|
|
1966
|
+
|
|
1918
1967
|
class ModalBaseComponent {
|
|
1919
1968
|
constructor(route, router, dialog) {
|
|
1920
1969
|
this.route = route;
|
|
@@ -2012,7 +2061,7 @@ class LibCommonInputTextComponent {
|
|
|
2012
2061
|
}
|
|
2013
2062
|
notifyFocusEvent() {
|
|
2014
2063
|
// this.focusManager.notifyFocusMayChanged(this, e.type === 'focus');
|
|
2015
|
-
this.
|
|
2064
|
+
this.focus.emit(this.value);
|
|
2016
2065
|
}
|
|
2017
2066
|
handleBlur() {
|
|
2018
2067
|
this.focused = false;
|
|
@@ -2172,25 +2221,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
2172
2221
|
type: Output
|
|
2173
2222
|
}] } });
|
|
2174
2223
|
|
|
2175
|
-
class LibButtonComponent extends LibCommonButtonComponent {
|
|
2176
|
-
ngAfterViewInit() {
|
|
2177
|
-
const btn = this.button?.nativeElement;
|
|
2178
|
-
if (btn && btn.attributes?.autofocus) {
|
|
2179
|
-
btn.focus();
|
|
2180
|
-
}
|
|
2181
|
-
}
|
|
2182
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2183
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibButtonComponent, isStandalone: true, selector: "dd-lib-button", inputs: { noPadding: "noPadding", loaderColor: "loaderColor" }, usesInheritance: true, ngImport: i0, template: "<div (click)=\"onClick($event)\" [ngStyle]=\"{width, height}\" class=\"button-container\">\n <button\n #btn\n [attr.tabIndex]=\"disabled ? -1 : 0\"\n [autofocus]=\"autofocus\"\n [class.active]=\"active\"\n [class.disabled]=\"disabled || showLoader\"\n [class.green]=\"btnColor === 'green'\"\n [class.loader]=\"showLoader\"\n [class.no-padding]=\"noPadding\"\n [class.red]=\"btnColor === 'red'\"\n [class.transparent]=\"btnColor === 'transparent'\"\n [class.white]=\"btnColor === 'white'\"\n [class.dark]=\"btnColor === 'dark'\"\n [disabled]=\"disabled || showLoader\"\n [ngStyle]=\"{width, height}\"\n [type]=\"buttonType\"\n class=\"lib-button\"\n role=\"button\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n @if (showLoader) {\n <dd-lib-loader class=\"pos-absolute\" [color]=\"loaderColor\"></dd-lib-loader>\n }\n\n </button>\n</div>\n\n<ng-template #content>\n <span #contentData class=\"d-flex\"><ng-content></ng-content></span>\n</ng-template>\n", styles: [".button-container{display:inline-block}.button-container button{position:relative;display:flex;align-items:center;justify-content:center;height:40px;padding:0 32px;font-size:14px;line-height:24px;font-weight:var(--font-wheit-big);border-radius:12px;outline:none;cursor:pointer;white-space:nowrap;border:1px solid transparent;background-color:var(--btn-green-bgc);color:#fff}@media screen and (max-width: 840px){.button-container button{height:48px}}.button-container button:hover,.button-container button:focus{background-color:var(--btn-green-hover)}.button-container button:active,.button-container button.active{background-color:var(--btn-green-hover)}.button-container button.loader{min-width:100px}.button-container button.white{background-color:var(--btn-light-green-bgc);color:var(--btn-white-color)}.button-container button.white:hover{color:var(--btn-white-hover-color)}.button-container button.transparent{background-color:transparent;color:var(--btn-white-color);border-color:var(--gray-color-200)}.button-container button.transparent:hover{color:var(--btn-white-hover-color)}.button-container button.red{background-color:var(--btn-red-bgc);color:var(--btn-red-color)}.button-container button.red:hover{color:var(--btn-red-hover-color)}.button-container button.dark{background-color:var(--btn-dark-bgc);color:var(--btn-dark-color)}.button-container button.dark:hover{background-color:var(--btn-dark-hover-color)}.button-container button.no-padding{padding:0}.button-container button.disabled{color:var(--disabled-color);background-color:var(--btn-disabled-bgc);pointer-events:none;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2184
|
-
}
|
|
2185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibButtonComponent, decorators: [{
|
|
2186
|
-
type: Component,
|
|
2187
|
-
args: [{ selector: 'dd-lib-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, LibLoaderComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], template: "<div (click)=\"onClick($event)\" [ngStyle]=\"{width, height}\" class=\"button-container\">\n <button\n #btn\n [attr.tabIndex]=\"disabled ? -1 : 0\"\n [autofocus]=\"autofocus\"\n [class.active]=\"active\"\n [class.disabled]=\"disabled || showLoader\"\n [class.green]=\"btnColor === 'green'\"\n [class.loader]=\"showLoader\"\n [class.no-padding]=\"noPadding\"\n [class.red]=\"btnColor === 'red'\"\n [class.transparent]=\"btnColor === 'transparent'\"\n [class.white]=\"btnColor === 'white'\"\n [class.dark]=\"btnColor === 'dark'\"\n [disabled]=\"disabled || showLoader\"\n [ngStyle]=\"{width, height}\"\n [type]=\"buttonType\"\n class=\"lib-button\"\n role=\"button\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n @if (showLoader) {\n <dd-lib-loader class=\"pos-absolute\" [color]=\"loaderColor\"></dd-lib-loader>\n }\n\n </button>\n</div>\n\n<ng-template #content>\n <span #contentData class=\"d-flex\"><ng-content></ng-content></span>\n</ng-template>\n", styles: [".button-container{display:inline-block}.button-container button{position:relative;display:flex;align-items:center;justify-content:center;height:40px;padding:0 32px;font-size:14px;line-height:24px;font-weight:var(--font-wheit-big);border-radius:12px;outline:none;cursor:pointer;white-space:nowrap;border:1px solid transparent;background-color:var(--btn-green-bgc);color:#fff}@media screen and (max-width: 840px){.button-container button{height:48px}}.button-container button:hover,.button-container button:focus{background-color:var(--btn-green-hover)}.button-container button:active,.button-container button.active{background-color:var(--btn-green-hover)}.button-container button.loader{min-width:100px}.button-container button.white{background-color:var(--btn-light-green-bgc);color:var(--btn-white-color)}.button-container button.white:hover{color:var(--btn-white-hover-color)}.button-container button.transparent{background-color:transparent;color:var(--btn-white-color);border-color:var(--gray-color-200)}.button-container button.transparent:hover{color:var(--btn-white-hover-color)}.button-container button.red{background-color:var(--btn-red-bgc);color:var(--btn-red-color)}.button-container button.red:hover{color:var(--btn-red-hover-color)}.button-container button.dark{background-color:var(--btn-dark-bgc);color:var(--btn-dark-color)}.button-container button.dark:hover{background-color:var(--btn-dark-hover-color)}.button-container button.no-padding{padding:0}.button-container button.disabled{color:var(--disabled-color);background-color:var(--btn-disabled-bgc);pointer-events:none;cursor:default}\n"] }]
|
|
2188
|
-
}], propDecorators: { noPadding: [{
|
|
2189
|
-
type: Input
|
|
2190
|
-
}], loaderColor: [{
|
|
2191
|
-
type: Input
|
|
2192
|
-
}] } });
|
|
2193
|
-
|
|
2194
2224
|
/**
|
|
2195
2225
|
* Класс кеширует свг после загрузки, чтоб не спамить их постоянной загрузкой
|
|
2196
2226
|
**/
|
|
@@ -2699,40 +2729,6 @@ const Months = [
|
|
|
2699
2729
|
];
|
|
2700
2730
|
class IDatePeriod {
|
|
2701
2731
|
}
|
|
2702
|
-
/**
|
|
2703
|
-
Этот компонент используется для отображения календаря с возможностью выбора даты.
|
|
2704
|
-
Ниже приведено описание свойств и методов данного компонента:
|
|
2705
|
-
|
|
2706
|
-
Свойства:
|
|
2707
|
-
- @Input() public type: 'string' | 'number' | 'date' = 'string'; - тип данных для выбора даты.
|
|
2708
|
-
- @Input() public format = 'dd.MM.yyyy HH:mm'; - формат отображения даты.
|
|
2709
|
-
- @Input() public maxDate = new Date(); - максимальная дата, которую можно выбрать.
|
|
2710
|
-
- @Output() public emitDate = new EventEmitter<date | undefined>(); - событие, срабатывающее при выборе даты.
|
|
2711
|
-
- public dateValue: Date | undefined; - выбранная пользователем дата.
|
|
2712
|
-
- public months = Months; - массив с названиями месяцев.
|
|
2713
|
-
- public week = ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС']; - массив с названиями дней недели.
|
|
2714
|
-
- public year = new Date().getFullYear(); - текущий год.
|
|
2715
|
-
- public month = new Date().getMonth(); - текущий месяц.
|
|
2716
|
-
- public day = new Date().getDay(); - текущий день недели.
|
|
2717
|
-
- public daysInMonth: IDaysInMonth; - количество дней в текущем месяце.
|
|
2718
|
-
- public currentDate = new Date(); - текущая выбранная дата.
|
|
2719
|
-
- public dateNow = new Date(); - текущая дата.
|
|
2720
|
-
- public onTouchedCallback: () => void; - функция обратного вызова при касании.
|
|
2721
|
-
|
|
2722
|
-
Методы:
|
|
2723
|
-
- public propagateChange(_value: Date): void {} - метод для обновления значения выбранной даты.
|
|
2724
|
-
- public ngOnInit(): void {} - метод жизненного цикла компонента, вызываемый при инициализации.
|
|
2725
|
-
- public setDayInMonth(): void {} - метод для установки количества дней в текущем месяце.
|
|
2726
|
-
- public changeMonth(number: number): void {} - метод для изменения месяца в календаре.
|
|
2727
|
-
- public getMonth(): string {} - метод для получения названия текущего месяца.
|
|
2728
|
-
- public registerOnChange(fn: any): void {} - метод для регистрации функции обратного вызова при изменении значения.
|
|
2729
|
-
- public registerOnTouched(fn: any): void {} - метод для регистрации функции обратного вызова при касании.
|
|
2730
|
-
- public writeValue(val: Date): void {} - метод для установки значения даты.
|
|
2731
|
-
- public selectDay(day: number): void {} - метод для выбора конкретного дня в календаре.
|
|
2732
|
-
- public selectDate(): void {} - метод для выбора даты и передачи значения через propagateChange и emitDate.
|
|
2733
|
-
- public checkHideDay(day: number): boolean {} - метод для проверки скрытия определенного дня в календаре.
|
|
2734
|
-
- public canselDate(): void {} - метод для отмены выбранной даты и сброса значений.
|
|
2735
|
-
**/
|
|
2736
2732
|
class LibCalendarComponent {
|
|
2737
2733
|
set maxDate(date) {
|
|
2738
2734
|
if (date === 'current') {
|
|
@@ -3324,74 +3320,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
3324
3320
|
type: Output
|
|
3325
3321
|
}] } });
|
|
3326
3322
|
|
|
3327
|
-
/**
|
|
3328
|
-
* Входные параметры (Input)
|
|
3329
|
-
* keyTitle (default: 'title')
|
|
3330
|
-
* Тип: string
|
|
3331
|
-
* Описание: Наименование ключа для получения заголовка элемента данных.
|
|
3332
|
-
*
|
|
3333
|
-
* keyDesc (default: 'description')
|
|
3334
|
-
* Тип: string
|
|
3335
|
-
* Описание: Наименование ключа для получения описания элемента данных.
|
|
3336
|
-
*
|
|
3337
|
-
* styleInput (default: 'standard')
|
|
3338
|
-
* Тип: 'round' | 'standard'
|
|
3339
|
-
* Описание: Тип стиля входного элемента, может быть 'round' или 'standard'.
|
|
3340
|
-
*
|
|
3341
|
-
* inputStyle (default: 'gray')
|
|
3342
|
-
* Тип: 'white' | 'gray'
|
|
3343
|
-
* Описание: Стиль входного элемента, может быть 'white' или 'gray'.
|
|
3344
|
-
*
|
|
3345
|
-
* fetchMode
|
|
3346
|
-
* Тип: boolean
|
|
3347
|
-
* Описание: Флаг, указывающий, включен ли режим получения данных.
|
|
3348
|
-
*
|
|
3349
|
-
* searchData
|
|
3350
|
-
* Тип: any
|
|
3351
|
-
* Описание: Массив данных для поиска. Устанавливая данные, компонент сбрасывает состояние загрузки.
|
|
3352
|
-
*
|
|
3353
|
-
* debounceTime (default: 100)
|
|
3354
|
-
* Тип: number
|
|
3355
|
-
* Описание: Время задержки перед выполнением действий после ввода, в миллисекундах.
|
|
3356
|
-
*
|
|
3357
|
-
* delay (default: 0)
|
|
3358
|
-
* Тип: number
|
|
3359
|
-
* Описание: Задержка перед обработкой поиска, в миллисекундах.
|
|
3360
|
-
*
|
|
3361
|
-
* idClose
|
|
3362
|
-
* Тип: string | undefined
|
|
3363
|
-
* Описание: Идентификатор элемента закрытия (неопределено по умолчанию).
|
|
3364
|
-
*
|
|
3365
|
-
* loaded$
|
|
3366
|
-
* Тип: BehaviorSubject<boolean>
|
|
3367
|
-
* Описание: Субъект для управления состоянием загрузки компонента.
|
|
3368
|
-
*
|
|
3369
|
-
* Выходные параметры (Output)
|
|
3370
|
-
* keyupEvent
|
|
3371
|
-
* Тип: EventEmitter<string>
|
|
3372
|
-
* Описание: Событие, испускаемое при вводе текста в поле поиска.
|
|
3373
|
-
*
|
|
3374
|
-
* selectedItem
|
|
3375
|
-
* Тип: EventEmitter
|
|
3376
|
-
* Описание: Событие, испускаемое при выборе элемента из результатов поиска.
|
|
3377
|
-
*
|
|
3378
|
-
* Внутренние свойства и переменные
|
|
3379
|
-
* keyUp
|
|
3380
|
-
* Тип: Subject<KeyboardEvent>
|
|
3381
|
-
* Описание: Субъект для обработки событий ввода с клавиатуры.
|
|
3382
|
-
*
|
|
3383
|
-
* data
|
|
3384
|
-
* Тип: any[] | undefined
|
|
3385
|
-
* Описание: Массив данных для отображения результатов поиска.
|
|
3386
|
-
|
|
3387
|
-
* Методы
|
|
3388
|
-
* ngOnInit Выполняет настройку потоков событий ввода при инициализации компонента.
|
|
3389
|
-
* forceChangeМетод для принудительного вызова события изменения ввода.
|
|
3390
|
-
* onClear(noEmit?: boolean)Метод для очистки поля ввода, сброса состояния загрузки и фокуса на элемент ввода.
|
|
3391
|
-
* onClickSearchItem(item: any)Метод для обработки выбора элемента из результатов поиска.
|
|
3392
|
-
* getTitle(item: any)Метод для получения заголовка элемента данных.
|
|
3393
|
-
* getDesc(item: any)Метод для получения описания элемента данных.
|
|
3394
|
-
* **/
|
|
3395
3323
|
class LibSearchInputComponent extends LibCommonInputTextComponent {
|
|
3396
3324
|
set searchData(data) {
|
|
3397
3325
|
this.loaded$.next(false);
|
|
@@ -3402,11 +3330,11 @@ class LibSearchInputComponent extends LibCommonInputTextComponent {
|
|
|
3402
3330
|
}
|
|
3403
3331
|
}
|
|
3404
3332
|
;
|
|
3405
|
-
constructor(destroy$, el, changeDetection,
|
|
3333
|
+
constructor(destroy$, el, changeDetection, controlContainer) {
|
|
3406
3334
|
super(changeDetection);
|
|
3407
3335
|
this.destroy$ = destroy$;
|
|
3408
3336
|
this.el = el;
|
|
3409
|
-
this.
|
|
3337
|
+
this.controlContainer = controlContainer;
|
|
3410
3338
|
this.styleInput = 'standard';
|
|
3411
3339
|
this.inputStyle = 'gray';
|
|
3412
3340
|
this.debounceTime = 100;
|
|
@@ -3432,12 +3360,28 @@ class LibSearchInputComponent extends LibCommonInputTextComponent {
|
|
|
3432
3360
|
}), map(event => event.target?.value), debounceTime(this.debounceTime),
|
|
3433
3361
|
// distinctUntilChanged(), надо ли?
|
|
3434
3362
|
mergeMap(search => of(search).pipe(delay(this.delay))), takeUntilDestroyed(this.destroy$))
|
|
3435
|
-
.subscribe(
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3363
|
+
.subscribe({
|
|
3364
|
+
next: (str) => {
|
|
3365
|
+
this.keyupEvent.emit(str);
|
|
3366
|
+
this.loaded$.next(false);
|
|
3367
|
+
},
|
|
3368
|
+
error: () => this.loaded$.next(false)
|
|
3369
|
+
});
|
|
3370
|
+
}
|
|
3371
|
+
if (this.controlContainer && this.controlContainer.control && this.formControlName) {
|
|
3372
|
+
this.control = this.controlContainer.control.get(this.formControlName);
|
|
3373
|
+
}
|
|
3374
|
+
if (this.control) {
|
|
3375
|
+
this.changeValueSub(this.control);
|
|
3439
3376
|
}
|
|
3440
3377
|
}
|
|
3378
|
+
changeValueSub(control) {
|
|
3379
|
+
control.valueChanges
|
|
3380
|
+
.pipe(takeUntilDestroyed(this.destroy$))
|
|
3381
|
+
.subscribe(() => {
|
|
3382
|
+
this.errorText = ValidatorsService.getErrorText(this.control?.errors);
|
|
3383
|
+
});
|
|
3384
|
+
}
|
|
3441
3385
|
writeValue(value) {
|
|
3442
3386
|
this.value = value === null || value === undefined ? '' : '' + value;
|
|
3443
3387
|
if (!this.destroyed) {
|
|
@@ -3457,12 +3401,21 @@ class LibSearchInputComponent extends LibCommonInputTextComponent {
|
|
|
3457
3401
|
this.keyupEvent.emit('');
|
|
3458
3402
|
}
|
|
3459
3403
|
this.inputSearchElement?.nativeElement.focus();
|
|
3460
|
-
this.
|
|
3404
|
+
this.changeDetection.detectChanges();
|
|
3461
3405
|
}
|
|
3462
3406
|
onClickSearchItem(item) {
|
|
3463
3407
|
this.loaded$.next(false);
|
|
3408
|
+
const val = this.keyValue ? item[this.keyValue] : item;
|
|
3409
|
+
if (this.control) {
|
|
3410
|
+
this.control.setValue(val);
|
|
3411
|
+
}
|
|
3464
3412
|
this.selectedItem.emit(item);
|
|
3465
|
-
|
|
3413
|
+
if (this.splitTitle) {
|
|
3414
|
+
this.value = this.keyTitle && this.keyDesc ? `${this.getTitle(item) || ''} ${this.getDesc(item) || ''}` : this.getDesc(item);
|
|
3415
|
+
}
|
|
3416
|
+
else {
|
|
3417
|
+
this.value = this.keyTitle ? this.getTitle(item) : this.getDesc(item);
|
|
3418
|
+
}
|
|
3466
3419
|
}
|
|
3467
3420
|
getTitle(item) {
|
|
3468
3421
|
return item[this.keyTitle];
|
|
@@ -3470,14 +3423,20 @@ class LibSearchInputComponent extends LibCommonInputTextComponent {
|
|
|
3470
3423
|
getDesc(item) {
|
|
3471
3424
|
return item[this.keyDesc];
|
|
3472
3425
|
}
|
|
3473
|
-
|
|
3474
|
-
|
|
3426
|
+
handleBlur() {
|
|
3427
|
+
super.handleBlur();
|
|
3428
|
+
this.errorText = ValidatorsService.getErrorText(this.control?.errors);
|
|
3429
|
+
this.changeDetection.detectChanges();
|
|
3430
|
+
console.log(this.control);
|
|
3431
|
+
}
|
|
3432
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSearchInputComponent, deps: [{ token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$5.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3433
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibSearchInputComponent, isStandalone: true, selector: "dd-lib-search-input", inputs: { splitTitle: "splitTitle", keyTitle: "keyTitle", keyDesc: "keyDesc", keyValue: "keyValue", styleInput: "styleInput", inputStyle: "inputStyle", searchData: "searchData", debounceTime: "debounceTime", delay: "delay", idClose: "idClose", loaded$: "loaded$" }, outputs: { keyupEvent: "keyupEvent", selectedItem: "selectedItem" }, host: { listeners: { "window:resize": "onWindowScroll()", "window:scroll": "onWindowScroll()" } }, providers: [
|
|
3475
3434
|
{
|
|
3476
3435
|
provide: NG_VALUE_ACCESSOR,
|
|
3477
3436
|
useExisting: forwardRef(() => LibSearchInputComponent),
|
|
3478
3437
|
multi: true,
|
|
3479
3438
|
},
|
|
3480
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-search-input\">\r\n <label [for]=\"id\" class=\"lib-search-input__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 <div class=\"pos-relative\">\r\n <dd-lib-svg-icon (click)=\"forceChange()\" class=\"search-icon\" icon=\"search\"></dd-lib-svg-icon>\r\n <input\r\n #searchInput\r\n (keyup)=\"keyUp.next($event)\"\r\n (keyup.enter)=\"forceChange()\"\r\n [(ngModel)]=\"value\"\r\n [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n [attr.id]=\"id ? id : null\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.name]=\"name\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.tabIndex]=\"tabIndex\"\r\n [attr.type]=\"type || 'text'\"\r\n [class.focused]=\"focused\"\r\n [class.round]=\"styleInput === 'round'\"\r\n [class.white]=\"inputStyle === 'white'\"\r\n [class.invalid]=\"showError\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readOnly\"\r\n class=\"search-input\" />\r\n <dd-lib-svg-icon\r\n (click)=\"onClear()\"\r\n [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n @if (loaded$ | async) {\r\n <div class=\"loading-icon\">\r\n <dd-lib-loader></dd-lib-loader>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (errorText && showSelfError && showError) {\r\n <div class=\"lib-input__error\">{{ errorText }}</div>\r\n }\r\n\r\n @if (data?.length) {\r\n <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\r\n @for (item of data; track item) {\r\n <div (click)=\"onClickSearchItem(item)\" class=\"search-result\">\r\n @if (getTitle(item); as title) {\r\n <div [innerHTML]=\"title | highlight: value | safe: 'html'\" class=\"search-result__title\"></div>\r\n }\r\n @if (getDesc(item); as desc) {\r\n <div [innerHTML]=\"desc | highlight: value | safe: 'html'\" class=\"search-result__desc\"></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.lib-search-input{position:relative}.lib-search-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-search-input input{width:100%;height:48px;padding:16px 16px 15px 44px;border-radius:8px;border:none;color:var(--light-black-color);background-color:var(--input-gray-bgc)}.lib-search-input input.white{background-color:var(--white-color);border:1px solid var(--primary-gray-color)}.lib-search-input .round{border-radius:24px}.lib-search-input .search-icon{position:absolute;left:16px;top:14px;cursor:pointer}.lib-search-input .clear-icon{position:absolute;right:16px;top:14px;cursor:pointer}.lib-search-input .loading-icon{position:absolute;right:40px;top:12px}.lib-search-input .search-result{font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left;cursor:pointer}.lib-search-input .search-result:hover{opacity:.8}.lib-search-input .search-result:last-child .search-result__desc{border:none;padding-bottom:0}.lib-search-input .search-result__title{color:var(--second-gray-color);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;border-bottom:1px solid var(--gray-color-200)}.lib-search-input dd-lib-card{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;box-shadow:var(--main-card-shadow);overflow:auto}.lib-search-input dd-lib-card.top{bottom:50px;top:unset}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3439
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-search-input\">\r\n <label [for]=\"id\" class=\"lib-search-input__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 <div class=\"pos-relative\">\r\n <dd-lib-svg-icon (click)=\"forceChange()\" class=\"search-icon\" icon=\"search\"></dd-lib-svg-icon>\r\n <input\r\n #searchInput\r\n (keyup)=\"keyUp.next($event)\"\r\n (keyup.enter)=\"forceChange()\"\r\n (focus)=\"handleFocus()\"\r\n (blur)=\"handleBlur()\"\r\n [(ngModel)]=\"value\"\r\n [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n [attr.id]=\"id ? id : null\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.name]=\"name\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.tabIndex]=\"tabIndex\"\r\n [attr.type]=\"type || 'text'\"\r\n [class.focused]=\"focused\"\r\n [class.round]=\"styleInput === 'round'\"\r\n [class.white]=\"inputStyle === 'white'\"\r\n [class.invalid]=\"showError\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readOnly\"\r\n class=\"search-input\" />\r\n <dd-lib-svg-icon\r\n (click)=\"onClear()\"\r\n [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n @if (loaded$ | async) {\r\n <div class=\"loading-icon\">\r\n <dd-lib-loader></dd-lib-loader>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (errorText && showSelfError && showError) {\r\n <div class=\"lib-search-input__error\">{{ errorText }}</div>\r\n }\r\n\r\n @if (data?.length) {\r\n <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\r\n @for (item of data; track item) {\r\n <div (click)=\"onClickSearchItem(item)\" class=\"search-result\">\r\n @if (getTitle(item); as title) {\r\n <div [innerHTML]=\"title | highlight: value | safe: 'html'\" class=\"search-result__title\"></div>\r\n }\r\n @if (getDesc(item); as desc) {\r\n <div [innerHTML]=\"desc | highlight: value | safe: 'html'\" class=\"search-result__desc\"></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.lib-search-input{position:relative}.lib-search-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-search-input input{width:100%;height:48px;padding:16px 16px 15px 44px;border-radius:8px;border:none;color:var(--light-black-color);background-color:var(--input-gray-bgc)}.lib-search-input input.white{background-color:var(--white-color);border:1px solid var(--primary-gray-color)}.lib-search-input input.invalid,.lib-search-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-search-input .round{border-radius:24px}.lib-search-input .search-icon{position:absolute;left:16px;top:14px;cursor:pointer}.lib-search-input .clear-icon{position:absolute;right:16px;top:14px;cursor:pointer}.lib-search-input .loading-icon{position:absolute;right:40px;top:12px}.lib-search-input .search-result{font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left;cursor:pointer}.lib-search-input .search-result:hover{opacity:.8}.lib-search-input .search-result:last-child .search-result__desc{border:none;padding-bottom:0}.lib-search-input .search-result__title{color:var(--second-gray-color);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;border-bottom:1px solid var(--gray-color-200)}.lib-search-input dd-lib-card{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;box-shadow:var(--main-card-shadow);overflow:auto}.lib-search-input dd-lib-card.top{bottom:50px;top:unset}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}.lib-search-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3481
3440
|
}
|
|
3482
3441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSearchInputComponent, decorators: [{
|
|
3483
3442
|
type: Component,
|
|
@@ -3487,11 +3446,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
3487
3446
|
useExisting: forwardRef(() => LibSearchInputComponent),
|
|
3488
3447
|
multi: true,
|
|
3489
3448
|
},
|
|
3490
|
-
], template: "<div class=\"lib-search-input\">\r\n <label [for]=\"id\" class=\"lib-search-input__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 <div class=\"pos-relative\">\r\n <dd-lib-svg-icon (click)=\"forceChange()\" class=\"search-icon\" icon=\"search\"></dd-lib-svg-icon>\r\n <input\r\n #searchInput\r\n (keyup)=\"keyUp.next($event)\"\r\n (keyup.enter)=\"forceChange()\"\r\n [(ngModel)]=\"value\"\r\n [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n [attr.id]=\"id ? id : null\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.name]=\"name\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.tabIndex]=\"tabIndex\"\r\n [attr.type]=\"type || 'text'\"\r\n [class.focused]=\"focused\"\r\n [class.round]=\"styleInput === 'round'\"\r\n [class.white]=\"inputStyle === 'white'\"\r\n [class.invalid]=\"showError\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readOnly\"\r\n class=\"search-input\" />\r\n <dd-lib-svg-icon\r\n (click)=\"onClear()\"\r\n [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n @if (loaded$ | async) {\r\n <div class=\"loading-icon\">\r\n <dd-lib-loader></dd-lib-loader>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (errorText && showSelfError && showError) {\r\n <div class=\"lib-input__error\">{{ errorText }}</div>\r\n }\r\n\r\n @if (data?.length) {\r\n <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\r\n @for (item of data; track item) {\r\n <div (click)=\"onClickSearchItem(item)\" class=\"search-result\">\r\n @if (getTitle(item); as title) {\r\n <div [innerHTML]=\"title | highlight: value | safe: 'html'\" class=\"search-result__title\"></div>\r\n }\r\n @if (getDesc(item); as desc) {\r\n <div [innerHTML]=\"desc | highlight: value | safe: 'html'\" class=\"search-result__desc\"></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.lib-search-input{position:relative}.lib-search-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-search-input input{width:100%;height:48px;padding:16px 16px 15px 44px;border-radius:8px;border:none;color:var(--light-black-color);background-color:var(--input-gray-bgc)}.lib-search-input input.white{background-color:var(--white-color);border:1px solid var(--primary-gray-color)}.lib-search-input .round{border-radius:24px}.lib-search-input .search-icon{position:absolute;left:16px;top:14px;cursor:pointer}.lib-search-input .clear-icon{position:absolute;right:16px;top:14px;cursor:pointer}.lib-search-input .loading-icon{position:absolute;right:40px;top:12px}.lib-search-input .search-result{font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left;cursor:pointer}.lib-search-input .search-result:hover{opacity:.8}.lib-search-input .search-result:last-child .search-result__desc{border:none;padding-bottom:0}.lib-search-input .search-result__title{color:var(--second-gray-color);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;border-bottom:1px solid var(--gray-color-200)}.lib-search-input dd-lib-card{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;box-shadow:var(--main-card-shadow);overflow:auto}.lib-search-input dd-lib-card.top{bottom:50px;top:unset}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}\n"] }]
|
|
3491
|
-
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type:
|
|
3449
|
+
], template: "<div class=\"lib-search-input\">\r\n <label [for]=\"id\" class=\"lib-search-input__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 <div class=\"pos-relative\">\r\n <dd-lib-svg-icon (click)=\"forceChange()\" class=\"search-icon\" icon=\"search\"></dd-lib-svg-icon>\r\n <input\r\n #searchInput\r\n (keyup)=\"keyUp.next($event)\"\r\n (keyup.enter)=\"forceChange()\"\r\n (focus)=\"handleFocus()\"\r\n (blur)=\"handleBlur()\"\r\n [(ngModel)]=\"value\"\r\n [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n [attr.id]=\"id ? id : null\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.name]=\"name\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.tabIndex]=\"tabIndex\"\r\n [attr.type]=\"type || 'text'\"\r\n [class.focused]=\"focused\"\r\n [class.round]=\"styleInput === 'round'\"\r\n [class.white]=\"inputStyle === 'white'\"\r\n [class.invalid]=\"showError\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readOnly\"\r\n class=\"search-input\" />\r\n <dd-lib-svg-icon\r\n (click)=\"onClear()\"\r\n [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n @if (loaded$ | async) {\r\n <div class=\"loading-icon\">\r\n <dd-lib-loader></dd-lib-loader>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (errorText && showSelfError && showError) {\r\n <div class=\"lib-search-input__error\">{{ errorText }}</div>\r\n }\r\n\r\n @if (data?.length) {\r\n <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\r\n @for (item of data; track item) {\r\n <div (click)=\"onClickSearchItem(item)\" class=\"search-result\">\r\n @if (getTitle(item); as title) {\r\n <div [innerHTML]=\"title | highlight: value | safe: 'html'\" class=\"search-result__title\"></div>\r\n }\r\n @if (getDesc(item); as desc) {\r\n <div [innerHTML]=\"desc | highlight: value | safe: 'html'\" class=\"search-result__desc\"></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.lib-search-input{position:relative}.lib-search-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-search-input input{width:100%;height:48px;padding:16px 16px 15px 44px;border-radius:8px;border:none;color:var(--light-black-color);background-color:var(--input-gray-bgc)}.lib-search-input input.white{background-color:var(--white-color);border:1px solid var(--primary-gray-color)}.lib-search-input input.invalid,.lib-search-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-search-input .round{border-radius:24px}.lib-search-input .search-icon{position:absolute;left:16px;top:14px;cursor:pointer}.lib-search-input .clear-icon{position:absolute;right:16px;top:14px;cursor:pointer}.lib-search-input .loading-icon{position:absolute;right:40px;top:12px}.lib-search-input .search-result{font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left;cursor:pointer}.lib-search-input .search-result:hover{opacity:.8}.lib-search-input .search-result:last-child .search-result__desc{border:none;padding-bottom:0}.lib-search-input .search-result__title{color:var(--second-gray-color);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;border-bottom:1px solid var(--gray-color-200)}.lib-search-input dd-lib-card{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;box-shadow:var(--main-card-shadow);overflow:auto}.lib-search-input dd-lib-card.top{bottom:50px;top:unset}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}.lib-search-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}\n"] }]
|
|
3450
|
+
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$5.ControlContainer, decorators: [{
|
|
3451
|
+
type: Optional
|
|
3452
|
+
}, {
|
|
3453
|
+
type: Host
|
|
3454
|
+
}, {
|
|
3455
|
+
type: SkipSelf
|
|
3456
|
+
}] }], propDecorators: { splitTitle: [{
|
|
3457
|
+
type: Input
|
|
3458
|
+
}], keyTitle: [{
|
|
3492
3459
|
type: Input
|
|
3493
3460
|
}], keyDesc: [{
|
|
3494
3461
|
type: Input
|
|
3462
|
+
}], keyValue: [{
|
|
3463
|
+
type: Input
|
|
3495
3464
|
}], styleInput: [{
|
|
3496
3465
|
type: Input
|
|
3497
3466
|
}], inputStyle: [{
|
|
@@ -4138,7 +4107,7 @@ class LibSelectComponent extends LibCommonInputTextComponent {
|
|
|
4138
4107
|
useExisting: forwardRef(() => LibSelectComponent),
|
|
4139
4108
|
multi: true,
|
|
4140
4109
|
},
|
|
4141
|
-
], 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>\n @if (label) {\n <label [for]=\"id\" class=\"lib-select__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n\n <div class=\"pos-relative\" data-child=\"input\">\n <input\n #select\n (change)=\"handleChange()\"\n (click)=\"notifyFocusEvent()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [attr.id]=\"selectId\"\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"'text'\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [disabled]=\"disabled\"\n [readOnly]=\"true\"\n [(ngModel)]=\"inputValue\"\n [title]=\"inputValue || ''\"\n class=\"text-select select-block\" />\n\n @if (!initialized && writtenValue) {\n <div class=\"lib-select__value-loader\"><dd-lib-loader></dd-lib-loader></div>\n }\n\n @if (multiCountValue && checkedItems().length > 0) {\n <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n <dd-lib-horizontal-scroll>\n @for (item of checkedItems(); track getItemTrackBy(item, $index)) {\n <div class=\"selected-items__item\">\n @if (stringArray()) {\n <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div [title]=\"item[keyTitle]\"\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"selected-items__item-desc\"></div>\n }\n <dd-lib-svg-icon id=\"selected-clear-{{selectId}}-{{$index}}\" icon=\"clear\" class=\"cup\"\n (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n </div>\n }\n </dd-lib-horizontal-scroll>\n </div>\n }\n\n @if (!checkedItem && !multiCountValue) {\n <dd-lib-svg-icon\n (click)=\"notifyFocusEvent()\"\n [class.black-svg]=\"isShownList\"\n [class.disabled]=\"disabled\"\n [class.gray-svg]=\"!isShownList\"\n [class.up]=\"isShownList\"\n id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n } @else if (clearable && !searchValue && !multi) {\n <dd-lib-svg-icon\n (click)=\"onClear(checkedItem)\"\n class=\"clear\"\n id=\"clear-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n }\n </div>\n\n @if (errorTexts.length && showError) {\n @for (error of errorTexts; track error) {\n <div class=\"lib-select__error\">{{ error }}</div>\n }\n }\n @if (errorText && showSelfError && showError) {\n <div class=\"lib-select__error\">{{ errorText }}</div>\n }\n\n @if (isShownList) {\n <div\n id=\"dropdown-{{selectId}}\"\n [style.max-height]=\"searchOn ? '342px' : '300px'\"\n data-child=\"list\"\n (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n [elements]=\"getClickOutsideElements()\"\n ddListKeyboardNavigation\n class=\"select-list-wrapper\">\n\n @if (!initialized) {\n <div class=\"info-container\">\n <div class=\"d-flex gap-12 align-center\">\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n <dd-lib-loader></dd-lib-loader>\n </div>\n </div>\n }\n\n @else {\n @if (!_data()?.length) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n {{ noDataError }}\n </div>\n </div>\n }\n\n @if (_data()?.length) {\n <div class=\"d-flex full-width align-center {{(_data()!.length > 5 && searchOn) ? 'justify-between' : 'justify-end'}} head-wrapper\">\n @if (_data()!.length > 5 && searchOn) {\n <div class=\"search-block\">\n <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n [readOnly]=\"readOnly\"\n (input)=\"searchInput()\"\n [placeholder]=\"searchPlaceholder\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [(ngModel)]=\"searchValue\" type=\"text\">\n <dd-lib-svg-icon\n [style.display]=\"searchValue ? 'block' : 'none'\"\n class=\"cup\"\n (click)=\"searchValue=''\"\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n </div>\n }\n @if (multi) {\n <div class=\"mr-16\">\n <dd-lib-svg-viewer\n (click)=\"selectAll()\"\n class=\"checked cup\"\n pack=\"lib-svg\"\n id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': '#07B700'\" icon=\"check-green\"></dd-lib-svg-viewer>\n </div>\n }\n </div>\n\n @if ((_data() | filterByKey: filterList.bind(this))?.length === 0) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n </div>\n </div>\n }\n\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this); trackBy: trackByFn.bind(this)\">\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n }\n }\n }\n </div>\n }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-index=\"index\">\n <div ddSelectableItem [dragItem]=\"true\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n (click)=\"selectItem(item)\"\n (itemSelected)=\"selectItem(item)\"\n [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n [class.s-item-disabled]=\"item.disabled\"\n class=\"select-data\">\n @if (stringArray()) {\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"select-data__desc\"></div>\n }\n @if (checkSelected(item)) {\n <dd-lib-svg-icon\n class=\"checked\"\n id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n @for (item of items; track trackByFn($index, item)) {\n @if (isGroup(item)) {\n <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n @if (selectAllInGroup && isGroupSelected(item)) {\n <dd-lib-svg-icon\n [class.checked]=\"isGroupSelected(item)\"\n icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n <div class=\"group-items\">\n @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track trackByFn($index, child)) {\n <ng-container [ngTemplateOutlet]=\"rowItem\"\n [ngTemplateOutletContext]=\"{item: child, index: $index}\"></ng-container>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item: item, index: $index}\"></ng-container>\n }\n }\n</ng-template>\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:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.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 .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.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}.lib-select__value-loader{position:absolute;right:calc(50% - 12px);top:calc(50% - 12px)}.head-wrapper{display:flex;width:100%;align-items:center;border-bottom:1px solid var(--gray-bgc);min-height:40px}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.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;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\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", "ignoreOnDrag"], 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]", inputs: ["dragItem"], outputs: ["itemSelected"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }, { kind: "component", type: LibHorizontalScrollComponent, selector: "dd-lib-horizontal-scroll" }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4110
|
+
], 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>\n @if (label) {\n <label [for]=\"selectId\" class=\"lib-select__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n\n <div class=\"pos-relative\" data-child=\"input\">\n <input\n #select\n (change)=\"handleChange()\"\n (click)=\"notifyFocusEvent()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [attr.id]=\"selectId\"\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"'text'\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [disabled]=\"disabled\"\n [readOnly]=\"true\"\n [(ngModel)]=\"inputValue\"\n [title]=\"inputValue || ''\"\n class=\"text-select select-block\"/>\n\n @if (!initialized && writtenValue) {\n <div class=\"lib-select__value-loader\">\n <dd-lib-loader></dd-lib-loader>\n </div>\n }\n\n @if (multiCountValue && checkedItems().length > 0) {\n <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n <dd-lib-horizontal-scroll>\n @for (item of checkedItems(); track getItemTrackBy(item, $index)) {\n <div class=\"selected-items__item\">\n @if (stringArray()) {\n <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div [title]=\"item[keyTitle]\"\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"selected-items__item-desc\"></div>\n }\n <dd-lib-svg-icon id=\"selected-clear-{{selectId}}-{{$index}}\" icon=\"clear\" class=\"cup\"\n (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n </div>\n }\n </dd-lib-horizontal-scroll>\n </div>\n }\n\n @if (!checkedItem && !multiCountValue) {\n <dd-lib-svg-icon\n (click)=\"notifyFocusEvent()\"\n [class.black-svg]=\"isShownList\"\n [class.disabled]=\"disabled\"\n [class.gray-svg]=\"!isShownList\"\n [class.up]=\"isShownList\"\n id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n } @else if (clearable && !searchValue && !multi) {\n <dd-lib-svg-icon\n (click)=\"onClear(checkedItem)\"\n class=\"clear\"\n id=\"clear-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n }\n </div>\n\n @if (errorTexts.length && showError) {\n @for (error of errorTexts; track error) {\n <div class=\"lib-select__error\">{{ error }}</div>\n }\n }\n @if (errorText && showSelfError && showError) {\n <div class=\"lib-select__error\">{{ errorText }}</div>\n }\n\n @if (isShownList) {\n <div\n id=\"dropdown-{{selectId}}\"\n [style.max-height]=\"searchOn ? '343px' : '300px'\"\n data-child=\"list\"\n (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n [elements]=\"getClickOutsideElements()\"\n ddListKeyboardNavigation\n class=\"select-list-wrapper\">\n\n @if (!initialized) {\n <div class=\"info-container\">\n <div class=\"d-flex gap-12 align-center\">\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n <dd-lib-loader></dd-lib-loader>\n </div>\n </div>\n } @else {\n @if (!_data()?.length) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n {{ noDataError }}\n </div>\n </div>\n }\n\n @if (_data()?.length) {\n @if (multi || (searchOn && _data()!.length > 5)) {\n <div\n class=\"d-flex full-width align-center {{(_data()!.length > 5 && searchOn) ? 'justify-between' : 'justify-end'}} head-wrapper\">\n @if (_data()!.length > 5 && searchOn) {\n <div class=\"search-block\">\n <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n [readOnly]=\"readOnly\"\n (input)=\"searchInput()\"\n [placeholder]=\"searchPlaceholder\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [(ngModel)]=\"searchValue\" type=\"text\">\n <dd-lib-svg-icon\n [style.display]=\"searchValue ? 'block' : 'none'\"\n class=\"cup\"\n (click)=\"searchValue=''\"\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n </div>\n }\n @if (multi) {\n <div class=\"mr-16\">\n <dd-lib-svg-viewer\n (click)=\"selectAll()\"\n class=\"checked cup\"\n pack=\"lib-svg\"\n id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': '#07B700'\"\n icon=\"check-green\"></dd-lib-svg-viewer>\n </div>\n }\n </div>\n }\n\n\n @if ((_data() | filterByKey: filterList.bind(this))?.length === 0) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n </div>\n </div>\n }\n\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\"\n [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n <div\n *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this); trackBy: trackByFn.bind(this)\">\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <ng-container [ngTemplateOutlet]=\"itemsList\"\n [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n }\n }\n }\n </div>\n }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-index=\"index\">\n <div ddSelectableItem [dragItem]=\"true\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n (click)=\"selectItem(item)\"\n (itemSelected)=\"selectItem(item)\"\n [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n [class.s-item-disabled]=\"item.disabled\"\n class=\"select-data\">\n @if (stringArray()) {\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"select-data__desc\"></div>\n }\n @if (checkSelected(item)) {\n <dd-lib-svg-icon\n class=\"checked\"\n id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n @for (item of items; track trackByFn($index, item)) {\n @if (isGroup(item)) {\n <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n @if (selectAllInGroup && isGroupSelected(item)) {\n <dd-lib-svg-icon\n [class.checked]=\"isGroupSelected(item)\"\n icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n <div class=\"group-items\">\n @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track trackByFn($index, child)) {\n <ng-container [ngTemplateOutlet]=\"rowItem\"\n [ngTemplateOutletContext]=\"{item: child, index: $index}\"></ng-container>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item: item, index: $index}\"></ng-container>\n }\n }\n</ng-template>\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:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.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 .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.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}.lib-select__value-loader{position:absolute;right:calc(50% - 12px);top:calc(50% - 12px)}.head-wrapper{display:flex;width:100%;align-items:center;border-bottom:1px solid var(--gray-bgc);min-height:40px}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.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;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\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", "ignoreOnDrag"], 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]", inputs: ["dragItem"], outputs: ["itemSelected"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }, { kind: "component", type: LibHorizontalScrollComponent, selector: "dd-lib-horizontal-scroll" }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4142
4111
|
}
|
|
4143
4112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSelectComponent, decorators: [{
|
|
4144
4113
|
type: Component,
|
|
@@ -4155,7 +4124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
4155
4124
|
useExisting: forwardRef(() => LibSelectComponent),
|
|
4156
4125
|
multi: true,
|
|
4157
4126
|
},
|
|
4158
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n @if (label) {\n <label [for]=\"id\" class=\"lib-select__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n\n <div class=\"pos-relative\" data-child=\"input\">\n <input\n #select\n (change)=\"handleChange()\"\n (click)=\"notifyFocusEvent()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [attr.id]=\"selectId\"\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"'text'\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [disabled]=\"disabled\"\n [readOnly]=\"true\"\n [(ngModel)]=\"inputValue\"\n [title]=\"inputValue || ''\"\n class=\"text-select select-block\" />\n\n @if (!initialized && writtenValue) {\n <div class=\"lib-select__value-loader\"><dd-lib-loader></dd-lib-loader></div>\n }\n\n @if (multiCountValue && checkedItems().length > 0) {\n <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n <dd-lib-horizontal-scroll>\n @for (item of checkedItems(); track getItemTrackBy(item, $index)) {\n <div class=\"selected-items__item\">\n @if (stringArray()) {\n <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div [title]=\"item[keyTitle]\"\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"selected-items__item-desc\"></div>\n }\n <dd-lib-svg-icon id=\"selected-clear-{{selectId}}-{{$index}}\" icon=\"clear\" class=\"cup\"\n (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n </div>\n }\n </dd-lib-horizontal-scroll>\n </div>\n }\n\n @if (!checkedItem && !multiCountValue) {\n <dd-lib-svg-icon\n (click)=\"notifyFocusEvent()\"\n [class.black-svg]=\"isShownList\"\n [class.disabled]=\"disabled\"\n [class.gray-svg]=\"!isShownList\"\n [class.up]=\"isShownList\"\n id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n } @else if (clearable && !searchValue && !multi) {\n <dd-lib-svg-icon\n (click)=\"onClear(checkedItem)\"\n class=\"clear\"\n id=\"clear-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n }\n </div>\n\n @if (errorTexts.length && showError) {\n @for (error of errorTexts; track error) {\n <div class=\"lib-select__error\">{{ error }}</div>\n }\n }\n @if (errorText && showSelfError && showError) {\n <div class=\"lib-select__error\">{{ errorText }}</div>\n }\n\n @if (isShownList) {\n <div\n id=\"dropdown-{{selectId}}\"\n [style.max-height]=\"searchOn ? '342px' : '300px'\"\n data-child=\"list\"\n (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n [elements]=\"getClickOutsideElements()\"\n ddListKeyboardNavigation\n class=\"select-list-wrapper\">\n\n @if (!initialized) {\n <div class=\"info-container\">\n <div class=\"d-flex gap-12 align-center\">\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n <dd-lib-loader></dd-lib-loader>\n </div>\n </div>\n }\n\n @else {\n @if (!_data()?.length) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n {{ noDataError }}\n </div>\n </div>\n }\n\n @if (_data()?.length) {\n <div class=\"d-flex full-width align-center {{(_data()!.length > 5 && searchOn) ? 'justify-between' : 'justify-end'}} head-wrapper\">\n @if (_data()!.length > 5 && searchOn) {\n <div class=\"search-block\">\n <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n [readOnly]=\"readOnly\"\n (input)=\"searchInput()\"\n [placeholder]=\"searchPlaceholder\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [(ngModel)]=\"searchValue\" type=\"text\">\n <dd-lib-svg-icon\n [style.display]=\"searchValue ? 'block' : 'none'\"\n class=\"cup\"\n (click)=\"searchValue=''\"\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n </div>\n }\n @if (multi) {\n <div class=\"mr-16\">\n <dd-lib-svg-viewer\n (click)=\"selectAll()\"\n class=\"checked cup\"\n pack=\"lib-svg\"\n id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': '#07B700'\" icon=\"check-green\"></dd-lib-svg-viewer>\n </div>\n }\n </div>\n\n @if ((_data() | filterByKey: filterList.bind(this))?.length === 0) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n </div>\n </div>\n }\n\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this); trackBy: trackByFn.bind(this)\">\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n }\n }\n }\n </div>\n }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-index=\"index\">\n <div ddSelectableItem [dragItem]=\"true\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n (click)=\"selectItem(item)\"\n (itemSelected)=\"selectItem(item)\"\n [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n [class.s-item-disabled]=\"item.disabled\"\n class=\"select-data\">\n @if (stringArray()) {\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"select-data__desc\"></div>\n }\n @if (checkSelected(item)) {\n <dd-lib-svg-icon\n class=\"checked\"\n id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n @for (item of items; track trackByFn($index, item)) {\n @if (isGroup(item)) {\n <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n @if (selectAllInGroup && isGroupSelected(item)) {\n <dd-lib-svg-icon\n [class.checked]=\"isGroupSelected(item)\"\n icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n <div class=\"group-items\">\n @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track trackByFn($index, child)) {\n <ng-container [ngTemplateOutlet]=\"rowItem\"\n [ngTemplateOutletContext]=\"{item: child, index: $index}\"></ng-container>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item: item, index: $index}\"></ng-container>\n }\n }\n</ng-template>\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:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.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 .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.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}.lib-select__value-loader{position:absolute;right:calc(50% - 12px);top:calc(50% - 12px)}.head-wrapper{display:flex;width:100%;align-items:center;border-bottom:1px solid var(--gray-bgc);min-height:40px}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.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;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\n"] }]
|
|
4127
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n @if (label) {\n <label [for]=\"selectId\" class=\"lib-select__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n\n <div class=\"pos-relative\" data-child=\"input\">\n <input\n #select\n (change)=\"handleChange()\"\n (click)=\"notifyFocusEvent()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [attr.id]=\"selectId\"\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"'text'\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [disabled]=\"disabled\"\n [readOnly]=\"true\"\n [(ngModel)]=\"inputValue\"\n [title]=\"inputValue || ''\"\n class=\"text-select select-block\"/>\n\n @if (!initialized && writtenValue) {\n <div class=\"lib-select__value-loader\">\n <dd-lib-loader></dd-lib-loader>\n </div>\n }\n\n @if (multiCountValue && checkedItems().length > 0) {\n <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n <dd-lib-horizontal-scroll>\n @for (item of checkedItems(); track getItemTrackBy(item, $index)) {\n <div class=\"selected-items__item\">\n @if (stringArray()) {\n <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div [title]=\"item[keyTitle]\"\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"selected-items__item-desc\"></div>\n }\n <dd-lib-svg-icon id=\"selected-clear-{{selectId}}-{{$index}}\" icon=\"clear\" class=\"cup\"\n (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n </div>\n }\n </dd-lib-horizontal-scroll>\n </div>\n }\n\n @if (!checkedItem && !multiCountValue) {\n <dd-lib-svg-icon\n (click)=\"notifyFocusEvent()\"\n [class.black-svg]=\"isShownList\"\n [class.disabled]=\"disabled\"\n [class.gray-svg]=\"!isShownList\"\n [class.up]=\"isShownList\"\n id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n } @else if (clearable && !searchValue && !multi) {\n <dd-lib-svg-icon\n (click)=\"onClear(checkedItem)\"\n class=\"clear\"\n id=\"clear-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n }\n </div>\n\n @if (errorTexts.length && showError) {\n @for (error of errorTexts; track error) {\n <div class=\"lib-select__error\">{{ error }}</div>\n }\n }\n @if (errorText && showSelfError && showError) {\n <div class=\"lib-select__error\">{{ errorText }}</div>\n }\n\n @if (isShownList) {\n <div\n id=\"dropdown-{{selectId}}\"\n [style.max-height]=\"searchOn ? '343px' : '300px'\"\n data-child=\"list\"\n (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n [elements]=\"getClickOutsideElements()\"\n ddListKeyboardNavigation\n class=\"select-list-wrapper\">\n\n @if (!initialized) {\n <div class=\"info-container\">\n <div class=\"d-flex gap-12 align-center\">\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n <dd-lib-loader></dd-lib-loader>\n </div>\n </div>\n } @else {\n @if (!_data()?.length) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n {{ noDataError }}\n </div>\n </div>\n }\n\n @if (_data()?.length) {\n @if (multi || (searchOn && _data()!.length > 5)) {\n <div\n class=\"d-flex full-width align-center {{(_data()!.length > 5 && searchOn) ? 'justify-between' : 'justify-end'}} head-wrapper\">\n @if (_data()!.length > 5 && searchOn) {\n <div class=\"search-block\">\n <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n [readOnly]=\"readOnly\"\n (input)=\"searchInput()\"\n [placeholder]=\"searchPlaceholder\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [(ngModel)]=\"searchValue\" type=\"text\">\n <dd-lib-svg-icon\n [style.display]=\"searchValue ? 'block' : 'none'\"\n class=\"cup\"\n (click)=\"searchValue=''\"\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n </div>\n }\n @if (multi) {\n <div class=\"mr-16\">\n <dd-lib-svg-viewer\n (click)=\"selectAll()\"\n class=\"checked cup\"\n pack=\"lib-svg\"\n id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': '#07B700'\"\n icon=\"check-green\"></dd-lib-svg-viewer>\n </div>\n }\n </div>\n }\n\n\n @if ((_data() | filterByKey: filterList.bind(this))?.length === 0) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n </div>\n </div>\n }\n\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\"\n [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n <div\n *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this); trackBy: trackByFn.bind(this)\">\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <ng-container [ngTemplateOutlet]=\"itemsList\"\n [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n }\n }\n }\n </div>\n }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-index=\"index\">\n <div ddSelectableItem [dragItem]=\"true\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n (click)=\"selectItem(item)\"\n (itemSelected)=\"selectItem(item)\"\n [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n [class.s-item-disabled]=\"item.disabled\"\n class=\"select-data\">\n @if (stringArray()) {\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"select-data__desc\"></div>\n }\n @if (checkSelected(item)) {\n <dd-lib-svg-icon\n class=\"checked\"\n id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n @for (item of items; track trackByFn($index, item)) {\n @if (isGroup(item)) {\n <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n @if (selectAllInGroup && isGroupSelected(item)) {\n <dd-lib-svg-icon\n [class.checked]=\"isGroupSelected(item)\"\n icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n <div class=\"group-items\">\n @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track trackByFn($index, child)) {\n <ng-container [ngTemplateOutlet]=\"rowItem\"\n [ngTemplateOutletContext]=\"{item: child, index: $index}\"></ng-container>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item: item, index: $index}\"></ng-container>\n }\n }\n</ng-template>\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:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.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 .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.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}.lib-select__value-loader{position:absolute;right:calc(50% - 12px);top:calc(50% - 12px)}.head-wrapper{display:flex;width:100%;align-items:center;border-bottom:1px solid var(--gray-bgc);min-height:40px}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.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;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\n"] }]
|
|
4159
4128
|
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ChangeDetectorRef }, { type: i1$5.ControlContainer, decorators: [{
|
|
4160
4129
|
type: Optional
|
|
4161
4130
|
}, {
|
|
@@ -4526,7 +4495,7 @@ class LibTextareaComponent extends LibCommonInputTextComponent {
|
|
|
4526
4495
|
useExisting: forwardRef(() => LibTextareaComponent),
|
|
4527
4496
|
multi: true,
|
|
4528
4497
|
},
|
|
4529
|
-
], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-textarea\">\r\n <label [for]=\"id\" class=\"d-block g-text-sm mb-4\">\r\n {{ label }}\r\n @if (needCounter && maxlength) {\r\n <span>(\u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C {{ +maxlength! - (value?.length || 0) }} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)</span>\r\n }\r\n @if (required) {\r\n <span class=\"red\">*</span>\r\n }\r\n </label>\r\n <div class=\"pos-relative d-flex\">\r\n <textarea\r\n #textarea\r\n (blur)=\"
|
|
4498
|
+
], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-textarea\">\r\n <label [for]=\"id\" class=\"d-block g-text-sm mb-4\">\r\n {{ label }}\r\n @if (needCounter && maxlength) {\r\n <span>(\u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C {{ +maxlength! - (value?.length || 0) }} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)</span>\r\n }\r\n @if (required) {\r\n <span class=\"red\">*</span>\r\n }\r\n </label>\r\n <div class=\"pos-relative d-flex\">\r\n <textarea\r\n #textarea\r\n (blur)=\"handleBlur()\"\r\n (change)=\"handleChange()\"\r\n (focus)=\"notifyFocusEvent()\"\r\n (input)=\"handleInput($event)\"\r\n (keyup.enter)=\"forceChange()\"\r\n [(ngModel)]=\"value\"\r\n [attr.id]=\"id ? id : null\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.name]=\"name\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.tabIndex]=\"tabIndex\"\r\n [class.focused]=\"focused\"\r\n [class.invalid]=\"showError\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readOnly\"\r\n [required]=\"required\"\r\n [rows]=\"rows\"\r\n class=\"textarea\"></textarea>\r\n @if (maxlength) {\r\n <span class=\"lib-textarea__counter\">{{ value?.length || 0 }}/{{ maxlength }}</span>\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-textarea__error\">{{ error }}</div>\r\n }\r\n }\r\n\r\n @if (errorText && showSelfError && showError) {\r\n <div class=\"lib-textarea__error\">{{ errorText }}</div>\r\n }\r\n</div>\r\n", styles: [".lib-textarea{position:relative;display:inline;flex-direction:column}.lib-textarea textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;resize:none;font-size:16px;line-height:24px;color:var(--light-black-color)}.lib-textarea textarea:hover{border-color:var(--input-active-border-colort)}.lib-textarea textarea:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-textarea textarea:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-textarea textarea:disabled::placeholder{color:var(--input-placeholder)}.lib-textarea textarea.invalid,.lib-textarea textarea.invalid:hover{border-color:var(--input-error-border-color)}.lib-textarea textarea.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-textarea__counter{position:absolute;font-size:12px;font-weight:400;right:16px;bottom:12px;color:var(--input-placeholder)}.lib-textarea__counter textarea:disabled+.lib-text-counter{color:var(--input-disable-text)}.lib-textarea__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4530
4499
|
}
|
|
4531
4500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibTextareaComponent, decorators: [{
|
|
4532
4501
|
type: Component,
|
|
@@ -4536,7 +4505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
4536
4505
|
useExisting: forwardRef(() => LibTextareaComponent),
|
|
4537
4506
|
multi: true,
|
|
4538
4507
|
},
|
|
4539
|
-
], template: "<div class=\"lib-textarea\">\r\n <label [for]=\"id\" class=\"d-block g-text-sm mb-4\">\r\n {{ label }}\r\n @if (needCounter && maxlength) {\r\n <span>(\u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C {{ +maxlength! - (value?.length || 0) }} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)</span>\r\n }\r\n @if (required) {\r\n <span class=\"red\">*</span>\r\n }\r\n </label>\r\n <div class=\"pos-relative d-flex\">\r\n <textarea\r\n #textarea\r\n (blur)=\"
|
|
4508
|
+
], template: "<div class=\"lib-textarea\">\r\n <label [for]=\"id\" class=\"d-block g-text-sm mb-4\">\r\n {{ label }}\r\n @if (needCounter && maxlength) {\r\n <span>(\u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C {{ +maxlength! - (value?.length || 0) }} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)</span>\r\n }\r\n @if (required) {\r\n <span class=\"red\">*</span>\r\n }\r\n </label>\r\n <div class=\"pos-relative d-flex\">\r\n <textarea\r\n #textarea\r\n (blur)=\"handleBlur()\"\r\n (change)=\"handleChange()\"\r\n (focus)=\"notifyFocusEvent()\"\r\n (input)=\"handleInput($event)\"\r\n (keyup.enter)=\"forceChange()\"\r\n [(ngModel)]=\"value\"\r\n [attr.id]=\"id ? id : null\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.name]=\"name\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.tabIndex]=\"tabIndex\"\r\n [class.focused]=\"focused\"\r\n [class.invalid]=\"showError\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readOnly\"\r\n [required]=\"required\"\r\n [rows]=\"rows\"\r\n class=\"textarea\"></textarea>\r\n @if (maxlength) {\r\n <span class=\"lib-textarea__counter\">{{ value?.length || 0 }}/{{ maxlength }}</span>\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-textarea__error\">{{ error }}</div>\r\n }\r\n }\r\n\r\n @if (errorText && showSelfError && showError) {\r\n <div class=\"lib-textarea__error\">{{ errorText }}</div>\r\n }\r\n</div>\r\n", styles: [".lib-textarea{position:relative;display:inline;flex-direction:column}.lib-textarea textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;resize:none;font-size:16px;line-height:24px;color:var(--light-black-color)}.lib-textarea textarea:hover{border-color:var(--input-active-border-colort)}.lib-textarea textarea:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-textarea textarea:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-textarea textarea:disabled::placeholder{color:var(--input-placeholder)}.lib-textarea textarea.invalid,.lib-textarea textarea.invalid:hover{border-color:var(--input-error-border-color)}.lib-textarea textarea.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-textarea__counter{position:absolute;font-size:12px;font-weight:400;right:16px;bottom:12px;color:var(--input-placeholder)}.lib-textarea__counter textarea:disabled+.lib-text-counter{color:var(--input-disable-text)}.lib-textarea__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}\n"] }]
|
|
4540
4509
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$5.ControlContainer, decorators: [{
|
|
4541
4510
|
type: Optional
|
|
4542
4511
|
}, {
|
|
@@ -5014,14 +4983,14 @@ class LibDateInputComponent {
|
|
|
5014
4983
|
this.cdr.detectChanges();
|
|
5015
4984
|
}
|
|
5016
4985
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibDateInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5017
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibDateInputComponent, isStandalone: true, selector: "dd-lib-date-input", inputs: { topSide: "topSide", dateId: "dateId", placeholder: "placeholder", label: "label", required: "required" }, providers: [
|
|
4986
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibDateInputComponent, isStandalone: true, selector: "dd-lib-date-input", inputs: { topSide: "topSide", dateId: "dateId", placeholder: "placeholder", label: "label", required: "required", needTime: "needTime" }, providers: [
|
|
5018
4987
|
provideNgxMask(),
|
|
5019
4988
|
{
|
|
5020
4989
|
provide: NG_VALUE_ACCESSOR,
|
|
5021
4990
|
useExisting: forwardRef(() => LibDateInputComponent),
|
|
5022
4991
|
multi: true,
|
|
5023
4992
|
},
|
|
5024
|
-
], ngImport: i0, template: "<div class=\"lib-date\" id=\"lib-date-{{ dateId }}\">\r\n @if (label) {\r\n <label [for]=\"dateId\" class=\"lib-date__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 <div class=\"pos-relative\">\r\n <input\r\n [attr.id]=\"dateId\"\r\n [attr.placeholder]=\"placeholder\"\r\n (click)=\"openCalendar()\"\r\n [(ngModel)]=\"selectedDateStr\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (ngModelChange)=\"changeStrDate($event)\"\r\n [leadZeroDateTime]=\"true\"\r\n class=\"text-select\"/>\r\n @if (!selectedDateStr) {\r\n <dd-lib-svg-icon [class.gray-svg]=\"!isShownCalendar\"\r\n (click)=\"openCalendar()\"\r\n id=\"calendar-{{ dateId }}\"\r\n class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\r\n\r\n\r\n } @else {\r\n <dd-lib-svg-icon\r\n (click)=\"setPeriod(undefined)\"\r\n class=\"clear\"\r\n icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n }\r\n </div>\r\n @if (isShownCalendar) {\r\n <div\r\n (ddClickOutside)=\"closeCalendar()\"\r\n [elements]=\"['lib-date-' + dateId, 'calendar' + dateId]\"\r\n class=\"calendar-wrapper\" [ngClass]=\"{top: topSide}\">\r\n <dd-lib-calendar [(ngModel)]=\"selectedDate\"
|
|
4993
|
+
], ngImport: i0, template: "<div class=\"lib-date\" id=\"lib-date-{{ dateId }}\">\r\n @if (label) {\r\n <label [for]=\"dateId\" class=\"lib-date__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 <div class=\"pos-relative\">\r\n <input\r\n [attr.id]=\"dateId\"\r\n [attr.placeholder]=\"placeholder\"\r\n (click)=\"openCalendar()\"\r\n [(ngModel)]=\"selectedDateStr\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (ngModelChange)=\"changeStrDate($event)\"\r\n [leadZeroDateTime]=\"true\"\r\n class=\"text-select\"/>\r\n @if (!selectedDateStr) {\r\n <dd-lib-svg-icon [class.gray-svg]=\"!isShownCalendar\"\r\n (click)=\"openCalendar()\"\r\n id=\"calendar-{{ dateId }}\"\r\n class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\r\n\r\n\r\n } @else {\r\n <dd-lib-svg-icon\r\n (click)=\"setPeriod(undefined)\"\r\n class=\"clear\"\r\n icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n }\r\n </div>\r\n @if (isShownCalendar) {\r\n <div\r\n (ddClickOutside)=\"closeCalendar()\"\r\n [elements]=\"['lib-date-' + dateId, 'calendar' + dateId]\"\r\n class=\"calendar-wrapper\" [ngClass]=\"{top: topSide}\">\r\n <dd-lib-calendar [(ngModel)]=\"selectedDate\"\r\n [needTime]=\"needTime\"\r\n (emitDate)=\"setPeriod($event)\"></dd-lib-calendar>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".lib-date{min-width:340px;position:relative}.lib-date input{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-date input:hover{border-color:var(--input-active-border-colort)}.lib-date input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-date input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-date input:disabled::placeholder{color:var(--input-placeholder)}.lib-date input.invalid,.lib-date input.invalid:hover{border-color:var(--input-error-border-color)}.lib-date input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-date .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-date .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-date .calendar.up{transform:rotate(180deg)}.lib-date__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-date__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-date .calendar-wrapper{max-width:350px;position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-date .calendar-wrapper.top{bottom:48px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "rangeModeFullPeriod", "maxHours", "maxMinutes", "needTime", "mode", "dateStart", "dateEnd", "maxDate", "minDate"], outputs: ["emitDate", "immediatelyEmitDate", "emitPeriod"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5025
4994
|
}
|
|
5026
4995
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibDateInputComponent, decorators: [{
|
|
5027
4996
|
type: Component,
|
|
@@ -5039,7 +5008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
5039
5008
|
useExisting: forwardRef(() => LibDateInputComponent),
|
|
5040
5009
|
multi: true,
|
|
5041
5010
|
},
|
|
5042
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-date\" id=\"lib-date-{{ dateId }}\">\r\n @if (label) {\r\n <label [for]=\"dateId\" class=\"lib-date__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 <div class=\"pos-relative\">\r\n <input\r\n [attr.id]=\"dateId\"\r\n [attr.placeholder]=\"placeholder\"\r\n (click)=\"openCalendar()\"\r\n [(ngModel)]=\"selectedDateStr\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (ngModelChange)=\"changeStrDate($event)\"\r\n [leadZeroDateTime]=\"true\"\r\n class=\"text-select\"/>\r\n @if (!selectedDateStr) {\r\n <dd-lib-svg-icon [class.gray-svg]=\"!isShownCalendar\"\r\n (click)=\"openCalendar()\"\r\n id=\"calendar-{{ dateId }}\"\r\n class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\r\n\r\n\r\n } @else {\r\n <dd-lib-svg-icon\r\n (click)=\"setPeriod(undefined)\"\r\n class=\"clear\"\r\n icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n }\r\n </div>\r\n @if (isShownCalendar) {\r\n <div\r\n (ddClickOutside)=\"closeCalendar()\"\r\n [elements]=\"['lib-date-' + dateId, 'calendar' + dateId]\"\r\n class=\"calendar-wrapper\" [ngClass]=\"{top: topSide}\">\r\n <dd-lib-calendar [(ngModel)]=\"selectedDate\"
|
|
5011
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-date\" id=\"lib-date-{{ dateId }}\">\r\n @if (label) {\r\n <label [for]=\"dateId\" class=\"lib-date__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 <div class=\"pos-relative\">\r\n <input\r\n [attr.id]=\"dateId\"\r\n [attr.placeholder]=\"placeholder\"\r\n (click)=\"openCalendar()\"\r\n [(ngModel)]=\"selectedDateStr\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (ngModelChange)=\"changeStrDate($event)\"\r\n [leadZeroDateTime]=\"true\"\r\n class=\"text-select\"/>\r\n @if (!selectedDateStr) {\r\n <dd-lib-svg-icon [class.gray-svg]=\"!isShownCalendar\"\r\n (click)=\"openCalendar()\"\r\n id=\"calendar-{{ dateId }}\"\r\n class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\r\n\r\n\r\n } @else {\r\n <dd-lib-svg-icon\r\n (click)=\"setPeriod(undefined)\"\r\n class=\"clear\"\r\n icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n }\r\n </div>\r\n @if (isShownCalendar) {\r\n <div\r\n (ddClickOutside)=\"closeCalendar()\"\r\n [elements]=\"['lib-date-' + dateId, 'calendar' + dateId]\"\r\n class=\"calendar-wrapper\" [ngClass]=\"{top: topSide}\">\r\n <dd-lib-calendar [(ngModel)]=\"selectedDate\"\r\n [needTime]=\"needTime\"\r\n (emitDate)=\"setPeriod($event)\"></dd-lib-calendar>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".lib-date{min-width:340px;position:relative}.lib-date input{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-date input:hover{border-color:var(--input-active-border-colort)}.lib-date input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-date input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-date input:disabled::placeholder{color:var(--input-placeholder)}.lib-date input.invalid,.lib-date input.invalid:hover{border-color:var(--input-error-border-color)}.lib-date input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-date .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-date .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-date .calendar.up{transform:rotate(180deg)}.lib-date__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-date__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-date .calendar-wrapper{max-width:350px;position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-date .calendar-wrapper.top{bottom:48px}\n"] }]
|
|
5043
5012
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { topSide: [{
|
|
5044
5013
|
type: Input
|
|
5045
5014
|
}], dateId: [{
|
|
@@ -5050,6 +5019,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
5050
5019
|
type: Input
|
|
5051
5020
|
}], required: [{
|
|
5052
5021
|
type: Input
|
|
5022
|
+
}], needTime: [{
|
|
5023
|
+
type: Input
|
|
5053
5024
|
}] } });
|
|
5054
5025
|
|
|
5055
5026
|
class LibFilterComponent {
|
|
@@ -5940,5 +5911,5 @@ const t = true;
|
|
|
5940
5911
|
* Generated bundle index. Do not edit.
|
|
5941
5912
|
*/
|
|
5942
5913
|
|
|
5943
|
-
export { API_URL, AutoHeightDirective, ClickOutsideDirective, CounterDirective, DDDialogRef, DEFAULT_FORMAT, DIALOG_CONFIG, DataEmptyComponent, DateService, Debounce, DeclensionDirective, DestroyService, DialogConfig, DialogService, DisableAfterNCall, Disabled, DropDownPositionDirective, ErrorPageComponent, FetcherService, FilterByKeyPipe, FilterPipe, FixedPositionDirective, FooterComponent, FooterLinkComponent, FooterLinksBlockComponent, HighlightPipe, IDatePeriod, ITab, InterceptorsService, LibAccordionComponent, LibBackButtonComponent, LibButtonComponent, LibCalendarComponent, LibCardComponent, LibCheckboxComponent, LibCommentInputComponent, LibCommonButtonComponent, LibCommonInputTextComponent, LibDateInputComponent, LibDateRangeComponent, LibDisclaimerComponent, LibFileLoaderComponent, LibFileUploadComponent, LibFilterButtonComponent, LibFilterComponent, LibHorizontalScrollComponent, LibImageLoaderComponent, LibInfoCardComponent, LibInputComponent, LibLoaderComponent, LibRadioComponent, LibSearchInputComponent, LibSelectComponent, LibSkeletonComponent, LibSortComponent, LibStepComponent, LibSvgComponent, LibSvgIconComponent, LibSvgViewerComponent, LibTabsFragmentComponent, LibTextareaComponent, ListKeyboardNavigationDirective, MainSharedComponent, ModalBaseComponent, ModalCommonComponent, NotFoundComponent, PhoneMaskDirective, ResizeTextareaDirective, ReversePipe, SafePipe, SelectableItemDirective, SortByValPipe, SvgIconsService, TOAST_CONFIG_TOKEN, TOOLTIP_DATA, TechWorksComponent, ThemeConfigurator, ThemeConstructorService, Throttle, ToastComponent, ToastConfig, ToastData, ToastRef, ToastService, ToastTypeData, TooltipComponent, TooltipDirective, TriangleDirective, ValidatorsService, VhHeightDirective, completeIconSet, defaultToastConfig, provideToast, svgIconActogoneAccept, svgIconAll, svgIconAppgalery, svgIconAppstore, svgIconArrowDownRed, svgIconArrowUpGreen, svgIconBackArrow, svgIconBurger, svgIconCalendar, svgIconCheckGreen, svgIconCheckWhite, svgIconCircleNo, svgIconClear, svgIconClose, svgIconDangerT, svgIconDd, svgIconDdM, svgIconDobrodel, svgIconDownChevron, svgIconDownload, svgIconEds, svgIconEds2, svgIconEds2M, svgIconEdsM, svgIconEntry, svgIconErrorHint, svgIconEsia, svgIconEye, svgIconEyeOff, svgIconFile, svgIconFilter, svgIconGoogleapp, svgIconGrid, svgIconHealth, svgIconHealthM, svgIconInfoCircle, svgIconInfoT, svgIconLeftChevron, svgIconListSearch, svgIconLogout, svgIconMailExclamation, svgIconMaxFilter, svgIconMoon, svgIconMy, svgIconMyM, svgIconNews, svgIconNext, svgIconPaperclip, svgIconPenEdit, svgIconPguMo, svgIconPguMoM, svgIconPlug, svgIconPlugD, svgIconPlus, svgIconPreset, svgIconPrev, svgIconPrint, svgIconPrinter, svgIconQuestion, svgIconQuestionWhiteG, svgIconRedClose, svgIconReload, svgIconRightChevron, svgIconRustore, svgIconSearch, svgIconSend, svgIconSetAvatar, svgIconSharedLogo, svgIconSmallRoundLoader, svgIconSort, svgIconStar, svgIconSuccessT, svgIconSun, svgIconTg, svgIconToggleArrowLeft, svgIconToggleArrowRight, svgIconTrash, svgIconTrophy, svgIconUser, svgIconUserEmpty, svgIconUserEmptyD, svgIconVk, svgIconWarningT, t };
|
|
5914
|
+
export { API_URL, AutoHeightDirective, ClickOutsideDirective, CounterDirective, DDDialogRef, DEFAULT_FORMAT, DIALOG_CONFIG, DataEmptyComponent, DateService, Debounce, DeclensionDirective, DestroyService, DialogConfig, DialogService, DisableAfterNCall, Disabled, DropDownPositionDirective, ErrorPageComponent, FetcherService, FilterByKeyPipe, FilterPipe, FixedPositionDirective, FooterComponent, FooterLinkComponent, FooterLinksBlockComponent, HighlightPipe, IDatePeriod, ITab, InterceptorsService, LibAccordionComponent, LibBackButtonComponent, LibButtonComponent, LibCalendarComponent, LibCardComponent, LibCheckboxComponent, LibCommentInputComponent, LibCommonButtonComponent, LibCommonInputTextComponent, LibDateInputComponent, LibDateRangeComponent, LibDisclaimerComponent, LibFileLoaderComponent, LibFileUploadComponent, LibFilterButtonComponent, LibFilterComponent, LibHorizontalScrollComponent, LibImageLoaderComponent, LibInfoCardComponent, LibInputComponent, LibLoaderComponent, LibRadioComponent, LibSearchInputComponent, LibSelectComponent, LibSkeletonComponent, LibSortComponent, LibStepComponent, LibSvgComponent, LibSvgIconComponent, LibSvgViewerComponent, LibTabsFragmentComponent, LibTextareaComponent, ListKeyboardNavigationDirective, MainSharedComponent, ModalBaseComponent, ModalCommonComponent, ModalQuestionComponent, NotFoundComponent, PhoneMaskDirective, ResizeTextareaDirective, ReversePipe, SafePipe, SelectableItemDirective, SortByValPipe, SvgIconsService, TOAST_CONFIG_TOKEN, TOOLTIP_DATA, TechWorksComponent, ThemeConfigurator, ThemeConstructorService, Throttle, ToastComponent, ToastConfig, ToastData, ToastRef, ToastService, ToastTypeData, TooltipComponent, TooltipDirective, TriangleDirective, ValidatorsService, VhHeightDirective, completeIconSet, defaultToastConfig, provideToast, svgIconActogoneAccept, svgIconAll, svgIconAppgalery, svgIconAppstore, svgIconArrowDownRed, svgIconArrowUpGreen, svgIconBackArrow, svgIconBurger, svgIconCalendar, svgIconCheckGreen, svgIconCheckWhite, svgIconCircleNo, svgIconClear, svgIconClose, svgIconDangerT, svgIconDd, svgIconDdM, svgIconDobrodel, svgIconDownChevron, svgIconDownload, svgIconEds, svgIconEds2, svgIconEds2M, svgIconEdsM, svgIconEntry, svgIconErrorHint, svgIconEsia, svgIconEye, svgIconEyeOff, svgIconFile, svgIconFilter, svgIconGoogleapp, svgIconGrid, svgIconHealth, svgIconHealthM, svgIconInfoCircle, svgIconInfoT, svgIconLeftChevron, svgIconListSearch, svgIconLogout, svgIconMailExclamation, svgIconMaxFilter, svgIconMoon, svgIconMy, svgIconMyM, svgIconNews, svgIconNext, svgIconPaperclip, svgIconPenEdit, svgIconPguMo, svgIconPguMoM, svgIconPlug, svgIconPlugD, svgIconPlus, svgIconPreset, svgIconPrev, svgIconPrint, svgIconPrinter, svgIconQuestion, svgIconQuestionWhiteG, svgIconRedClose, svgIconReload, svgIconRightChevron, svgIconRustore, svgIconSearch, svgIconSend, svgIconSetAvatar, svgIconSharedLogo, svgIconSmallRoundLoader, svgIconSort, svgIconStar, svgIconSuccessT, svgIconSun, svgIconTg, svgIconToggleArrowLeft, svgIconToggleArrowRight, svgIconTrash, svgIconTrophy, svgIconUser, svgIconUserEmpty, svgIconUserEmptyD, svgIconVk, svgIconWarningT, t };
|
|
5944
5915
|
//# sourceMappingURL=morozeckiy-dd-lib.mjs.map
|