@sd-angular/core/bundles/sd-angular-core-select.umd.min.js

Sd Angular Core Lib

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/material/form-field"),require("@angular/material/input"),require("@angular/material/icon"),require("@angular/material/tooltip"),require("@angular/material/progress-spinner"),require("@sd-angular/core/common"),require("object-hash"),require("rxjs"),require("rxjs/operators"),require("uuid"),require("@angular/material/select"),require("@sd-angular/core/translate"),require("@angular/material/checkbox"),require("@sd-angular/core/popover")):"function"==typeof define&&define.amd?define("@sd-angular/core/select",["exports","@angular/core","@angular/common","@angular/forms","@angular/material/form-field","@angular/material/input","@angular/material/icon","@angular/material/tooltip","@angular/material/progress-spinner","@sd-angular/core/common","object-hash","rxjs","rxjs/operators","uuid","@angular/material/select","@sd-angular/core/translate","@angular/material/checkbox","@sd-angular/core/popover"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["sd-angular"]=e["sd-angular"]||{},e["sd-angular"].core=e["sd-angular"].core||{},e["sd-angular"].core.select={}),e.ng.core,e.ng.common,e.ng.forms,e.ng.material.formField,e.ng.material.input,e.ng.material.icon,e.ng.material.tooltip,e.ng.material.progressSpinner,e["sd-angular"].core.common,e.hash,e.rxjs,e.rxjs.operators,e.uuid,e.ng.material.select,e["sd-angular"].core.translate,e.ng.material.checkbox,e["sd-angular"].core.popover)}(this,(function(e,t,n,r,o,i,a,l,s,c,u,d,p,f,m,h,g,v){"use strict";function y(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=y(u);
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */function C(e,t,n,r){return new(n||(n=Promise))((function(o,i){function a(e){try{s(r.next(e))}catch(e){i(e)}}function l(e){try{s(r.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,l)}s((r=r.apply(e,t||[])).next())}))}function w(e,t){var n,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function l(i){return function(l){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=t.call(e,a)}catch(e){i=[6,e],r=0}finally{n=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,l])}}}Object.create;function I(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)a.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function F(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(I(arguments[t]));return e}Object.create;function k(e,t,n,r){if("a"===n&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?r:"a"===n?r.call(e):r?r.value:t.get(e)}function S(e,t,n,r,o){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?o.call(e,n):o?o.value=n:t.set(e,n),n}var x,M,T,O,D,j,q,P,V,R,E,A,W,$,_,B,L,z=function(e){this.templateRef=e};z.decorators=[{type:t.Directive,args:[{selector:"[sdSelectDisplayDef]"}]}],z.ctorParameters=function(){return[{type:t.TemplateRef}]};var K=function(){function e(e,n){var o=this;this.ref=e,this.formConfig=n,x.set(this,void 0),M.set(this,f.v4()),this.disableErrorMessage=!1,this.formControl=new c.SdFormControl,this.searchTerm$=new d.Subject,T.set(this,void 0),O.set(this,new d.BehaviorSubject([])),this.loading=!1,D.set(this,200),this.isRequired=!1,j.set(this,void 0),this.multiple=!1,this.limit=100,this.filtered=!1,this.selectAll=!1,this.copyable=!1,this.copied=!1,this.modelChange=new t.EventEmitter,this.sdChange=new t.EventEmitter,this.sdSelection=new t.EventEmitter,q.set(this,new d.Subscription),P.set(this,void 0),V.set(this,{}),this.allSelected=!1,R.set(this,{}),this.isFocused=!1,E.set(this,(function(){o.formControl.clearValidators(),o.formControl.clearAsyncValidators();var e=[],t=[];o.isRequired&&e.push(r.Validators.required),k(o,j)&&t.push(k(o,_).call(o,k(o,j))),o.inlineError&&e.push(o.customInlineErrorValidator()),o.formControl.setValidators(e),o.formControl.setAsyncValidators(t),o.formControl.updateValueAndValidity()})),A.set(this,(function(e,t){return C(o,void 0,void 0,(function(){var n,r,o,i,a=this;return w(this,(function(l){switch(l.label){case 0:return(null==e?void 0:e.toString())?(n=Array.isArray(e)?e:[e],this.valueField||this.displayField?(this.loading=!0,n.some((function(e){return void 0===k(a,V)[e]}))?[4,t(e,!0).catch((function(){return[]})).finally((function(){return a.loading=!1}))]:[3,2]):[2,n]):[2,[]];case 1:r=l.sent(),o=Array.toObject(r,this.valueField),i=Array.toObject(n.map((function(e){var t,n;return(t={})[null==e?void 0:e.toString()]=((n={})[a.valueField]=e,n[a.displayField]=e,n),t})),this.valueField),S(this,V,Object.assign(Object.assign(Object.assign({},i),k(this,V)),o)),l.label=2;case 2:return[2,n.map((function(e){var t,n;return null!==(n=k(a,V)[null==e?void 0:e.toString()])&&void 0!==n?n:((t={})[a.valueField]=e,t[a.displayField]=e,t)}))]}}))}))})),W.set(this,(function(e,t){return C(o,void 0,void 0,(function(){var n,r,o,i=this;return w(this,(function(a){switch(a.label){case 0:return e=(null==e?void 0:e.toString())||"",n=b.default({checksum:this.cacheChecksum||null,searchText:e}),void 0===k(this,R)[n]&&this.isFocused?(this.loading=!0,[4,t(e).catch((function(){return[]})).finally((function(){return i.loading=!1}))]):[3,2];case 1:r=a.sent(),o=Array.toObject(r,this.valueField),S(this,V,Object.assign(Object.assign({},k(this,V)),o)),k(this,R)[n]=r.union(this.valueField),a.label=2;case 2:return[4,k(this,A).call(this,this.formControl.value,t)];case 3:return[2,F(a.sent(),k(this,R)[n]||[]).union(this.valueField)]}}))}))})),this.onSelectionChange=function(e){var t;o.allSelected=!o.select.options.some((function(e){return!e.selected}));var n=null!==(t=null==e?void 0:e.value)&&void 0!==t?t:"";o.multiple?(o.formControl.setValue(n||[]),k(o,$).call(o,n||[])):(o.searchTerm$.next(""),o.formControl.setValue(n),k(o,$).call(o,n))},this.reValidate=function(){o.formControl.updateValueAndValidity({emitEvent:!0})},$.set(this,(function(e){return C(o,void 0,void 0,(function(){return w(this,(function(t){return Array.isArray(e)?this.modelChange.emit(e):(this.modelChange.emit(e),this.sdSelection.emit({value:e,item:k(this,V)[null==e?void 0:e.toString()]})),[2]}))}))})),this.clear=function(e){null==e||e.stopPropagation(),o.multiple?(o.formControl.setValue([]),o.modelChange.emit([]),o.sdChange.emit([]),o.sdSelection.emit({value:[],items:[]})):(o.formControl.setValue(null),o.modelChange.emit(null),o.sdChange.emit(null),o.sdSelection.emit({value:null,item:null}))},this.onClick=function(){var e;(null===(e=o.sdView)||void 0===e?void 0:e.templateRef)&&(o.formControl.disabled||o.isFocused||o.focus())},this.focus=function(){o.isFocused=!0,setTimeout((function(){var e,t;null===(e=o.select)||void 0===e||e.focus(),null===(t=o.select)||void 0===t||t.open()}),100)},_.set(this,(function(e){return function(t){return C(o,void 0,void 0,(function(){var n,r,o;return w(this,(function(i){switch(i.label){case 0:return n=t.value||null,e&&"function"==typeof e?(r=e(n))instanceof Promise?[4,r]:[3,2]:[3,3];case 1:return(o=i.sent())?[2,{customValidator:o}]:[2,null];case 2:return r?[2,{customValidator:r}]:[2,null];case 3:return[2,null]}}))}))}})),B.set(this,void 0),this.onOpenedChange=function(e){var t,n;if(e)o.isFocused=!0,k(o,x)&&(k(o,x).value=null),S(o,B,b.default({value:o.formControl.value})),o.searchTerm$.next("");else{o.isFocused=!1;var r=b.default({value:o.formControl.value});k(o,B)!==r&&(o.sdChange.emit(o.formControl.value),o.multiple?o.sdSelection.emit({value:o.formControl.value,items:(null===(t=o.formControl.value)||void 0===t?void 0:t.map((function(e){return k(o,V)[null==e?void 0:e.toString()]})))||[]}):o.sdSelection.emit({value:o.formControl.value,item:k(o,V)[null===(n=o.formControl.value)||void 0===n?void 0:n.toString()]})),S(o,B,void 0)}},this.onOptionChange=function(e){null==e||e.hide()},this.trackByKey=function(e,t){return o.valueField?null==t?void 0:t[o.valueField]:t},this.onCopyText=function(e){null==e||e.stopPropagation();var t=k(o,L).call(o);SdUtility.copyToClipboard(t),o.copied=!0,setTimeout((function(){o.copied=!1,o.ref.markForCheck()}),2e3)},L.set(this,(function(){var e,t=o.formControl.value,n=null!==(e=null==t?void 0:t.toString())&&void 0!==e?e:"";return"function"==typeof o.copyText?n=Array.isArray(t)?o.copyText(t,t.map((function(e){return k(o,V)[null==e?void 0:e.toString()]}))):o.copyText(t,k(o,V)[null==t?void 0:t.toString()]):o.copyText&&(n=o.copyText),n}))}return Object.defineProperty(e.prototype,"input",{set:function(e){k(this,x)!==e&&(S(this,x,e),k(this,x).value=null)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"name",{set:function(e){e&&S(this,M,e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_disableErrorMessage",{set:function(e){this.disableErrorMessage=""===e||e,e=""===e||e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"form",{set:function(e){e&&(e instanceof r.NgForm?S(this,T,e.form):S(this,T,e))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_label",{set:function(e){this.label=e,this.qcId=b.default({selector:"sd-select",label:e})},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"model",{set:function(e){this.formControl.value!==e&&this.formControl.setValue(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"items",{set:function(e){S(this,D,0),e?Array.isArray(e)?k(this,O).next(e.filter((function(e){return null!=e}))):(S(this,D,500),k(this,O).next(e)):k(this,O).next([]),this.searchTerm$.next("")},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"required",{set:function(e){this.isRequired=""===e||e,k(this,E).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"validator",{set:function(e){S(this,j,e),k(this,E).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_inlineError",{set:function(e){this.inlineError=e,k(this,E).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{set:function(e){(e=""===e||e)?this.formControl.disable():this.formControl.enable()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_multiple",{set:function(e){this.multiple=""===e||e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_filtered",{set:function(e){this.filtered=""===e||e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_selectAll",{set:function(e){this.selectAll=""===e||e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_copyable",{set:function(e){this.copyable=""===e||e},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){var e,t=this;this.appearance=this.appearance||(null===(e=this.formConfig)||void 0===e?void 0:e.appearance),k(this,q).add(this.formControl.sdChanges.subscribe((function(){t.ref.markForCheck()}))),S(this,P,d.combineLatest([k(this,O).asObservable(),this.searchTerm$.asObservable().pipe(p.startWith(""),p.debounceTime(k(this,D))),this.formControl.valueChanges.pipe(p.startWith(this.formControl.value))]).pipe(p.switchMap((function(e){var n=I(e,3),r=n[0],o=n[1],i=n[2];return C(t,void 0,void 0,(function(){var e,t,n,a=this;return w(this,(function(l){switch(l.label){case 0:return i=this.formControl.value,"function"!=typeof r?[3,2]:[4,k(this,W).call(this,o,r)];case 1:return[2,l.sent()];case 2:return S(this,V,r.toObject(this.valueField)),e=Array.isArray(i),t=!!this.valueField&&!!this.displayField,n=r.filter((function(n){var r=t?n[a.valueField]:n,l=t?n[a.displayField]:n;return!(!String.aliasIncludes(r,o)&&!String.aliasIncludes(l,o))||(e?i.some((function(e){return e===r})):i===r)})),r.length<=this.limit?[2,n]:[2,n.sort((function(n,r){var o=t?n[a.valueField]:n,l=t?r[a.valueField]:r,s=0;return e?(s=i.some((function(e){return e===o}))?1:0,(i.some((function(e){return e===l}))?1:0)-s):(i===l?1:0)-(s=i===o?1:0)}))]}}))}))})))),this.selectedItems=d.combineLatest([k(this,O).asObservable(),this.formControl.valueChanges.pipe(p.startWith(this.formControl.value))]).pipe(p.switchMap((function(e){var n=I(e,2),r=n[0],o=n[1];return C(t,void 0,void 0,(function(){var e,t=this;return w(this,(function(n){switch(n.label){case 0:return(null==(o=this.formControl.value)?void 0:o.toString())?(e=Array.isArray(o)?o:[o],this.valueField?"function"!=typeof r?[3,2]:[4,k(this,A).call(this,o,r)]:[2,e]):[2,[]];case 1:return[2,n.sent()];case 2:return[2,e.map((function(e){var n;return(null==r?void 0:r.find((function(n){return n[t.valueField]===e})))||((n={})[t.valueField]=e,n[t.displayField]=e,n)}))]}}))}))}))),this.filteredItems=k(this,P).pipe(p.map((function(e){return e.paging(t.limit)}))),this.display=this.selectedItems.pipe(p.map((function(e){var n;return null===(n=null==e?void 0:e.map((function(e){return t.displayField?e[t.displayField]:e})))||void 0===n?void 0:n.join(", ")}))),k(this,q).add(this.selectedItems.subscribe((function(e){var n;return t.tooltip=null===(n=null==e?void 0:e.map((function(e){return t.valueField?"• "+e[t.valueField]+" - "+e[t.displayField]:"• "+e})))||void 0===n?void 0:n.join("\n")})))},e.prototype.ngAfterViewInit=function(){var e;null===(e=k(this,T))||void 0===e||e.addControl(k(this,M),this.formControl)},e.prototype.ngOnDestroy=function(){var e;null===(e=k(this,T))||void 0===e||e.removeControl(k(this,M)),k(this,q).unsubscribe()},e.prototype.customInlineErrorValidator=function(){return function(e){return{inlineError:!0}}},e.prototype.onSelectAll=function(){this.allSelected?this.formControl.setValue(this.select.options.map((function(e){return e.value}))):this.formControl.setValue([]),k(this,$).call(this,this.formControl.value)},e}();x=new WeakMap,M=new WeakMap,T=new WeakMap,O=new WeakMap,D=new WeakMap,j=new WeakMap,q=new WeakMap,P=new WeakMap,V=new WeakMap,R=new WeakMap,E=new WeakMap,A=new WeakMap,W=new WeakMap,$=new WeakMap,_=new WeakMap,B=new WeakMap,L=new WeakMap,K.decorators=[{type:t.Component,args:[{selector:"sd-select",template:'<ng-container *ngIf="!appearance && sdLabelDef?.templateRef">\r\n  <ng-container *ngTemplateOutlet="sdLabelDef.templateRef"> </ng-container>\r\n</ng-container>\r\n<label *ngIf="!appearance && label && !sdLabelDef?.templateRef" class="d-block mb-0 T14M"\r\n  >{{ label }} <span class="text-danger mb-2" *ngIf="isRequired">*</span></label\r\n>\r\n<div\r\n  class="d-flex align-items-center"\r\n  [class.sd-view]="sdView?.templateRef"\r\n  [class.c-focused]="isFocused"\r\n  [class.c-disabled]="formControl.disabled"\r\n  (click)="onClick()">\r\n  <ng-container *ngIf="sdView?.templateRef && !isFocused; else default">\r\n    <ng-container *ngTemplateOutlet="sdView.templateRef; context: { value: formControl.value, selectedItems: selectedItems | async }">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field\r\n      class="sd-md"\r\n      [ngClass]="{ \'sd-sm\': size === \'sm\', \'no-padding-wrapper\': disableErrorMessage }"\r\n      [appearance]="appearance || \'outline\'">\r\n      <mat-label *ngIf="appearance && label">{{ label }}</mat-label>\r\n      <mat-select\r\n        *ngIf="multiple"\r\n        #select\r\n        [formControl]="formControl"\r\n        [placeholder]="placeholder || (appearance ? label : \'\')"\r\n        multiple\r\n        (selectionChange)="onSelectionChange($event)"\r\n        disableOptionCentering="true"\r\n        panelClass="sd-select-panel"\r\n        [class.sd-selected]="!isRequired && formControl?.value?.length"\r\n        [required]="isRequired"\r\n        (openedChange)="onOpenedChange($event)"\r\n        [attr.data-qclabel]="label"\r\n        [attr.data-qcid]="qcId"\r\n        matTooltipClass="sd-multiline-tooltip"\r\n        [matTooltipDisabled]="!formControl.disabled || !formControl?.value?.length"\r\n        [matTooltip]="tooltip">\r\n        <mat-select-trigger>\r\n          {{ display | async }}\r\n        </mat-select-trigger>\r\n        <mat-option *ngIf="filtered" class="sd-filtered-input" (keyup.Space)="$event.stopPropagation()" disabled="true">\r\n          <mat-form-field class="sd-md" appearance="outline">\r\n            <mat-icon matPrefix>search</mat-icon>\r\n            <input\r\n              aria-hidden="true"\r\n              #input\r\n              placeholder="{{ \'Search\' | sdTranslate }}"\r\n              matInput\r\n              autocomplete="off"\r\n              (keydown)="$event.stopPropagation()"\r\n              (keyup)="searchTerm$.next($event.target.value)" />\r\n          </mat-form-field>\r\n        </mat-option>\r\n        <ng-container *ngIf="multiple && selectAll">\r\n          <mat-checkbox class="mat-option" [(ngModel)]="allSelected" [ngModelOptions]="{ standalone: true }" (change)="onSelectAll()">\r\n            Tất cả</mat-checkbox\r\n          >\r\n        </ng-container>\r\n        <ng-container *ngIf="valueField && displayField">\r\n          <mat-option *ngFor="let item of filteredItems | async; trackBy: trackByKey" [value]="item[valueField]">\r\n            <div matTooltipPosition="above" [matTooltip]="item[displayField]">\r\n              <ng-container *ngIf="selectDisplayDef?.templateRef">\r\n                <ng-container *ngTemplateOutlet="selectDisplayDef.templateRef; context: { item: item }"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf="!selectDisplayDef?.templateRef">\r\n                {{ item[displayField] }}\r\n              </ng-container>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n        <ng-container *ngIf="!valueField && !displayField">\r\n          <mat-option *ngFor="let item of filteredItems | async; trackBy: trackByKey" [value]="item">\r\n            <div matTooltipPosition="above" [matTooltip]="item">\r\n              <ng-container *ngIf="selectDisplayDef?.templateRef">\r\n                <ng-container *ngTemplateOutlet="selectDisplayDef.templateRef; context: { item: item }"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf="!selectDisplayDef?.templateRef">\r\n                {{ item }}\r\n              </ng-container>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-select\r\n        *ngIf="!multiple"\r\n        #select\r\n        [formControl]="formControl"\r\n        [placeholder]="placeholder || (appearance ? label : \'\')"\r\n        (selectionChange)="onSelectionChange($event)"\r\n        disableOptionCentering="true"\r\n        panelClass="sd-select-panel"\r\n        [class.sd-selected]="!isRequired && formControl?.value != null"\r\n        [required]="isRequired"\r\n        (openedChange)="onOpenedChange($event)"\r\n        [attr.data-qclabel]="label"\r\n        [attr.data-qcid]="qcId">\r\n        <mat-select-trigger>\r\n          {{ display | async }}\r\n        </mat-select-trigger>\r\n        <mat-option *ngIf="filtered" class="sd-filtered-input" (keyup.Space)="$event.stopPropagation()" disabled="true">\r\n          <mat-form-field class="sd-md" appearance="outline">\r\n            <mat-icon matPrefix>search</mat-icon>\r\n            <input\r\n              aria-hidden="true"\r\n              #input\r\n              placeholder="{{ \'Search\' | sdTranslate }}"\r\n              matInput\r\n              autocomplete="off"\r\n              (keydown)="$event.stopPropagation()"\r\n              (keyup)="searchTerm$.next($event.target.value)" />\r\n          </mat-form-field>\r\n        </mat-option>\r\n        <ng-container *ngIf="valueField && displayField">\r\n          <mat-option *ngFor="let item of filteredItems | async; trackBy: trackByKey" [value]="item[valueField]">\r\n            <div matTooltipPosition="above" [matTooltip]="item[displayField]">\r\n              <ng-container *ngIf="selectDisplayDef?.templateRef">\r\n                <ng-container *ngTemplateOutlet="selectDisplayDef.templateRef; context: { item: item }"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf="!selectDisplayDef?.templateRef">\r\n                {{ item[displayField] }}\r\n              </ng-container>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n        <ng-container *ngIf="!valueField && !displayField">\r\n          <mat-option *ngFor="let item of filteredItems | async; trackBy: trackByKey" [value]="item">\r\n            <div matTooltipPosition="above" [matTooltip]="item">\r\n              <ng-container *ngIf="selectDisplayDef?.templateRef">\r\n                <ng-container *ngTemplateOutlet="selectDisplayDef.templateRef; context: { item: item }"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf="!selectDisplayDef?.templateRef">\r\n                {{ item }}\r\n              </ng-container>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <ng-content select="[sdSuffixIcon]" matSuffix></ng-content>\r\n      <svg\r\n        #copyTooltip="matTooltip"\r\n        *ngIf="(multiple ? formControl?.value?.length : formControl?.value != null) && copyable"\r\n        matSuffix\r\n        [matTooltip]="copied ? \'Copied\' : \'Copy\'"\r\n        class="icon-copy"\r\n        focusable="false"\r\n        xmlns="http://www.w3.org/2000/svg"\r\n        viewBox="0 0 448 512"\r\n        (click)="onCopyText($event)">\r\n        <path\r\n          d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path>\r\n      </svg>\r\n      \r\n      <mat-icon\r\n        *ngIf="(multiple ? formControl?.value?.length : formControl?.value != null) && !isRequired && !formControl.disabled"\r\n        class="pointer sd-suffix-icon"\r\n        (click)="clear($event)"\r\n        matSuffix\r\n        >cancel\r\n      </mat-icon>\r\n      <mat-error *ngIf="formControl.errors?.required">\r\n        <ng-container *ngIf="!disableErrorMessage">{{ \'This field is required\' | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.customValidator">\r\n        <ng-container *ngIf="!disableErrorMessage">{{ formControl?.errors?.customValidator }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl.errors?.inlineError">\r\n        <ng-container *ngIf="!disableErrorMessage">{{ inlineError }}</ng-container>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n\x3c!-- <sd-popover #popoverValues="sdPopover" width="auto">\r\n  <ng-container *ngIf="formControl?.value?.length">\r\n    <ng-container *sdLet="selectedItems | async as items">\r\n      <div *ngFor="let item of items">\r\n        <strong>{{ item[valueField] }}</strong> - {{ item[displayField] }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</sd-popover> --\x3e\r\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none}:host ::ng-deep .sd-selected .mat-select-arrow{border:none}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field mat-select.mat-select-disabled .mat-select-value{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}:host ::ng-deep .mat-form-field:hover .icon-copy{opacity:1}:host ::ng-deep .mat-form-field .icon-copy{cursor:pointer;fill:rgba(0,0,0,.5);height:.9em;opacity:0;transition:opacity .2s linear;width:.9em}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input{background-color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:10}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline{width:100%}::ng-deep .sd-select-panel .mat-option.sd-filtered-input mat-pseudo-checkbox{display:none}::ng-deep .mat-select-panel .mat-option.sd-filtered-input{height:auto}::ng-deep .sd-select-panel .mat-option.sd-filtered-input input{color:#000}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field-prefix .mat-icon{margin-right:0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper{padding:10px 0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper .mat-form-field-outline{background-color:rgba(0,0,0,.04)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}::ng-deep .mat-select-panel{overflow:auto!important}"]}]}],K.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:void 0,decorators:[{type:t.Inject,args:[c.FORM_CONFIG]},{type:t.Optional}]}]},K.propDecorators={input:[{type:t.ViewChild,args:[i.MatInput]}],select:[{type:t.ViewChild,args:["select"]}],name:[{type:t.Input}],appearance:[{type:t.Input}],_disableErrorMessage:[{type:t.Input,args:["disableErrorMessage"]}],size:[{type:t.Input}],form:[{type:t.Input}],_label:[{type:t.Input,args:["label"]}],placeholder:[{type:t.Input}],model:[{type:t.Input}],items:[{type:t.Input}],valueField:[{type:t.Input}],displayField:[{type:t.Input}],cacheChecksum:[{type:t.Input}],required:[{type:t.Input}],validator:[{type:t.Input}],_inlineError:[{type:t.Input,args:["inlineError"]}],disabled:[{type:t.Input}],_multiple:[{type:t.Input,args:["multiple"]}],limit:[{type:t.Input}],_filtered:[{type:t.Input,args:["filtered"]}],selectDisplayDef:[{type:t.ContentChild,args:[z]}],_selectAll:[{type:t.Input,args:["selectAll"]}],copyTooltip:[{type:t.ViewChild,args:["copyTooltip"]}],_copyable:[{type:t.Input,args:["copyable"]}],copyText:[{type:t.Input}],modelChange:[{type:t.Output}],sdChange:[{type:t.Output}],sdSelection:[{type:t.Output}],sdLabelDef:[{type:t.ContentChild,args:[c.SdLabelDefDirective]}],sdView:[{type:t.ContentChild,args:[c.SdViewDefDirective]}]};var H=function(){};H.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,r.FormsModule,r.ReactiveFormsModule,i.MatInputModule,l.MatTooltipModule,o.MatFormFieldModule,a.MatIconModule,m.MatSelectModule,s.MatProgressSpinnerModule,g.MatCheckboxModule,h.SdTranslateModule,c.SdCommonModule,v.SdPopoverModule],declarations:[K,z],exports:[K,z,c.SdCommonModule],providers:[]}]}],e.SdSelect=K,e.SdSelectDisplayDefDirective=z,e.SdSelectModule=H,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=sd-angular-core-select.umd.min.js.map