@sd-angular/core/bundles/sd-angular-core-grid-material.umd.min.js

Sd Angular Core Lib

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@sd-angular/core/common"),require("@angular/core"),require("@angular/material/paginator"),require("@angular/material/sort"),require("@angular/animations"),require("uuid"),require("rxjs"),require("@sd-angular/core/notify"),require("@angular/cdk/drag-drop"),require("rxjs/operators"),require("@sd-angular/core/modal"),require("ngx-device-detector"),require("@sd-angular/core/loading"),require("@sd-angular/core/translate"),require("object-hash"),require("@sd-angular/core/export"),require("@angular/forms"),require("@sd-angular/core/setting"),require("@sd-angular/core/quick-action"),require("@angular/common"),require("@angular/material/form-field"),require("@angular/material/icon"),require("@angular/material/input"),require("@angular/material/table"),require("@angular/material/progress-spinner"),require("@angular/cdk/table"),require("@angular/cdk/scrolling"),require("@angular/material/menu"),require("@angular/material/slider"),require("@angular/material/button"),require("@sd-angular/core/service"),require("@angular/material/tooltip"),require("@angular/material/chips"),require("@angular/material/radio"),require("@angular/material/slide-toggle"),require("@sd-angular/core/form"),require("@angular/material/checkbox"),require("@angular/material/list"),require("@angular/material/divider"),require("@sd-angular/core/side-drawer"),require("@sd-angular/core/utility"),require("@sd-angular/core/group")):"function"==typeof define&&define.amd?define("@sd-angular/core/grid-material",["exports","@sd-angular/core/common","@angular/core","@angular/material/paginator","@angular/material/sort","@angular/animations","uuid","rxjs","@sd-angular/core/notify","@angular/cdk/drag-drop","rxjs/operators","@sd-angular/core/modal","ngx-device-detector","@sd-angular/core/loading","@sd-angular/core/translate","object-hash","@sd-angular/core/export","@angular/forms","@sd-angular/core/setting","@sd-angular/core/quick-action","@angular/common","@angular/material/form-field","@angular/material/icon","@angular/material/input","@angular/material/table","@angular/material/progress-spinner","@angular/cdk/table","@angular/cdk/scrolling","@angular/material/menu","@angular/material/slider","@angular/material/button","@sd-angular/core/service","@angular/material/tooltip","@angular/material/chips","@angular/material/radio","@angular/material/slide-toggle","@sd-angular/core/form","@angular/material/checkbox","@angular/material/list","@angular/material/divider","@sd-angular/core/side-drawer","@sd-angular/core/utility","@sd-angular/core/group"],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["grid-material"]={}),e["sd-angular"].core.common,e.ng.core,e.ng.material.paginator,e.ng.material.sort,e.ng.animations,e.uuid,e.rxjs,e["sd-angular"].core.notify,e.ng.cdk.dragDrop,e.rxjs.operators,e["sd-angular"].core.modal,e["ngx-device-detector"],e["sd-angular"].core.loading,e["sd-angular"].core.translate,e["object-hash"],e["sd-angular"].core.export,e.ng.forms,e["sd-angular"].core.setting,e["sd-angular"].core["quick-action"],e.ng.common,e.ng.material.formField,e.ng.material.icon,e.ng.material.input,e.ng.material.table,e.ng.material.progressSpinner,e.ng.cdk.table,e.ng.cdk.scrolling,e.ng.material.menu,e.ng.material.slider,e.ng.material.button,e["sd-angular"].core.service,e.ng.material.tooltip,e.ng.material.chips,e.ng.material.radio,e.ng.material.slideToggle,e["sd-angular"].core.form,e.ng.material.checkbox,e.ng.material.list,e.ng.material.divider,e["sd-angular"].core["side-drawer"],e["sd-angular"].core.utility,e["sd-angular"].core.group)}(this,(function(e,t,n,i,r,l,o,a,s,d,c,u,m,p,f,g,h,v,y,b,x,C,w,O,F,D,I,k,S,T,E,M,P,H,R,A,L,j,N,z,V,U,q){"use strict";function W(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var G=W(g),B={pageSize:50,pages:[50,100,200]},Q=new n.InjectionToken("sd-grid-material.configuration"),J=function(e){this.templateRef=e};J.decorators=[{type:n.Directive,args:[{selector:"[sdMaterialCellDef]"}]}],J.ctorParameters=function(){return[{type:n.TemplateRef}]},J.propDecorators={sdMaterialCellDef:[{type:n.Input}]};var K=function(){function e(e){this.templateRef=e}return Object.defineProperty(e.prototype,"showing",{set:function(e){this.defaultShowing=""===e||e},enumerable:!1,configurable:!0}),e}();K.decorators=[{type:n.Directive,args:[{selector:"[sdMaterialFilterDef]"}]}],K.ctorParameters=function(){return[{type:n.TemplateRef}]},K.propDecorators={sdMaterialFilterDef:[{type:n.Input}],showing:[{type:n.Input,args:["defaultShowing"]}]};var Y=function(e){this.templateRef=e};Y.decorators=[{type:n.Directive,args:[{selector:"[sdMaterialFooterDef]"}]}],Y.ctorParameters=function(){return[{type:n.TemplateRef}]},Y.propDecorators={sdMaterialFooterDef:[{type:n.Input}]};var Z=function(e){this.templateRef=e};Z.decorators=[{type:n.Directive,args:[{selector:"[sdMaterialEmptyDataDef]"}]}],Z.ctorParameters=function(){return[{type:n.TemplateRef}]};var X=function(e){this.templateRef=e};X.decorators=[{type:n.Directive,args:[{selector:"[sdMaterialSubInformationDef]"}]}],X.ctorParameters=function(){return[{type:n.TemplateRef}]};
/*! *****************************************************************************
    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 _=function(e,t){return(_=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};function $(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(n[i[r]]=e[i[r]])}return n}function ee(e,t,n,i){return new(n||(n=Promise))((function(r,l){function o(e){try{s(i.next(e))}catch(e){l(e)}}function a(e){try{s(i.throw(e))}catch(e){l(e)}}function s(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,a)}s((i=i.apply(e,t||[])).next())}))}function te(e,t){var n,i,r,l,o={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return l={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function a(l){return function(a){return function(l){if(n)throw new TypeError("Generator is already executing.");for(;o;)try{if(n=1,i&&(r=2&l[0]?i.return:l[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,l[1])).done)return r;switch(i=0,r&&(l=[2&l[0],r.value]),l[0]){case 0:case 1:r=l;break;case 4:return o.label++,{value:l[1],done:!1};case 5:o.label++,i=l[1],l=[0];continue;case 7:l=o.ops.pop(),o.trys.pop();continue;default:if(!(r=o.trys,(r=r.length>0&&r[r.length-1])||6!==l[0]&&2!==l[0])){o=0;continue}if(3===l[0]&&(!r||l[1]>r[0]&&l[1]<r[3])){o.label=l[1];break}if(6===l[0]&&o.label<r[1]){o.label=r[1],r=l;break}if(r&&o.label<r[2]){o.label=r[2],o.ops.push(l);break}r[2]&&o.ops.pop(),o.trys.pop();continue}l=t.call(e,o)}catch(e){l=[6,e],i=0}finally{n=r=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,a])}}}Object.create;function ne(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function ie(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,r,l=n.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(i=l.next()).done;)o.push(i.value)}catch(e){r={error:e}}finally{try{i&&!i.done&&(n=l.return)&&n.call(l)}finally{if(r)throw r.error}}return o}function re(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(ie(arguments[t]));return e}var le;Object.create;function oe(e,t,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(e):i?i.value:t.get(e)}function ae(e,t,n,i,r){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?r.call(e,n):r?r.value=n:t.set(e,n),n}var se,de=function(){function e(e){var t=this;this.cdRef=e,le.set(this,void 0),this.externalFilters=[],this.externalFilter={},this.inlineExternal={},this.columns=[],this.columnFilter={},this.inlineColumn={},this.filterDefs=[],this.filterDef={},this.inlineFilterDef={},this.open=function(){var e=oe(t,le).configuration.get();t.inlineColumn=JSON.parse(JSON.stringify(e.inlineColumn)),t.inlineExternal=JSON.parse(JSON.stringify(e.inlineExternal)),t.inlineFilterDef=JSON.parse(JSON.stringify(e.inlineFilterDef));var n=oe(t,le).value.get();t.columnFilter=JSON.parse(JSON.stringify(n.columnFilter)),t.externalFilter=JSON.parse(JSON.stringify(n.externalFilter)),t.filterDef=JSON.parse(JSON.stringify(n.filterDef)),t.modal.open(),t.cdRef.markForCheck()},this.close=function(){t.modal.close(),t.cdRef.markForCheck()},this.onApply=function(){oe(t,le).configuration.set({inlineColumn:t.inlineColumn,inlineExternal:t.inlineExternal,inlineFilterDef:t.inlineFilterDef}),oe(t,le).value.set({columnFilter:t.columnFilter,externalFilter:t.externalFilter,filterDef:t.filterDef}),t.modal.close(),t.cdRef.markForCheck()}}return Object.defineProperty(e.prototype,"filterRegister",{set:function(e){ae(this,le,e)},enumerable:!1,configurable:!0}),e.prototype.ngAfterViewInit=function(){},e.prototype.ngOnDestroy=function(){},e.prototype.onClear=function(){oe(this,le).value.remove(),this.modal.close(),this.cdRef.markForCheck()},e}();le=new WeakMap,de.decorators=[{type:n.Component,args:[{selector:"sd-popup-filter",template:'<sd-modal width="500px" [title]="\'Filter\' | sdTranslate">\r\n  <sd-modal-body class="c-popup-filter">\r\n    <ng-container *ngFor="let column of columns | sdFilterColumn">\r\n      <div class="d-flex align-items-baseline">\r\n        <ng-container>\r\n          <div *sdDesktop class="c-checkable">\r\n            <mat-slide-toggle [(ngModel)]="inlineColumn[column.field]" color="primary"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class="c-filterable">\r\n          <sd-input\r\n            *ngIf="column.type === \'string\'"\r\n            [label]="column.title"\r\n            type="text"\r\n            [(model)]="columnFilter[column.field]"\r\n            appearance="outline">\r\n          </sd-input>\r\n          <sd-input\r\n            *ngIf="column.type === \'number\'"\r\n            [label]="column.title"\r\n            type=" number"\r\n            [(model)]="columnFilter[column.field]"\r\n            appearance="outline">\r\n          </sd-input>\r\n          <sd-select\r\n            *ngIf="column.type === \'bool\'"\r\n            [label]="column.title"\r\n            [items]="[\r\n              { value: \'1\', display: column.trueValue || \'True\' },\r\n              { value: \'0\', display: column.falseValue || \'False\' }\r\n            ]"\r\n            valueField="value"\r\n            displayField="display"\r\n            [(model)]="columnFilter[column.field]"\r\n            appearance="outline">\r\n          </sd-select>\r\n          <sd-select\r\n            *ngIf="column.type === \'values\' && !column?.editor?.autocomplete"\r\n            [label]="column.title"\r\n            [items]="column.option.items"\r\n            [valueField]="column.option.valueField"\r\n            [displayField]="column.option.displayField"\r\n            [(model)]="columnFilter[column.field]"\r\n            appearance="outline">\r\n          </sd-select>\r\n          <sd-autocomplete\r\n            *ngIf="column.type === \'values\' && column?.editor?.autocomplete"\r\n            [label]="column.title"\r\n            [items]="column.option.items"\r\n            [valueField]="column.option.valueField"\r\n            [displayField]="column.option.displayField"\r\n            [(model)]="columnFilter[column.field]"\r\n            appearance="outline">\r\n          </sd-autocomplete>\r\n          <sd-date-time\r\n            *ngIf="column.type === \'date\' || column.type === \'datetime\' || column.type === \'time\'"\r\n            [label]="column.title"\r\n            [(model)]="columnFilter[column.field]"\r\n            type="date"\r\n            appearance="outline">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor="let item of externalFilters | sdFilterExternal">\r\n      <div class="d-flex align-items-baseline">\r\n        <ng-container>\r\n          <div *sdDesktop class="c-checkable">\r\n            <mat-slide-toggle [(ngModel)]="inlineExternal[item.field]" color="primary"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class="c-filterable">\r\n          <sd-input\r\n            [label]="item.title"\r\n            *ngIf="item.type === \'string\'"\r\n            type="text"\r\n            [(model)]="externalFilter[item.field]"\r\n            appearance="outline">\r\n          </sd-input>\r\n          <sd-input-number [label]="item.title" *ngIf="item.type === \'number\'" [(model)]="externalFilter[item.field]" appearance="outline">\r\n          </sd-input-number>\r\n          <sd-select\r\n            [label]="item.title"\r\n            *ngIf="item.type === \'bool\'"\r\n            [items]="[\r\n              { value: \'1\', display: item.option?.displayOnTrue || \'True\' },\r\n              { value: \'0\', display: item.option?.displayOnFalse || \'False\' }\r\n            ]"\r\n            valueField="value"\r\n            displayField="display"\r\n            [(model)]="externalFilter[item.field]"\r\n            appearance="outline">\r\n          </sd-select>\r\n          <ng-container *ngIf="item.type === \'values\'">\r\n            <sd-select\r\n              *ngIf="item.option?.selection === \'MULTIPLE\'"\r\n              [label]="item.title"\r\n              [items]="item.option.items"\r\n              [valueField]="item.option.valueField"\r\n              [displayField]="item.option.displayField"\r\n              [(model)]="externalFilter[item.field]"\r\n              appearance="outline"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-autocomplete\r\n              *ngIf="item.option?.selection === \'AUTOCOMPLETE\'"\r\n              [label]="item.title"\r\n              [items]="item.option.items"\r\n              [valueField]="item.option.valueField"\r\n              [displayField]="item.option.displayField"\r\n              appearance="outline"\r\n              [(model)]="externalFilter[item.field]">\r\n            </sd-autocomplete>\r\n            <sd-select\r\n              *ngIf="item.option?.selection === \'MULTIPLEAUTOCOMPLETE\'"\r\n              [label]="item.title"\r\n              [items]="item.option.items"\r\n              [valueField]="item.option.valueField"\r\n              [displayField]="item.option.displayField"\r\n              appearance="outline"\r\n              [(model)]="externalFilter[item.field]"\r\n              filtered="true"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-select\r\n              *ngIf="!item.option?.selection"\r\n              [label]="item.title"\r\n              [items]="item.values"\r\n              [items]="item.option.items"\r\n              [valueField]="item.option.valueField"\r\n              [displayField]="item.option.displayField"\r\n              appearance="outline"\r\n              [(model)]="externalFilter[item.field]">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time\r\n            [label]="item.title"\r\n            *ngIf="item.type === \'date\' || item.type === \'datetime\'"\r\n            [(model)]="externalFilter[item.field]"\r\n            [type]="item.type"\r\n            appearance="outline">\r\n          </sd-date-time>\r\n          <sd-date-range\r\n            [label]="item.title"\r\n            *ngIf="item.type === \'daterange\' && externalFilter[item.field]"\r\n            [(from)]="externalFilter[item.field].from"\r\n            [(to)]="externalFilter[item.field].to"\r\n            [min]="item.minDate"\r\n            [max]="item.maxDate"\r\n            appearance="outline">\r\n          </sd-date-range>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor="let filter of filterDefs">\r\n      <div class="d-flex align-items-baseline">\r\n        <ng-container>\r\n          <div *sdDesktop class="c-checkable">\r\n            <mat-slide-toggle [(ngModel)]="inlineFilterDef[filter.sdMaterialFilterDef]" color="primary"> </mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class="c-filterable">\r\n          <ng-container *ngTemplateOutlet="filter.templateRef; context: { filterDef: filterDef }"> </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class="mr-auto" (action)="onClear()" title="Mặc định" size="sm" type="link"> </sd-button>\r\n    <sd-button (action)="onApply()" title="Đồng ý" color="primary" size="sm" type="fill"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style="flex: 1; padding-right: 5px" (action)="onClear()" title="Mặc định" width="100%" size="sm" type="link"></sd-button>\r\n    <sd-button\r\n      style="flex: 1; padding-left: 5px"\r\n      (action)="onApply()"\r\n      title="Đồng ý"\r\n      color="primary"\r\n      width="100%"\r\n      size="sm"\r\n      type="fill"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n',changeDetection:n.ChangeDetectionStrategy.OnPush,styles:[".c-checkable{width:50px}.c-filterable{flex:1}::ng-deep sd-modal-body.c-popup-filter .mat-form-field-wrapper{padding-bottom:0}"]}]}],de.ctorParameters=function(){return[{type:n.ChangeDetectorRef}]},de.propDecorators={modal:[{type:n.ViewChild,args:[u.SdModal]}],filterRegister:[{type:n.Input}],externalFilters:[{type:n.Input}],columns:[{type:n.Input}],filterDefs:[{type:n.Input}]};var ce,ue,me,pe,fe=function(){function e(e,t){var n=this;this.ref=e,this.deviceService=t,this.columns=[],this.externalFilters=[],this.filterDefs=[],this.filterRegisterChange=new a.BehaviorSubject(null),this.filterDef={},this.inlineFilterDef={},this.columnFilter={},this.inlineColumn={},this.externalFilter={},this.inlineExternal={},se.set(this,new a.Subscription),this.onFilter=function(e){n.filterRegister.value.set({columnFilter:n.columnFilter,externalFilter:n.externalFilter,filterDef:n.filterDef})},this.updateFilter=function(){n.filterRegister.value.set({columnFilter:n.columnFilter,externalFilter:n.externalFilter,filterDef:n.filterDef,notReload:!0})},this.open=function(){n.popupFilter.open()},this.isMobileOrTablet=!this.deviceService.isDesktop(),this.ref.markForCheck()}return Object.defineProperty(e.prototype,"_filter",{set:function(e){this.filter=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_externalFilters",{set:function(e){this.externalFilters=e||[]},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_filterRegister",{set:function(e){this.filterRegister=e,this.filterRegisterChange.next(this.filterRegister)},enumerable:!1,configurable:!0}),e.prototype.ngAfterViewInit=function(){var e=this;oe(this,se).add(this.filterRegisterChange.pipe(c.startWith(this.filterRegister)).subscribe((function(t){e.filterRegister&&(oe(e,se).add(e.filterRegister.configuration.observer.subscribe((function(t){var n=t.inlineColumn,i=t.inlineExternal,r=t.inlineFilterDef;e.inlineColumn=n,e.inlineExternal=i,e.inlineFilterDef=r,e.ref.markForCheck()}))),oe(e,se).add(e.filterRegister.value.observer.subscribe((function(t){var n=t.columnFilter,i=t.externalFilter,r=t.filterDef;e.columnFilter=n,e.externalFilter=i,e.filterDef=r,e.ref.markForCheck()}))))})))},e.prototype.ngOnDestroy=function(){oe(this,se).unsubscribe()},e}();se=new WeakMap,fe.decorators=[{type:n.Component,args:[{selector:"sd-grid-filter",template:'<ng-container *ngIf="!filter?.disabled">\r\n  <ng-container *ngIf="filter?.enableCollapse;else noCollapse">\r\n    <sd-group class="p-12" [isExpanded]="false" title="Tìm kiếm" expandable>\r\n      <div sdGroupBody>\r\n        <ng-container *ngTemplateOutlet="noCollapse"></ng-container>\r\n      </div>\r\n    </sd-group>\r\n  </ng-container>\r\n  <ng-template #noCollapse>\r\n    <div\r\n      *ngIf="!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)"\r\n      class="row mx-0 pb-8">\r\n      <ng-container *ngIf="filter?.sorts?.length">\r\n        <ng-container *ngFor="let field of filter?.sorts">\r\n          <ng-container *ngIf="columns?.length && !filter?.inlineColumn">\r\n            <ng-container *ngFor="let item of columns | sdFilterColumn:field">\r\n              <ng-container *ngTemplateOutlet="filterColumn; context: {item: item}"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf="externalFilters?.length">\r\n            <ng-container *ngFor="let item of externalFilters | sdFilterExternal:field">\r\n              <ng-container *ngTemplateOutlet="filterExternal; context: {item: item}"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngFor="let item of filterDefs">\r\n            <div *ngIf="inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field"\r\n              class="col-lg-2 col-md-3 col-sm-6 px-8">\r\n              <ng-container *ngTemplateOutlet="item.templateRef;context:{filterDef:filterDef, isInline: true}">\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf="!filter?.sorts?.length">\r\n        <ng-container *ngIf="columns?.length && !filter?.inlineColumn">\r\n          <ng-container *ngFor="let item of columns | sdFilterColumn">\r\n            <ng-container *ngTemplateOutlet="filterColumn; context: {item: item}"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf="externalFilters?.length">\r\n          <ng-container *ngFor="let item of externalFilters | sdFilterExternal">\r\n            <ng-container *ngTemplateOutlet="filterExternal; context: {item: item}"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor="let item of filterDefs">\r\n          <div *ngIf="inlineFilterDef[item.sdMaterialFilterDef]" class="col-lg-2 col-md-3 col-sm-6 px-8">\r\n            <ng-container *ngTemplateOutlet="item.templateRef;context:{filterDef:filterDef, isInline: true}">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <ng-template #filterColumn let-item="item">\r\n      <div *ngIf="inlineColumn[item.field]" class="col-lg-2 col-md-3 col-sm-6 px-8">\r\n        <sd-input [label]="item.title" *ngIf="item.type === \'string\'" type="text" [(model)]="columnFilter[item.field]"\r\n          (keyupEnter)="onFilter(item)" appearance="outline">\r\n        </sd-input>\r\n        <sd-input-number [label]="item.title" *ngIf="item.type === \'number\'" [(model)]="columnFilter[item.field]"\r\n          (keyupEnter)="onFilter(item)" appearance="outline">\r\n        </sd-input-number>\r\n        <sd-select [label]="item.title" *ngIf="item.type === \'bool\'" [items]="[{value:\'1\',display:item.option?.displayOnTrue || \'True\' },\r\n        {value:\'0\',display:item.option?.displayOnFalse || \'False\' }]" valueField="value" displayField="display"\r\n          [(model)]="columnFilter[item.field]" (sdChange)="onFilter(item)" appearance="outline">\r\n        </sd-select>\r\n        <sd-select *ngIf="item.type === \'values\' && item?.option?.selection !== \'AUTOCOMPLETE\'"\r\n          [items]="item.option?.items" [valueField]="item.option?.valueField" [displayField]="item.option.displayField"\r\n          [(model)]="columnFilter[item.field]" (sdChange)="onFilter(item)" [disabled]="item.filter?.disabled"\r\n          [multiple]="item?.option?.selection === \'MULTIPLE\' || item?.item?.selection === \'MULTIPLEAUTOCOMPLETE\'"\r\n          [filtered]="item?.option?.selection === \'MULTIPLEAUTOCOMPLETE\'" appearance="outline">\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf="item.type === \'values\' && item?.option?.selection === \'AUTOCOMPLETE\'"\r\n          [items]="item.option?.items" [valueField]="item.option?.valueField" [displayField]="item.option?.displayField"\r\n          [(model)]="columnFilter[item.field]" (sdChange)="onFilter(item)" [disabled]="item.filter?.disabled"\r\n          appearance="outline">\r\n        </sd-autocomplete>\r\n        <sd-date-time *ngIf="item.type === \'date\' || item.type === \'datetime\' || item.type === \'time\'"\r\n          [label]="item.title" [(model)]="columnFilter[item.field]" [type]="item.type" (sdChange)="onFilter(item)"\r\n          appearance="outline">\r\n        </sd-date-time>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #filterExternal let-item="item">\r\n      <div *ngIf="inlineExternal[item.field]" class="col-lg-2 col-md-3 col-sm-6 px-8">\r\n        <sd-input [label]="item.title" *ngIf="item.type === \'string\'" type="text" [(model)]="externalFilter[item.field]"\r\n          (keyupEnter)="onFilter(item)" appearance="outline">\r\n        </sd-input>\r\n        <sd-input-number [label]="item.title" *ngIf="item.type === \'number\'" [(model)]="externalFilter[item.field]"\r\n          (keyupEnter)="onFilter(item)" appearance="outline">\r\n        </sd-input-number>\r\n        <sd-select [label]="item.title" *ngIf="item.type === \'bool\'" [items]="[{value:\'1\',display:item.option?.displayOnTrue || \'True\' },\r\n        {value:\'0\',display:item.option?.displayOnFalse || \'False\' }]" valueField="value" displayField="display"\r\n          [(model)]="externalFilter[item.field]" (sdChange)="onFilter(item)" appearance="outline">\r\n        </sd-select>\r\n        <ng-container *ngIf="item.type === \'values\' && item.option">\r\n          <sd-select *ngIf="item.option?.selection === \'MULTIPLE\'" [label]="item.title" [items]="item.option.items"\r\n            [valueField]="item.option.valueField" [displayField]="item.option.displayField"\r\n            [(model)]="externalFilter[item.field]" (sdChange)="onFilter(item)" [selectAll]="item.option.selectAll"\r\n            appearance="outline" multiple>\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf="item.option?.selection === \'AUTOCOMPLETE\'" [label]="item.title"\r\n            [items]="item.option.items" [valueField]="item.option.valueField" [displayField]="item.option.displayField"\r\n            [(model)]="externalFilter[item.field]" (sdChange)="onFilter(item)" appearance="outline">\r\n          </sd-autocomplete>\r\n          <sd-select *ngIf="item.option?.selection === \'MULTIPLEAUTOCOMPLETE\'" [label]="item.title"\r\n            [items]="item.option.items" [valueField]="item.option.valueField" [displayField]="item.option.displayField"\r\n            [(model)]="externalFilter[item.field]" (sdChange)="onFilter(item)" filtered="true" appearance="outline"\r\n            multiple>\r\n          </sd-select>\r\n          <sd-select *ngIf="!item.option?.selection" [label]="item.title" [items]="item.option.items"\r\n            [valueField]="item.option.valueField" [displayField]="item.option.displayField"\r\n            [(model)]="externalFilter[item.field]" (sdChange)="onFilter(item)" appearance="outline">\r\n          </sd-select>\r\n        </ng-container>\r\n        <sd-date-time [label]="item.title" *ngIf="item.type ===\'date\' || item.type ===\'datetime\'"\r\n          [(model)]="externalFilter[item.field]" [type]="item.type" (sdChange)="onFilter(item)" appearance="outline">\r\n        </sd-date-time>\r\n        <sd-date-range [label]="item.title" *ngIf="item.type ===\'daterange\' && externalFilter[item.field]"\r\n          [(from)]="externalFilter[item.field].from" [(to)]="externalFilter[item.field].to" [min]="item.minDate"\r\n          [max]="item.maxDate" (sdChange)="onFilter(item)" appearance="outline">\r\n        </sd-date-range>\r\n      </div>\r\n    </ng-template>\r\n    <sd-popup-filter [filterRegister]="filterRegister" [columns]="columns"\r\n      [externalFilters]="externalFilters" [filterDefs]="filterDefs">\r\n    </sd-popup-filter>\r\n  </ng-template>\r\n</ng-container>',changeDetection:n.ChangeDetectionStrategy.OnPush,styles:[":host{display:block;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]}]}],fe.ctorParameters=function(){return[{type:n.ChangeDetectorRef},{type:m.DeviceDetectorService}]},fe.propDecorators={popupFilter:[{type:n.ViewChild,args:[de]}],_filter:[{type:n.Input,args:["filter"]}],columns:[{type:n.Input}],_externalFilters:[{type:n.Input,args:["externalFilters"]}],filterDefs:[{type:n.Input}],_filterRegister:[{type:n.Input,args:["filterRegister"]}]};var ge,he,ve,ye,be,xe,Ce,we,Oe=function(){function e(e,t,i,r,l){var o=this;this.ref=e,this.loadingService=t,this.exportService=i,this.notifyService=r,this.translateService=l,this.columns=[],this.groups=[],this.enableCreating=!1,this.selected={},this.files=[],this.export=new n.EventEmitter,this.form=new v.FormGroup({}),ce.set(this,(function(){return re(o.gridColumns,o.additionalColumns)})),ue.set(this,(function(){var e,t,n;return(null===(n=null===(t=null===(e=o.gridOption)||void 0===e?void 0:e.export)||void 0===t?void 0:t.groups)||void 0===n?void 0:n.filter((function(e){var t=e.permission;return"function"==typeof t?t():t})))||[]})),this.open=function(){return ee(o,void 0,void 0,(function(){var e,t;return te(this,(function(n){return this.key?(1===this.groups.length&&(null===(t=null===(e=this.gridOption)||void 0===e?void 0:e.export)||void 0===t?void 0:t.hideMyTemplates)?this.loadFiles(this.groups[0].code):this.loadFiles(null),this.selected={},this.modal.open(),this.ref.detectChanges(),[2]):(this.exportDefault(),[2])}))}))},me.set(this,(function(){if(o.configuration){var e=re(o.gridColumns),t=o.configuration,n=re(t.firstColumns,t.secondColumns).reduce((function(e,t){var n=o.gridOption.columns.find((function(e){return e.field===t.field}));return n?"children"!==n.type&&"children-col"!==n.type?re(e,[n]):re(e,n.children.filter((function(e){return"image"!==e.type}))):e}),[]);return re(n.map((function(t){return Object.assign(Object.assign({},t),{data:e.find((function(e){return e.field===t.field}))})})).filter((function(e){return!!e.data})).map((function(e){return e.data})),o.additionalColumns)}return o.columns})),this.exportDefault=function(){o.export.emit({file:null,columns:oe(o,me).call(o),isCSV:!1})},this.exportCSV=function(){o.export.emit({file:null,columns:oe(o,me).call(o),isCSV:!0})},this.loadFiles=function(e){return void 0===e&&(e=null),ee(o,void 0,void 0,(function(){var t;return te(this,(function(n){switch(n.label){case 0:return this.selectedGroup=this.groups.find((function(t){return t.code===e})),t=this,[4,this.exportService.filesInFolder({key:this.key,group:e})];case 1:return t.files=n.sent(),this.ref.markForCheck(),[2]}}))}))},pe.set(this,(function(e){return ee(o,void 0,void 0,(function(){var t,n,i,r,l,o,a,s,d,c,u,m,p,f;return te(this,(function(g){switch(g.label){case 0:if(l=[],!Array.isArray(null===(n=null===(t=this.gridOption)||void 0===t?void 0:t.export)||void 0===n?void 0:n.sheets))return[3,9];g.label=1;case 1:g.trys.push([1,7,8,9]),o=ne(this.gridOption.export.sheets),a=o.next(),g.label=2;case 2:return a.done?[3,6]:(s=a.value).name&&s.items&&s.fields?Array.isArray(s.items)?(l.push({name:s.name,items:s.items,fields:s.fields}),[3,5]):[3,3]:[3,5];case 3:return c=(d=l).push,u={name:s.name},[4,s.items()];case 4:c.apply(d,[(u.items=g.sent(),u.fields=s.fields,u)]),g.label=5;case 5:return a=o.next(),[3,2];case 6:return[3,9];case 7:return m=g.sent(),p={error:m},[3,9];case 8:try{a&&!a.done&&(f=o.return)&&f.call(o)}finally{if(p)throw p.error}return[7];case 9:return[4,this.exportService.generateTemplate({fileName:e||(null===(r=null===(i=this.gridOption)||void 0===i?void 0:i.export)||void 0===r?void 0:r.fileName),columns:this.columns,sheets:l})];case 10:return[2,g.sent()]}}))}))})),this.generateTemplate=function(){return ee(o,void 0,void 0,(function(){return te(this,(function(e){switch(e.label){case 0:return this.loadingService.start(),[4,oe(this,pe).call(this).finally(this.loadingService.stop)];case 1:return e.sent(),[2]}}))}))},this.generateAndUploadTemplate=function(e){return ee(o,void 0,void 0,(function(){var t,n,i,r,l,o,a,s,d,c,u,m,p,f,g,h,v,y=this;return te(this,(function(b){switch(b.label){case 0:if(s=[],!Array.isArray(null===(n=null===(t=this.gridOption)||void 0===t?void 0:t.export)||void 0===n?void 0:n.sheets))return[3,9];b.label=1;case 1:b.trys.push([1,7,8,9]),d=ne(null===(r=null===(i=this.gridOption)||void 0===i?void 0:i.export)||void 0===r?void 0:r.sheets),c=d.next(),b.label=2;case 2:return c.done?[3,6]:(u=c.value).name&&u.items&&u.fields?Array.isArray(u.items)?(s.push({name:u.name,items:u.items,fields:u.fields}),[3,5]):[3,3]:[3,5];case 3:return p=(m=s).push,f={name:u.name},[4,u.items()];case 4:p.apply(m,[(f.items=b.sent(),f.fields=u.fields,f)]),b.label=5;case 5:return c=d.next(),[3,2];case 6:return[3,9];case 7:return g=b.sent(),h={error:g},[3,9];case 8:try{c&&!c.done&&(v=d.return)&&v.call(d)}finally{if(h)throw h.error}return[7];case 9:return[4,this.exportService.generateUploadTemplate({key:this.key,template:{fileName:e||(null===(o=null===(l=this.gridOption)||void 0===l?void 0:l.export)||void 0===o?void 0:o.fileName),columns:this.columns.filter((function(e){return y.selected[e.field]})),sheets:s},group:null===(a=this.selectedGroup)||void 0===a?void 0:a.code})];case 10:return[2,b.sent()]}}))}))},this.onExport=function(e){o.export.emit({file:e,columns:o.columns}),o.ref.detectChanges()},this.uploadTemplate=function(){return ee(o,void 0,void 0,(function(){var e,t,n,i;return te(this,(function(r){switch(r.label){case 0:return[4,this.exportService.uploadTemplate({key:this.key,group:null===(e=this.selectedGroup)||void 0===e?void 0:e.code,validator:null===(n=null===(t=this.gridOption)||void 0===t?void 0:t.export)||void 0===n?void 0:n.validators})];case 1:return(i=r.sent())&&(this.files=re(this.files,[i]),this.ref.detectChanges()),[2]}}))}))},this.removeFile=function(e){o.notifyService.confirm(o.translateService.translate("Remove template")).then((function(){var t;o.exportService.removeFile({key:o.key,fileName:e.fileName,group:(null===(t=o.selectedGroup)||void 0===t?void 0:t.code)||null});var n=o.files.indexOf(e);o.files.splice(n,1),o.files=re(o.files),o.ref.detectChanges()}))},this.createTemplate=function(){return ee(o,void 0,void 0,(function(){var e,t,n,i,r,l,o,a,s=this;return te(this,(function(d){switch(d.label){case 0:if(this.form.invalid)return this.form.markAllAsTouched(),[2];if(!this.columns.some((function(e){return s.selected[e.field]})))return this.notifyService.notify.warning("Vui lòng chọn cột dữ liệu để xuất"),[2];this.loadingService.start(),l=this.templateName+".xlsx",d.label=1;case 1:return d.trys.push([1,,3,4]),(null===(n=null===(t=null===(e=this.gridOption)||void 0===e?void 0:e.export)||void 0===t?void 0:t.validators)||void 0===n?void 0:n.call(t,l))?(this.notifyService.notify.warning(null===(r=null===(i=this.gridOption)||void 0===i?void 0:i.export)||void 0===r?void 0:r.validators(l)),[2]):[4,this.generateAndUploadTemplate(l)];case 2:return(null==(o=d.sent())?void 0:o.filePath)&&(a={filePath:o.filePath,fileName:o.fileName},this.onExport(a),this.templateName=null,this.enableCreating=!1,this.files=re(this.files,[a]),this.ref.detectChanges()),[3,4];case 3:return this.loadingService.stop(),[7];case 4:return[2]}}))}))},this.onChangeGroup=function(){var e,t,n;o.loadFiles(null===(n=null===(t=null===(e=o.listGroups)||void 0===e?void 0:e.selectedOptions)||void 0===t?void 0:t.selected[0])||void 0===n?void 0:n.value)},this.validatorTemplateName=function(e){var t=o.translateService.translate;return e?e.length>50?t("Template name is too long"):/^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/.test(e)?null:t("Template name only contains letters, numbers and spaces"):t("Please enter your template name")}}return Object.defineProperty(e.prototype,"_gridOption",{set:function(e){this.gridOption=e,this.columns=oe(this,ce).call(this),this.groups=oe(this,ue).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"key",{get:function(){var e,t,n,i;return(null===(t=null===(e=this.gridOption)||void 0===e?void 0:e.export)||void 0===t?void 0:t.key)?G.default({prefix:"93889e78-f971-4a1d-8c73-fe2321af9233",key:null===(i=null===(n=this.gridOption)||void 0===n?void 0:n.export)||void 0===i?void 0:i.key}):null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"gridColumns",{get:function(){var e=[];return this.gridOption.columns.filter((function(e){var t;return!(null===(t=e.export)||void 0===t?void 0:t.disabled)})).forEach((function(t){var n,i;"image"!==t.type&&("children"!==t.type?"children-col"!==t.type?e.push(t):null===(i=t.children)||void 0===i||i.filter((function(e){var t;return!(null===(t=e.export)||void 0===t?void 0:t.disabled)})).forEach((function(t){"image"!==t.type&&e.push(t)})):null===(n=t.children)||void 0===n||n.filter((function(e){var t;return!(null===(t=e.export)||void 0===t?void 0:t.disabled)})).forEach((function(t){"image"!==t.type&&e.push(t)})))})),e.map((function(e){return{field:e.field,title:e.title,description:e.description,width:e.width}}))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"additionalColumns",{get:function(){var e,t;return((null===(t=null===(e=this.gridOption.export)||void 0===e?void 0:e.columns)||void 0===t?void 0:t.filter((function(e){var t;return!(null===(t=e.export)||void 0===t?void 0:t.disabled)})))||[]).map((function(e){return{field:e.field,title:e.title,description:e.description,width:e.width}}))},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.ngAfterViewInit=function(){},e}();ce=new WeakMap,ue=new WeakMap,me=new WeakMap,pe=new WeakMap,Oe.decorators=[{type:n.Component,args:[{selector:"sd-popup-export",template:'<sd-modal width="907px" [title]="\'Exported template\' | sdTranslate" #modal>\r\n  <sd-modal-body>\r\n    <div class="row">\r\n      <ng-container\r\n        *ngIf="groups?.length > 1 || (groups?.length === 1 && !gridOption?.export?.hideMyTemplates); else noSelection">\r\n        <div class="col-9">\r\n          <ng-container *ngTemplateOutlet="content"></ng-container>\r\n        </div>\r\n        <div class="col-3">\r\n          <mat-selection-list [multiple]="false" #listGroups>\r\n            <mat-list-option *ngIf="!gridOption?.export?.hideMyTemplates" [value]="" (click)="loadFiles()">\r\n              <div mat-line>{{\'My templates\' | sdTranslate}}</div>\r\n            </mat-list-option>\r\n            <mat-list-option [value]="group.code" *ngFor="let group of groups" (click)="loadFiles(group.code)">\r\n              <div mat-line>{{group.title}}</div>\r\n            </mat-list-option>\r\n          </mat-selection-list>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noSelection>\r\n        <div class="col-12">\r\n          <ng-container *ngTemplateOutlet="content"></ng-container>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template #content>\r\n        <div class="row">\r\n          <div *ngIf="!files?.length" class="col-12">\r\n            <div class="c-empty">\r\n              <img class="c-empty-image">\r\n              <div class="T14R">{{\'There are no exported templates\' | sdTranslate}}</div>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf="files?.length">\r\n            <div class="col-12">\r\n              <div class="c-table" style="max-height:50vh">\r\n                <table mat-table [dataSource]="files">\r\n                  <ng-container matColumnDef="stt">\r\n                    <th mat-header-cell class="c-th text-center px-5" *matHeaderCellDef style="width:50px">#\r\n                    </th>\r\n                    <td class="text-center px-5" mat-cell *matCellDef="let item; let idx = index">\r\n                      {{idx + 1}}\r\n                    </td>\r\n                  </ng-container>\r\n                  <ng-container matColumnDef="fileName">\r\n                    <th mat-header-cell class="c-th px-5" *matHeaderCellDef>{{\'File name\' | sdTranslate}}\r\n                    </th>\r\n                    <td class="px-5" mat-cell *matCellDef="let item;">\r\n                      {{item.fileName}}\r\n                    </td>\r\n                  </ng-container>\r\n                  <ng-container matColumnDef="action">\r\n                    <th mat-header-cell class="c-th px-5" *matHeaderCellDef style="width:80px">\r\n                    </th>\r\n                    <td class="px-5" mat-cell *matCellDef="let item;">\r\n                      <div class="d-flex">\r\n                        <button *ngIf="!selectedGroup || selectedGroup?.permission === \'delete\'" mat-icon-button\r\n                          aria-label="delete" (click)="removeFile(item)">\r\n                          <mat-icon>delete</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button aria-label="download" (click)="onExport(item)">\r\n                          <mat-icon>download</mat-icon>\r\n                        </button>\r\n                      </div>\r\n                    </td>\r\n                  </ng-container>\r\n                  <tr mat-header-row *matHeaderRowDef="[\'stt\', \'fileName\', \'action\']; sticky: true">\r\n                  </tr>\r\n                  <tr mat-row *matRowDef="let row; columns: [\'stt\', \'fileName\', \'action\'];"></tr>\r\n                </table>\r\n              </div>\r\n            </div>\r\n            <div *ngIf="files.length < 5 && (!selectedGroup || selectedGroup?.permission === \'add\' || selectedGroup?.permission === \'delete\')"\r\n              class="col-12 mt-10">\r\n              <sd-button class="mr-5" [title]="\'New template\' | sdTranslate" (action)="enableCreating = true"\r\n                color="info" [disabled]="enableCreating">\r\n              </sd-button>\r\n              <sd-button *ngIf="gridOption?.export?.enableUpload" [title]="\'Upload template\' | sdTranslate"\r\n                (action)="uploadTemplate()" type="outline">\r\n              </sd-button>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf="(enableCreating || !files?.length) && (!selectedGroup || selectedGroup?.permission === \'add\' || selectedGroup?.permission === \'delete\')">\r\n            <div class="col-12 mt-20">\r\n              <div class="T14R">{{\'Select columns for creating template\' | sdTranslate}}:</div>\r\n            </div>\r\n            <div class="col-12">\r\n              <mat-chip-list selectable="true" multiple="true">\r\n                <ng-container *ngFor="let column of columns">\r\n                  <mat-chip [selected]="selected[column.field]"\r\n                    (click)="selected[column.field] = !selected[column.field]">\r\n                    {{column.title}}\r\n                  </mat-chip>\r\n                </ng-container>\r\n              </mat-chip-list>\r\n            </div>\r\n            <div class="col-12 row">\r\n              <div class="col-10">\r\n                <sd-input [form]="form" [label]="\'Template name\' | sdTranslate" [(model)]="templateName"\r\n                  [validator]="validatorTemplateName"></sd-input>\r\n              </div>\r\n              <div class="col-2 mt-7">\r\n                <sd-button width="100%" [title]="\'Save\' | sdTranslate" color="info" (action)="createTemplate()">\r\n                </sd-button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </sd-modal-body>\r\n</sd-modal>',changeDetection:n.ChangeDetectionStrategy.OnPush,styles:['.c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}.c-empty{align-items:center;background:#f6f6f6;border-radius:4px;display:flex;flex-direction:column;height:116px;justify-content:center;position:static}.c-empty .c-empty-image{content:url("data:image/png;base64,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