@morozeckiy/dd-lib 0.9.3 → 0.9.5

package/fesm2022/morozeckiy-dd-lib.mjs

@@ -922,11 +922,11 @@ class TooltipComponent {
         this.tooltipData = tooltipData;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TooltipComponent, deps: [{ token: TOOLTIP_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: TooltipComponent, isStandalone: true, selector: "dd-tooltip", ngImport: i0, template: "<div class=\"tooltip-container\">\r\n  @if (asString; as string) {\r\n  {{ string }}\r\n  } @if (asTemplate; as template) {\r\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\r\n  }\r\n  <svg class=\"tooltip-container__triangle\" width=\"16\" height=\"16\">\r\n    <polyline points=\"8,0 0,8 8,16\"></polyline>\r\n  </svg>\r\n</div>\r\n", styles: [":host{position:relative}.tooltip-container{position:relative;display:block;max-width:312px;padding:6px 12px;background:var(--tooltip-bgc);border-radius:8px;box-sizing:border-box;box-shadow:0 14px 64px -4px #18274b0f,0 8px 22px -6px #18274b0f}.tooltip-container__triangle{width:16px;height:16px;position:absolute;fill:var(--white-color);stroke:var(--white-color);box-shadow:#18274b0f 0 14px 64px -4px,#18274b0f 0 8px 22px -6px}:host-context(.left) svg{top:calc(50% - 8px);right:-8px;rotate:180deg}:host-context(.right) svg{top:calc(50% - 8px);left:-8px}:host-context(.top) svg{right:calc(50% - 8px);bottom:-8px;rotate:-90deg}:host-context(.bottom) svg{right:calc(50% - 8px);top:-8px;rotate:90deg}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: TooltipComponent, isStandalone: true, selector: "dd-tooltip", ngImport: i0, template: "<div class=\"tooltip-container\">\r\n  @if (asString; as string) {\r\n    {{ string }}\r\n  }\r\n  @if (asTemplate; as template) {\r\n    <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\r\n  }\r\n  <svg class=\"tooltip-container__triangle\" width=\"16\" height=\"16\">\r\n    <polyline points=\"8,0 0,8 8,16\"></polyline>\r\n  </svg>\r\n</div>\r\n", styles: [":host{position:relative}.tooltip-container{position:relative;display:block;max-width:312px;padding:6px 12px;background:var(--tooltip-bgc);border-radius:8px;box-sizing:border-box;box-shadow:0 14px 64px -4px #18274b0f,0 8px 22px -6px #18274b0f}.tooltip-container__triangle{width:16px;height:16px;position:absolute;fill:var(--white-color);stroke:var(--white-color);box-shadow:#18274b0f 0 14px 64px -4px,#18274b0f 0 8px 22px -6px}:host-context(.left) svg{top:calc(50% - 8px);right:-8px;rotate:180deg}:host-context(.right) svg{top:calc(50% - 8px);left:-8px}:host-context(.top) svg{right:calc(50% - 8px);bottom:-8px;rotate:-90deg}:host-context(.bottom) svg{right:calc(50% - 8px);top:-8px;rotate:90deg}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tooltip-container\">\r\n  @if (asString; as string) {\r\n  {{ string }}\r\n  } @if (asTemplate; as template) {\r\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\r\n  }\r\n  <svg class=\"tooltip-container__triangle\" width=\"16\" height=\"16\">\r\n    <polyline points=\"8,0 0,8 8,16\"></polyline>\r\n  </svg>\r\n</div>\r\n", styles: [":host{position:relative}.tooltip-container{position:relative;display:block;max-width:312px;padding:6px 12px;background:var(--tooltip-bgc);border-radius:8px;box-sizing:border-box;box-shadow:0 14px 64px -4px #18274b0f,0 8px 22px -6px #18274b0f}.tooltip-container__triangle{width:16px;height:16px;position:absolute;fill:var(--white-color);stroke:var(--white-color);box-shadow:#18274b0f 0 14px 64px -4px,#18274b0f 0 8px 22px -6px}:host-context(.left) svg{top:calc(50% - 8px);right:-8px;rotate:180deg}:host-context(.right) svg{top:calc(50% - 8px);left:-8px}:host-context(.top) svg{right:calc(50% - 8px);bottom:-8px;rotate:-90deg}:host-context(.bottom) svg{right:calc(50% - 8px);top:-8px;rotate:90deg}\n"] }]
+            args: [{ selector: 'dd-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tooltip-container\">\r\n  @if (asString; as string) {\r\n    {{ string }}\r\n  }\r\n  @if (asTemplate; as template) {\r\n    <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\r\n  }\r\n  <svg class=\"tooltip-container__triangle\" width=\"16\" height=\"16\">\r\n    <polyline points=\"8,0 0,8 8,16\"></polyline>\r\n  </svg>\r\n</div>\r\n", styles: [":host{position:relative}.tooltip-container{position:relative;display:block;max-width:312px;padding:6px 12px;background:var(--tooltip-bgc);border-radius:8px;box-sizing:border-box;box-shadow:0 14px 64px -4px #18274b0f,0 8px 22px -6px #18274b0f}.tooltip-container__triangle{width:16px;height:16px;position:absolute;fill:var(--white-color);stroke:var(--white-color);box-shadow:#18274b0f 0 14px 64px -4px,#18274b0f 0 8px 22px -6px}:host-context(.left) svg{top:calc(50% - 8px);right:-8px;rotate:180deg}:host-context(.right) svg{top:calc(50% - 8px);left:-8px}:host-context(.top) svg{right:calc(50% - 8px);bottom:-8px;rotate:-90deg}:host-context(.bottom) svg{right:calc(50% - 8px);top:-8px;rotate:90deg}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [TOOLTIP_DATA]
@@ -1052,7 +1052,7 @@ class TooltipDirective {
             providers: [
                 {
                     provide: TOOLTIP_DATA,
-                    useValue: this.ddTooltip.toString(),
+                    useValue: this.ddTooltip,
                 },
             ],
         });
@@ -1800,7 +1800,9 @@ class DDDialogRef {
     constructor(overlayRef) {
         this.overlayRef = overlayRef;
         this.onClose$ = new Subject();
+        this.onEmitEvent$ = new Subject();
         this.onClose = this.onClose$.asObservable();
+        this.onEmitEvent = this.onEmitEvent$.asObservable();
         this.onBackdropClick = this.overlayRef.backdropClick();
     }
     /**
@@ -1812,6 +1814,10 @@ class DDDialogRef {
         this.onClose$.next(res);
         this.onClose$.complete();
     }
+    emitEvent(res) {
+        this.onEmitEvent$.next(res);
+        this.onEmitEvent$.complete();
+    }
 }
 
 const DIALOG_CONFIG = new InjectionToken('dialog config');
@@ -3426,6 +3432,7 @@ class LibSearchInputComponent extends LibCommonInputTextComponent {
         this.delay = 0;
         this.loaded$ = new BehaviorSubject(false);
         this.keyupEvent = new EventEmitter();
+        this.clipboard = new EventEmitter();
         this.selectedItem = new EventEmitter();
         this.keyUp = new Subject();
         this.itemSize = this.keyDesc && this.keyTitle ? 90 : this.keyDesc && !this.keyTitle ? 50 : 40;
@@ -3443,7 +3450,7 @@ class LibSearchInputComponent extends LibCommonInputTextComponent {
                     this.loaded$.next(true);
                 }
             }), map(event => event.target?.value), debounceTime(this.debounceTime), 
-            // distinctUntilChanged(), надо ли?
+            // distinctUntilChanged(),
             mergeMap(search => of(search).pipe(delay(this.delay))), takeUntilDestroyed(this.destroy$))
                 .subscribe({
                 next: (str) => {
@@ -3460,6 +3467,18 @@ class LibSearchInputComponent extends LibCommonInputTextComponent {
             this.changeValueSub(this.control);
         }
     }
+    clipboardEvent(event) {
+        if (this.fetchMode) {
+            this.loaded$.next(true);
+        }
+        setTimeout(() => {
+            const input = event.target.value;
+            this.keyupEvent.emit(input);
+            this.loaded$.next(false);
+        });
+        const str = event.clipboardData?.getData('text');
+        this.clipboard.emit(str);
+    }
     changeValueSub(control) {
         control.valueChanges
             .pipe(takeUntilDestroyed(this.destroy$))
@@ -3514,13 +3533,13 @@ class LibSearchInputComponent extends LibCommonInputTextComponent {
         this.changeDetection.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibSearchInputComponent, deps: [{ token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: LibSearchInputComponent, isStandalone: true, selector: "dd-lib-search-input", inputs: { splitTitle: "splitTitle", keyTitle: "keyTitle", keyDesc: "keyDesc", keyValue: "keyValue", styleInput: "styleInput", inputStyle: "inputStyle", searchData: "searchData", debounceTime: "debounceTime", delay: "delay", idClose: "idClose", loaded$: "loaded$" }, outputs: { keyupEvent: "keyupEvent", selectedItem: "selectedItem" }, host: { listeners: { "window:resize": "onWindowScroll()", "window:scroll": "onWindowScroll()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: LibSearchInputComponent, isStandalone: true, selector: "dd-lib-search-input", inputs: { splitTitle: "splitTitle", keyTitle: "keyTitle", keyDesc: "keyDesc", keyValue: "keyValue", styleInput: "styleInput", inputStyle: "inputStyle", searchData: "searchData", debounceTime: "debounceTime", delay: "delay", idClose: "idClose", loaded$: "loaded$" }, outputs: { keyupEvent: "keyupEvent", clipboard: "clipboard", selectedItem: "selectedItem" }, host: { listeners: { "window:resize": "onWindowScroll()", "window:scroll": "onWindowScroll()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LibSearchInputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-search-input\">\r\n  <label [for]=\"id\" class=\"lib-search-input__title\">\r\n    {{ label }}\r\n    @if (required) {\r\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n    }\r\n  </label>\r\n  <div class=\"pos-relative\">\r\n    <dd-lib-svg-icon (click)=\"forceChange()\" class=\"search-icon\" icon=\"search\"></dd-lib-svg-icon>\r\n    <input\r\n      #searchInput\r\n      (keyup)=\"keyUp.next($event)\"\r\n      (keyup.enter)=\"forceChange()\"\r\n      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"type || 'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.round]=\"styleInput === 'round'\"\r\n      [class.white]=\"inputStyle === 'white'\"\r\n      [class.invalid]=\"showError\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      class=\"search-input\" />\r\n    <dd-lib-svg-icon\r\n      (click)=\"onClear()\"\r\n      [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n      class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n    @if (loaded$ | async) {\r\n      <div class=\"loading-icon\">\r\n        <dd-lib-loader></dd-lib-loader>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-search-input__error\">{{ errorText }}</div>\r\n  }\r\n\r\n  @if (data?.length) {\r\n    <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\r\n    @for (item of data; track item) {\r\n    <div (click)=\"onClickSearchItem(item)\" class=\"search-result\">\r\n      @if (getTitle(item); as title) {\r\n        <div [innerHTML]=\"title | highlight: value | safe: 'html'\" class=\"search-result__title\"></div>\r\n      }\r\n      @if (getDesc(item); as desc) {\r\n        <div [innerHTML]=\"desc | highlight: value | safe: 'html'\" class=\"search-result__desc\"></div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.lib-search-input{position:relative}.lib-search-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-search-input input{width:100%;height:48px;padding:16px 16px 15px 44px;border-radius:8px;border:none;color:var(--light-black-color);background-color:var(--input-gray-bgc)}.lib-search-input input.white{background-color:var(--white-color);border:1px solid var(--primary-gray-color)}.lib-search-input input.invalid,.lib-search-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-search-input .round{border-radius:24px}.lib-search-input .search-icon{position:absolute;left:16px;top:14px;cursor:pointer}.lib-search-input .clear-icon{position:absolute;right:16px;top:14px;cursor:pointer}.lib-search-input .loading-icon{position:absolute;right:40px;top:12px}.lib-search-input .search-result{font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left;cursor:pointer}.lib-search-input .search-result:hover{opacity:.8}.lib-search-input .search-result:last-child .search-result__desc{border:none;padding-bottom:0}.lib-search-input .search-result__title{color:var(--second-gray-color);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;border-bottom:1px solid var(--gray-color-200)}.lib-search-input dd-lib-card{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;box-shadow:var(--main-card-shadow);overflow:auto}.lib-search-input dd-lib-card.top{bottom:50px;top:unset}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}.lib-search-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-search-input\">\r\n  <label [for]=\"id\" class=\"lib-search-input__title\">\r\n    {{ label }}\r\n    @if (required) {\r\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n    }\r\n  </label>\r\n  <div class=\"pos-relative\">\r\n    <dd-lib-svg-icon (click)=\"forceChange()\" class=\"search-icon\" icon=\"search\"></dd-lib-svg-icon>\r\n    <input\r\n      #searchInput\r\n      (keyup)=\"keyUp.next($event)\"\r\n      (keyup.enter)=\"forceChange()\"\r\n      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\r\n      (paste)=\"clipboardEvent($event)\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"type || 'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.round]=\"styleInput === 'round'\"\r\n      [class.white]=\"inputStyle === 'white'\"\r\n      [class.invalid]=\"showError\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      class=\"search-input\" />\r\n    <dd-lib-svg-icon\r\n      (click)=\"onClear()\"\r\n      [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n      class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n    @if (loaded$ | async) {\r\n      <div class=\"loading-icon\">\r\n        <dd-lib-loader></dd-lib-loader>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-search-input__error\">{{ errorText }}</div>\r\n  }\r\n\r\n  @if (data?.length) {\r\n    <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\r\n    @for (item of data; track item) {\r\n    <div (click)=\"onClickSearchItem(item)\" class=\"search-result\">\r\n      @if (getTitle(item); as title) {\r\n        <div [innerHTML]=\"title | highlight: value | safe: 'html'\" class=\"search-result__title\"></div>\r\n      }\r\n      @if (getDesc(item); as desc) {\r\n        <div [innerHTML]=\"desc | highlight: value | safe: 'html'\" class=\"search-result__desc\"></div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.lib-search-input{position:relative}.lib-search-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-search-input input{width:100%;height:48px;padding:16px 16px 15px 44px;border-radius:8px;border:none;color:var(--light-black-color);background-color:var(--input-gray-bgc)}.lib-search-input input.white{background-color:var(--white-color);border:1px solid var(--primary-gray-color)}.lib-search-input input.invalid,.lib-search-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-search-input .round{border-radius:24px}.lib-search-input .search-icon{position:absolute;left:16px;top:14px;cursor:pointer}.lib-search-input .clear-icon{position:absolute;right:16px;top:14px;cursor:pointer}.lib-search-input .loading-icon{position:absolute;right:40px;top:12px}.lib-search-input .search-result{font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left;cursor:pointer}.lib-search-input .search-result:hover{opacity:.8}.lib-search-input .search-result:last-child .search-result__desc{border:none;padding-bottom:0}.lib-search-input .search-result__title{color:var(--second-gray-color);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;border-bottom:1px solid var(--gray-color-200)}.lib-search-input dd-lib-card{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;box-shadow:var(--main-card-shadow);overflow:auto}.lib-search-input dd-lib-card.top{bottom:50px;top:unset}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}.lib-search-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibSearchInputComponent, decorators: [{
             type: Component,
@@ -3530,7 +3549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                             useExisting: forwardRef(() => LibSearchInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"lib-search-input\">\r\n  <label [for]=\"id\" class=\"lib-search-input__title\">\r\n    {{ label }}\r\n    @if (required) {\r\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n    }\r\n  </label>\r\n  <div class=\"pos-relative\">\r\n    <dd-lib-svg-icon (click)=\"forceChange()\" class=\"search-icon\" icon=\"search\"></dd-lib-svg-icon>\r\n    <input\r\n      #searchInput\r\n      (keyup)=\"keyUp.next($event)\"\r\n      (keyup.enter)=\"forceChange()\"\r\n      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"type || 'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.round]=\"styleInput === 'round'\"\r\n      [class.white]=\"inputStyle === 'white'\"\r\n      [class.invalid]=\"showError\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      class=\"search-input\" />\r\n    <dd-lib-svg-icon\r\n      (click)=\"onClear()\"\r\n      [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n      class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n    @if (loaded$ | async) {\r\n      <div class=\"loading-icon\">\r\n        <dd-lib-loader></dd-lib-loader>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-search-input__error\">{{ errorText }}</div>\r\n  }\r\n\r\n  @if (data?.length) {\r\n    <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\r\n    @for (item of data; track item) {\r\n    <div (click)=\"onClickSearchItem(item)\" class=\"search-result\">\r\n      @if (getTitle(item); as title) {\r\n        <div [innerHTML]=\"title | highlight: value | safe: 'html'\" class=\"search-result__title\"></div>\r\n      }\r\n      @if (getDesc(item); as desc) {\r\n        <div [innerHTML]=\"desc | highlight: value | safe: 'html'\" class=\"search-result__desc\"></div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.lib-search-input{position:relative}.lib-search-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-search-input input{width:100%;height:48px;padding:16px 16px 15px 44px;border-radius:8px;border:none;color:var(--light-black-color);background-color:var(--input-gray-bgc)}.lib-search-input input.white{background-color:var(--white-color);border:1px solid var(--primary-gray-color)}.lib-search-input input.invalid,.lib-search-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-search-input .round{border-radius:24px}.lib-search-input .search-icon{position:absolute;left:16px;top:14px;cursor:pointer}.lib-search-input .clear-icon{position:absolute;right:16px;top:14px;cursor:pointer}.lib-search-input .loading-icon{position:absolute;right:40px;top:12px}.lib-search-input .search-result{font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left;cursor:pointer}.lib-search-input .search-result:hover{opacity:.8}.lib-search-input .search-result:last-child .search-result__desc{border:none;padding-bottom:0}.lib-search-input .search-result__title{color:var(--second-gray-color);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;border-bottom:1px solid var(--gray-color-200)}.lib-search-input dd-lib-card{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;box-shadow:var(--main-card-shadow);overflow:auto}.lib-search-input dd-lib-card.top{bottom:50px;top:unset}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}.lib-search-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}\n"] }]
+                    ], template: "<div class=\"lib-search-input\">\r\n  <label [for]=\"id\" class=\"lib-search-input__title\">\r\n    {{ label }}\r\n    @if (required) {\r\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n    }\r\n  </label>\r\n  <div class=\"pos-relative\">\r\n    <dd-lib-svg-icon (click)=\"forceChange()\" class=\"search-icon\" icon=\"search\"></dd-lib-svg-icon>\r\n    <input\r\n      #searchInput\r\n      (keyup)=\"keyUp.next($event)\"\r\n      (keyup.enter)=\"forceChange()\"\r\n      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\r\n      (paste)=\"clipboardEvent($event)\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"type || 'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.round]=\"styleInput === 'round'\"\r\n      [class.white]=\"inputStyle === 'white'\"\r\n      [class.invalid]=\"showError\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      class=\"search-input\" />\r\n    <dd-lib-svg-icon\r\n      (click)=\"onClear()\"\r\n      [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n      class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n    @if (loaded$ | async) {\r\n      <div class=\"loading-icon\">\r\n        <dd-lib-loader></dd-lib-loader>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-search-input__error\">{{ errorText }}</div>\r\n  }\r\n\r\n  @if (data?.length) {\r\n    <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\r\n    @for (item of data; track item) {\r\n    <div (click)=\"onClickSearchItem(item)\" class=\"search-result\">\r\n      @if (getTitle(item); as title) {\r\n        <div [innerHTML]=\"title | highlight: value | safe: 'html'\" class=\"search-result__title\"></div>\r\n      }\r\n      @if (getDesc(item); as desc) {\r\n        <div [innerHTML]=\"desc | highlight: value | safe: 'html'\" class=\"search-result__desc\"></div>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.lib-search-input{position:relative}.lib-search-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-search-input input{width:100%;height:48px;padding:16px 16px 15px 44px;border-radius:8px;border:none;color:var(--light-black-color);background-color:var(--input-gray-bgc)}.lib-search-input input.white{background-color:var(--white-color);border:1px solid var(--primary-gray-color)}.lib-search-input input.invalid,.lib-search-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-search-input .round{border-radius:24px}.lib-search-input .search-icon{position:absolute;left:16px;top:14px;cursor:pointer}.lib-search-input .clear-icon{position:absolute;right:16px;top:14px;cursor:pointer}.lib-search-input .loading-icon{position:absolute;right:40px;top:12px}.lib-search-input .search-result{font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left;cursor:pointer}.lib-search-input .search-result:hover{opacity:.8}.lib-search-input .search-result:last-child .search-result__desc{border:none;padding-bottom:0}.lib-search-input .search-result__title{color:var(--second-gray-color);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;border-bottom:1px solid var(--gray-color-200)}.lib-search-input dd-lib-card{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;box-shadow:var(--main-card-shadow);overflow:auto}.lib-search-input dd-lib-card.top{bottom:50px;top:unset}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}.lib-search-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ControlContainer, decorators: [{
                     type: Optional
                 }, {
@@ -3561,6 +3580,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 type: Input
             }], keyupEvent: [{
                 type: Output
+            }], clipboard: [{
+                type: Output
             }], selectedItem: [{
                 type: Output
             }], onWindowScroll: [{