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

Sd Angular Core Lib

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(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/select"),require("@sd-angular/core/common"),require("@sd-angular/core/select"),require("@sd-angular/core/translate"),require("@angular/material/checkbox"),require("@angular/material/progress-spinner")):"function"==typeof define&&define.amd?define("@sd-angular/core/select-editor",["exports","@angular/core","@angular/common","@angular/forms","@angular/material/form-field","@angular/material/input","@angular/material/icon","@angular/material/tooltip","@angular/material/select","@sd-angular/core/common","@sd-angular/core/select","@sd-angular/core/translate","@angular/material/checkbox","@angular/material/progress-spinner"],n):n(((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-editor"]={}),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.select,e["sd-angular"].core.common,e["sd-angular"].core.select,e["sd-angular"].core.translate,e.ng.material.checkbox,e.ng.material.progressSpinner)}(this,(function(e,n,t,r,a,o,l,i,s,d,c,m,p,f){"use strict";
/*! *****************************************************************************
    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.
    ***************************************************************************** */var g=function(e,n){return(g=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])})(e,n)};Object.create;Object.create;var u=function(e){function t(t,r){var a=e.call(this,t,r)||this;return a.cdRef=t,a.formConfiguration=r,a.addable=!0,a.editable=!0,a.deletable=!0,a.sdAdd=new n.EventEmitter,a.sdEdit=new n.EventEmitter,a.sdDelete=new n.EventEmitter,a.onAdd=function(e){var n;e.stopPropagation(),null==e||e.preventDefault(),null===(n=a.matSelect)||void 0===n||n.close(),a.sdAdd.emit()},a.onEdit=function(e,n){var t;e.stopPropagation(),null==e||e.preventDefault(),null===(t=a.matSelect)||void 0===t||t.close(),a.sdEdit.emit(n)},a.onDelete=function(e,n){var t;e.stopPropagation(),null==e||e.preventDefault(),null===(t=a.matSelect)||void 0===t||t.close(),a.sdDelete.emit(n)},a}return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function t(){this.constructor=e}g(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}(t,e),t}(c.SdSelect);u.decorators=[{type:n.Component,args:[{selector:"sd-select-editor",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              #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]" class="d-flex justify-content-between">\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-icon *ngIf="editable && sdEdit?.observers?.length" class="mr-1 c-fa-icon" (click)="onEdit($event, item)">\r\n                  edit</mat-icon\r\n                >\r\n                <mat-icon *ngIf="deletable && sdDelete?.observers?.length" class="mr-0 c-fa-icon" (click)="onDelete($event, item)">\r\n                  delete</mat-icon\r\n                >\r\n              </div>\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" class="d-flex justify-content-between">\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-icon *ngIf="editable && sdEdit?.observers?.length" class="mr-1 c-fa-icon" (click)="onEdit($event, item)">\r\n                  edit</mat-icon\r\n                >\r\n                <mat-icon *ngIf="deletable && sdDelete?.observers?.length" class="mr-0 c-fa-icon" (click)="onDelete($event, item)">\r\n                  delete</mat-icon\r\n                >\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n        <mat-option\r\n          class="sd__option--add"\r\n          *ngIf="addable && sdAdd?.observers?.length"\r\n          (keyup.Space)="$event.stopPropagation()"\r\n          disabled="true">\r\n          <div (click)="onAdd($event)">\r\n            <mat-icon class="mr-1">add</mat-icon>\r\n            {{ \'New item\' | sdTranslate }}\r\n          </div>\r\n        </mat-option>\r\n      </mat-select>\r\n      <mat-select\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        *ngIf="!multiple">\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              #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]" class="d-flex justify-content-between">\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-icon *ngIf="editable && sdEdit?.observers?.length" class="mr-1 c-fa-icon" (click)="onEdit($event, item)">\r\n                  edit</mat-icon\r\n                >\r\n                <mat-icon *ngIf="deletable && sdDelete?.observers?.length" class="mr-0 c-fa-icon" (click)="onDelete($event, item)">\r\n                  delete</mat-icon\r\n                >\r\n              </div>\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" class="d-flex justify-content-between">\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-icon *ngIf="editable && sdEdit?.observers?.length" class="mr-1 c-fa-icon" (click)="onEdit($event, item)">\r\n                  edit</mat-icon\r\n                >\r\n                <mat-icon *ngIf="deletable && sdDelete?.observers?.length" class="mr-0 c-fa-icon" (click)="onDelete($event, item)">\r\n                  delete</mat-icon\r\n                >\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n        </ng-container>\r\n        <mat-option\r\n          class="sd__option--add"\r\n          *ngIf="addable && sdAdd?.observers?.length"\r\n          (keyup.Space)="$event.stopPropagation()"\r\n          disabled="true">\r\n          <div (click)="onAdd($event)">\r\n            <mat-icon class="mr-1">add</mat-icon>\r\n            {{ \'New item\' | sdTranslate }}\r\n          </div>\r\n        </mat-option>\r\n      </mat-select>\r\n      <ng-content select="[sdSuffixIcon]" matSuffix></ng-content>\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 && !disableErrorMessage">\r\n        {{ \'This field is required\' | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.customValidator && !disableErrorMessage">\r\n        {{ formControl?.errors?.customValidator }}\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',changeDetection:n.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}.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)}.sd__option--add{background-color:#fff;bottom:0;color:rgba(0,0,0,.87);cursor:pointer;position:-webkit-sticky;position:sticky;z-index:10}.sd__option--add ::ng-deep mat-pseudo-checkbox{display:none}"]}]}],u.ctorParameters=function(){return[{type:n.ChangeDetectorRef},{type:void 0,decorators:[{type:n.Inject,args:[d.FORM_CONFIG]},{type:n.Optional}]}]},u.propDecorators={matSelect:[{type:n.ViewChild,args:[s.MatSelect]}],addable:[{type:n.Input}],editable:[{type:n.Input}],deletable:[{type:n.Input}],sdAdd:[{type:n.Output}],sdEdit:[{type:n.Output}],sdDelete:[{type:n.Output}],sdLabelDef:[{type:n.ContentChild,args:[d.SdLabelDefDirective]}]};var b=function(){};b.decorators=[{type:n.NgModule,args:[{imports:[t.CommonModule,r.FormsModule,r.ReactiveFormsModule,o.MatInputModule,i.MatTooltipModule,a.MatFormFieldModule,l.MatIconModule,s.MatSelectModule,m.SdTranslateModule,p.MatCheckboxModule,f.MatProgressSpinnerModule,d.SdCommonModule,c.SdSelectModule],declarations:[u],exports:[u],providers:[]}]}],e.SdSelectEditor=u,e.SdSelectEditorModule=b,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=sd-angular-core-select-editor.umd.min.js.map