@morozeckiy/dd-lib 0.7.98 → 0.7.109
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/fesm2022/morozeckiy-dd-lib.mjs +419 -248
- package/fesm2022/morozeckiy-dd-lib.mjs.map +1 -1
- package/lib/core/directives/view-port-height.directive.d.ts +15 -0
- package/lib/core/index.d.ts +1 -0
- package/lib/core/services/validators.service.d.ts +2 -2
- package/lib/lib-input/lib-input.component.d.ts +3 -1
- package/lib/lib-select/lib-select.component.d.ts +46 -27
- package/morozeckiy-dd-lib-0.7.109.tgz +0 -0
- package/package.json +1 -1
- package/morozeckiy-dd-lib-0.7.98.tgz +0 -0
|
@@ -11,7 +11,7 @@ import * as i1 from '@angular/router';
|
|
|
11
11
|
import { RouterLink } from '@angular/router';
|
|
12
12
|
import * as i1$2 from '@angular/platform-browser';
|
|
13
13
|
import * as i1$3 from '@angular/common';
|
|
14
|
-
import { DecimalPipe, CommonModule, AsyncPipe, DOCUMENT, NgTemplateOutlet, NgComponentOutlet, NgStyle,
|
|
14
|
+
import { DecimalPipe, CommonModule, AsyncPipe, DOCUMENT, NgTemplateOutlet, NgComponentOutlet, NgStyle, NgClass } from '@angular/common';
|
|
15
15
|
import { ComponentPortal, PortalInjector, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
|
|
16
16
|
import * as i1$4 from '@angular/cdk/overlay';
|
|
17
17
|
import { OverlayModule, GlobalPositionStrategy } from '@angular/cdk/overlay';
|
|
@@ -403,7 +403,6 @@ class ValidatorsService {
|
|
|
403
403
|
static getErrorText(error) {
|
|
404
404
|
const presetErrors = ['minlength', 'maxlength', 'email', 'required', 'pattern', 'min', 'max'];
|
|
405
405
|
if (error) {
|
|
406
|
-
console.log(error);
|
|
407
406
|
const key = Object.keys(error)?.[0];
|
|
408
407
|
if (key && presetErrors.includes(key)) {
|
|
409
408
|
switch (key) {
|
|
@@ -1496,6 +1495,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
1496
1495
|
args: ['window:scroll']
|
|
1497
1496
|
}] } });
|
|
1498
1497
|
|
|
1498
|
+
class VhHeightDirective {
|
|
1499
|
+
constructor(el) {
|
|
1500
|
+
this.el = el;
|
|
1501
|
+
this.vhValue = 100;
|
|
1502
|
+
this.resizeObserver = null;
|
|
1503
|
+
}
|
|
1504
|
+
ngOnInit() {
|
|
1505
|
+
this.setHeight();
|
|
1506
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
1507
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
1508
|
+
this.setHeight();
|
|
1509
|
+
});
|
|
1510
|
+
this.resizeObserver.observe(document.documentElement);
|
|
1511
|
+
}
|
|
1512
|
+
}
|
|
1513
|
+
onResize(event) {
|
|
1514
|
+
this.setHeight();
|
|
1515
|
+
}
|
|
1516
|
+
onOrientationChange(event) {
|
|
1517
|
+
setTimeout(() => {
|
|
1518
|
+
this.setHeight();
|
|
1519
|
+
}, 100);
|
|
1520
|
+
}
|
|
1521
|
+
setHeight() {
|
|
1522
|
+
const vh = window.innerHeight * 0.01;
|
|
1523
|
+
const heightInPixels = this.vhValue * vh;
|
|
1524
|
+
this.el.nativeElement.style.height = `${heightInPixels}px`;
|
|
1525
|
+
}
|
|
1526
|
+
ngOnDestroy() {
|
|
1527
|
+
if (this.resizeObserver) {
|
|
1528
|
+
this.resizeObserver.disconnect();
|
|
1529
|
+
}
|
|
1530
|
+
}
|
|
1531
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VhHeightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1532
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: VhHeightDirective, isStandalone: true, selector: "[ddVhHeight]", inputs: { vhValue: ["ddVhHeight", "vhValue"] }, host: { listeners: { "window:resize": "onResize($event)", "window:orientationchange": "onOrientationChange($event)" } }, ngImport: i0 }); }
|
|
1533
|
+
}
|
|
1534
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: VhHeightDirective, decorators: [{
|
|
1535
|
+
type: Directive,
|
|
1536
|
+
args: [{
|
|
1537
|
+
selector: '[ddVhHeight]'
|
|
1538
|
+
}]
|
|
1539
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { vhValue: [{
|
|
1540
|
+
type: Input,
|
|
1541
|
+
args: ['ddVhHeight']
|
|
1542
|
+
}], onResize: [{
|
|
1543
|
+
type: HostListener,
|
|
1544
|
+
args: ['window:resize', ['$event']]
|
|
1545
|
+
}], onOrientationChange: [{
|
|
1546
|
+
type: HostListener,
|
|
1547
|
+
args: ['window:orientationchange', ['$event']]
|
|
1548
|
+
}] } });
|
|
1549
|
+
|
|
1499
1550
|
class ToastTypeData {
|
|
1500
1551
|
}
|
|
1501
1552
|
class ToastData extends ToastTypeData {
|
|
@@ -2983,7 +3034,7 @@ class LibCheckboxComponent {
|
|
|
2983
3034
|
useExisting: forwardRef(() => LibCheckboxComponent),
|
|
2984
3035
|
multi: true,
|
|
2985
3036
|
},
|
|
2986
|
-
], ngImport: i0, template: "<input\n (change)=\"onChecked($event.target)\"\n [checked]=\"checked\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [disabled]=\"disabled\"\n [id]=\"checkboxId\"\n [required]=\"required\"\n [tabindex]=\"disabled ? -1 : null\"\n class=\"check-input\"\n type=\"checkbox\" />\n<label [for]=\"checkboxId\" class=\"{{ customClass }} check\">\n <span [class.focused]=\"focused\" class=\"checkbox\"></span>\n @if (hasContent) {\n <span class=\"ml-12\">\n <ng-content></ng-content>\n </span>\n }\n</label>\n", styles: [":host{outline:none;position:relative}.check{display:flex;position:relative;font-size:
|
|
3037
|
+
], ngImport: i0, template: "<input\n (change)=\"onChecked($event.target)\"\n [checked]=\"checked\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [disabled]=\"disabled\"\n [id]=\"checkboxId\"\n [required]=\"required\"\n [tabindex]=\"disabled ? -1 : null\"\n class=\"check-input\"\n type=\"checkbox\" />\n<label [for]=\"checkboxId\" class=\"{{ customClass }} check\">\n <span [class.focused]=\"focused\" class=\"checkbox\"></span>\n @if (hasContent) {\n <span class=\"ml-12\">\n <ng-content></ng-content>\n </span>\n }\n</label>\n", styles: [":host{outline:none;position:relative}.check{display:flex;position:relative;font-size:14px;width:fit-content;cursor:pointer;align-items:center}.check-input{appearance:none;position:absolute;opacity:0;margin:0;width:20px;height:20px}.check-input:hover+label .checkbox{border-color:var(--primary-green-color)}.check-input:hover:checked+label .checkbox{background:var(--cb-hover-bgc);border:none}.check-input:disabled+label,.check-input:disabled+label .checkbox,.check-input:hover:disabled+label,.check-input:hover:disabled+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border)}.check-input:disabled:checked+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border);background-color:var(--cb-init-border);font-weight:700}.check-input:checked+label{font-weight:700}.check-input:checked+label .checkbox{background:var(--cb-checked-bgc);border:none;position:relative}.check-input:checked+label .checkbox:before{content:\"\";background:url('data:image/svg+xml,<svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <path d=\"M1.33301 5.00008L4.66634 8.33341L11.333 1.66675\" stroke=\"white\" stroke-linecap=\"round\"%0D%0A stroke-linejoin=\"round\"%0D%0A stroke-width=\"1.7\"/>%0D%0A</svg>%0D%0A') no-repeat;height:10px;position:absolute;width:13px;top:5px;left:4px}.checkbox{min-width:20px;min-height:20px;padding:3px;background-color:var(--white-color);border-radius:5px;border:1px solid var(--cb-init-border);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2987
3038
|
}
|
|
2988
3039
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibCheckboxComponent, decorators: [{
|
|
2989
3040
|
type: Component,
|
|
@@ -2993,7 +3044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
2993
3044
|
useExisting: forwardRef(() => LibCheckboxComponent),
|
|
2994
3045
|
multi: true,
|
|
2995
3046
|
},
|
|
2996
|
-
], template: "<input\n (change)=\"onChecked($event.target)\"\n [checked]=\"checked\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [disabled]=\"disabled\"\n [id]=\"checkboxId\"\n [required]=\"required\"\n [tabindex]=\"disabled ? -1 : null\"\n class=\"check-input\"\n type=\"checkbox\" />\n<label [for]=\"checkboxId\" class=\"{{ customClass }} check\">\n <span [class.focused]=\"focused\" class=\"checkbox\"></span>\n @if (hasContent) {\n <span class=\"ml-12\">\n <ng-content></ng-content>\n </span>\n }\n</label>\n", styles: [":host{outline:none;position:relative}.check{display:flex;position:relative;font-size:
|
|
3047
|
+
], template: "<input\n (change)=\"onChecked($event.target)\"\n [checked]=\"checked\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [disabled]=\"disabled\"\n [id]=\"checkboxId\"\n [required]=\"required\"\n [tabindex]=\"disabled ? -1 : null\"\n class=\"check-input\"\n type=\"checkbox\" />\n<label [for]=\"checkboxId\" class=\"{{ customClass }} check\">\n <span [class.focused]=\"focused\" class=\"checkbox\"></span>\n @if (hasContent) {\n <span class=\"ml-12\">\n <ng-content></ng-content>\n </span>\n }\n</label>\n", styles: [":host{outline:none;position:relative}.check{display:flex;position:relative;font-size:14px;width:fit-content;cursor:pointer;align-items:center}.check-input{appearance:none;position:absolute;opacity:0;margin:0;width:20px;height:20px}.check-input:hover+label .checkbox{border-color:var(--primary-green-color)}.check-input:hover:checked+label .checkbox{background:var(--cb-hover-bgc);border:none}.check-input:disabled+label,.check-input:disabled+label .checkbox,.check-input:hover:disabled+label,.check-input:hover:disabled+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border)}.check-input:disabled:checked+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border);background-color:var(--cb-init-border);font-weight:700}.check-input:checked+label{font-weight:700}.check-input:checked+label .checkbox{background:var(--cb-checked-bgc);border:none;position:relative}.check-input:checked+label .checkbox:before{content:\"\";background:url('data:image/svg+xml,<svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <path d=\"M1.33301 5.00008L4.66634 8.33341L11.333 1.66675\" stroke=\"white\" stroke-linecap=\"round\"%0D%0A stroke-linejoin=\"round\"%0D%0A stroke-width=\"1.7\"/>%0D%0A</svg>%0D%0A') no-repeat;height:10px;position:absolute;width:13px;top:5px;left:4px}.checkbox{min-width:20px;min-height:20px;padding:3px;background-color:var(--white-color);border-radius:5px;border:1px solid var(--cb-init-border);cursor:pointer}\n"] }]
|
|
2997
3048
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { checkboxId: [{
|
|
2998
3049
|
type: Input
|
|
2999
3050
|
}], required: [{
|
|
@@ -3154,13 +3205,13 @@ class LibInputComponent extends LibCommonInputTextComponent {
|
|
|
3154
3205
|
this.changeDetection.detectChanges();
|
|
3155
3206
|
}
|
|
3156
3207
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibInputComponent, deps: [{ token: i0.DestroyRef }, { token: i0.ChangeDetectorRef }, { token: i1$5.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3157
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibInputComponent, isStandalone: true, selector: "dd-lib-input", inputs: { showMaskTyped: "showMaskTyped", dropSpecialCharacters: "dropSpecialCharacters", prefix: "prefix", suffix: "suffix", shownMaskExpression: "shownMaskExpression", mask: "mask", validation: "validation", customPatterns: "customPatterns", showPass: "showPass" }, providers: [
|
|
3208
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibInputComponent, isStandalone: true, selector: "dd-lib-input", inputs: { showMaskTyped: "showMaskTyped", dropSpecialCharacters: "dropSpecialCharacters", height: "height", width: "width", prefix: "prefix", suffix: "suffix", shownMaskExpression: "shownMaskExpression", mask: "mask", validation: "validation", customPatterns: "customPatterns", showPass: "showPass" }, providers: [
|
|
3158
3209
|
{
|
|
3159
3210
|
provide: NG_VALUE_ACCESSOR,
|
|
3160
3211
|
useExisting: forwardRef(() => LibInputComponent),
|
|
3161
3212
|
multi: true,
|
|
3162
3213
|
},
|
|
3163
|
-
], viewQueries: [{ propertyName: "contentInput", first: true, predicate: ["input"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-input\">\n @if (label) {\n <label [for]=\"id\" class=\"lib-input__title g-text-sm\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n <div class=\"pos-relative\">\n <input\n #input\n (blur)=\"handleBlur()\"\n (change)=\"handleChange()\"\n (focus)=\"handleFocus()\"\n (input)=\"handleInput($event)\"\n (keyup.enter)=\"forceChange()\"\n [showMaskTyped]=\"showMaskTyped\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [shownMaskExpression]=\"shownMaskExpression\"\n [mask]=\"mask\"\n [validation]=\"validation\"\n [prefix]=\"prefix\"\n [suffix]=\"suffix\"\n [(ngModel)]=\"value\"\n [attr.autofocus]=\"autofocus\"\n [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n [attr.id]=\"id ? id : null\"\n [attr.max]=\"max\"\n [attr.min]=\"min\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"showPass ? 'text' : (type || 'text')\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n class=\"text-input\" />\n @if (type === 'password') {\n <dd-lib-svg-viewer (click)=\"showPass = !showPass\" [pack]=\"'lib-svg'\" class=\"password-eye\" icon=\"{{ showPass ? 'eye' : 'eye-off' }}\"></dd-lib-svg-viewer>\n }\n </div>\n\n @if (errorTexts.length && showError) {\n @for (error of errorTexts; track error) {\n <div class=\"lib-input__error\">{{ error }}</div>\n }\n }\n @if (errorText && showSelfError && showError) {\n <div class=\"lib-input__error\">{{ errorText }}</div>\n }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-input .password-eye{position:absolute;right:16px;top:12px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }] }); }
|
|
3214
|
+
], viewQueries: [{ propertyName: "contentInput", first: true, predicate: ["input"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-input\">\n @if (label) {\n <label [for]=\"id\" class=\"lib-input__title g-text-sm\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n <div class=\"pos-relative\">\n <input\n #input\n (blur)=\"handleBlur()\"\n (change)=\"handleChange()\"\n (focus)=\"handleFocus()\"\n (input)=\"handleInput($event)\"\n (keyup.enter)=\"forceChange()\"\n [showMaskTyped]=\"showMaskTyped\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [shownMaskExpression]=\"shownMaskExpression\"\n [mask]=\"mask\"\n [validation]=\"validation\"\n [prefix]=\"prefix\"\n [suffix]=\"suffix\"\n [(ngModel)]=\"value\"\n [attr.autofocus]=\"autofocus\"\n [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n [attr.id]=\"id ? id : null\"\n [attr.max]=\"max\"\n [attr.min]=\"min\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"showPass ? 'text' : (type || 'text')\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [style.height]=\"height\"\n [style.width]=\"width\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n class=\"text-input\" />\n @if (type === 'password') {\n <dd-lib-svg-viewer (click)=\"showPass = !showPass\" [pack]=\"'lib-svg'\" class=\"password-eye\" icon=\"{{ showPass ? 'eye' : 'eye-off' }}\"></dd-lib-svg-viewer>\n }\n </div>\n\n @if (errorTexts.length && showError) {\n @for (error of errorTexts; track error) {\n <div class=\"lib-input__error\">{{ error }}</div>\n }\n }\n @if (errorText && showSelfError && showError) {\n <div class=\"lib-input__error\">{{ errorText }}</div>\n }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-input .password-eye{position:absolute;right:16px;top:12px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }] }); }
|
|
3164
3215
|
}
|
|
3165
3216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibInputComponent, decorators: [{
|
|
3166
3217
|
type: Component,
|
|
@@ -3170,7 +3221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
3170
3221
|
useExisting: forwardRef(() => LibInputComponent),
|
|
3171
3222
|
multi: true,
|
|
3172
3223
|
},
|
|
3173
|
-
], imports: [FormsModule, NgxMaskDirective, LibSvgIconComponent, LibSvgViewerComponent], template: "<div class=\"lib-input\">\n @if (label) {\n <label [for]=\"id\" class=\"lib-input__title g-text-sm\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n <div class=\"pos-relative\">\n <input\n #input\n (blur)=\"handleBlur()\"\n (change)=\"handleChange()\"\n (focus)=\"handleFocus()\"\n (input)=\"handleInput($event)\"\n (keyup.enter)=\"forceChange()\"\n [showMaskTyped]=\"showMaskTyped\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [shownMaskExpression]=\"shownMaskExpression\"\n [mask]=\"mask\"\n [validation]=\"validation\"\n [prefix]=\"prefix\"\n [suffix]=\"suffix\"\n [(ngModel)]=\"value\"\n [attr.autofocus]=\"autofocus\"\n [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n [attr.id]=\"id ? id : null\"\n [attr.max]=\"max\"\n [attr.min]=\"min\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"showPass ? 'text' : (type || 'text')\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n class=\"text-input\" />\n @if (type === 'password') {\n <dd-lib-svg-viewer (click)=\"showPass = !showPass\" [pack]=\"'lib-svg'\" class=\"password-eye\" icon=\"{{ showPass ? 'eye' : 'eye-off' }}\"></dd-lib-svg-viewer>\n }\n </div>\n\n @if (errorTexts.length && showError) {\n @for (error of errorTexts; track error) {\n <div class=\"lib-input__error\">{{ error }}</div>\n }\n }\n @if (errorText && showSelfError && showError) {\n <div class=\"lib-input__error\">{{ errorText }}</div>\n }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-input .password-eye{position:absolute;right:16px;top:12px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"] }]
|
|
3224
|
+
], imports: [FormsModule, NgxMaskDirective, LibSvgIconComponent, LibSvgViewerComponent], template: "<div class=\"lib-input\">\n @if (label) {\n <label [for]=\"id\" class=\"lib-input__title g-text-sm\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n <div class=\"pos-relative\">\n <input\n #input\n (blur)=\"handleBlur()\"\n (change)=\"handleChange()\"\n (focus)=\"handleFocus()\"\n (input)=\"handleInput($event)\"\n (keyup.enter)=\"forceChange()\"\n [showMaskTyped]=\"showMaskTyped\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [shownMaskExpression]=\"shownMaskExpression\"\n [mask]=\"mask\"\n [validation]=\"validation\"\n [prefix]=\"prefix\"\n [suffix]=\"suffix\"\n [(ngModel)]=\"value\"\n [attr.autofocus]=\"autofocus\"\n [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n [attr.id]=\"id ? id : null\"\n [attr.max]=\"max\"\n [attr.min]=\"min\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"showPass ? 'text' : (type || 'text')\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [style.height]=\"height\"\n [style.width]=\"width\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n class=\"text-input\" />\n @if (type === 'password') {\n <dd-lib-svg-viewer (click)=\"showPass = !showPass\" [pack]=\"'lib-svg'\" class=\"password-eye\" icon=\"{{ showPass ? 'eye' : 'eye-off' }}\"></dd-lib-svg-viewer>\n }\n </div>\n\n @if (errorTexts.length && showError) {\n @for (error of errorTexts; track error) {\n <div class=\"lib-input__error\">{{ error }}</div>\n }\n }\n @if (errorText && showSelfError && showError) {\n <div class=\"lib-input__error\">{{ errorText }}</div>\n }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-input .password-eye{position:absolute;right:16px;top:12px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"] }]
|
|
3174
3225
|
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ChangeDetectorRef }, { type: i1$5.ControlContainer, decorators: [{
|
|
3175
3226
|
type: Optional
|
|
3176
3227
|
}, {
|
|
@@ -3184,6 +3235,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
3184
3235
|
type: Input
|
|
3185
3236
|
}], dropSpecialCharacters: [{
|
|
3186
3237
|
type: Input
|
|
3238
|
+
}], height: [{
|
|
3239
|
+
type: Input
|
|
3240
|
+
}], width: [{
|
|
3241
|
+
type: Input
|
|
3187
3242
|
}], prefix: [{
|
|
3188
3243
|
type: Input
|
|
3189
3244
|
}], suffix: [{
|
|
@@ -3246,7 +3301,7 @@ class LibRadioComponent {
|
|
|
3246
3301
|
useExisting: forwardRef(() => LibRadioComponent),
|
|
3247
3302
|
multi: true,
|
|
3248
3303
|
},
|
|
3249
|
-
], ngImport: i0, template: "<label [for]=\"radioId\" [ngClass]=\"{ disabled: disabled }\" class=\"radio\">\r\n <input\r\n (change)=\"onSelected($event.target)\"\r\n [attr.aria-checked]=\"checked\"\r\n [attr.tabIndex]=\"disabled ? -1 : 0\"\r\n [attr.value]=\"value\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [id]=\"radioId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ disabled: disabled }\"\r\n [required]=\"required\"\r\n class=\"radio__input\"\r\n role=\"radio\"\r\n type=\"radio\" />\r\n <div [class.focused]=\"focused\" class=\"radio__mark\"></div>\r\n <div class=\"radio__text
|
|
3304
|
+
], ngImport: i0, template: "<label [for]=\"radioId\" [ngClass]=\"{ disabled: disabled }\" class=\"radio\">\r\n <input\r\n (change)=\"onSelected($event.target)\"\r\n [attr.aria-checked]=\"checked\"\r\n [attr.tabIndex]=\"disabled ? -1 : 0\"\r\n [attr.value]=\"value\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [id]=\"radioId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ disabled: disabled }\"\r\n [required]=\"required\"\r\n class=\"radio__input\"\r\n role=\"radio\"\r\n type=\"radio\" />\r\n <div [class.focused]=\"focused\" class=\"radio__mark\"></div>\r\n <div class=\"radio__text\" [ngClass]=\"disabled ? 'gray' : 'black'\">\r\n <span><ng-content></ng-content></span>\r\n </div>\r\n</label>\r\n", styles: [":host{outline:none}.radio{position:relative;display:flex;align-items:center;cursor:pointer}.radio__text{font-weight:400;font-size:14px;line-height:24px}.radio:hover .radio__mark{border-color:var(--light-black-color)}.radio.disabled{cursor:default}.radio.disabled .radio__mark{border-color:var(--gray-color-200)}.radio__input{opacity:0;position:absolute;z-index:-1;min-width:20px;min-height:20px;margin:0}.radio__input:focus+.radio__mark{border-color:var(--light-black-color)}.radio__input:checked+.radio__mark{border:2px solid var(--primary-green-color)}.radio__input:checked+.radio__mark:before{background:var(--primary-green-color)}.radio__input:checked~.radio__text{font-weight:500}.radio__input:checked.disabled+.radio__mark{border-color:var(--gray-color-200)}.radio__input:checked.disabled+.radio__mark:before{background:var(--gray-color-200)}.radio__mark{position:relative;width:20px;height:20px;min-width:20px;min-height:20px;border:1px solid var(--primary-gray-color);border-radius:50%;margin-right:12px;transition:border-color .25s linear}.radio__mark:before{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:transparent;transition:background-color .25s linear;content:\"\"}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3250
3305
|
}
|
|
3251
3306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibRadioComponent, decorators: [{
|
|
3252
3307
|
type: Component,
|
|
@@ -3256,7 +3311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
3256
3311
|
useExisting: forwardRef(() => LibRadioComponent),
|
|
3257
3312
|
multi: true,
|
|
3258
3313
|
},
|
|
3259
|
-
], template: "<label [for]=\"radioId\" [ngClass]=\"{ disabled: disabled }\" class=\"radio\">\r\n <input\r\n (change)=\"onSelected($event.target)\"\r\n [attr.aria-checked]=\"checked\"\r\n [attr.tabIndex]=\"disabled ? -1 : 0\"\r\n [attr.value]=\"value\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [id]=\"radioId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ disabled: disabled }\"\r\n [required]=\"required\"\r\n class=\"radio__input\"\r\n role=\"radio\"\r\n type=\"radio\" />\r\n <div [class.focused]=\"focused\" class=\"radio__mark\"></div>\r\n <div class=\"radio__text
|
|
3314
|
+
], template: "<label [for]=\"radioId\" [ngClass]=\"{ disabled: disabled }\" class=\"radio\">\r\n <input\r\n (change)=\"onSelected($event.target)\"\r\n [attr.aria-checked]=\"checked\"\r\n [attr.tabIndex]=\"disabled ? -1 : 0\"\r\n [attr.value]=\"value\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [id]=\"radioId\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ disabled: disabled }\"\r\n [required]=\"required\"\r\n class=\"radio__input\"\r\n role=\"radio\"\r\n type=\"radio\" />\r\n <div [class.focused]=\"focused\" class=\"radio__mark\"></div>\r\n <div class=\"radio__text\" [ngClass]=\"disabled ? 'gray' : 'black'\">\r\n <span><ng-content></ng-content></span>\r\n </div>\r\n</label>\r\n", styles: [":host{outline:none}.radio{position:relative;display:flex;align-items:center;cursor:pointer}.radio__text{font-weight:400;font-size:14px;line-height:24px}.radio:hover .radio__mark{border-color:var(--light-black-color)}.radio.disabled{cursor:default}.radio.disabled .radio__mark{border-color:var(--gray-color-200)}.radio__input{opacity:0;position:absolute;z-index:-1;min-width:20px;min-height:20px;margin:0}.radio__input:focus+.radio__mark{border-color:var(--light-black-color)}.radio__input:checked+.radio__mark{border:2px solid var(--primary-green-color)}.radio__input:checked+.radio__mark:before{background:var(--primary-green-color)}.radio__input:checked~.radio__text{font-weight:500}.radio__input:checked.disabled+.radio__mark{border-color:var(--gray-color-200)}.radio__input:checked.disabled+.radio__mark:before{background:var(--gray-color-200)}.radio__mark{position:relative;width:20px;height:20px;min-width:20px;min-height:20px;border:1px solid var(--primary-gray-color);border-radius:50%;margin-right:12px;transition:border-color .25s linear}.radio__mark:before{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:transparent;transition:background-color .25s linear;content:\"\"}\n"] }]
|
|
3260
3315
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { radioId: [{
|
|
3261
3316
|
type: Input
|
|
3262
3317
|
}], disabled: [{
|
|
@@ -3578,22 +3633,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
3578
3633
|
|
|
3579
3634
|
class LibSelectComponent extends LibCommonInputTextComponent {
|
|
3580
3635
|
static { this.idCounter = 1; }
|
|
3581
|
-
set data(d) {
|
|
3582
|
-
this._data.set(d);
|
|
3583
|
-
this.initialized = !!d;
|
|
3584
|
-
this.stringArray.set(typeof d?.[0] === 'string');
|
|
3585
|
-
if (!d?.length) {
|
|
3586
|
-
// this.isShownList = false;
|
|
3587
|
-
this.changeDetection.detectChanges();
|
|
3588
|
-
this.control?.updateValueAndValidity();
|
|
3589
|
-
}
|
|
3590
|
-
this.itemSize = d?.length === 1 ? 56 : this.itemSize;
|
|
3591
|
-
}
|
|
3592
|
-
;
|
|
3593
3636
|
constructor(destroyed$, changeDetection, controlContainer) {
|
|
3594
3637
|
super(changeDetection);
|
|
3595
3638
|
this.destroyed$ = destroyed$;
|
|
3596
3639
|
this.controlContainer = controlContainer;
|
|
3640
|
+
this.virtualScroll = false;
|
|
3641
|
+
this.multi = false;
|
|
3597
3642
|
this.tooltipPosition = 'top';
|
|
3598
3643
|
this.highlight = true;
|
|
3599
3644
|
this.searchOn = true;
|
|
@@ -3608,33 +3653,53 @@ class LibSelectComponent extends LibCommonInputTextComponent {
|
|
|
3608
3653
|
this.keyGroupTitle = '';
|
|
3609
3654
|
this.keyGroupChildren = 'children';
|
|
3610
3655
|
this.selectAllInGroup = false;
|
|
3656
|
+
this.sortAlphabetically = true;
|
|
3611
3657
|
this.selectedItem = new EventEmitter();
|
|
3612
3658
|
this.selectedItems = new EventEmitter();
|
|
3613
3659
|
this.deleteMultiItem = new EventEmitter();
|
|
3660
|
+
this.allSelected = false;
|
|
3614
3661
|
this.initialized = false;
|
|
3662
|
+
this.inputValue = '';
|
|
3663
|
+
this.multiCountValue = '';
|
|
3664
|
+
this.showMultiCountValue = false;
|
|
3665
|
+
this.searchValue = '';
|
|
3666
|
+
this.isShownList = false;
|
|
3667
|
+
this.initWriteValue = true;
|
|
3615
3668
|
this._data = signal(undefined);
|
|
3616
|
-
// TODO: надо сделать типизацию и конструктор принмайющий объект форматирующий во внутренний и отдающий обратно что нужно
|
|
3617
3669
|
this.checkedItems = signal([]);
|
|
3618
|
-
this.initWriteValue = true;
|
|
3619
3670
|
this.stringArray = signal(false);
|
|
3671
|
+
this.propagateChange = () => { };
|
|
3620
3672
|
effect(() => {
|
|
3621
|
-
|
|
3673
|
+
const checkedItems = this.checkedItems();
|
|
3674
|
+
const data = this._data();
|
|
3675
|
+
this.allSelected = !!data?.length && checkedItems.length === data.length;
|
|
3622
3676
|
});
|
|
3623
3677
|
}
|
|
3678
|
+
set data(d) {
|
|
3679
|
+
let processedData = d ?? undefined;
|
|
3680
|
+
if (processedData && this.sortAlphabetically) {
|
|
3681
|
+
processedData = this.sortDataAlphabetically(processedData);
|
|
3682
|
+
}
|
|
3683
|
+
this._data.set(processedData);
|
|
3684
|
+
this.initialized = !!processedData;
|
|
3685
|
+
this.stringArray.set(typeof processedData?.[0] === 'string');
|
|
3686
|
+
if (!processedData?.length) {
|
|
3687
|
+
this.changeDetection.detectChanges();
|
|
3688
|
+
this.control?.updateValueAndValidity();
|
|
3689
|
+
}
|
|
3690
|
+
this.itemSize = processedData?.length === 1 ? 56 : this.itemSize;
|
|
3691
|
+
}
|
|
3624
3692
|
ngOnInit() {
|
|
3625
3693
|
this.showMultiCountValue = this.multi;
|
|
3626
3694
|
if (!this.selectId) {
|
|
3627
3695
|
this.selectId = 'dd-select-' + LibSelectComponent.idCounter++;
|
|
3628
3696
|
}
|
|
3629
|
-
|
|
3630
|
-
this.control = this.controlContainer.control.get(this.formControlName);
|
|
3631
|
-
}
|
|
3632
|
-
if (this.control) {
|
|
3633
|
-
this.changeValueSub(this.control);
|
|
3634
|
-
}
|
|
3697
|
+
this.setupFormControl();
|
|
3635
3698
|
}
|
|
3636
3699
|
ngOnChanges(changes) {
|
|
3637
|
-
|
|
3700
|
+
const firstChange = changes['data']?.firstChange && this.writtenValue;
|
|
3701
|
+
const hasCurrentValue = !changes['data']?.previousValue && changes['data']?.currentValue;
|
|
3702
|
+
if (firstChange || hasCurrentValue) {
|
|
3638
3703
|
this.writeValue(this.writtenValue);
|
|
3639
3704
|
}
|
|
3640
3705
|
}
|
|
@@ -3657,178 +3722,86 @@ class LibSelectComponent extends LibCommonInputTextComponent {
|
|
|
3657
3722
|
const children = group[this.keyGroupChildren];
|
|
3658
3723
|
const allSelected = this.isGroupSelected(group);
|
|
3659
3724
|
if (allSelected) {
|
|
3660
|
-
this.
|
|
3661
|
-
JSON.stringify(child) === JSON.stringify(item))));
|
|
3725
|
+
this.deselectGroupItems(group);
|
|
3662
3726
|
}
|
|
3663
3727
|
else {
|
|
3664
|
-
|
|
3665
|
-
JSON.stringify(child) === JSON.stringify(item)));
|
|
3666
|
-
this.checkedItems.set([...this.checkedItems(), ...newItems]);
|
|
3728
|
+
this.selectGroupItems(group);
|
|
3667
3729
|
}
|
|
3668
3730
|
this.updateMultiSelection();
|
|
3669
3731
|
}
|
|
3670
|
-
updateMultiSelection() {
|
|
3671
|
-
const values = this.keyValue ?
|
|
3672
|
-
this.checkedItems().map(m => m[this.keyValue]) :
|
|
3673
|
-
this.checkedItems();
|
|
3674
|
-
this.propagateChange(values);
|
|
3675
|
-
this.multiCountValue = this.checkedItems().length ?
|
|
3676
|
-
`Выбрано (${this.checkedItems().length})` :
|
|
3677
|
-
undefined;
|
|
3678
|
-
this.changeDetection.detectChanges();
|
|
3679
|
-
}
|
|
3680
3732
|
isGroupSelected(group) {
|
|
3681
3733
|
if (!this.multi)
|
|
3682
3734
|
return false;
|
|
3683
3735
|
const children = group[this.keyGroupChildren];
|
|
3684
|
-
return children.every((child) => this.
|
|
3685
|
-
JSON.stringify(child) === JSON.stringify(item)));
|
|
3736
|
+
return children.every((child) => this.checkSelected(child));
|
|
3686
3737
|
}
|
|
3687
3738
|
onClear(checkedItem) {
|
|
3688
3739
|
this.cleared.emit();
|
|
3689
3740
|
this.selectItem(checkedItem, true);
|
|
3690
3741
|
}
|
|
3691
|
-
changeValueSub(control) {
|
|
3692
|
-
control.valueChanges
|
|
3693
|
-
.pipe(takeUntilDestroyed(this.destroyed$))
|
|
3694
|
-
.subscribe(val => {
|
|
3695
|
-
this.initWriteValue = true;
|
|
3696
|
-
this.writeValue(val);
|
|
3697
|
-
this.errorText = ValidatorsService.getErrorText(this.control?.errors);
|
|
3698
|
-
this.changeDetection.detectChanges();
|
|
3699
|
-
});
|
|
3700
|
-
}
|
|
3701
|
-
registerOnChange(fn) {
|
|
3702
|
-
this.propagateChange = fn;
|
|
3703
|
-
super.registerOnChange(fn);
|
|
3704
|
-
}
|
|
3705
|
-
registerOnTouched(fn) {
|
|
3706
|
-
this.onTouchedCallback = fn;
|
|
3707
|
-
super.registerOnTouched(fn);
|
|
3708
|
-
}
|
|
3709
3742
|
searchInput() {
|
|
3710
3743
|
this.isShownList = true;
|
|
3711
|
-
// this.searchValue = this.inputValue;
|
|
3712
3744
|
}
|
|
3713
3745
|
handleInput(e) {
|
|
3714
3746
|
this.isShownList = true;
|
|
3715
|
-
// this.searchValue = this.inputValue;
|
|
3716
3747
|
super.handleInput(e);
|
|
3717
3748
|
}
|
|
3718
3749
|
notifyFocusEvent() {
|
|
3719
|
-
if (
|
|
3720
|
-
this.isShownList = !this.isShownList;
|
|
3721
|
-
if (this.isShownList) {
|
|
3722
|
-
setTimeout(() => {
|
|
3723
|
-
this.searchInputEl?.nativeElement.focus();
|
|
3724
|
-
});
|
|
3725
|
-
}
|
|
3726
|
-
if (this.fetchMode) {
|
|
3727
|
-
this.fetchEvent.emit();
|
|
3728
|
-
}
|
|
3729
|
-
}
|
|
3730
|
-
else {
|
|
3750
|
+
if (this.disabled) {
|
|
3731
3751
|
this.isShownList = false;
|
|
3752
|
+
return;
|
|
3732
3753
|
}
|
|
3733
|
-
if (this.isShownList
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
return data;
|
|
3737
|
-
}
|
|
3738
|
-
return data.sort((a, b) => {
|
|
3739
|
-
const aSelected = this.checkSelected(a);
|
|
3740
|
-
const bSelected = this.checkSelected(b);
|
|
3741
|
-
if (aSelected && !bSelected)
|
|
3742
|
-
return -1;
|
|
3743
|
-
if (!aSelected && bSelected)
|
|
3744
|
-
return 1;
|
|
3745
|
-
return 0;
|
|
3746
|
-
});
|
|
3754
|
+
if (this.isShownList) {
|
|
3755
|
+
setTimeout(() => {
|
|
3756
|
+
this.searchInputEl?.nativeElement.focus();
|
|
3747
3757
|
});
|
|
3758
|
+
if (this.fetchMode) {
|
|
3759
|
+
this.fetchEvent.emit();
|
|
3760
|
+
}
|
|
3761
|
+
if (this.canSortByChecked) {
|
|
3762
|
+
this.sortDataBySelection();
|
|
3763
|
+
}
|
|
3748
3764
|
}
|
|
3765
|
+
this.isShownList = !this.isShownList;
|
|
3766
|
+
this.searchValue = '';
|
|
3749
3767
|
super.notifyFocusEvent();
|
|
3750
3768
|
}
|
|
3751
3769
|
writeValue(value) {
|
|
3752
3770
|
this.writtenValue = value;
|
|
3753
3771
|
if (this.multi) {
|
|
3754
|
-
|
|
3755
|
-
this.multiCountValue = `Выбрано (${value.length})`;
|
|
3756
|
-
let data = this._data();
|
|
3757
|
-
if (this._data()[0][this.keyGroupChildren]?.length) {
|
|
3758
|
-
data = this._data()?.flatMap(item => item.children) ?? [];
|
|
3759
|
-
}
|
|
3760
|
-
if (this.keyValue) {
|
|
3761
|
-
this.checkedItems.set(data.filter((f) => value.includes(f[this.keyValue])) || []);
|
|
3762
|
-
}
|
|
3763
|
-
else {
|
|
3764
|
-
if (this.stringArray()) {
|
|
3765
|
-
this.checkedItems.set(data.filter((f) => value.includes(f)) || []);
|
|
3766
|
-
}
|
|
3767
|
-
else {
|
|
3768
|
-
const strArr = value.map(JSON.stringify);
|
|
3769
|
-
this.checkedItems.set(data.filter((f) => strArr.includes(JSON.stringify(f))) || []);
|
|
3770
|
-
}
|
|
3771
|
-
}
|
|
3772
|
-
}
|
|
3773
|
-
else {
|
|
3774
|
-
this.checkedItems.set([]);
|
|
3775
|
-
this.multiCountValue = '';
|
|
3776
|
-
}
|
|
3777
|
-
if (!this.initWriteValue) {
|
|
3778
|
-
this.selectedItems.emit(this.checkedItems);
|
|
3779
|
-
}
|
|
3772
|
+
this.handleMultiWriteValue(value);
|
|
3780
3773
|
}
|
|
3781
3774
|
else {
|
|
3782
|
-
|
|
3783
|
-
if (this.stringArray()) {
|
|
3784
|
-
this.value = value;
|
|
3785
|
-
this.inputValue = value;
|
|
3786
|
-
}
|
|
3787
|
-
else {
|
|
3788
|
-
if (!!this.keyValue && this._data()?.length) {
|
|
3789
|
-
let fVal = this._data().find((f) => {
|
|
3790
|
-
if (f?.[this.keyValue] === value) {
|
|
3791
|
-
return true;
|
|
3792
|
-
}
|
|
3793
|
-
else if (f?.[this.keyGroupChildren]?.length) {
|
|
3794
|
-
return f?.[this.keyGroupChildren].find((c) => c?.[this.keyValue] === value);
|
|
3795
|
-
}
|
|
3796
|
-
});
|
|
3797
|
-
if (fVal?.[this.keyGroupChildren]?.length) {
|
|
3798
|
-
fVal = fVal[this.keyGroupChildren].find((c) => c[this.keyValue] === value);
|
|
3799
|
-
}
|
|
3800
|
-
this.value = fVal?.[this.keyValue];
|
|
3801
|
-
this.inputValue = this.keyTitle ? fVal?.[this.keyTitle] : fVal;
|
|
3802
|
-
this.checkedItem = fVal;
|
|
3803
|
-
}
|
|
3804
|
-
else if (this._data()?.length) {
|
|
3805
|
-
const fVal = this._data().find((f) => JSON.stringify(f) === JSON.stringify(value));
|
|
3806
|
-
this.value = fVal;
|
|
3807
|
-
this.inputValue = this.keyTitle ? fVal?.[this.keyTitle] : fVal;
|
|
3808
|
-
this.checkedItem = fVal;
|
|
3809
|
-
}
|
|
3810
|
-
}
|
|
3811
|
-
}
|
|
3812
|
-
else {
|
|
3813
|
-
this.value = undefined;
|
|
3814
|
-
this.inputValue = '';
|
|
3815
|
-
this.checkedItem = undefined;
|
|
3816
|
-
}
|
|
3817
|
-
if (!this.initWriteValue) {
|
|
3818
|
-
this.selectedItem.emit(this.checkedItem);
|
|
3819
|
-
}
|
|
3775
|
+
this.handleSingleWriteValue(value);
|
|
3820
3776
|
}
|
|
3821
3777
|
this.initWriteValue = false;
|
|
3822
3778
|
this.changeDetection.detectChanges();
|
|
3823
3779
|
}
|
|
3824
|
-
|
|
3780
|
+
registerOnChange(fn) {
|
|
3781
|
+
this.propagateChange = fn;
|
|
3782
|
+
super.registerOnChange(fn);
|
|
3783
|
+
}
|
|
3784
|
+
registerOnTouched(fn) {
|
|
3785
|
+
this.onTouchedCallback = fn;
|
|
3786
|
+
super.registerOnTouched(fn);
|
|
3787
|
+
}
|
|
3788
|
+
changeValueSub(control) {
|
|
3789
|
+
control.valueChanges
|
|
3790
|
+
.pipe(takeUntilDestroyed(this.destroyed$))
|
|
3791
|
+
.subscribe(val => {
|
|
3792
|
+
this.initWriteValue = true;
|
|
3793
|
+
this.writeValue(val);
|
|
3794
|
+
this.errorText = ValidatorsService.getErrorText(this.control?.errors);
|
|
3795
|
+
this.changeDetection.detectChanges();
|
|
3796
|
+
});
|
|
3797
|
+
}
|
|
3825
3798
|
selectItem(item, cleared) {
|
|
3826
3799
|
if (this.disabled || item.disabled) {
|
|
3827
3800
|
return;
|
|
3828
3801
|
}
|
|
3829
3802
|
if (this.multi) {
|
|
3830
3803
|
this.selectMultiItem(item);
|
|
3831
|
-
this.selectedItems.emit(cleared ? undefined :
|
|
3804
|
+
this.selectedItems.emit(cleared ? undefined : this.checkedItems());
|
|
3832
3805
|
}
|
|
3833
3806
|
else {
|
|
3834
3807
|
this.selectSingleItem(item);
|
|
@@ -3843,84 +3816,6 @@ class LibSelectComponent extends LibCommonInputTextComponent {
|
|
|
3843
3816
|
}
|
|
3844
3817
|
return this.filterItem(item);
|
|
3845
3818
|
}
|
|
3846
|
-
filterItem(item) {
|
|
3847
|
-
if (this.stringArray()) {
|
|
3848
|
-
return item.toLowerCase().includes(this.searchValue?.toLowerCase() || '');
|
|
3849
|
-
}
|
|
3850
|
-
return item[this.keyTitle]?.toLowerCase().includes(this.searchValue?.toLowerCase() || '');
|
|
3851
|
-
}
|
|
3852
|
-
propagateChange(_value) {
|
|
3853
|
-
}
|
|
3854
|
-
selectSingleItem(item) {
|
|
3855
|
-
if (typeof item === 'string') {
|
|
3856
|
-
if (!this.checkedItem) {
|
|
3857
|
-
this.checkedItem = item;
|
|
3858
|
-
this.inputValue = item;
|
|
3859
|
-
this.value = item;
|
|
3860
|
-
this.propagateChange(this.value);
|
|
3861
|
-
}
|
|
3862
|
-
else {
|
|
3863
|
-
this.checkedItem = null;
|
|
3864
|
-
this.inputValue = undefined;
|
|
3865
|
-
this.value = undefined;
|
|
3866
|
-
this.propagateChange(undefined);
|
|
3867
|
-
}
|
|
3868
|
-
}
|
|
3869
|
-
else {
|
|
3870
|
-
if (!!this.keyValue && (!this.checkedItem || item[this.keyValue] !== this.checkedItem?.[this.keyValue])) {
|
|
3871
|
-
this.checkedItem = item;
|
|
3872
|
-
this.inputValue = this.checkedItem[this.keyTitle];
|
|
3873
|
-
this.value = item[this.keyValue];
|
|
3874
|
-
this.propagateChange(this.value);
|
|
3875
|
-
}
|
|
3876
|
-
else if (!this.keyValue && (!this.checkedItem || JSON.stringify(item) !== JSON.stringify(this.checkedItem))) {
|
|
3877
|
-
this.checkedItem = item;
|
|
3878
|
-
this.inputValue = this.checkedItem[this.keyTitle];
|
|
3879
|
-
this.value = item;
|
|
3880
|
-
this.propagateChange(this.value);
|
|
3881
|
-
}
|
|
3882
|
-
else {
|
|
3883
|
-
this.checkedItem = null;
|
|
3884
|
-
this.inputValue = undefined;
|
|
3885
|
-
this.value = undefined;
|
|
3886
|
-
this.propagateChange(undefined);
|
|
3887
|
-
}
|
|
3888
|
-
}
|
|
3889
|
-
this.searchValue = undefined;
|
|
3890
|
-
this.isShownList = false;
|
|
3891
|
-
}
|
|
3892
|
-
selectMultiItem(item, clear, checkAll) {
|
|
3893
|
-
if (typeof item === 'string') {
|
|
3894
|
-
}
|
|
3895
|
-
else {
|
|
3896
|
-
if (checkAll) {
|
|
3897
|
-
if (clear) {
|
|
3898
|
-
this.checkedItems.set(this.checkedItems().filter(f => f[this.keyValue] !== item[this.keyValue] || f !== item));
|
|
3899
|
-
}
|
|
3900
|
-
else {
|
|
3901
|
-
this.checkedItems.set(this._data());
|
|
3902
|
-
}
|
|
3903
|
-
}
|
|
3904
|
-
else if (this.checkSelected(item)) {
|
|
3905
|
-
this.checkedItems.set(this.checkedItems().filter(f => f[this.keyValue] !== item[this.keyValue] || f !== item));
|
|
3906
|
-
}
|
|
3907
|
-
else {
|
|
3908
|
-
this.checkedItems.set([...this.checkedItems(), item]);
|
|
3909
|
-
}
|
|
3910
|
-
}
|
|
3911
|
-
const values = this.keyValue ? this.checkedItems().map(m => m[this.keyValue]) : this.checkedItems;
|
|
3912
|
-
this.propagateChange(values);
|
|
3913
|
-
const selectL = this.checkedItems().length;
|
|
3914
|
-
if (selectL) {
|
|
3915
|
-
this.multiCountValue = `Выбрано (${selectL})`;
|
|
3916
|
-
}
|
|
3917
|
-
else {
|
|
3918
|
-
this.multiCountValue = undefined;
|
|
3919
|
-
}
|
|
3920
|
-
}
|
|
3921
|
-
sortByChecked(item) {
|
|
3922
|
-
return this.canSortByChecked ? this.checkSelected(item) : false;
|
|
3923
|
-
}
|
|
3924
3819
|
checkSelected(item) {
|
|
3925
3820
|
if (this.multi) {
|
|
3926
3821
|
if (this.keyValue) {
|
|
@@ -3952,30 +3847,304 @@ class LibSelectComponent extends LibCommonInputTextComponent {
|
|
|
3952
3847
|
}
|
|
3953
3848
|
handleFocus() {
|
|
3954
3849
|
super.handleFocus();
|
|
3955
|
-
// this.showMultiCountValue = false;
|
|
3956
3850
|
}
|
|
3957
3851
|
selectAll() {
|
|
3958
|
-
|
|
3959
|
-
|
|
3852
|
+
const data = this._data();
|
|
3853
|
+
if (!data?.length)
|
|
3854
|
+
return;
|
|
3855
|
+
if (this.allSelected) {
|
|
3856
|
+
this.checkedItems.set([]);
|
|
3857
|
+
}
|
|
3858
|
+
else {
|
|
3859
|
+
const allItems = this.extractAllItems(data);
|
|
3860
|
+
this.checkedItems.set(allItems);
|
|
3861
|
+
}
|
|
3862
|
+
this.updateMultiSelection();
|
|
3863
|
+
}
|
|
3864
|
+
getClickOutsideElements() {
|
|
3865
|
+
const elements = [
|
|
3866
|
+
'lib-select-' + this.selectId,
|
|
3867
|
+
'chevron-' + this.selectId,
|
|
3868
|
+
'selected-' + this.selectId
|
|
3869
|
+
];
|
|
3870
|
+
// Добавляем элементы для очистки выбранных элементов
|
|
3871
|
+
this.checkedItems().forEach((_, index) => {
|
|
3872
|
+
elements.push(`selected-clear-${this.selectId}-${index}`);
|
|
3873
|
+
});
|
|
3874
|
+
return elements;
|
|
3875
|
+
}
|
|
3876
|
+
getItemTrackBy(item, index) {
|
|
3877
|
+
if (this.keyValue && item[this.keyValue]) {
|
|
3878
|
+
return item[this.keyValue];
|
|
3879
|
+
}
|
|
3880
|
+
return index;
|
|
3881
|
+
}
|
|
3882
|
+
trackByFn(index, item) {
|
|
3883
|
+
if (this.isGroup(item)) {
|
|
3884
|
+
return `group-${index}-${this.getGroupTitle(item)}`;
|
|
3885
|
+
}
|
|
3886
|
+
if (this.keyValue && item[this.keyValue]) {
|
|
3887
|
+
return item[this.keyValue];
|
|
3888
|
+
}
|
|
3889
|
+
if (this.stringArray()) {
|
|
3890
|
+
return item;
|
|
3891
|
+
}
|
|
3892
|
+
return index;
|
|
3893
|
+
}
|
|
3894
|
+
sortDataAlphabetically(data) {
|
|
3895
|
+
return data.map(item => {
|
|
3896
|
+
if (this.isGroup(item)) {
|
|
3897
|
+
// Сортируем детей группы
|
|
3898
|
+
const sortedChildren = [...item[this.keyGroupChildren]].sort((a, b) => this.getItemDisplayText(a).localeCompare(this.getItemDisplayText(b)));
|
|
3899
|
+
return { ...item, [this.keyGroupChildren]: sortedChildren };
|
|
3900
|
+
}
|
|
3901
|
+
else {
|
|
3902
|
+
return item;
|
|
3903
|
+
}
|
|
3904
|
+
}).sort((a, b) => {
|
|
3905
|
+
// Сортируем сами группы/элементы
|
|
3906
|
+
const textA = this.isGroup(a) ? this.getGroupTitle(a) : this.getItemDisplayText(a);
|
|
3907
|
+
const textB = this.isGroup(b) ? this.getGroupTitle(b) : this.getItemDisplayText(b);
|
|
3908
|
+
return textA.localeCompare(textB);
|
|
3909
|
+
});
|
|
3910
|
+
}
|
|
3911
|
+
getItemDisplayText(item) {
|
|
3912
|
+
if (this.stringArray()) {
|
|
3913
|
+
return String(item);
|
|
3914
|
+
}
|
|
3915
|
+
return item[this.keyTitle] || '';
|
|
3916
|
+
}
|
|
3917
|
+
setupFormControl() {
|
|
3918
|
+
if (this.controlContainer?.control && this.formControlName) {
|
|
3919
|
+
this.control = this.controlContainer.control.get(this.formControlName);
|
|
3920
|
+
}
|
|
3921
|
+
if (this.control) {
|
|
3922
|
+
this.changeValueSub(this.control);
|
|
3923
|
+
}
|
|
3924
|
+
}
|
|
3925
|
+
handleMultiWriteValue(value) {
|
|
3926
|
+
if (value?.length && this._data()?.length) {
|
|
3927
|
+
this.multiCountValue = `Выбрано (${value.length})`;
|
|
3928
|
+
const allItems = this.extractAllItems(this._data());
|
|
3929
|
+
if (this.keyValue) {
|
|
3930
|
+
this.checkedItems.set(allItems.filter(item => value.includes(item[this.keyValue])));
|
|
3931
|
+
}
|
|
3932
|
+
else {
|
|
3933
|
+
if (this.stringArray()) {
|
|
3934
|
+
this.checkedItems.set(allItems.filter(item => value.includes(item)));
|
|
3935
|
+
}
|
|
3936
|
+
else {
|
|
3937
|
+
const strArr = value.map((v) => JSON.stringify(v));
|
|
3938
|
+
this.checkedItems.set(allItems.filter(item => strArr.includes(JSON.stringify(item))));
|
|
3939
|
+
}
|
|
3940
|
+
}
|
|
3941
|
+
}
|
|
3942
|
+
else {
|
|
3943
|
+
this.checkedItems.set([]);
|
|
3944
|
+
this.multiCountValue = '';
|
|
3945
|
+
}
|
|
3946
|
+
if (!this.initWriteValue) {
|
|
3947
|
+
this.selectedItems.emit(this.checkedItems());
|
|
3948
|
+
}
|
|
3949
|
+
}
|
|
3950
|
+
handleSingleWriteValue(value) {
|
|
3951
|
+
if (!value) {
|
|
3952
|
+
this.value = undefined;
|
|
3953
|
+
this.inputValue = '';
|
|
3954
|
+
this.checkedItem = undefined;
|
|
3955
|
+
return;
|
|
3956
|
+
}
|
|
3957
|
+
const data = this._data();
|
|
3958
|
+
if (!data?.length)
|
|
3959
|
+
return;
|
|
3960
|
+
if (this.stringArray()) {
|
|
3961
|
+
this.value = value;
|
|
3962
|
+
this.inputValue = value;
|
|
3963
|
+
this.checkedItem = value;
|
|
3964
|
+
}
|
|
3965
|
+
else {
|
|
3966
|
+
const foundItem = this.findItemByValue(value);
|
|
3967
|
+
if (foundItem) {
|
|
3968
|
+
this.value = this.keyValue ? foundItem[this.keyValue] : foundItem;
|
|
3969
|
+
this.inputValue = this.keyTitle ? foundItem[this.keyTitle] : String(foundItem);
|
|
3970
|
+
this.checkedItem = foundItem;
|
|
3971
|
+
}
|
|
3972
|
+
}
|
|
3973
|
+
if (!this.initWriteValue) {
|
|
3974
|
+
this.selectedItem.emit(this.checkedItem);
|
|
3975
|
+
}
|
|
3976
|
+
}
|
|
3977
|
+
findItemByValue(value) {
|
|
3978
|
+
const data = this._data();
|
|
3979
|
+
for (const item of data) {
|
|
3980
|
+
if (this.isGroup(item)) {
|
|
3981
|
+
const foundInGroup = item[this.keyGroupChildren].find((child) => this.keyValue
|
|
3982
|
+
? child[this.keyValue] === value
|
|
3983
|
+
: this.itemsEqual(child, value));
|
|
3984
|
+
if (foundInGroup)
|
|
3985
|
+
return foundInGroup;
|
|
3986
|
+
}
|
|
3987
|
+
else {
|
|
3988
|
+
if (this.keyValue
|
|
3989
|
+
? item[this.keyValue] === value
|
|
3990
|
+
: this.itemsEqual(item, value)) {
|
|
3991
|
+
return item;
|
|
3992
|
+
}
|
|
3993
|
+
}
|
|
3994
|
+
}
|
|
3995
|
+
return undefined;
|
|
3996
|
+
}
|
|
3997
|
+
itemsEqual(item1, item2) {
|
|
3998
|
+
return JSON.stringify(item1) === JSON.stringify(item2);
|
|
3999
|
+
}
|
|
4000
|
+
selectSingleItem(item) {
|
|
4001
|
+
if (typeof item === 'string') {
|
|
4002
|
+
this.handleStringItemSelection(item);
|
|
4003
|
+
}
|
|
4004
|
+
else {
|
|
4005
|
+
this.handleObjectItemSelection(item);
|
|
4006
|
+
}
|
|
4007
|
+
this.searchValue = '';
|
|
4008
|
+
this.isShownList = false;
|
|
4009
|
+
}
|
|
4010
|
+
handleStringItemSelection(item) {
|
|
4011
|
+
if (this.checkedItem !== item) {
|
|
4012
|
+
this.checkedItem = item;
|
|
4013
|
+
this.inputValue = item;
|
|
4014
|
+
this.value = item;
|
|
4015
|
+
this.propagateChange(this.value);
|
|
4016
|
+
}
|
|
4017
|
+
else {
|
|
4018
|
+
this.clearSelection();
|
|
4019
|
+
}
|
|
4020
|
+
}
|
|
4021
|
+
handleObjectItemSelection(item) {
|
|
4022
|
+
const isSameItem = this.keyValue
|
|
4023
|
+
? this.checkedItem?.[this.keyValue] === item[this.keyValue]
|
|
4024
|
+
: this.itemsEqual(this.checkedItem, item);
|
|
4025
|
+
if (!this.checkedItem || !isSameItem) {
|
|
4026
|
+
this.checkedItem = item;
|
|
4027
|
+
this.inputValue = item[this.keyTitle] || String(item);
|
|
4028
|
+
this.value = this.keyValue ? item[this.keyValue] : item;
|
|
4029
|
+
this.propagateChange(this.value);
|
|
4030
|
+
}
|
|
4031
|
+
else {
|
|
4032
|
+
this.clearSelection();
|
|
4033
|
+
}
|
|
4034
|
+
}
|
|
4035
|
+
clearSelection() {
|
|
4036
|
+
this.checkedItem = undefined;
|
|
4037
|
+
this.inputValue = '';
|
|
4038
|
+
this.value = undefined;
|
|
4039
|
+
this.propagateChange(undefined);
|
|
4040
|
+
}
|
|
4041
|
+
selectMultiItem(item) {
|
|
4042
|
+
if (typeof item === 'string') {
|
|
4043
|
+
this.handleStringMultiItem(item);
|
|
4044
|
+
}
|
|
4045
|
+
else {
|
|
4046
|
+
this.handleObjectMultiItem(item);
|
|
4047
|
+
}
|
|
4048
|
+
}
|
|
4049
|
+
handleStringMultiItem(item) {
|
|
4050
|
+
const currentItems = this.checkedItems();
|
|
4051
|
+
const index = currentItems.indexOf(item);
|
|
4052
|
+
if (index > -1) {
|
|
4053
|
+
this.checkedItems.set(currentItems.filter((_, i) => i !== index));
|
|
4054
|
+
}
|
|
4055
|
+
else {
|
|
4056
|
+
this.checkedItems.set([...currentItems, item]);
|
|
4057
|
+
}
|
|
4058
|
+
this.updateMultiSelection();
|
|
4059
|
+
}
|
|
4060
|
+
handleObjectMultiItem(item) {
|
|
4061
|
+
const currentItems = this.checkedItems();
|
|
4062
|
+
const isSelected = currentItems.some(checkedItem => this.keyValue
|
|
4063
|
+
? checkedItem[this.keyValue] === item[this.keyValue]
|
|
4064
|
+
: this.itemsEqual(checkedItem, item));
|
|
4065
|
+
if (isSelected) {
|
|
4066
|
+
this.checkedItems.set(currentItems.filter(checkedItem => this.keyValue
|
|
4067
|
+
? checkedItem[this.keyValue] !== item[this.keyValue]
|
|
4068
|
+
: !this.itemsEqual(checkedItem, item)));
|
|
4069
|
+
}
|
|
4070
|
+
else {
|
|
4071
|
+
this.checkedItems.set([...currentItems, item]);
|
|
4072
|
+
}
|
|
4073
|
+
this.updateMultiSelection();
|
|
4074
|
+
}
|
|
4075
|
+
updateMultiSelection() {
|
|
4076
|
+
const values = this.keyValue
|
|
4077
|
+
? this.checkedItems().map(item => item[this.keyValue])
|
|
4078
|
+
: this.checkedItems();
|
|
4079
|
+
this.propagateChange(values);
|
|
4080
|
+
const selectedCount = this.checkedItems().length;
|
|
4081
|
+
this.multiCountValue = selectedCount > 0
|
|
4082
|
+
? `Выбрано (${selectedCount})`
|
|
4083
|
+
: '';
|
|
4084
|
+
}
|
|
4085
|
+
filterItem(item) {
|
|
4086
|
+
if (this.stringArray()) {
|
|
4087
|
+
return String(item).toLowerCase().includes(this.searchValue.toLowerCase());
|
|
4088
|
+
}
|
|
4089
|
+
const title = item[this.keyTitle];
|
|
4090
|
+
return title?.toLowerCase().includes(this.searchValue.toLowerCase()) ?? false;
|
|
4091
|
+
}
|
|
4092
|
+
sortDataBySelection() {
|
|
4093
|
+
this._data.update(data => {
|
|
4094
|
+
if (!data || !this.canSortByChecked)
|
|
4095
|
+
return data;
|
|
4096
|
+
return [...data].sort((a, b) => {
|
|
4097
|
+
const aSelected = this.checkSelected(a);
|
|
4098
|
+
const bSelected = this.checkSelected(b);
|
|
4099
|
+
if (aSelected && !bSelected)
|
|
4100
|
+
return -1;
|
|
4101
|
+
if (!aSelected && bSelected)
|
|
4102
|
+
return 1;
|
|
4103
|
+
return 0;
|
|
4104
|
+
});
|
|
4105
|
+
});
|
|
4106
|
+
}
|
|
4107
|
+
deselectGroupItems(group) {
|
|
4108
|
+
const children = group[this.keyGroupChildren];
|
|
4109
|
+
this.checkedItems.set(this.checkedItems().filter(checkedItem => !children.some((child) => this.keyValue
|
|
4110
|
+
? child[this.keyValue] === checkedItem[this.keyValue]
|
|
4111
|
+
: this.itemsEqual(child, checkedItem))));
|
|
4112
|
+
}
|
|
4113
|
+
selectGroupItems(group) {
|
|
4114
|
+
const children = group[this.keyGroupChildren];
|
|
4115
|
+
const newItems = children.filter((child) => !this.checkedItems().some(checkedItem => this.keyValue
|
|
4116
|
+
? child[this.keyValue] === checkedItem[this.keyValue]
|
|
4117
|
+
: this.itemsEqual(child, checkedItem)));
|
|
4118
|
+
this.checkedItems.set([...this.checkedItems(), ...newItems]);
|
|
4119
|
+
}
|
|
4120
|
+
extractAllItems(data) {
|
|
4121
|
+
return data.flatMap(item => this.isGroup(item) ? item[this.keyGroupChildren] : [item]);
|
|
3960
4122
|
}
|
|
3961
4123
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSelectComponent, deps: [{ token: i0.DestroyRef }, { token: i0.ChangeDetectorRef }, { token: i1$5.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3962
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibSelectComponent, isStandalone: true, selector: "dd-lib-select", inputs: {
|
|
4124
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibSelectComponent, isStandalone: true, selector: "dd-lib-select", inputs: { virtualScroll: "virtualScroll", multi: "multi", tooltipPosition: "tooltipPosition", highlight: "highlight", searchOn: "searchOn", selectId: "selectId", canSortByChecked: "canSortByChecked", itemSize: "itemSize", keyTitle: "keyTitle", keyDesc: "keyDesc", keyValue: "keyValue", noDataError: "noDataError", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder", keyGroupTitle: "keyGroupTitle", keyGroupChildren: "keyGroupChildren", selectAllInGroup: "selectAllInGroup", sortAlphabetically: "sortAlphabetically", data: "data" }, outputs: { selectedItem: "selectedItem", selectedItems: "selectedItems", deleteMultiItem: "deleteMultiItem" }, providers: [
|
|
3963
4125
|
{
|
|
3964
4126
|
provide: NG_VALUE_ACCESSOR,
|
|
3965
4127
|
useExisting: forwardRef(() => LibSelectComponent),
|
|
3966
4128
|
multi: true,
|
|
3967
4129
|
},
|
|
3968
|
-
], viewQueries: [{ propertyName: "selectEl", first: true, predicate: ["select"], descendants: true, read: ElementRef, static: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInputEl"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n @if (label) {\n <label [for]=\"id\" class=\"lib-select__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n\n <div class=\"pos-relative\" data-child=\"input\">\n <input\n #select\n (change)=\"handleChange()\"\n (click)=\"notifyFocusEvent()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [attr.id]=\"selectId\"\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"'text'\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [disabled]=\"disabled\"\n [readOnly]=\"true\"\n [(ngModel)]=\"inputValue\"\n [title]=\"inputValue || ''\"\n class=\"text-select select-block\" />\n\n @if (multiCountValue) {\n <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n <dd-lib-horizontal-scroll>\n @for (item of checkedItems(); track item) {\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}}\" 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) {\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) {\n <dd-lib-svg-icon\n (click)=\"onClear(checkedItem)\"\n class=\"clear\"\n id=\"chevron-{{ 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\"\n [style.max-height]=\"searchOn ? '342px' : '300px'\"\n data-child=\"list\"\n (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n [elements]=\"['lib-select-' + selectId, 'chevron-' + selectId, 'selected-' + selectId, 'selected-clear-' + selectId]\"\n ddListKeyboardNavigation\n class=\"select-list-wrapper\">\n @if (initialized) {\n @if (!_data()?.length && noDataError) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n {{ noDataError }}\n </div>\n </div>\n }\n\n <div class=\"d-flex full-width align-center justify-between head-wrapper\">\n @if (_data()?.length && _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': ''\" icon=\"check-green\"></dd-lib-svg-viewer>\n </div>\n }\n\n </div>\n\n\n @if (_data()?.length && (_data() | filterByKey: filterList.bind(this))?.length === 0) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n </div>\n </div>\n }\n\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this)\">\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n }\n } @else {\n <div class=\"info-container\">\n <div class=\"d-flex gap-12 align-center\">\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n <dd-lib-loader></dd-lib-loader>\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-drag=\"drag\">\n <div ddSelectableItem [dragItem]=\"drag\" [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 | filterByKey: filterList.bind(this); track 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 (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 child) {\n <ng-container [ngTemplateOutlet]=\"rowItem\"\n [ngTemplateOutletContext]=\"{item: child, drag: false}\"></ng-container>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item, drag: true}\"></ng-container>\n }\n }\n</ng-template>\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.head-wrapper{display:flex;width:100%;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gray-bgc)}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--blue-card);color:var(--font-light-black-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: FilterByKeyPipe, name: "filterByKey" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TooltipDirective, selector: "[ddTooltip]", inputs: ["ddTooltip", "withClick", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListKeyboardNavigationDirective, selector: "[ddListKeyboardNavigation]" }, { kind: "directive", type: SelectableItemDirective, selector: "[ddSelectableItem]", inputs: ["dragItem"], outputs: ["itemSelected"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }, { kind: "component", type: LibHorizontalScrollComponent, selector: "dd-lib-horizontal-scroll" }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4130
|
+
], viewQueries: [{ propertyName: "selectEl", first: true, predicate: ["select"], descendants: true, read: ElementRef, static: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInputEl"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n @if (label) {\n <label [for]=\"id\" class=\"lib-select__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n\n <div class=\"pos-relative\" data-child=\"input\">\n <input\n #select\n (change)=\"handleChange()\"\n (click)=\"notifyFocusEvent()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [attr.id]=\"selectId\"\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"'text'\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [disabled]=\"disabled\"\n [readOnly]=\"true\"\n [(ngModel)]=\"inputValue\"\n [title]=\"inputValue || ''\"\n class=\"text-select select-block\" />\n\n @if (multiCountValue && checkedItems().length > 0) {\n <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n <dd-lib-horizontal-scroll>\n @for (item of checkedItems(); track getItemTrackBy(item, $index)) {\n <div class=\"selected-items__item\">\n @if (stringArray()) {\n <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div [title]=\"item[keyTitle]\"\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"selected-items__item-desc\"></div>\n }\n <dd-lib-svg-icon id=\"selected-clear-{{selectId}}-{{$index}}\" icon=\"clear\" class=\"cup\"\n (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n </div>\n }\n </dd-lib-horizontal-scroll>\n </div>\n }\n\n @if (!checkedItem && !multiCountValue) {\n <dd-lib-svg-icon\n (click)=\"notifyFocusEvent()\"\n [class.black-svg]=\"isShownList\"\n [class.disabled]=\"disabled\"\n [class.gray-svg]=\"!isShownList\"\n [class.up]=\"isShownList\"\n id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n } @else if (clearable && !searchValue && !multi) {\n <dd-lib-svg-icon\n (click)=\"onClear(checkedItem)\"\n class=\"clear\"\n id=\"clear-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n }\n </div>\n\n @if (errorTexts.length && showError) {\n @for (error of errorTexts; track error) {\n <div class=\"lib-select__error\">{{ error }}</div>\n }\n }\n @if (errorText && showSelfError && showError) {\n <div class=\"lib-select__error\">{{ errorText }}</div>\n }\n\n @if (isShownList) {\n <div\n id=\"dropdown-{{selectId}}\"\n [style.max-height]=\"searchOn ? '342px' : '300px'\"\n data-child=\"list\"\n (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n [elements]=\"getClickOutsideElements()\"\n ddListKeyboardNavigation\n class=\"select-list-wrapper\">\n\n @if (!initialized) {\n <div class=\"info-container\">\n <div class=\"d-flex gap-12 align-center\">\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n <dd-lib-loader></dd-lib-loader>\n </div>\n </div>\n }\n\n @else {\n @if (!_data()?.length) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n {{ noDataError }}\n </div>\n </div>\n }\n\n @if (_data()?.length) {\n <div class=\"d-flex full-width align-center {{(_data()!.length > 5 && searchOn) ? 'justify-between' : 'justify-end'}} head-wrapper\">\n @if (_data()!.length > 5 && searchOn) {\n <div class=\"search-block\">\n <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n [readOnly]=\"readOnly\"\n (input)=\"searchInput()\"\n [placeholder]=\"searchPlaceholder\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [(ngModel)]=\"searchValue\" type=\"text\">\n <dd-lib-svg-icon\n [style.display]=\"searchValue ? 'block' : 'none'\"\n class=\"cup\"\n (click)=\"searchValue=''\"\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n </div>\n }\n @if (multi) {\n <div class=\"mr-16\">\n <dd-lib-svg-viewer\n (click)=\"selectAll()\"\n class=\"checked cup\"\n pack=\"lib-svg\"\n id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': '#07B700'\" icon=\"check-green\"></dd-lib-svg-viewer>\n </div>\n }\n </div>\n\n @if ((_data() | filterByKey: filterList.bind(this))?.length === 0) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n </div>\n </div>\n }\n\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this); trackBy: trackByFn.bind(this)\">\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n }\n }\n }\n </div>\n }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-index=\"index\">\n <div ddSelectableItem [dragItem]=\"true\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n (click)=\"selectItem(item)\"\n (itemSelected)=\"selectItem(item)\"\n [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n [class.s-item-disabled]=\"item.disabled\"\n class=\"select-data\">\n @if (stringArray()) {\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"select-data__desc\"></div>\n }\n @if (checkSelected(item)) {\n <dd-lib-svg-icon\n class=\"checked\"\n id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n @for (item of items; track trackByFn($index, item)) {\n @if (isGroup(item)) {\n <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n @if (selectAllInGroup && isGroupSelected(item)) {\n <dd-lib-svg-icon\n [class.checked]=\"isGroupSelected(item)\"\n icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n <div class=\"group-items\">\n @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track trackByFn($index, child)) {\n <ng-container [ngTemplateOutlet]=\"rowItem\"\n [ngTemplateOutletContext]=\"{item: child, index: $index}\"></ng-container>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item: item, index: $index}\"></ng-container>\n }\n }\n</ng-template>\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.head-wrapper{display:flex;width:100%;align-items:center;border-bottom:1px solid var(--gray-bgc);min-height:40px}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--blue-card);color:var(--font-light-black-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: FilterByKeyPipe, name: "filterByKey" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TooltipDirective, selector: "[ddTooltip]", inputs: ["ddTooltip", "withClick", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListKeyboardNavigationDirective, selector: "[ddListKeyboardNavigation]" }, { kind: "directive", type: SelectableItemDirective, selector: "[ddSelectableItem]", inputs: ["dragItem"], outputs: ["itemSelected"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }, { kind: "component", type: LibHorizontalScrollComponent, selector: "dd-lib-horizontal-scroll" }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3969
4131
|
}
|
|
3970
4132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSelectComponent, decorators: [{
|
|
3971
4133
|
type: Component,
|
|
3972
|
-
args: [{ selector: 'dd-lib-select', standalone: true, imports: [
|
|
4134
|
+
args: [{ selector: 'dd-lib-select', standalone: true, imports: [
|
|
4135
|
+
ReactiveFormsModule, FormsModule, HighlightPipe, SafePipe,
|
|
4136
|
+
ClickOutsideDirective, LibLoaderComponent, FilterByKeyPipe,
|
|
4137
|
+
LibSvgIconComponent, ScrollingModule, TooltipDirective,
|
|
4138
|
+
NgTemplateOutlet, ListKeyboardNavigationDirective,
|
|
4139
|
+
SelectableItemDirective, FixedPositionDirective,
|
|
4140
|
+
LibHorizontalScrollComponent, LibSvgViewerComponent
|
|
4141
|
+
], providers: [
|
|
3973
4142
|
{
|
|
3974
4143
|
provide: NG_VALUE_ACCESSOR,
|
|
3975
4144
|
useExisting: forwardRef(() => LibSelectComponent),
|
|
3976
4145
|
multi: true,
|
|
3977
4146
|
},
|
|
3978
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n @if (label) {\n <label [for]=\"id\" class=\"lib-select__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n\n <div class=\"pos-relative\" data-child=\"input\">\n <input\n #select\n (change)=\"handleChange()\"\n (click)=\"notifyFocusEvent()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [attr.id]=\"selectId\"\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"'text'\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [disabled]=\"disabled\"\n [readOnly]=\"true\"\n [(ngModel)]=\"inputValue\"\n [title]=\"inputValue || ''\"\n class=\"text-select select-block\" />\n\n @if (multiCountValue) {\n <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n <dd-lib-horizontal-scroll>\n @for (item of checkedItems(); track item) {\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}}\" 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) {\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) {\n <dd-lib-svg-icon\n (click)=\"onClear(checkedItem)\"\n class=\"clear\"\n id=\"chevron-{{ 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\"\n [style.max-height]=\"searchOn ? '342px' : '300px'\"\n data-child=\"list\"\n (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n [elements]=\"['lib-select-' + selectId, 'chevron-' + selectId, 'selected-' + selectId, 'selected-clear-' + selectId]\"\n ddListKeyboardNavigation\n class=\"select-list-wrapper\">\n @if (initialized) {\n @if (!_data()?.length && noDataError) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n {{ noDataError }}\n </div>\n </div>\n }\n\n <div class=\"d-flex full-width align-center justify-between head-wrapper\">\n @if (_data()?.length && _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': ''\" icon=\"check-green\"></dd-lib-svg-viewer>\n </div>\n }\n\n </div>\n\n\n @if (_data()?.length && (_data() | filterByKey: filterList.bind(this))?.length === 0) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n </div>\n </div>\n }\n\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this)\">\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n }\n } @else {\n <div class=\"info-container\">\n <div class=\"d-flex gap-12 align-center\">\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n <dd-lib-loader></dd-lib-loader>\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-drag=\"drag\">\n <div ddSelectableItem [dragItem]=\"drag\" [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 | filterByKey: filterList.bind(this); track 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 (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 child) {\n <ng-container [ngTemplateOutlet]=\"rowItem\"\n [ngTemplateOutletContext]=\"{item: child, drag: false}\"></ng-container>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item, drag: true}\"></ng-container>\n }\n }\n</ng-template>\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.head-wrapper{display:flex;width:100%;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gray-bgc)}.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"] }]
|
|
4147
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n @if (label) {\n <label [for]=\"id\" class=\"lib-select__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n\n <div class=\"pos-relative\" data-child=\"input\">\n <input\n #select\n (change)=\"handleChange()\"\n (click)=\"notifyFocusEvent()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [attr.id]=\"selectId\"\n [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.type]=\"'text'\"\n [class.focused]=\"focused\"\n [class.invalid]=\"showError\"\n [disabled]=\"disabled\"\n [readOnly]=\"true\"\n [(ngModel)]=\"inputValue\"\n [title]=\"inputValue || ''\"\n class=\"text-select select-block\" />\n\n @if (multiCountValue && checkedItems().length > 0) {\n <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n <dd-lib-horizontal-scroll>\n @for (item of checkedItems(); track getItemTrackBy(item, $index)) {\n <div class=\"selected-items__item\">\n @if (stringArray()) {\n <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div [title]=\"item[keyTitle]\"\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"selected-items__item-title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"selected-items__item-desc\"></div>\n }\n <dd-lib-svg-icon id=\"selected-clear-{{selectId}}-{{$index}}\" icon=\"clear\" class=\"cup\"\n (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n </div>\n }\n </dd-lib-horizontal-scroll>\n </div>\n }\n\n @if (!checkedItem && !multiCountValue) {\n <dd-lib-svg-icon\n (click)=\"notifyFocusEvent()\"\n [class.black-svg]=\"isShownList\"\n [class.disabled]=\"disabled\"\n [class.gray-svg]=\"!isShownList\"\n [class.up]=\"isShownList\"\n id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n } @else if (clearable && !searchValue && !multi) {\n <dd-lib-svg-icon\n (click)=\"onClear(checkedItem)\"\n class=\"clear\"\n id=\"clear-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n }\n </div>\n\n @if (errorTexts.length && showError) {\n @for (error of errorTexts; track error) {\n <div class=\"lib-select__error\">{{ error }}</div>\n }\n }\n @if (errorText && showSelfError && showError) {\n <div class=\"lib-select__error\">{{ errorText }}</div>\n }\n\n @if (isShownList) {\n <div\n id=\"dropdown-{{selectId}}\"\n [style.max-height]=\"searchOn ? '342px' : '300px'\"\n data-child=\"list\"\n (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n [elements]=\"getClickOutsideElements()\"\n ddListKeyboardNavigation\n class=\"select-list-wrapper\">\n\n @if (!initialized) {\n <div class=\"info-container\">\n <div class=\"d-flex gap-12 align-center\">\n <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n <dd-lib-loader></dd-lib-loader>\n </div>\n </div>\n }\n\n @else {\n @if (!_data()?.length) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n {{ noDataError }}\n </div>\n </div>\n }\n\n @if (_data()?.length) {\n <div class=\"d-flex full-width align-center {{(_data()!.length > 5 && searchOn) ? 'justify-between' : 'justify-end'}} head-wrapper\">\n @if (_data()!.length > 5 && searchOn) {\n <div class=\"search-block\">\n <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n [readOnly]=\"readOnly\"\n (input)=\"searchInput()\"\n [placeholder]=\"searchPlaceholder\"\n (blur)=\"handleBlur()\"\n (focus)=\"handleFocus()\"\n [(ngModel)]=\"searchValue\" type=\"text\">\n <dd-lib-svg-icon\n [style.display]=\"searchValue ? 'block' : 'none'\"\n class=\"cup\"\n (click)=\"searchValue=''\"\n id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n </div>\n }\n @if (multi) {\n <div class=\"mr-16\">\n <dd-lib-svg-viewer\n (click)=\"selectAll()\"\n class=\"checked cup\"\n pack=\"lib-svg\"\n id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': '#07B700'\" icon=\"check-green\"></dd-lib-svg-viewer>\n </div>\n }\n </div>\n\n @if ((_data() | filterByKey: filterList.bind(this))?.length === 0) {\n <div class=\"info-container\">\n <div class=\"b2-title no-wrap-text\">\n \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n </div>\n </div>\n }\n\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this); trackBy: trackByFn.bind(this)\">\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n }\n }\n }\n </div>\n }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-index=\"index\">\n <div ddSelectableItem [dragItem]=\"true\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n (click)=\"selectItem(item)\"\n (itemSelected)=\"selectItem(item)\"\n [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n [class.s-item-disabled]=\"item.disabled\"\n class=\"select-data\">\n @if (stringArray()) {\n <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyTitle && !stringArray()) {\n <div\n [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n class=\"select-data__title\"></div>\n }\n @if (keyDesc && !stringArray()) {\n <div\n [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n [title]=\"item[keyDesc]\"\n class=\"select-data__desc\"></div>\n }\n @if (checkSelected(item)) {\n <dd-lib-svg-icon\n class=\"checked\"\n id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n @for (item of items; track trackByFn($index, item)) {\n @if (isGroup(item)) {\n <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n @if (selectAllInGroup && isGroupSelected(item)) {\n <dd-lib-svg-icon\n [class.checked]=\"isGroupSelected(item)\"\n icon=\"check_green\"></dd-lib-svg-icon>\n }\n </div>\n <div class=\"group-items\">\n @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track trackByFn($index, child)) {\n <ng-container [ngTemplateOutlet]=\"rowItem\"\n [ngTemplateOutletContext]=\"{item: child, index: $index}\"></ng-container>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item: item, index: $index}\"></ng-container>\n }\n }\n</ng-template>\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.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"] }]
|
|
3979
4148
|
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ChangeDetectorRef }, { type: i1$5.ControlContainer, decorators: [{
|
|
3980
4149
|
type: Optional
|
|
3981
4150
|
}, {
|
|
@@ -3988,8 +4157,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
3988
4157
|
}], searchInputEl: [{
|
|
3989
4158
|
type: ViewChild,
|
|
3990
4159
|
args: ['searchInputEl', { read: ElementRef, static: true }]
|
|
3991
|
-
}], data: [{
|
|
3992
|
-
type: Input
|
|
3993
4160
|
}], virtualScroll: [{
|
|
3994
4161
|
type: Input
|
|
3995
4162
|
}], multi: [{
|
|
@@ -4024,12 +4191,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
|
|
|
4024
4191
|
type: Input
|
|
4025
4192
|
}], selectAllInGroup: [{
|
|
4026
4193
|
type: Input
|
|
4194
|
+
}], sortAlphabetically: [{
|
|
4195
|
+
type: Input
|
|
4027
4196
|
}], selectedItem: [{
|
|
4028
4197
|
type: Output
|
|
4029
4198
|
}], selectedItems: [{
|
|
4030
4199
|
type: Output
|
|
4031
4200
|
}], deleteMultiItem: [{
|
|
4032
4201
|
type: Output
|
|
4202
|
+
}], data: [{
|
|
4203
|
+
type: Input
|
|
4033
4204
|
}] } });
|
|
4034
4205
|
|
|
4035
4206
|
const DefaultSort = [
|
|
@@ -5748,5 +5919,5 @@ const t = true;
|
|
|
5748
5919
|
* Generated bundle index. Do not edit.
|
|
5749
5920
|
*/
|
|
5750
5921
|
|
|
5751
|
-
export { API_URL, AutoHeightDirective, ClickOutsideDirective, CounterDirective, DDDialogRef, DEFAULT_FORMAT, DIALOG_CONFIG, DataEmptyComponent, DateService, Debounce, DeclensionDirective, DestroyService, DialogConfig, DialogService, DisableAfterNCall, Disabled, DropDownPositionDirective, ErrorPageComponent, FetcherService, FilterByKeyPipe, FilterPipe, FixedPositionDirective, FooterComponent, FooterLinkComponent, FooterLinksBlockComponent, HighlightPipe, IDatePeriod, ITab, InterceptorsService, LibAccordionComponent, LibBackButtonComponent, LibButtonComponent, LibCalendarComponent, LibCardComponent, LibCheckboxComponent, LibCommentInputComponent, LibCommonButtonComponent, LibCommonInputTextComponent, LibDateInputComponent, LibDateRangeComponent, LibDisclaimerComponent, LibFileLoaderComponent, LibFileUploadComponent, LibFilterButtonComponent, LibFilterComponent, LibHorizontalScrollComponent, LibImageLoaderComponent, LibInfoCardComponent, LibInputComponent, LibLoaderComponent, LibRadioComponent, LibSearchInputComponent, LibSelectComponent, LibSkeletonComponent, LibSortComponent, LibStepComponent, LibSvgComponent, LibSvgIconComponent, LibSvgViewerComponent, LibTabsFragmentComponent, LibTextareaComponent, ListKeyboardNavigationDirective, MainSharedComponent, ModalBaseComponent, ModalCommonComponent, NotFoundComponent, PhoneMaskDirective, ResizeTextareaDirective, ReversePipe, SafePipe, SelectableItemDirective, SortByValPipe, SvgIconsService, TOAST_CONFIG_TOKEN, TOOLTIP_DATA, TechWorksComponent, ThemeConfigurator, ThemeConstructorService, Throttle, ToastComponent, ToastConfig, ToastData, ToastRef, ToastService, ToastTypeData, TooltipComponent, TooltipDirective, TriangleDirective, ValidatorsService, completeIconSet, defaultToastConfig, provideToast, svgIconActogoneAccept, svgIconAll, svgIconAppgalery, svgIconAppstore, svgIconArrowDownRed, svgIconArrowUpGreen, svgIconBackArrow, svgIconBurger, svgIconCalendar, svgIconCheckGreen, svgIconCheckWhite, svgIconCircleNo, svgIconClear, svgIconClose, svgIconDangerT, svgIconDd, svgIconDdM, svgIconDobrodel, svgIconDownChevron, svgIconDownload, svgIconEds, svgIconEds2, svgIconEds2M, svgIconEdsM, svgIconEntry, svgIconErrorHint, svgIconEsia, svgIconEye, svgIconEyeOff, svgIconFile, svgIconFilter, svgIconGoogleapp, svgIconGrid, svgIconHealth, svgIconHealthM, svgIconInfoCircle, svgIconInfoT, svgIconLeftChevron, svgIconListSearch, svgIconLogout, svgIconMailExclamation, svgIconMaxFilter, svgIconMoon, svgIconMy, svgIconMyM, svgIconNews, svgIconNext, svgIconPaperclip, svgIconPenEdit, svgIconPguMo, svgIconPguMoM, svgIconPlug, svgIconPlugD, svgIconPlus, svgIconPreset, svgIconPrev, svgIconPrint, svgIconPrinter, svgIconQuestion, svgIconQuestionWhiteG, svgIconRedClose, svgIconReload, svgIconRightChevron, svgIconRustore, svgIconSearch, svgIconSend, svgIconSetAvatar, svgIconSharedLogo, svgIconSmallRoundLoader, svgIconSort, svgIconStar, svgIconSuccessT, svgIconSun, svgIconTg, svgIconToggleArrowLeft, svgIconToggleArrowRight, svgIconTrash, svgIconTrophy, svgIconUser, svgIconUserEmpty, svgIconUserEmptyD, svgIconVk, svgIconWarningT, t };
|
|
5922
|
+
export { API_URL, AutoHeightDirective, ClickOutsideDirective, CounterDirective, DDDialogRef, DEFAULT_FORMAT, DIALOG_CONFIG, DataEmptyComponent, DateService, Debounce, DeclensionDirective, DestroyService, DialogConfig, DialogService, DisableAfterNCall, Disabled, DropDownPositionDirective, ErrorPageComponent, FetcherService, FilterByKeyPipe, FilterPipe, FixedPositionDirective, FooterComponent, FooterLinkComponent, FooterLinksBlockComponent, HighlightPipe, IDatePeriod, ITab, InterceptorsService, LibAccordionComponent, LibBackButtonComponent, LibButtonComponent, LibCalendarComponent, LibCardComponent, LibCheckboxComponent, LibCommentInputComponent, LibCommonButtonComponent, LibCommonInputTextComponent, LibDateInputComponent, LibDateRangeComponent, LibDisclaimerComponent, LibFileLoaderComponent, LibFileUploadComponent, LibFilterButtonComponent, LibFilterComponent, LibHorizontalScrollComponent, LibImageLoaderComponent, LibInfoCardComponent, LibInputComponent, LibLoaderComponent, LibRadioComponent, LibSearchInputComponent, LibSelectComponent, LibSkeletonComponent, LibSortComponent, LibStepComponent, LibSvgComponent, LibSvgIconComponent, LibSvgViewerComponent, LibTabsFragmentComponent, LibTextareaComponent, ListKeyboardNavigationDirective, MainSharedComponent, ModalBaseComponent, ModalCommonComponent, NotFoundComponent, PhoneMaskDirective, ResizeTextareaDirective, ReversePipe, SafePipe, SelectableItemDirective, SortByValPipe, SvgIconsService, TOAST_CONFIG_TOKEN, TOOLTIP_DATA, TechWorksComponent, ThemeConfigurator, ThemeConstructorService, Throttle, ToastComponent, ToastConfig, ToastData, ToastRef, ToastService, ToastTypeData, TooltipComponent, TooltipDirective, TriangleDirective, ValidatorsService, VhHeightDirective, completeIconSet, defaultToastConfig, provideToast, svgIconActogoneAccept, svgIconAll, svgIconAppgalery, svgIconAppstore, svgIconArrowDownRed, svgIconArrowUpGreen, svgIconBackArrow, svgIconBurger, svgIconCalendar, svgIconCheckGreen, svgIconCheckWhite, svgIconCircleNo, svgIconClear, svgIconClose, svgIconDangerT, svgIconDd, svgIconDdM, svgIconDobrodel, svgIconDownChevron, svgIconDownload, svgIconEds, svgIconEds2, svgIconEds2M, svgIconEdsM, svgIconEntry, svgIconErrorHint, svgIconEsia, svgIconEye, svgIconEyeOff, svgIconFile, svgIconFilter, svgIconGoogleapp, svgIconGrid, svgIconHealth, svgIconHealthM, svgIconInfoCircle, svgIconInfoT, svgIconLeftChevron, svgIconListSearch, svgIconLogout, svgIconMailExclamation, svgIconMaxFilter, svgIconMoon, svgIconMy, svgIconMyM, svgIconNews, svgIconNext, svgIconPaperclip, svgIconPenEdit, svgIconPguMo, svgIconPguMoM, svgIconPlug, svgIconPlugD, svgIconPlus, svgIconPreset, svgIconPrev, svgIconPrint, svgIconPrinter, svgIconQuestion, svgIconQuestionWhiteG, svgIconRedClose, svgIconReload, svgIconRightChevron, svgIconRustore, svgIconSearch, svgIconSend, svgIconSetAvatar, svgIconSharedLogo, svgIconSmallRoundLoader, svgIconSort, svgIconStar, svgIconSuccessT, svgIconSun, svgIconTg, svgIconToggleArrowLeft, svgIconToggleArrowRight, svgIconTrash, svgIconTrophy, svgIconUser, svgIconUserEmpty, svgIconUserEmptyD, svgIconVk, svgIconWarningT, t };
|
|
5752
5923
|
//# sourceMappingURL=morozeckiy-dd-lib.mjs.map
|