@morozeckiy/dd-lib 0.9.6 → 0.9.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/images/svg/award.svg +4 -11
- package/assets/images/svg/bell-cog.svg +11 -0
- package/assets/images/svg/home.svg +5 -0
- package/assets/images/svg/news.svg +6 -6
- package/assets/images/svg/star.svg +3 -3
- package/assets/images/svg/trophy.svg +8 -8
- package/assets/scss/common.scss +7 -0
- package/fesm2022/morozeckiy-dd-lib.mjs +37 -13
- package/fesm2022/morozeckiy-dd-lib.mjs.map +1 -1
- package/morozeckiy-dd-lib-0.9.7.tgz +0 -0
- package/package.json +1 -1
- package/types/morozeckiy-dd-lib.d.ts +5 -4
- package/morozeckiy-dd-lib-0.9.5.tgz +0 -0
- package/morozeckiy-dd-lib-0.9.6.tgz +0 -0
|
@@ -1,12 +1,5 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<path d="M6.80186 12L3.40186 17.89L6.99986 17.657L8.59786 20.889L11.9979 15" stroke="#07b700" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
-
</g>
|
|
7
|
-
<defs>
|
|
8
|
-
<clipPath id="clip0_1580_31182">
|
|
9
|
-
<rect width="24" height="24" fill="white"/>
|
|
10
|
-
</clipPath>
|
|
11
|
-
</defs>
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M8 12C8 14.1217 8.84286 16.1566 10.3431 17.6569C11.8434 19.1571 13.8783 20 16 20C18.1217 20 20.1566 19.1571 21.6569 17.6569C23.1571 16.1566 24 14.1217 24 12C24 9.87827 23.1571 7.84344 21.6569 6.34315C20.1566 4.84286 18.1217 4 16 4C13.8783 4 11.8434 4.84286 10.3431 6.34315C8.84286 7.84344 8 9.87827 8 12Z" stroke="#07b700" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M16 20L20.5333 27.8533L22.664 23.5427L27.4613 23.852L22.928 16" stroke="#07b700" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M9.06947 16L4.53613 23.8533L9.33347 23.5427L11.4641 27.852L15.9975 20" stroke="#07b700" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
12
5
|
</svg>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M12 17H4C4.54494 16.6914 5.00981 16.2592 5.35719 15.7381C5.70457 15.2171 5.92474 14.6217 6 14V11C6.05956 9.73107 6.4633 8.50227 7.16795 7.4453C7.8726 6.38833 8.85159 5.54303 10 5C10 4.46957 10.2107 3.96086 10.5858 3.58579C10.9609 3.21071 11.4696 3 12 3C12.5304 3 13.0391 3.21071 13.4142 3.58579C13.7893 3.96086 14 4.46957 14 5C15.1484 5.54303 16.1274 6.38833 16.8321 7.4453C17.5367 8.50227 17.9404 9.73107 18 11V11.5" stroke="#07B700" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M17.002 19C17.002 19.5304 17.2127 20.0391 17.5877 20.4142C17.9628 20.7893 18.4715 21 19.002 21C19.5324 21 20.0411 20.7893 20.4162 20.4142C20.7912 20.0391 21.002 19.5304 21.002 19C21.002 18.4696 20.7912 17.9609 20.4162 17.5858C20.0411 17.2107 19.5324 17 19.002 17C18.4715 17 17.9628 17.2107 17.5877 17.5858C17.2127 17.9609 17.002 18.4696 17.002 19Z" stroke="#07B700" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M19.002 15.5V17" stroke="#07B700" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M19.002 21V22.5" stroke="#07B700" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path d="M22.0314 17.25L20.7324 18" stroke="#07B700" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
<path d="M17.2707 20L15.9707 20.75" stroke="#07B700" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
<path d="M15.9707 17.25L17.2707 18" stroke="#07B700" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
|
+
<path d="M20.7324 20L22.0324 20.75" stroke="#07B700" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
10
|
+
<path d="M9 17V18C9 18.7956 9.31607 19.5587 9.87868 20.1213C10.4413 20.6839 11.2044 21 12 21" stroke="#07B700" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
11
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M5 12H3L12 3L21 12H19" stroke="#ffffff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M5 12V19C5 19.5304 5.21071 20.0391 5.58579 20.4142C5.96086 20.7893 6.46957 21 7 21H17C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19 19.5304 19 19V12" stroke="#ffffff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M9 21V15C9 14.4696 9.21071 13.9609 9.58579 13.5858C9.96086 13.2107 10.4696 13 11 13H13C13.5304 13 14.0391 13.2107 14.4142 13.5858C14.7893 13.9609 15 14.4696 15 15V21" stroke="#ffffff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
</svg>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<path d="
|
|
3
|
-
<path d="
|
|
4
|
-
<path d="
|
|
5
|
-
<path d="
|
|
6
|
-
</svg>
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M21.333 8.00065H25.333C25.6866 8.00065 26.0258 8.14113 26.2758 8.39118C26.5259 8.64122 26.6663 8.98036 26.6663 9.33398V24.0006C26.6663 24.7079 26.3854 25.3862 25.8853 25.8863C25.3852 26.3864 24.7069 26.6673 23.9997 26.6673M23.9997 26.6673C23.2924 26.6673 22.6142 26.3864 22.1141 25.8863C21.614 25.3862 21.333 24.7079 21.333 24.0006V6.66732C21.333 6.3137 21.1925 5.97456 20.9425 5.72451C20.6924 5.47446 20.3533 5.33398 19.9997 5.33398H6.66634C6.31272 5.33398 5.97358 5.47446 5.72353 5.72451C5.47348 5.97456 5.33301 6.3137 5.33301 6.66732V22.6673C5.33301 23.7282 5.75444 24.7456 6.50458 25.4957C7.25473 26.2459 8.27214 26.6673 9.33301 26.6673H23.9997Z" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M10.667 10.666H16.0003" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M10.667 16H16.0003" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M10.667 21.334H16.0003" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<path d="
|
|
3
|
-
</svg>
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M15.991 24.9973L7.76166 29.324L9.33366 20.16L2.66699 13.6707L11.867 12.3373L15.9817 4L20.0963 12.3373L29.2963 13.6707L22.6297 20.16L24.2017 29.324L15.991 24.9973Z" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<path d="
|
|
3
|
-
<path d="
|
|
4
|
-
<path d="
|
|
5
|
-
<path d="
|
|
6
|
-
<path d="
|
|
7
|
-
<path d="
|
|
8
|
-
</svg>
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M10.667 28H21.3337" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M16 22.666V27.9993" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M9.33301 5.33398H22.6663" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M22.6663 5.33398V16.0007C22.6663 17.7688 21.964 19.4645 20.7137 20.7147C19.4635 21.9649 17.7678 22.6673 15.9997 22.6673C14.2316 22.6673 12.5359 21.9649 11.2856 20.7147C10.0354 19.4645 9.33301 17.7688 9.33301 16.0007V5.33398" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path d="M4 12.0007C4 12.7079 4.28095 13.3862 4.78105 13.8863C5.28115 14.3864 5.95942 14.6673 6.66667 14.6673C7.37391 14.6673 8.05219 14.3864 8.55229 13.8863C9.05238 13.3862 9.33333 12.7079 9.33333 12.0007C9.33333 11.2934 9.05238 10.6151 8.55229 10.115C8.05219 9.61494 7.37391 9.33398 6.66667 9.33398C5.95942 9.33398 5.28115 9.61494 4.78105 10.115C4.28095 10.6151 4 11.2934 4 12.0007Z" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
<path d="M22.667 12.0007C22.667 12.7079 22.9479 13.3862 23.448 13.8863C23.9481 14.3864 24.6264 14.6673 25.3337 14.6673C26.0409 14.6673 26.7192 14.3864 27.2193 13.8863C27.7194 13.3862 28.0003 12.7079 28.0003 12.0007C28.0003 11.2934 27.7194 10.6151 27.2193 10.115C26.7192 9.61494 26.0409 9.33398 25.3337 9.33398C24.6264 9.33398 23.9481 9.61494 23.448 10.115C22.9479 10.6151 22.667 11.2934 22.667 12.0007Z" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
</svg>
|
package/assets/scss/common.scss
CHANGED
|
@@ -400,7 +400,8 @@ class ValidatorsService {
|
|
|
400
400
|
}
|
|
401
401
|
}
|
|
402
402
|
static getErrorText(error) {
|
|
403
|
-
const presetErrors = ['minlength', 'maxlength', 'email', 'required', 'pattern', 'min', 'max'];
|
|
403
|
+
const presetErrors = ['minlength', 'maxlength', 'email', 'required', 'pattern', 'min', 'max', 'notEquivalent'];
|
|
404
|
+
console.log(error);
|
|
404
405
|
if (error) {
|
|
405
406
|
const key = Object.keys(error)?.[0];
|
|
406
407
|
if (key && presetErrors.includes(key)) {
|
|
@@ -426,16 +427,21 @@ class ValidatorsService {
|
|
|
426
427
|
case 'required': {
|
|
427
428
|
return `Обязательное поле`;
|
|
428
429
|
}
|
|
430
|
+
case 'notEquivalent': {
|
|
431
|
+
return `Пароли не совпадают`;
|
|
432
|
+
}
|
|
429
433
|
default: {
|
|
430
434
|
return 'Неверно введен текст';
|
|
431
435
|
}
|
|
432
436
|
}
|
|
433
437
|
}
|
|
434
438
|
else if (key && !presetErrors.includes(key)) {
|
|
435
|
-
return error[key]
|
|
439
|
+
return typeof error[key] === 'string' ? error[key] : 'Неверно заполнено поле' +
|
|
440
|
+
'' +
|
|
441
|
+
'';
|
|
436
442
|
}
|
|
437
443
|
}
|
|
438
|
-
return
|
|
444
|
+
return '';
|
|
439
445
|
}
|
|
440
446
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ValidatorsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
441
447
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ValidatorsService, providedIn: 'root' }); }
|
|
@@ -1438,6 +1444,7 @@ class FixedPositionDirective {
|
|
|
1438
1444
|
if (this.child2 && this.ddFixedPosition) {
|
|
1439
1445
|
this.updateChild2Position();
|
|
1440
1446
|
}
|
|
1447
|
+
document.addEventListener('scroll', this.onScroll.bind(this), true);
|
|
1441
1448
|
}
|
|
1442
1449
|
ngAfterViewChecked() {
|
|
1443
1450
|
if (!this.child2 && this.isShown !== false) {
|
|
@@ -1478,7 +1485,7 @@ class FixedPositionDirective {
|
|
|
1478
1485
|
return spaceBelow < child2Height;
|
|
1479
1486
|
}
|
|
1480
1487
|
ngOnDestroy() {
|
|
1481
|
-
|
|
1488
|
+
document.removeEventListener('scroll', this.onScroll.bind(this), true);
|
|
1482
1489
|
if (this.scrollListener) {
|
|
1483
1490
|
this.scrollListener();
|
|
1484
1491
|
}
|
|
@@ -2147,6 +2154,7 @@ class LibCommonInputTextComponent {
|
|
|
2147
2154
|
}
|
|
2148
2155
|
ngAfterViewChecked() {
|
|
2149
2156
|
this.changeDetection.markForCheck();
|
|
2157
|
+
console.log(this.control);
|
|
2150
2158
|
this.errorText = ValidatorsService.getErrorText(this.control?.errors);
|
|
2151
2159
|
}
|
|
2152
2160
|
get invalidState() {
|
|
@@ -3546,7 +3554,7 @@ class LibSearchInputComponent extends LibCommonInputTextComponent {
|
|
|
3546
3554
|
useExisting: forwardRef(() => LibSearchInputComponent),
|
|
3547
3555
|
multi: true,
|
|
3548
3556
|
},
|
|
3549
|
-
], 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 (paste)=\"clipboardEvent($event)\"\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;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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: "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: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3557
|
+
], 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 (paste)=\"clipboardEvent($event)\"\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.ng-touched,.lib-search-input input.invalid.ng-touched:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid.ng-touched: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;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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: "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: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3550
3558
|
}
|
|
3551
3559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibSearchInputComponent, decorators: [{
|
|
3552
3560
|
type: Component,
|
|
@@ -3556,7 +3564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
3556
3564
|
useExisting: forwardRef(() => LibSearchInputComponent),
|
|
3557
3565
|
multi: true,
|
|
3558
3566
|
},
|
|
3559
|
-
], 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 (paste)=\"clipboardEvent($event)\"\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;white-space:nowrap}\n"] }]
|
|
3567
|
+
], 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 (paste)=\"clipboardEvent($event)\"\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.ng-touched,.lib-search-input input.invalid.ng-touched:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid.ng-touched: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;white-space:nowrap}\n"] }]
|
|
3560
3568
|
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ControlContainer, decorators: [{
|
|
3561
3569
|
type: Optional
|
|
3562
3570
|
}, {
|
|
@@ -4220,7 +4228,7 @@ class LibSelectComponent extends LibCommonInputTextComponent {
|
|
|
4220
4228
|
useExisting: forwardRef(() => LibSelectComponent),
|
|
4221
4229
|
multi: true,
|
|
4222
4230
|
},
|
|
4223
|
-
], 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]=\"fixedPosition\">\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=\"g-text font-medium 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=\"g-text font-medium 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=\"g-text font-medium 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;white-space:nowrap}.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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$3.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$3.ɵɵ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: ["ddFixedPosition", "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"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: FilterByKeyPipe, name: "filterByKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4231
|
+
], 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]=\"fixedPosition\">\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=\"g-text font-medium 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=\"g-text font-medium 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 }}\" [colorRules]=\"[{selector: 'path', color: !allSelected ? 'gray': '#07B700', attribute: 'stroke'}]\"\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=\"g-text font-medium 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;white-space:nowrap}.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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$3.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$3.ɵɵ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: ["ddFixedPosition", "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"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: FilterByKeyPipe, name: "filterByKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4224
4232
|
}
|
|
4225
4233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibSelectComponent, decorators: [{
|
|
4226
4234
|
type: Component,
|
|
@@ -4237,7 +4245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
4237
4245
|
useExisting: forwardRef(() => LibSelectComponent),
|
|
4238
4246
|
multi: true,
|
|
4239
4247
|
},
|
|
4240
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" [ddFixedPosition]=\"fixedPosition\">\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=\"g-text font-medium 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=\"g-text font-medium 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=\"g-text font-medium 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;white-space:nowrap}.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"] }]
|
|
4248
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" [ddFixedPosition]=\"fixedPosition\">\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=\"g-text font-medium 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=\"g-text font-medium 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 }}\" [colorRules]=\"[{selector: 'path', color: !allSelected ? 'gray': '#07B700', attribute: 'stroke'}]\"\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=\"g-text font-medium 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;white-space:nowrap}.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"] }]
|
|
4241
4249
|
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ControlContainer, decorators: [{
|
|
4242
4250
|
type: Optional
|
|
4243
4251
|
}, {
|
|
@@ -4459,10 +4467,14 @@ class LibTabsFragmentComponent {
|
|
|
4459
4467
|
this.onTouched = () => { };
|
|
4460
4468
|
}
|
|
4461
4469
|
ngOnInit() {
|
|
4462
|
-
if (this.tabs) {
|
|
4470
|
+
if (this.tabs && !this.noFragment) {
|
|
4463
4471
|
this.tabsFragment = this.tabs.map(t => t.fragment).filter(f => !!f);
|
|
4464
4472
|
this.getFragment();
|
|
4465
4473
|
}
|
|
4474
|
+
if (this.tabs && this.noFragment) {
|
|
4475
|
+
this.tabsPath = this.tabs.map(t => this.rout && t.path ? `${this.rout}/${t.path}` : t.path).filter(f => !!f);
|
|
4476
|
+
this.getPath();
|
|
4477
|
+
}
|
|
4466
4478
|
}
|
|
4467
4479
|
writeValue(value) {
|
|
4468
4480
|
this._selectedTab = value;
|
|
@@ -4544,11 +4556,21 @@ class LibTabsFragmentComponent {
|
|
|
4544
4556
|
if (this.noFragment && typeof this.tabs?.[0].path === 'string') {
|
|
4545
4557
|
this.activeFragment = this.tabs?.length ? (this.tabs.find(f => '/' + (this.rout ? this.rout + '/' : '') + f.path === this.location.path())?.id || 0) : 0;
|
|
4546
4558
|
}
|
|
4559
|
+
this.setActiveTab.emit(this.activeFragment);
|
|
4560
|
+
}
|
|
4561
|
+
}
|
|
4562
|
+
getPath() {
|
|
4563
|
+
this.activeFragment = this.tabs?.[0]?.id || 0;
|
|
4564
|
+
const activePath = this.tabsPath?.find(f => `/${f}` === this.location.path())?.replace(`${this.rout}/`, '');
|
|
4565
|
+
if (activePath) {
|
|
4566
|
+
this.activeFragment = this.tabs?.length ? this.tabs.find(f => f.path === activePath)?.id : 0;
|
|
4567
|
+
if (this.needInitEvent) {
|
|
4568
|
+
this.setActiveTab.emit(this.activeFragment);
|
|
4569
|
+
}
|
|
4547
4570
|
}
|
|
4548
|
-
this.setActiveTab.emit(this.activeFragment);
|
|
4549
4571
|
}
|
|
4550
4572
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibTabsFragmentComponent, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }, { token: i1$2.Location }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4551
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: LibTabsFragmentComponent, isStandalone: true, selector: "dd-lib-tabs-fragment", inputs: { rout: "rout", tabs: "tabs", tabsFragment: "tabsFragment", needInitEvent: "needInitEvent", noFragment: "noFragment", callEvent: "callEvent" }, outputs: { setActiveTab: "setActiveTab" }, providers: [
|
|
4573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: LibTabsFragmentComponent, isStandalone: true, selector: "dd-lib-tabs-fragment", inputs: { rout: "rout", tabs: "tabs", tabsFragment: "tabsFragment", tabsPath: "tabsPath", needInitEvent: "needInitEvent", noFragment: "noFragment", callEvent: "callEvent" }, outputs: { setActiveTab: "setActiveTab" }, providers: [
|
|
4552
4574
|
{
|
|
4553
4575
|
provide: NG_VALUE_ACCESSOR,
|
|
4554
4576
|
useExisting: forwardRef(() => LibTabsFragmentComponent),
|
|
@@ -4571,6 +4593,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
4571
4593
|
type: Input
|
|
4572
4594
|
}], tabsFragment: [{
|
|
4573
4595
|
type: Input
|
|
4596
|
+
}], tabsPath: [{
|
|
4597
|
+
type: Input
|
|
4574
4598
|
}], needInitEvent: [{
|
|
4575
4599
|
type: Input
|
|
4576
4600
|
}], noFragment: [{
|
|
@@ -5185,13 +5209,13 @@ class LibInfoCardComponent {
|
|
|
5185
5209
|
}
|
|
5186
5210
|
}
|
|
5187
5211
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibInfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5188
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: LibInfoCardComponent, isStandalone: true, selector: "dd-lib-info-card", inputs: { config: "config" }, outputs: { callEvent: "callEvent" }, ngImport: i0, template: "<div class=\"info-card {{ config.type }}\">\n @if (config.type === 'success') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#07B700\"/>\n </svg>\n }\n @if (config.type === 'warning') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#FAAD14\"/>\n </svg>\n\n }\n @if (config.type === 'danger') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#FF3645\"/>\n </svg>\n\n }\n @if (config.type === 'info') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#007BFB\"/>\n </svg>\n\n }\n <div class=\"ml-12\">\n <div [innerHTML]=\"config.title\"></div>\n <div class=\"g-text-sm\" (click)=\"onClickDesc($event)\" [innerHTML]=\"config.description\"></div>\n </div>\n</div>\n", styles: [":host{display:block}.info-card{position:relative;display:flex;align-items:flex-start;padding:20px;background:var(--light-green-color);border-radius:12px;opacity:1;width:100%}.info-card.success{background-color:var(--light-green-color)}.info-card.info{background-color:var(--light-blue-color)}.info-card.warning{background-color:var(--yellow-card)}.info-card.danger{background-color:var(--red-light-color)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5212
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: LibInfoCardComponent, isStandalone: true, selector: "dd-lib-info-card", inputs: { config: "config" }, outputs: { callEvent: "callEvent" }, ngImport: i0, template: "<div class=\"info-card {{ config.type }}\">\n @if (config.type === 'success') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#07B700\"/>\n </svg>\n }\n @if (config.type === 'warning') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#FAAD14\"/>\n </svg>\n\n }\n @if (config.type === 'danger') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#FF3645\"/>\n </svg>\n\n }\n @if (config.type === 'info') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#007BFB\"/>\n </svg>\n\n }\n <div class=\"ml-12\">\n <div [innerHTML]=\"config.title\"></div>\n <div class=\"g-text-sm\" (click)=\"onClickDesc($event)\" [innerHTML]=\"config.description\"></div>\n </div>\n</div>\n", styles: [":host{display:block}.info-card{position:relative;display:flex;align-items:flex-start;padding:20px;background:var(--light-green-color);border-radius:12px;opacity:1;width:100%}.info-card.success{background-color:var(--light-green-color)}.info-card.info{background-color:var(--light-blue-color)}.info-card.warning{background-color:var(--yellow-card)}.info-card.danger{background-color:var(--red-light-color)}.info-card svg{min-width:16px}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5189
5213
|
}
|
|
5190
5214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibInfoCardComponent, decorators: [{
|
|
5191
5215
|
type: Component,
|
|
5192
5216
|
args: [{ selector: 'dd-lib-info-card', standalone: true, imports: [
|
|
5193
5217
|
OverlayModule,
|
|
5194
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"info-card {{ config.type }}\">\n @if (config.type === 'success') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#07B700\"/>\n </svg>\n }\n @if (config.type === 'warning') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#FAAD14\"/>\n </svg>\n\n }\n @if (config.type === 'danger') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#FF3645\"/>\n </svg>\n\n }\n @if (config.type === 'info') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#007BFB\"/>\n </svg>\n\n }\n <div class=\"ml-12\">\n <div [innerHTML]=\"config.title\"></div>\n <div class=\"g-text-sm\" (click)=\"onClickDesc($event)\" [innerHTML]=\"config.description\"></div>\n </div>\n</div>\n", styles: [":host{display:block}.info-card{position:relative;display:flex;align-items:flex-start;padding:20px;background:var(--light-green-color);border-radius:12px;opacity:1;width:100%}.info-card.success{background-color:var(--light-green-color)}.info-card.info{background-color:var(--light-blue-color)}.info-card.warning{background-color:var(--yellow-card)}.info-card.danger{background-color:var(--red-light-color)}\n"] }]
|
|
5218
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"info-card {{ config.type }}\">\n @if (config.type === 'success') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#07B700\"/>\n </svg>\n }\n @if (config.type === 'warning') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#FAAD14\"/>\n </svg>\n\n }\n @if (config.type === 'danger') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#FF3645\"/>\n </svg>\n\n }\n @if (config.type === 'info') {\n <svg fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\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\"\n fill=\"#007BFB\"/>\n </svg>\n\n }\n <div class=\"ml-12\">\n <div [innerHTML]=\"config.title\"></div>\n <div class=\"g-text-sm\" (click)=\"onClickDesc($event)\" [innerHTML]=\"config.description\"></div>\n </div>\n</div>\n", styles: [":host{display:block}.info-card{position:relative;display:flex;align-items:flex-start;padding:20px;background:var(--light-green-color);border-radius:12px;opacity:1;width:100%}.info-card.success{background-color:var(--light-green-color)}.info-card.info{background-color:var(--light-blue-color)}.info-card.warning{background-color:var(--yellow-card)}.info-card.danger{background-color:var(--red-light-color)}.info-card svg{min-width:16px}\n"] }]
|
|
5195
5219
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
5196
5220
|
type: Input
|
|
5197
5221
|
}], callEvent: [{
|