@sd-angular/core 1.1.12 → 1.1.15

package/bundles/sd-angular-core-input-currency.umd.js

@@ -627,7 +627,7 @@
     SdInputCurrency.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-input-currency',
-                    template: "<label *ngIf=\"!appearance && label\" class=\"d-block pb-0 T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<div class=\"d-flex align-items-center\">\r\n  <mat-form-field class=\"sd-md\"\r\n    [ngClass]=\"{'sd-form-tooltip':tooltip, '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    <input currencyMask [options]=\"options\" [formControl]=\"formControl\" #control matInput\r\n      [placeholder]=\"placeholder || label\" (keyup.enter)=\"onKeyupEnter()\" (focus)=\"onFocus()\" [required]=\"isRequired\"\r\n      autocomplete=\"off\">\r\n    <ng-container *ngIf=\"sdSuffix?.templateRef\" matSuffix>\r\n      <ng-container *ngTemplateOutlet=\"sdSuffix.templateRef\">\r\n      </ng-container>\r\n    </ng-container>\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?.pattern && !disableErrorMessage\">\r\n      {{'Pattern error' | sdTranslate}}\r\n    </mat-error>\r\n    <mat-error *ngIf=\"formControl.errors?.customValidator && !disableErrorMessage\">\r\n      <strong>{{formControl.errors?.customValidator}}</strong>\r\n    </mat-error>\r\n  </mat-form-field>\r\n  <div *ngIf=\"tooltip\" class=\"sd-tooltip\">\r\n    <mat-icon (click)=\"sdTooltip.toggle()\" [matTooltip]=\"formControl.value | sdInputCurrencyTooltipPipe:tooltip\"\r\n      matSuffix #sdTooltip=\"matTooltip\">info</mat-icon>\r\n  </div>\r\n</div>",
+                    template: "<label *ngIf=\"!appearance && label\" class=\"d-block mb-0 T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<div class=\"d-flex align-items-center\">\r\n  <mat-form-field class=\"sd-md\"\r\n    [ngClass]=\"{'sd-form-tooltip':tooltip, '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    <input currencyMask [options]=\"options\" [formControl]=\"formControl\" #control matInput\r\n      [placeholder]=\"placeholder || label\" (keyup.enter)=\"onKeyupEnter()\" (focus)=\"onFocus()\" [required]=\"isRequired\"\r\n      autocomplete=\"off\">\r\n    <ng-container *ngIf=\"sdSuffix?.templateRef\" matSuffix>\r\n      <ng-container *ngTemplateOutlet=\"sdSuffix.templateRef\">\r\n      </ng-container>\r\n    </ng-container>\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?.pattern && !disableErrorMessage\">\r\n      {{'Pattern error' | sdTranslate}}\r\n    </mat-error>\r\n    <mat-error *ngIf=\"formControl.errors?.customValidator && !disableErrorMessage\">\r\n      <strong>{{formControl.errors?.customValidator}}</strong>\r\n    </mat-error>\r\n  </mat-form-field>\r\n  <div *ngIf=\"tooltip\" class=\"sd-tooltip\">\r\n    <mat-icon (click)=\"sdTooltip.toggle()\" [matTooltip]=\"formControl.value | sdInputCurrencyTooltipPipe:tooltip\"\r\n      matSuffix #sdTooltip=\"matTooltip\">info</mat-icon>\r\n  </div>\r\n</div>",
                     styles: [":host ::ng-deep .mat-form-field.sd-form-tooltip{width:calc(100% - 30px)}.sd-tooltip{display:inline-block;margin:auto;text-align:center;width:30px}:host{display:block;padding-top:5px}: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 input.mat-input-element:disabled{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}"]
                 },] }
     ];

package/bundles/sd-angular-core-input-currency.umd.min.js

@@ -12,5 +12,5 @@
     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 m(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{l(n.next(e))}catch(e){a(e)}}function s(e){try{l(n.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,s)}l((n=n.apply(e,t||[])).next())}))}function h(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(a){return function(s){return function(a){if(r)throw new TypeError("Generator is already executing.");for(;i;)try{if(r=1,n&&(o=2&a[0]?n.return:a[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,a[1])).done)return o;switch(n=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,n=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(6===a[0]&&i.label<o[1]){i.label=o[1],o=a;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(a);break}o[2]&&i.ops.pop(),i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e],n=0}finally{r=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,s])}}}Object.create;var g,y,b,v,w,C,M,I,x,k,j,O,P,E,q,T,W,V,S,F;Object.create;function R(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function N(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!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"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}var A=function(){function e(e,r){var n=this;this.ref=e,this.formConfig=r,g.set(this,i.v4()),this.disableErrorMessage=!1,y.set(this,void 0),b.set(this,void 0),this.modelChange=new t.EventEmitter,v.set(this,"left"),w.set(this,!0),C.set(this,","),M.set(this,0),I.set(this,void 0),x.set(this,void 0),k.set(this,"."),j.set(this,void 0),O.set(this,void 0),P.set(this,void 0),this.isRequired=!1,E.set(this,void 0),q.set(this,void 0),this.sdChange=new t.EventEmitter,this.sdFocus=new t.EventEmitter,this.keyupEnter=new t.EventEmitter,this.formControl=new p.SdFormControl,T.set(this,new l.Subscription),this.options={},W.set(this,(function(){n.options={align:R(n,v)||"",allowNegative:R(n,w),decimal:R(n,C),precision:R(n,M),prefix:R(n,I)||"",suffix:R(n,x)||"",thousands:R(n,k),nullable:R(n,j),min:R(n,O),max:R(n,P),inputMode:u.CurrencyMaskInputMode.NATURAL}})),this.reValidate=function(){n.formControl.updateValueAndValidity()},V.set(this,(function(){n.formControl.clearValidators(),n.formControl.clearAsyncValidators();var e=[],t=[];n.isRequired&&e.push(a.Validators.required),R(n,E)&&e.push(a.Validators.pattern(R(n,E))),R(n,q)&&t.push(R(n,F).call(n,R(n,q))),n.formControl.setValidators(e),n.formControl.setAsyncValidators(t),n.formControl.updateValueAndValidity()})),S.set(this,(function(e){return m(n,void 0,void 0,(function(){return h(this,(function(t){return this.modelChange.emit(e),this.sdChange.emit(e),[2]}))}))})),this.onKeyupEnter=function(){n.keyupEnter.emit(n.formControl.value)},this.onFocus=function(){n.sdFocus.emit()},this.onBlur=function(){var e,t=(null!==(e=n.formControl.value)&&void 0!==e?e:"").toString();t.length>t.trim().length&&n.formControl.setValue(t.trim())},F.set(this,(function(e){return function(t){return m(n,void 0,void 0,(function(){var r,n,o;return h(this,(function(a){switch(a.label){case 0:return r=t.value||null,e&&"function"==typeof e?(n=e(r))instanceof Promise?[4,n]:[3,2]:[3,3];case 1:return(o=a.sent())?[2,{customValidator:o}]:[2,null];case 2:return n?[2,{customValidator:n}]:[2,null];case 3:return[2,null]}}))}))}}))}return Object.defineProperty(e.prototype,"name",{set:function(e){e&&N(this,g,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 a.NgForm?N(this,y,e.form):N(this,y,e))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"model",{set:function(e){R(this,b)!==e&&(N(this,b,e),this.formControl.setValue(e),this.ref.detectChanges())},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"align",{set:function(e){N(this,v,e||"left"),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"allowNegative",{set:function(e){N(this,w,""===e||e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"decimal",{set:function(e){N(this,C,e||","),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"precision",{set:function(e){N(this,M,e||0),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"prefix",{set:function(e){N(this,I,e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"suffix",{set:function(e){N(this,x,e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"thousands",{set:function(e){N(this,k,e||"."),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"nullable",{set:function(e){N(this,j,e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"min",{set:function(e){N(this,O,e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"max",{set:function(e){N(this,P,e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"required",{set:function(e){this.isRequired=""===e||e,R(this,V).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"pattern",{set:function(e){N(this,E,e),R(this,V).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"validator",{set:function(e){N(this,q,e),R(this,V).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}),e.prototype.ngOnInit=function(){var e,t=this;this.appearance=this.appearance||(null===(e=this.formConfig)||void 0===e?void 0:e.appearance),R(this,T).add(this.formControl.sdChanges.subscribe((function(){t.ref.markForCheck()}))),R(this,W).call(this)},e.prototype.ngAfterViewInit=function(){var e;R(this,T).add(this.formControl.valueChanges.pipe(s.debounceTime(200)).subscribe(R(this,S))),null===(e=R(this,y))||void 0===e||e.addControl(R(this,g),this.formControl),this.ref.detectChanges()},e.prototype.ngOnDestroy=function(){var e;null===(e=R(this,y))||void 0===e||e.removeControl(R(this,g)),R(this,T).unsubscribe()},e}();g=new WeakMap,y=new WeakMap,b=new WeakMap,v=new WeakMap,w=new WeakMap,C=new WeakMap,M=new WeakMap,I=new WeakMap,x=new WeakMap,k=new WeakMap,j=new WeakMap,O=new WeakMap,P=new WeakMap,E=new WeakMap,q=new WeakMap,T=new WeakMap,W=new WeakMap,V=new WeakMap,S=new WeakMap,F=new WeakMap,A.decorators=[{type:t.Component,args:[{selector:"sd-input-currency",template:'<label *ngIf="!appearance && label" class="d-block pb-0 T14M">{{label}} <span class="text-danger mb-2" *ngIf="required">*</span></label>\r\n<div class="d-flex align-items-center">\r\n  <mat-form-field class="sd-md"\r\n    [ngClass]="{\'sd-form-tooltip\':tooltip, \'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    <input currencyMask [options]="options" [formControl]="formControl" #control matInput\r\n      [placeholder]="placeholder || label" (keyup.enter)="onKeyupEnter()" (focus)="onFocus()" [required]="isRequired"\r\n      autocomplete="off">\r\n    <ng-container *ngIf="sdSuffix?.templateRef" matSuffix>\r\n      <ng-container *ngTemplateOutlet="sdSuffix.templateRef">\r\n      </ng-container>\r\n    </ng-container>\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?.pattern && !disableErrorMessage">\r\n      {{\'Pattern error\' | sdTranslate}}\r\n    </mat-error>\r\n    <mat-error *ngIf="formControl.errors?.customValidator && !disableErrorMessage">\r\n      <strong>{{formControl.errors?.customValidator}}</strong>\r\n    </mat-error>\r\n  </mat-form-field>\r\n  <div *ngIf="tooltip" class="sd-tooltip">\r\n    <mat-icon (click)="sdTooltip.toggle()" [matTooltip]="formControl.value | sdInputCurrencyTooltipPipe:tooltip"\r\n      matSuffix #sdTooltip="matTooltip">info</mat-icon>\r\n  </div>\r\n</div>',styles:[":host ::ng-deep .mat-form-field.sd-form-tooltip{width:calc(100% - 30px)}.sd-tooltip{display:inline-block;margin:auto;text-align:center;width:30px}:host{display:block;padding-top:5px}: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 input.mat-input-element:disabled{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}"]}]}],A.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:void 0,decorators:[{type:t.Inject,args:[p.FORM_CONFIG]},{type:t.Optional}]}]},A.propDecorators={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}],placeholder:[{type:t.Input}],model:[{type:t.Input}],modelChange:[{type:t.Output}],align:[{type:t.Input}],allowNegative:[{type:t.Input}],decimal:[{type:t.Input}],precision:[{type:t.Input}],prefix:[{type:t.Input}],suffix:[{type:t.Input}],thousands:[{type:t.Input}],nullable:[{type:t.Input}],min:[{type:t.Input}],max:[{type:t.Input}],required:[{type:t.Input}],pattern:[{type:t.Input}],validator:[{type:t.Input}],disabled:[{type:t.Input}],sdSuffix:[{type:t.ContentChild,args:[p.SdSuffixDirective]}],tooltip:[{type:t.Input}],sdChange:[{type:t.Output}],sdFocus:[{type:t.Output}],keyupEnter:[{type:t.Output}],control:[{type:t.ViewChild,args:["control"]}]};var _=function(){function e(){}return e.prototype.transform=function(e,t){return"string"==typeof t?t:t(e)},e}();_.decorators=[{type:t.Pipe,args:[{name:"sdInputCurrencyTooltipPipe"}]}];var D=function(){};D.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule,a.FormsModule,a.ReactiveFormsModule,d.MatFormFieldModule,c.MatInputModule,n.MatIconModule,o.MatTooltipModule,p.SdCommonModule,f.SdTranslateModule,u.NgxCurrencyModule],declarations:[A,_],exports:[A,_]}]}],e.SdInputCurrency=A,e.SdInputCurrencyModule=D,e.SdInputCurrencyTooltipPipe=_,Object.defineProperty(e,"__esModule",{value:!0})}));
+    ***************************************************************************** */function m(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{l(n.next(e))}catch(e){a(e)}}function s(e){try{l(n.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,s)}l((n=n.apply(e,t||[])).next())}))}function h(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(a){return function(s){return function(a){if(r)throw new TypeError("Generator is already executing.");for(;i;)try{if(r=1,n&&(o=2&a[0]?n.return:a[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,a[1])).done)return o;switch(n=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,n=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(6===a[0]&&i.label<o[1]){i.label=o[1],o=a;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(a);break}o[2]&&i.ops.pop(),i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e],n=0}finally{r=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,s])}}}Object.create;var g,y,b,v,w,C,M,I,x,k,j,O,P,E,q,T,W,V,S,F;Object.create;function R(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function N(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!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"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}var A=function(){function e(e,r){var n=this;this.ref=e,this.formConfig=r,g.set(this,i.v4()),this.disableErrorMessage=!1,y.set(this,void 0),b.set(this,void 0),this.modelChange=new t.EventEmitter,v.set(this,"left"),w.set(this,!0),C.set(this,","),M.set(this,0),I.set(this,void 0),x.set(this,void 0),k.set(this,"."),j.set(this,void 0),O.set(this,void 0),P.set(this,void 0),this.isRequired=!1,E.set(this,void 0),q.set(this,void 0),this.sdChange=new t.EventEmitter,this.sdFocus=new t.EventEmitter,this.keyupEnter=new t.EventEmitter,this.formControl=new p.SdFormControl,T.set(this,new l.Subscription),this.options={},W.set(this,(function(){n.options={align:R(n,v)||"",allowNegative:R(n,w),decimal:R(n,C),precision:R(n,M),prefix:R(n,I)||"",suffix:R(n,x)||"",thousands:R(n,k),nullable:R(n,j),min:R(n,O),max:R(n,P),inputMode:u.CurrencyMaskInputMode.NATURAL}})),this.reValidate=function(){n.formControl.updateValueAndValidity()},V.set(this,(function(){n.formControl.clearValidators(),n.formControl.clearAsyncValidators();var e=[],t=[];n.isRequired&&e.push(a.Validators.required),R(n,E)&&e.push(a.Validators.pattern(R(n,E))),R(n,q)&&t.push(R(n,F).call(n,R(n,q))),n.formControl.setValidators(e),n.formControl.setAsyncValidators(t),n.formControl.updateValueAndValidity()})),S.set(this,(function(e){return m(n,void 0,void 0,(function(){return h(this,(function(t){return this.modelChange.emit(e),this.sdChange.emit(e),[2]}))}))})),this.onKeyupEnter=function(){n.keyupEnter.emit(n.formControl.value)},this.onFocus=function(){n.sdFocus.emit()},this.onBlur=function(){var e,t=(null!==(e=n.formControl.value)&&void 0!==e?e:"").toString();t.length>t.trim().length&&n.formControl.setValue(t.trim())},F.set(this,(function(e){return function(t){return m(n,void 0,void 0,(function(){var r,n,o;return h(this,(function(a){switch(a.label){case 0:return r=t.value||null,e&&"function"==typeof e?(n=e(r))instanceof Promise?[4,n]:[3,2]:[3,3];case 1:return(o=a.sent())?[2,{customValidator:o}]:[2,null];case 2:return n?[2,{customValidator:n}]:[2,null];case 3:return[2,null]}}))}))}}))}return Object.defineProperty(e.prototype,"name",{set:function(e){e&&N(this,g,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 a.NgForm?N(this,y,e.form):N(this,y,e))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"model",{set:function(e){R(this,b)!==e&&(N(this,b,e),this.formControl.setValue(e),this.ref.detectChanges())},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"align",{set:function(e){N(this,v,e||"left"),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"allowNegative",{set:function(e){N(this,w,""===e||e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"decimal",{set:function(e){N(this,C,e||","),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"precision",{set:function(e){N(this,M,e||0),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"prefix",{set:function(e){N(this,I,e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"suffix",{set:function(e){N(this,x,e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"thousands",{set:function(e){N(this,k,e||"."),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"nullable",{set:function(e){N(this,j,e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"min",{set:function(e){N(this,O,e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"max",{set:function(e){N(this,P,e),R(this,W).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"required",{set:function(e){this.isRequired=""===e||e,R(this,V).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"pattern",{set:function(e){N(this,E,e),R(this,V).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"validator",{set:function(e){N(this,q,e),R(this,V).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}),e.prototype.ngOnInit=function(){var e,t=this;this.appearance=this.appearance||(null===(e=this.formConfig)||void 0===e?void 0:e.appearance),R(this,T).add(this.formControl.sdChanges.subscribe((function(){t.ref.markForCheck()}))),R(this,W).call(this)},e.prototype.ngAfterViewInit=function(){var e;R(this,T).add(this.formControl.valueChanges.pipe(s.debounceTime(200)).subscribe(R(this,S))),null===(e=R(this,y))||void 0===e||e.addControl(R(this,g),this.formControl),this.ref.detectChanges()},e.prototype.ngOnDestroy=function(){var e;null===(e=R(this,y))||void 0===e||e.removeControl(R(this,g)),R(this,T).unsubscribe()},e}();g=new WeakMap,y=new WeakMap,b=new WeakMap,v=new WeakMap,w=new WeakMap,C=new WeakMap,M=new WeakMap,I=new WeakMap,x=new WeakMap,k=new WeakMap,j=new WeakMap,O=new WeakMap,P=new WeakMap,E=new WeakMap,q=new WeakMap,T=new WeakMap,W=new WeakMap,V=new WeakMap,S=new WeakMap,F=new WeakMap,A.decorators=[{type:t.Component,args:[{selector:"sd-input-currency",template:'<label *ngIf="!appearance && label" class="d-block mb-0 T14M">{{label}} <span class="text-danger mb-2" *ngIf="required">*</span></label>\r\n<div class="d-flex align-items-center">\r\n  <mat-form-field class="sd-md"\r\n    [ngClass]="{\'sd-form-tooltip\':tooltip, \'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    <input currencyMask [options]="options" [formControl]="formControl" #control matInput\r\n      [placeholder]="placeholder || label" (keyup.enter)="onKeyupEnter()" (focus)="onFocus()" [required]="isRequired"\r\n      autocomplete="off">\r\n    <ng-container *ngIf="sdSuffix?.templateRef" matSuffix>\r\n      <ng-container *ngTemplateOutlet="sdSuffix.templateRef">\r\n      </ng-container>\r\n    </ng-container>\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?.pattern && !disableErrorMessage">\r\n      {{\'Pattern error\' | sdTranslate}}\r\n    </mat-error>\r\n    <mat-error *ngIf="formControl.errors?.customValidator && !disableErrorMessage">\r\n      <strong>{{formControl.errors?.customValidator}}</strong>\r\n    </mat-error>\r\n  </mat-form-field>\r\n  <div *ngIf="tooltip" class="sd-tooltip">\r\n    <mat-icon (click)="sdTooltip.toggle()" [matTooltip]="formControl.value | sdInputCurrencyTooltipPipe:tooltip"\r\n      matSuffix #sdTooltip="matTooltip">info</mat-icon>\r\n  </div>\r\n</div>',styles:[":host ::ng-deep .mat-form-field.sd-form-tooltip{width:calc(100% - 30px)}.sd-tooltip{display:inline-block;margin:auto;text-align:center;width:30px}:host{display:block;padding-top:5px}: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 input.mat-input-element:disabled{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}"]}]}],A.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:void 0,decorators:[{type:t.Inject,args:[p.FORM_CONFIG]},{type:t.Optional}]}]},A.propDecorators={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}],placeholder:[{type:t.Input}],model:[{type:t.Input}],modelChange:[{type:t.Output}],align:[{type:t.Input}],allowNegative:[{type:t.Input}],decimal:[{type:t.Input}],precision:[{type:t.Input}],prefix:[{type:t.Input}],suffix:[{type:t.Input}],thousands:[{type:t.Input}],nullable:[{type:t.Input}],min:[{type:t.Input}],max:[{type:t.Input}],required:[{type:t.Input}],pattern:[{type:t.Input}],validator:[{type:t.Input}],disabled:[{type:t.Input}],sdSuffix:[{type:t.ContentChild,args:[p.SdSuffixDirective]}],tooltip:[{type:t.Input}],sdChange:[{type:t.Output}],sdFocus:[{type:t.Output}],keyupEnter:[{type:t.Output}],control:[{type:t.ViewChild,args:["control"]}]};var _=function(){function e(){}return e.prototype.transform=function(e,t){return"string"==typeof t?t:t(e)},e}();_.decorators=[{type:t.Pipe,args:[{name:"sdInputCurrencyTooltipPipe"}]}];var D=function(){};D.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule,a.FormsModule,a.ReactiveFormsModule,d.MatFormFieldModule,c.MatInputModule,n.MatIconModule,o.MatTooltipModule,p.SdCommonModule,f.SdTranslateModule,u.NgxCurrencyModule],declarations:[A,_],exports:[A,_]}]}],e.SdInputCurrency=A,e.SdInputCurrencyModule=D,e.SdInputCurrencyTooltipPipe=_,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=sd-angular-core-input-currency.umd.min.js.map

package/bundles/sd-angular-core-input.umd.js

@@ -644,7 +644,7 @@
     SdInput.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-input',
-                    template: "<label *ngIf=\"!appearance && label\" class=\"d-block pb-0 T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n  [class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n  <ng-container *ngIf=\"sdView?.templateRef && !isFocused; else default\">\r\n    <ng-container *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value }\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field class=\"sd-md\"\r\n      [ngClass]=\"{'sd-form-tooltip':tooltip, '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      <input [id]=\"id\" [formControl]=\"formControl\" [type]=\"type\" #control matInput [placeholder]=\"placeholder || label\"\r\n        (keyup.enter)=\"onKeyupEnter()\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [required]=\"isRequired\"\r\n        [readonly]=\"isReadonly\" [autocomplete]=\"id\" autocorrect=\"off\" [step]=\"1\">\r\n      <button #btnCopy *ngIf=\"copyable\" matSuffix mat-flat-button aria-label=\"Clear\" class=\"btn-copy\"\r\n        (click)=\"copyText()\">\r\n        Copy\r\n      </button>\r\n      <span class=\"mr-1\" *ngIf=\"maxlength\" matSuffix>{{formControl.value?.length || 0}}/{{maxlength}}</span>\r\n      <ng-container *ngIf=\"sdInputSuffix?.templateRef\" matSuffix>\r\n        <ng-container *ngTemplateOutlet=\"sdInputSuffix.templateRef\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <mat-icon *ngIf=\"!hideIcon && sdClickIcon?.observers?.length\" (click)=\"onClickIcon($event)\"\r\n        class=\"pointer sd-suffix-icon\" matSuffix>\r\n        {{icon}}\r\n      </mat-icon>\r\n      <mat-error *ngIf=\"!disableErrorMessage && formControl.touched && formControl.errors?.required\">\r\n        {{'This field is required' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"!disableErrorMessage && formControl.touched && formControl.errors?.maxlength\">\r\n        {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"!disableErrorMessage && formControl.touched && formControl.errors?.pattern\">\r\n        {{'Pattern error' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"!disableErrorMessage && formControl.touched && formControl.errors?.customValidator\">\r\n        {{formControl.errors?.customValidator}}\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <div *ngIf=\"tooltip\" class=\"sd-tooltip\">\r\n      <mat-icon (click)=\"sdTooltip.toggle()\" [matTooltip]=\"formControl.value | sdInputTooltipPipe:tooltip\" matSuffix\r\n        #sdTooltip=\"matTooltip\">info</mat-icon>\r\n    </div>\r\n  </ng-template>\r\n</div>",
+                    template: "<label *ngIf=\"!appearance && label\" class=\"d-block mb-0 T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n  [class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n  <ng-container *ngIf=\"sdView?.templateRef && !isFocused; else default\">\r\n    <ng-container *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value }\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field class=\"sd-md\"\r\n      [ngClass]=\"{'sd-form-tooltip':tooltip, '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      <input [id]=\"id\" [formControl]=\"formControl\" [type]=\"type\" #control matInput [placeholder]=\"placeholder || label\"\r\n        (keyup.enter)=\"onKeyupEnter()\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [required]=\"isRequired\"\r\n        [readonly]=\"isReadonly\" [autocomplete]=\"id\" autocorrect=\"off\" [step]=\"1\">\r\n      <button #btnCopy *ngIf=\"copyable\" matSuffix mat-flat-button aria-label=\"Clear\" class=\"btn-copy\"\r\n        (click)=\"copyText()\">\r\n        Copy\r\n      </button>\r\n      <span class=\"mr-1\" *ngIf=\"maxlength\" matSuffix>{{formControl.value?.length || 0}}/{{maxlength}}</span>\r\n      <ng-container *ngIf=\"sdInputSuffix?.templateRef\" matSuffix>\r\n        <ng-container *ngTemplateOutlet=\"sdInputSuffix.templateRef\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <mat-icon *ngIf=\"!hideIcon && sdClickIcon?.observers?.length\" (click)=\"onClickIcon($event)\"\r\n        class=\"pointer sd-suffix-icon\" matSuffix>\r\n        {{icon}}\r\n      </mat-icon>\r\n      <mat-error *ngIf=\"!disableErrorMessage && formControl.touched && formControl.errors?.required\">\r\n        {{'This field is required' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"!disableErrorMessage && formControl.touched && formControl.errors?.maxlength\">\r\n        {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"!disableErrorMessage && formControl.touched && formControl.errors?.pattern\">\r\n        {{'Pattern error' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"!disableErrorMessage && formControl.touched && formControl.errors?.customValidator\">\r\n        {{formControl.errors?.customValidator}}\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <div *ngIf=\"tooltip\" class=\"sd-tooltip\">\r\n      <mat-icon (click)=\"sdTooltip.toggle()\" [matTooltip]=\"formControl.value | sdInputTooltipPipe:tooltip\" matSuffix\r\n        #sdTooltip=\"matTooltip\">info</mat-icon>\r\n    </div>\r\n  </ng-template>\r\n</div>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host ::ng-deep .mat-form-field.sd-form-tooltip{width:calc(100% - 30px)}: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 input.mat-input-element:disabled{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}.sd-tooltip{display:inline-block;margin:auto;text-align:center;width:30px}:host{display:block;padding-top:5px}.sd-md:hover .btn-copy{visibility:visible}.btn-copy{background:#e9e9e9!important;font-size:12px;line-height:26px!important;margin-bottom:3px;visibility:hidden}"]
                 },] }

package/bundles/sd-angular-core-input.umd.min.js

@@ -12,5 +12,5 @@
     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 h(e,t,r,n){return new(r||(r=Promise))((function(o,i){function a(e){try{s(n.next(e))}catch(e){i(e)}}function l(e){try{s(n.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,l)}s((n=n.apply(e,t||[])).next())}))}function g(e,t){var r,n,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(r)throw new TypeError("Generator is already executing.");for(;a;)try{if(r=1,n&&(o=2&i[0]?n.return:i[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,i[1])).done)return o;switch(n=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++,n=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],n=0}finally{r=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,l])}}}Object.create;Object.create;function y(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function b(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!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"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}var v,C,I,w,x,M,E,k,O,T,F=function(e){this.templateRef=e};F.decorators=[{type:t.Directive,args:[{selector:"[sdInputSuffix]"}]}],F.ctorParameters=function(){return[{type:t.TemplateRef}]};var P=function(){function e(e,r,n){var o=this;this.ref=e,this.formConfig=r,this.utilityService=n,this.id="I"+a.v4(),v.set(this,a.v4()),C.set(this,void 0),this.type="text",this.disableErrorMessage=!1,I.set(this,!1),w.set(this,void 0),this.modelChange=new t.EventEmitter,this.isRequired=!1,this.isReadonly=!1,x.set(this,void 0),M.set(this,void 0),this.icon="search",this.hideIcon=!1,this.sdClickIcon=new t.EventEmitter,this.sdChange=new t.EventEmitter,this.sdFocus=new t.EventEmitter,this.sdFocusForceBlur=new t.EventEmitter,this.keyupEnter=new t.EventEmitter,this.formControl=new u.SdFormControl,E.set(this,new s.Subscription),this.isFocused=!1,this.copyable=!1,this.reValidate=function(){o.formControl.updateValueAndValidity()},k.set(this,(function(){o.formControl.clearValidators(),o.formControl.clearAsyncValidators();var e=[],t=[];o.isRequired&&e.push(i.Validators.required),o.minlength>0&&e.push(i.Validators.minLength(o.minlength)),o.maxlength>0&&e.push(i.Validators.maxLength(o.maxlength)),y(o,x)&&e.push(i.Validators.pattern(y(o,x))),y(o,M)&&t.push(y(o,T).call(o,y(o,M))),o.formControl.setValidators(e),o.formControl.setAsyncValidators(t),o.formControl.updateValueAndValidity()})),O.set(this,(function(e){o.modelChange.emit(e),o.sdChange.emit(e)})),this.onKeyupEnter=function(){var e,t=(null!==(e=o.formControl.value)&&void 0!==e?e:"").toString();t.length>t.trim().length&&o.formControl.setValue(t.trim()),o.keyupEnter.emit(o.formControl.value),y(o,I)&&o.blur()},this.onClickIcon=function(e){null==e||e.preventDefault(),null==e||e.stopPropagation(),o.sdClickIcon.emit(o.formControl.value)},this.onFocus=function(){var e;o.isFocused=!0,o.sdFocus.emit(),(null===(e=o.sdFocusForceBlur.observers)||void 0===e?void 0:e.length)>0&&(o.blur(),o.sdFocusForceBlur.emit())},this.onBlur=function(){var e;o.isFocused=!1;var t=(null!==(e=o.formControl.value)&&void 0!==e?e:"").toString();t.length>t.trim().length&&o.formControl.setValue(t.trim())},this.onClick=function(){var e;(null===(e=o.sdView)||void 0===e?void 0:e.templateRef)&&(o.formControl.disabled||o.isFocused||o.focus())},this.blur=function(){var e,t;o.isFocused=!1,null===(t=null===(e=o.control)||void 0===e?void 0:e.nativeElement)||void 0===t||t.blur()},this.focus=function(){o.isFocused=!0,setTimeout((function(){var e,t;null===(t=null===(e=o.control)||void 0===e?void 0:e.nativeElement)||void 0===t||t.focus()}),100)},T.set(this,(function(e){return function(t){return h(o,void 0,void 0,(function(){var r,n,o;return g(this,(function(i){switch(i.label){case 0:return r=t.value||null,e&&"function"==typeof e?(n=e(r))instanceof Promise?[4,n]:[3,2]:[3,3];case 1:return(o=i.sent())?[2,{customValidator:o}]:[2,null];case 2:return n?[2,{customValidator:n}]:[2,null];case 3:return[2,null]}}))}))}}))}return Object.defineProperty(e.prototype,"name",{set:function(e){e&&b(this,v,e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"form",{set:function(e){e&&(e instanceof i.NgForm?b(this,C,e.form):b(this,C,e))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_disableErrorMessage",{set:function(e){this.disableErrorMessage=""===e||e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_blurOnEnter",{set:function(e){b(this,I,""===e||e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"model",{set:function(e){y(this,w)!==e&&(b(this,w,e),this.formControl.setValue(e,{emitEvent:!1}))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"required",{set:function(e){this.isRequired=""===e||e,y(this,k).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"readonly",{set:function(e){this.isReadonly=""===e||e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"pMinlength",{set:function(e){this.minlength=+e,y(this,k).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"pMaxlength",{set:function(e){this.maxlength=+e,y(this,k).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"pattern",{set:function(e){b(this,x,e),y(this,k).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"validator",{set:function(e){b(this,M,e),y(this,k).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,"_hideIcon",{set:function(e){this.hideIcon=""===e||e,e=""===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),y(this,E).add(this.formControl.sdChanges.subscribe((function(){t.ref.markForCheck()})))},e.prototype.ngAfterViewInit=function(){var e;y(this,E).add(this.formControl.valueChanges.pipe(l.debounceTime(200)).subscribe(y(this,O))),null===(e=y(this,C))||void 0===e||e.addControl(y(this,v),this.formControl),this.ref.detectChanges()},e.prototype.ngOnDestroy=function(){var e;null===(e=y(this,C))||void 0===e||e.removeControl(y(this,v)),y(this,E).unsubscribe()},e.prototype.copyText=function(){var e=this;this.utilityService.copyToClipboard(y(this,w)),this.btnCopy.nativeElement.innerText="Copied",this.btnCopy.nativeElement.setAttribute("style","color: #4caf50;"),setTimeout((function(){e.btnCopy.nativeElement.innerText="Copy",e.btnCopy.nativeElement.removeAttribute("style")}),2e3)},e}();v=new WeakMap,C=new WeakMap,I=new WeakMap,w=new WeakMap,x=new WeakMap,M=new WeakMap,E=new WeakMap,k=new WeakMap,O=new WeakMap,T=new WeakMap,P.decorators=[{type:t.Component,args:[{selector:"sd-input",template:'<label *ngIf="!appearance && label" class="d-block pb-0 T14M">{{label}} <span class="text-danger mb-2" *ngIf="required">*</span></label>\r\n<div class="d-flex align-items-center" [class.sd-view]="sdView?.templateRef" [class.c-focused]="isFocused"\r\n  [class.c-disabled]="formControl.disabled" (click)="onClick()">\r\n  <ng-container *ngIf="sdView?.templateRef && !isFocused; else default">\r\n    <ng-container *ngTemplateOutlet="sdView.templateRef;context: { value: formControl.value }">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field class="sd-md"\r\n      [ngClass]="{\'sd-form-tooltip\':tooltip, \'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      <input [id]="id" [formControl]="formControl" [type]="type" #control matInput [placeholder]="placeholder || label"\r\n        (keyup.enter)="onKeyupEnter()" (focus)="onFocus()" (blur)="onBlur()" [required]="isRequired"\r\n        [readonly]="isReadonly" [autocomplete]="id" autocorrect="off" [step]="1">\r\n      <button #btnCopy *ngIf="copyable" matSuffix mat-flat-button aria-label="Clear" class="btn-copy"\r\n        (click)="copyText()">\r\n        Copy\r\n      </button>\r\n      <span class="mr-1" *ngIf="maxlength" matSuffix>{{formControl.value?.length || 0}}/{{maxlength}}</span>\r\n      <ng-container *ngIf="sdInputSuffix?.templateRef" matSuffix>\r\n        <ng-container *ngTemplateOutlet="sdInputSuffix.templateRef">\r\n        </ng-container>\r\n      </ng-container>\r\n      <mat-icon *ngIf="!hideIcon && sdClickIcon?.observers?.length" (click)="onClickIcon($event)"\r\n        class="pointer sd-suffix-icon" matSuffix>\r\n        {{icon}}\r\n      </mat-icon>\r\n      <mat-error *ngIf="!disableErrorMessage && formControl.touched && formControl.errors?.required">\r\n        {{\'This field is required\' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf="!disableErrorMessage && formControl.touched && formControl.errors?.maxlength">\r\n        {{\'Max length\' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf="!disableErrorMessage && formControl.touched && formControl.errors?.pattern">\r\n        {{\'Pattern error\' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf="!disableErrorMessage && formControl.touched && formControl.errors?.customValidator">\r\n        {{formControl.errors?.customValidator}}\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <div *ngIf="tooltip" class="sd-tooltip">\r\n      <mat-icon (click)="sdTooltip.toggle()" [matTooltip]="formControl.value | sdInputTooltipPipe:tooltip" matSuffix\r\n        #sdTooltip="matTooltip">info</mat-icon>\r\n    </div>\r\n  </ng-template>\r\n</div>',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[":host ::ng-deep .mat-form-field.sd-form-tooltip{width:calc(100% - 30px)}: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 input.mat-input-element:disabled{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}.sd-tooltip{display:inline-block;margin:auto;text-align:center;width:30px}:host{display:block;padding-top:5px}.sd-md:hover .btn-copy{visibility:visible}.btn-copy{background:#e9e9e9!important;font-size:12px;line-height:26px!important;margin-bottom:3px;visibility:hidden}"]}]}],P.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:void 0,decorators:[{type:t.Inject,args:[u.FORM_CONFIG]},{type:t.Optional}]},{type:c.SdUtilityService}]},P.propDecorators={name:[{type:t.Input}],appearance:[{type:t.Input}],size:[{type:t.Input}],form:[{type:t.Input}],label:[{type:t.Input}],placeholder:[{type:t.Input}],type:[{type:t.Input}],_disableErrorMessage:[{type:t.Input,args:["disableErrorMessage"]}],_blurOnEnter:[{type:t.Input,args:["blurOnEnter"]}],model:[{type:t.Input}],modelChange:[{type:t.Output}],required:[{type:t.Input}],readonly:[{type:t.Input}],pMinlength:[{type:t.Input,args:["minlength"]}],pMaxlength:[{type:t.Input,args:["maxlength"]}],pattern:[{type:t.Input}],validator:[{type:t.Input}],disabled:[{type:t.Input}],icon:[{type:t.Input}],_hideIcon:[{type:t.Input,args:["hideIcon"]}],sdClickIcon:[{type:t.Output}],tooltip:[{type:t.Input}],sdChange:[{type:t.Output}],sdFocus:[{type:t.Output}],sdFocusForceBlur:[{type:t.Output}],keyupEnter:[{type:t.Output}],control:[{type:t.ViewChild,args:["control"]}],sdInputSuffix:[{type:t.ContentChild,args:[F]}],sdView:[{type:t.ContentChild,args:[u.SdViewDefDirective]}],btnCopy:[{type:t.ViewChild,args:["btnCopy",{read:t.ElementRef}]}],_copyable:[{type:t.Input,args:["copyable"]}]};var S=function(){function e(){}return e.prototype.transform=function(e,t){return"string"==typeof t?t:t(e)},e}();S.decorators=[{type:t.Pipe,args:[{name:"sdInputTooltipPipe"}]}];var V=function(){function e(){}return e.prototype.ngOnChanges=function(e){console.log(e),e.touch&&this.ref.markForCheck()},e}();V.decorators=[{type:t.Directive,args:[{selector:"[touch]"}]}],V.propDecorators={touch:[{type:t.Input}],ref:[{type:t.Input}]};var j=function(){};j.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule,i.FormsModule,i.ReactiveFormsModule,d.MatFormFieldModule,p.MatInputModule,n.MatIconModule,o.MatTooltipModule,f.SdTranslateModule,u.SdCommonModule,m.MatButtonModule],declarations:[P,S,F,V],exports:[P,S,F,u.SdCommonModule]}]}],e.SdInput=P,e.SdInputModule=j,e.SdInputSuffixDirective=F,e.SdInputTooltipPipe=S,e.ɵa=V,Object.defineProperty(e,"__esModule",{value:!0})}));
+    ***************************************************************************** */function h(e,t,r,n){return new(r||(r=Promise))((function(o,i){function a(e){try{s(n.next(e))}catch(e){i(e)}}function l(e){try{s(n.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,l)}s((n=n.apply(e,t||[])).next())}))}function g(e,t){var r,n,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(r)throw new TypeError("Generator is already executing.");for(;a;)try{if(r=1,n&&(o=2&i[0]?n.return:i[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,i[1])).done)return o;switch(n=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++,n=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],n=0}finally{r=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,l])}}}Object.create;Object.create;function y(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function b(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!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"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}var v,C,I,w,x,M,E,k,O,T,F=function(e){this.templateRef=e};F.decorators=[{type:t.Directive,args:[{selector:"[sdInputSuffix]"}]}],F.ctorParameters=function(){return[{type:t.TemplateRef}]};var P=function(){function e(e,r,n){var o=this;this.ref=e,this.formConfig=r,this.utilityService=n,this.id="I"+a.v4(),v.set(this,a.v4()),C.set(this,void 0),this.type="text",this.disableErrorMessage=!1,I.set(this,!1),w.set(this,void 0),this.modelChange=new t.EventEmitter,this.isRequired=!1,this.isReadonly=!1,x.set(this,void 0),M.set(this,void 0),this.icon="search",this.hideIcon=!1,this.sdClickIcon=new t.EventEmitter,this.sdChange=new t.EventEmitter,this.sdFocus=new t.EventEmitter,this.sdFocusForceBlur=new t.EventEmitter,this.keyupEnter=new t.EventEmitter,this.formControl=new u.SdFormControl,E.set(this,new s.Subscription),this.isFocused=!1,this.copyable=!1,this.reValidate=function(){o.formControl.updateValueAndValidity()},k.set(this,(function(){o.formControl.clearValidators(),o.formControl.clearAsyncValidators();var e=[],t=[];o.isRequired&&e.push(i.Validators.required),o.minlength>0&&e.push(i.Validators.minLength(o.minlength)),o.maxlength>0&&e.push(i.Validators.maxLength(o.maxlength)),y(o,x)&&e.push(i.Validators.pattern(y(o,x))),y(o,M)&&t.push(y(o,T).call(o,y(o,M))),o.formControl.setValidators(e),o.formControl.setAsyncValidators(t),o.formControl.updateValueAndValidity()})),O.set(this,(function(e){o.modelChange.emit(e),o.sdChange.emit(e)})),this.onKeyupEnter=function(){var e,t=(null!==(e=o.formControl.value)&&void 0!==e?e:"").toString();t.length>t.trim().length&&o.formControl.setValue(t.trim()),o.keyupEnter.emit(o.formControl.value),y(o,I)&&o.blur()},this.onClickIcon=function(e){null==e||e.preventDefault(),null==e||e.stopPropagation(),o.sdClickIcon.emit(o.formControl.value)},this.onFocus=function(){var e;o.isFocused=!0,o.sdFocus.emit(),(null===(e=o.sdFocusForceBlur.observers)||void 0===e?void 0:e.length)>0&&(o.blur(),o.sdFocusForceBlur.emit())},this.onBlur=function(){var e;o.isFocused=!1;var t=(null!==(e=o.formControl.value)&&void 0!==e?e:"").toString();t.length>t.trim().length&&o.formControl.setValue(t.trim())},this.onClick=function(){var e;(null===(e=o.sdView)||void 0===e?void 0:e.templateRef)&&(o.formControl.disabled||o.isFocused||o.focus())},this.blur=function(){var e,t;o.isFocused=!1,null===(t=null===(e=o.control)||void 0===e?void 0:e.nativeElement)||void 0===t||t.blur()},this.focus=function(){o.isFocused=!0,setTimeout((function(){var e,t;null===(t=null===(e=o.control)||void 0===e?void 0:e.nativeElement)||void 0===t||t.focus()}),100)},T.set(this,(function(e){return function(t){return h(o,void 0,void 0,(function(){var r,n,o;return g(this,(function(i){switch(i.label){case 0:return r=t.value||null,e&&"function"==typeof e?(n=e(r))instanceof Promise?[4,n]:[3,2]:[3,3];case 1:return(o=i.sent())?[2,{customValidator:o}]:[2,null];case 2:return n?[2,{customValidator:n}]:[2,null];case 3:return[2,null]}}))}))}}))}return Object.defineProperty(e.prototype,"name",{set:function(e){e&&b(this,v,e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"form",{set:function(e){e&&(e instanceof i.NgForm?b(this,C,e.form):b(this,C,e))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_disableErrorMessage",{set:function(e){this.disableErrorMessage=""===e||e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_blurOnEnter",{set:function(e){b(this,I,""===e||e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"model",{set:function(e){y(this,w)!==e&&(b(this,w,e),this.formControl.setValue(e,{emitEvent:!1}))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"required",{set:function(e){this.isRequired=""===e||e,y(this,k).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"readonly",{set:function(e){this.isReadonly=""===e||e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"pMinlength",{set:function(e){this.minlength=+e,y(this,k).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"pMaxlength",{set:function(e){this.maxlength=+e,y(this,k).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"pattern",{set:function(e){b(this,x,e),y(this,k).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"validator",{set:function(e){b(this,M,e),y(this,k).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,"_hideIcon",{set:function(e){this.hideIcon=""===e||e,e=""===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),y(this,E).add(this.formControl.sdChanges.subscribe((function(){t.ref.markForCheck()})))},e.prototype.ngAfterViewInit=function(){var e;y(this,E).add(this.formControl.valueChanges.pipe(l.debounceTime(200)).subscribe(y(this,O))),null===(e=y(this,C))||void 0===e||e.addControl(y(this,v),this.formControl),this.ref.detectChanges()},e.prototype.ngOnDestroy=function(){var e;null===(e=y(this,C))||void 0===e||e.removeControl(y(this,v)),y(this,E).unsubscribe()},e.prototype.copyText=function(){var e=this;this.utilityService.copyToClipboard(y(this,w)),this.btnCopy.nativeElement.innerText="Copied",this.btnCopy.nativeElement.setAttribute("style","color: #4caf50;"),setTimeout((function(){e.btnCopy.nativeElement.innerText="Copy",e.btnCopy.nativeElement.removeAttribute("style")}),2e3)},e}();v=new WeakMap,C=new WeakMap,I=new WeakMap,w=new WeakMap,x=new WeakMap,M=new WeakMap,E=new WeakMap,k=new WeakMap,O=new WeakMap,T=new WeakMap,P.decorators=[{type:t.Component,args:[{selector:"sd-input",template:'<label *ngIf="!appearance && label" class="d-block mb-0 T14M">{{label}} <span class="text-danger mb-2" *ngIf="required">*</span></label>\r\n<div class="d-flex align-items-center" [class.sd-view]="sdView?.templateRef" [class.c-focused]="isFocused"\r\n  [class.c-disabled]="formControl.disabled" (click)="onClick()">\r\n  <ng-container *ngIf="sdView?.templateRef && !isFocused; else default">\r\n    <ng-container *ngTemplateOutlet="sdView.templateRef;context: { value: formControl.value }">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field class="sd-md"\r\n      [ngClass]="{\'sd-form-tooltip\':tooltip, \'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      <input [id]="id" [formControl]="formControl" [type]="type" #control matInput [placeholder]="placeholder || label"\r\n        (keyup.enter)="onKeyupEnter()" (focus)="onFocus()" (blur)="onBlur()" [required]="isRequired"\r\n        [readonly]="isReadonly" [autocomplete]="id" autocorrect="off" [step]="1">\r\n      <button #btnCopy *ngIf="copyable" matSuffix mat-flat-button aria-label="Clear" class="btn-copy"\r\n        (click)="copyText()">\r\n        Copy\r\n      </button>\r\n      <span class="mr-1" *ngIf="maxlength" matSuffix>{{formControl.value?.length || 0}}/{{maxlength}}</span>\r\n      <ng-container *ngIf="sdInputSuffix?.templateRef" matSuffix>\r\n        <ng-container *ngTemplateOutlet="sdInputSuffix.templateRef">\r\n        </ng-container>\r\n      </ng-container>\r\n      <mat-icon *ngIf="!hideIcon && sdClickIcon?.observers?.length" (click)="onClickIcon($event)"\r\n        class="pointer sd-suffix-icon" matSuffix>\r\n        {{icon}}\r\n      </mat-icon>\r\n      <mat-error *ngIf="!disableErrorMessage && formControl.touched && formControl.errors?.required">\r\n        {{\'This field is required\' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf="!disableErrorMessage && formControl.touched && formControl.errors?.maxlength">\r\n        {{\'Max length\' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf="!disableErrorMessage && formControl.touched && formControl.errors?.pattern">\r\n        {{\'Pattern error\' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf="!disableErrorMessage && formControl.touched && formControl.errors?.customValidator">\r\n        {{formControl.errors?.customValidator}}\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <div *ngIf="tooltip" class="sd-tooltip">\r\n      <mat-icon (click)="sdTooltip.toggle()" [matTooltip]="formControl.value | sdInputTooltipPipe:tooltip" matSuffix\r\n        #sdTooltip="matTooltip">info</mat-icon>\r\n    </div>\r\n  </ng-template>\r\n</div>',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[":host ::ng-deep .mat-form-field.sd-form-tooltip{width:calc(100% - 30px)}: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 input.mat-input-element:disabled{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}.sd-tooltip{display:inline-block;margin:auto;text-align:center;width:30px}:host{display:block;padding-top:5px}.sd-md:hover .btn-copy{visibility:visible}.btn-copy{background:#e9e9e9!important;font-size:12px;line-height:26px!important;margin-bottom:3px;visibility:hidden}"]}]}],P.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:void 0,decorators:[{type:t.Inject,args:[u.FORM_CONFIG]},{type:t.Optional}]},{type:c.SdUtilityService}]},P.propDecorators={name:[{type:t.Input}],appearance:[{type:t.Input}],size:[{type:t.Input}],form:[{type:t.Input}],label:[{type:t.Input}],placeholder:[{type:t.Input}],type:[{type:t.Input}],_disableErrorMessage:[{type:t.Input,args:["disableErrorMessage"]}],_blurOnEnter:[{type:t.Input,args:["blurOnEnter"]}],model:[{type:t.Input}],modelChange:[{type:t.Output}],required:[{type:t.Input}],readonly:[{type:t.Input}],pMinlength:[{type:t.Input,args:["minlength"]}],pMaxlength:[{type:t.Input,args:["maxlength"]}],pattern:[{type:t.Input}],validator:[{type:t.Input}],disabled:[{type:t.Input}],icon:[{type:t.Input}],_hideIcon:[{type:t.Input,args:["hideIcon"]}],sdClickIcon:[{type:t.Output}],tooltip:[{type:t.Input}],sdChange:[{type:t.Output}],sdFocus:[{type:t.Output}],sdFocusForceBlur:[{type:t.Output}],keyupEnter:[{type:t.Output}],control:[{type:t.ViewChild,args:["control"]}],sdInputSuffix:[{type:t.ContentChild,args:[F]}],sdView:[{type:t.ContentChild,args:[u.SdViewDefDirective]}],btnCopy:[{type:t.ViewChild,args:["btnCopy",{read:t.ElementRef}]}],_copyable:[{type:t.Input,args:["copyable"]}]};var S=function(){function e(){}return e.prototype.transform=function(e,t){return"string"==typeof t?t:t(e)},e}();S.decorators=[{type:t.Pipe,args:[{name:"sdInputTooltipPipe"}]}];var V=function(){function e(){}return e.prototype.ngOnChanges=function(e){console.log(e),e.touch&&this.ref.markForCheck()},e}();V.decorators=[{type:t.Directive,args:[{selector:"[touch]"}]}],V.propDecorators={touch:[{type:t.Input}],ref:[{type:t.Input}]};var j=function(){};j.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule,i.FormsModule,i.ReactiveFormsModule,d.MatFormFieldModule,p.MatInputModule,n.MatIconModule,o.MatTooltipModule,f.SdTranslateModule,u.SdCommonModule,m.MatButtonModule],declarations:[P,S,F,V],exports:[P,S,F,u.SdCommonModule]}]}],e.SdInput=P,e.SdInputModule=j,e.SdInputSuffixDirective=F,e.SdInputTooltipPipe=S,e.ɵa=V,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=sd-angular-core-input.umd.min.js.map

package/bundles/sd-angular-core-select.umd.js

@@ -813,7 +813,7 @@
     SdSelect.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-select',
-                    template: "<label *ngIf=\"!appearance && label\" class=\"d-block pb-0 T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n  [class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n  <ng-container *ngIf=\"sdView?.templateRef && !isFocused; else default\">\r\n    <ng-container\r\n      *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 class=\"sd-md\" [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 #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\" multiple\r\n        (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n        [ngClass]=\"{'sd-selected': !isRequired && (multiple ? formControl?.value?.length : formControl?.value)}\"\r\n        [required]=\"isRequired\" (openedChange)=\"onOpenChange($event)\" *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 #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n              (keydown)=\"$event.stopPropagation()\" (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}\"\r\n            (change)=\"onSelectAll()\">\r\n            T\u1EA5t c\u1EA3</mat-checkbox>\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}\">\r\n                </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}\">\r\n                </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 #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\"\r\n        (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n        [ngClass]=\"{'sd-selected': !isRequired && formControl?.value}\" [required]=\"isRequired\"\r\n        (openedChange)=\"onOpenChange($event)\" *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 #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n              (keydown)=\"$event.stopPropagation()\" (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}\">\r\n                </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}\">\r\n                </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-icon\r\n        *ngIf=\"(multiple ? formControl?.value?.length : formControl?.value) && !isRequired && !formControl.disabled\"\r\n        class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>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-form-field>\r\n  </ng-template>\r\n</div>",
+                    template: "<label *ngIf=\"!appearance && label\" class=\"d-block mb-0 T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n  [class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n  <ng-container *ngIf=\"sdView?.templateRef && !isFocused; else default\">\r\n    <ng-container\r\n      *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 class=\"sd-md\" [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 #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\" multiple\r\n        (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n        [ngClass]=\"{'sd-selected': !isRequired && (multiple ? formControl?.value?.length : formControl?.value)}\"\r\n        [required]=\"isRequired\" (openedChange)=\"onOpenChange($event)\" *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 #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n              (keydown)=\"$event.stopPropagation()\" (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}\"\r\n            (change)=\"onSelectAll()\">\r\n            T\u1EA5t c\u1EA3</mat-checkbox>\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}\">\r\n                </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}\">\r\n                </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 #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\"\r\n        (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n        [ngClass]=\"{'sd-selected': !isRequired && formControl?.value}\" [required]=\"isRequired\"\r\n        (openedChange)=\"onOpenChange($event)\" *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 #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n              (keydown)=\"$event.stopPropagation()\" (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}\">\r\n                </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}\">\r\n                </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-icon\r\n        *ngIf=\"(multiple ? formControl?.value?.length : formControl?.value) && !isRequired && !formControl.disabled\"\r\n        class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>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-form-field>\r\n  </ng-template>\r\n</div>",
                     changeDetection: core.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)}"]
                 },] }

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

@@ -12,5 +12,5 @@
     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 g(e,t,n,r){return new(n||(n=Promise))((function(i,a){function o(e){try{s(r.next(e))}catch(e){a(e)}}function l(e){try{s(r.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,l)}s((r=r.apply(e,t||[])).next())}))}function v(e,t){var n,r,i,a,o={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return a={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(a){return function(l){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;o;)try{if(n=1,r&&(i=2&a[0]?r.return:a[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,a[1])).done)return i;switch(r=0,i&&(a=[2&a[0],i.value]),a[0]){case 0:case 1:i=a;break;case 4:return o.label++,{value:a[1],done:!1};case 5:o.label++,r=a[1],a=[0];continue;case 7:a=o.ops.pop(),o.trys.pop();continue;default:if(!(i=o.trys,(i=i.length>0&&i[i.length-1])||6!==a[0]&&2!==a[0])){o=0;continue}if(3===a[0]&&(!i||a[1]>i[0]&&a[1]<i[3])){o.label=a[1];break}if(6===a[0]&&o.label<i[1]){o.label=i[1],i=a;break}if(i&&o.label<i[2]){o.label=i[2],o.ops.push(a);break}i[2]&&o.ops.pop(),o.trys.pop();continue}a=t.call(e,o)}catch(e){a=[6,e],r=0}finally{n=i=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}}Object.create;function y(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,i,a=n.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(r=a.next()).done;)o.push(r.value)}catch(e){i={error:e}}finally{try{r&&!r.done&&(n=a.return)&&n.call(a)}finally{if(i)throw i.error}}return o}function b(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(y(arguments[t]));return e}Object.create;function C(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 w(e,t,n,r,i){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?i.call(e,n):i?i.value=n:t.set(e,n),n}var F,I,k,M,S,O,x,D,T,j,P,q,R,V,A,E=function(e){this.templateRef=e};E.decorators=[{type:t.Directive,args:[{selector:"[sdSelectDisplayDef]"}]}],E.ctorParameters=function(){return[{type:t.TemplateRef}]};var W=function(){function e(e,n){var i=this;this.ref=e,this.formConfig=n,F.set(this,void 0),I.set(this,c.v4()),this.disableErrorMessage=!1,this.formControl=new p.SdFormControl,this.searchTerm$=new u.Subject,k.set(this,void 0),M.set(this,new u.BehaviorSubject([])),this.loading=!1,S.set(this,200),this.isRequired=!1,O.set(this,void 0),this.multiple=!1,this.limit=100,this.filtered=!1,this.selectAll=!1,this.modelChange=new t.EventEmitter,this.sdChange=new t.EventEmitter,this.sdSelection=new t.EventEmitter,x.set(this,new u.Subscription),D.set(this,void 0),T.set(this,{}),this.allSelected=!1,j.set(this,{}),this.isFocused=!1,P.set(this,(function(){i.formControl.clearValidators(),i.formControl.clearAsyncValidators();var e=[],t=[];i.isRequired&&e.push(r.Validators.required),C(i,O)&&t.push(C(i,A).call(i,C(i,O))),i.formControl.setValidators(e),i.formControl.setAsyncValidators(t),i.formControl.updateValueAndValidity()})),q.set(this,(function(e,t){return g(i,void 0,void 0,(function(){var n,r,i,a,o=this;return v(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===C(o,T)[e]}))?[4,t(e,!0).catch((function(){return[]})).finally((function(){return o.loading=!1}))]:[3,2]):[2,n]):[2,[]];case 1:r=l.sent(),i=Array.toObject(r,this.valueField),a=Array.toObject(n.map((function(e){var t,n;return(t={})[null==e?void 0:e.toString()]=((n={})[o.valueField]=e,n[o.displayField]=e,n),t})),this.valueField),w(this,T,Object.assign(Object.assign(Object.assign({},a),C(this,T)),i)),l.label=2;case 2:return[2,n.map((function(e){var t,n;return null!==(n=C(o,T)[null==e?void 0:e.toString()])&&void 0!==n?n:((t={})[o.valueField]=e,t[o.displayField]=e,t)}))]}}))}))})),R.set(this,(function(e,t){return g(i,void 0,void 0,(function(){var n,r,i=this;return v(this,(function(a){switch(a.label){case 0:return e=(null==e?void 0:e.toString())||"",void 0!==C(this,j)[e]?[3,2]:(this.loading=!0,[4,t(e).catch((function(){return[]})).finally((function(){return i.loading=!1}))]);case 1:n=a.sent(),r=Array.toObject(n,this.valueField),w(this,T,Object.assign(Object.assign({},C(this,T)),r)),C(this,j)[e]=n.union(this.valueField),a.label=2;case 2:return this.multiple?[4,C(this,q).call(this,this.formControl.value,t)]:[2,C(this,j)[e]];case 3:return[2,b(a.sent(),C(this,j)[e]).union(this.valueField)]}}))}))})),this.onSelectionChange=function(e){var t;i.allSelected=!i.select.options.some((function(e){return!e.selected}));var n=null!==(t=null==e?void 0:e.value)&&void 0!==t?t:"";i.multiple?C(i,V).call(i,n||[]):(i.searchTerm$.next(""),C(i,V).call(i,n))},this.reValidate=function(){i.formControl.updateValueAndValidity({emitEvent:!0})},V.set(this,(function(e){return g(i,void 0,void 0,(function(){var t=this;return v(this,(function(n){return Array.isArray(e)?(this.modelChange.emit(e),this.sdChange.emit(e),this.sdSelection.emit({value:e,items:e.map((function(e){return C(t,T)[null==e?void 0:e.toString()]}))})):(this.modelChange.emit(e),this.sdChange.emit(e),this.sdSelection.emit({value:e,item:C(this,T)[null==e?void 0:e.toString()]})),[2]}))}))})),this.clear=function(e){null==e||e.stopPropagation(),i.multiple?(i.formControl.setValue([]),i.modelChange.emit([]),i.sdChange.emit([]),i.sdSelection.emit({value:[],items:[]})):(i.formControl.setValue(null),i.modelChange.emit(null),i.sdChange.emit(null),i.sdSelection.emit({value:null,item:null}))},this.onClick=function(){var e;(null===(e=i.sdView)||void 0===e?void 0:e.templateRef)&&(i.formControl.disabled||i.isFocused||i.focus())},this.focus=function(){i.isFocused=!0,setTimeout((function(){var e,t;null===(e=i.select)||void 0===e||e.focus(),null===(t=i.select)||void 0===t||t.open()}),100)},A.set(this,(function(e){return function(t){return g(i,void 0,void 0,(function(){var n,r,i;return v(this,(function(a){switch(a.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(i=a.sent())?[2,{customValidator:i}]:[2,null];case 2:return r?[2,{customValidator:r}]:[2,null];case 3:return[2,null]}}))}))}})),this.onOpenChange=function(e){e?(i.isFocused=!0,C(i,F)&&(C(i,F).value=null),i.searchTerm$.next("")):i.isFocused=!1},this.onOptionChange=function(e){null==e||e.hide()},this.trackByKey=function(e,t){return i.valueField?null==t?void 0:t[i.valueField]:t}}return Object.defineProperty(e.prototype,"input",{set:function(e){C(this,F)!==e&&(w(this,F,e),C(this,F).value=null)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"name",{set:function(e){e&&w(this,I,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?w(this,k,e.form):w(this,k,e))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"model",{set:function(e){this.formControl.setValue(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"items",{set:function(e){w(this,S,0),e?Array.isArray(e)?C(this,M).next(e.filter((function(e){return null!=e}))):(w(this,S,500),C(this,M).next(e)):C(this,M).next([]),this.searchTerm$.next("")},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"required",{set:function(e){this.isRequired=""===e||e,C(this,P).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"validator",{set:function(e){w(this,O,e),C(this,P).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}),e.prototype.ngOnInit=function(){var e,t=this;this.appearance=this.appearance||(null===(e=this.formConfig)||void 0===e?void 0:e.appearance),C(this,x).add(this.formControl.sdChanges.subscribe((function(){t.ref.markForCheck()}))),w(this,D,u.combineLatest([C(this,M).asObservable(),this.searchTerm$.asObservable().pipe(d.startWith(""),d.debounceTime(C(this,S))),this.formControl.valueChanges.pipe(d.startWith(this.formControl.value))]).pipe(d.switchMap((function(e){var n=y(e,3),r=n[0],i=n[1],a=n[2];return g(t,void 0,void 0,(function(){var e,t,n,o=this;return v(this,(function(l){switch(l.label){case 0:return a=this.formControl.value,"function"!=typeof r?[3,2]:[4,C(this,R).call(this,i,r)];case 1:return[2,l.sent()];case 2:return w(this,T,r.toObject(this.valueField)),e=Array.isArray(a),t=!!this.valueField&&!!this.displayField,n=r.filter((function(n){var r=t?n[o.valueField]:n,l=t?n[o.displayField]:n;return!(!String.aliasIncludes(r,i)&&!String.aliasIncludes(l,i))||(e?a.some((function(e){return e===r})):a===r)})),r.length<=this.limit?[2,n]:[2,n.sort((function(n,r){var i=t?n[o.valueField]:n,l=t?r[o.valueField]:r,s=0;return e?(s=a.some((function(e){return e===i}))?1:0,(a.some((function(e){return e===l}))?1:0)-s):(a===l?1:0)-(s=a===i?1:0)}))]}}))}))})))),this.selectedItems=u.combineLatest([C(this,M).asObservable(),this.formControl.valueChanges.pipe(d.startWith(this.formControl.value))]).pipe(d.switchMap((function(e){var n=y(e,2),r=n[0],i=n[1];return g(t,void 0,void 0,(function(){var e,t=this;return v(this,(function(n){switch(n.label){case 0:return(null==(i=this.formControl.value)?void 0:i.toString())?(e=Array.isArray(i)?i:[i],this.valueField?"function"!=typeof r?[3,2]:[4,C(this,q).call(this,i,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=C(this,D).pipe(d.map((function(e){return e.paging(t.limit)}))),this.display=this.selectedItems.pipe(d.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(", ")})))},e.prototype.ngAfterViewInit=function(){var e;null===(e=C(this,k))||void 0===e||e.addControl(C(this,I),this.formControl)},e.prototype.ngOnDestroy=function(){var e;null===(e=C(this,k))||void 0===e||e.removeControl(C(this,I)),C(this,x).unsubscribe()},e.prototype.onSelectAll=function(){this.allSelected?this.formControl.setValue(this.select.options.map((function(e){return e.value}))):this.formControl.setValue([]),C(this,V).call(this,this.formControl.value)},e}();F=new WeakMap,I=new WeakMap,k=new WeakMap,M=new WeakMap,S=new WeakMap,O=new WeakMap,x=new WeakMap,D=new WeakMap,T=new WeakMap,j=new WeakMap,P=new WeakMap,q=new WeakMap,R=new WeakMap,V=new WeakMap,A=new WeakMap,W.decorators=[{type:t.Component,args:[{selector:"sd-select",template:'<label *ngIf="!appearance && label" class="d-block pb-0 T14M">{{label}} <span class="text-danger mb-2" *ngIf="required">*</span></label>\r\n<div class="d-flex align-items-center" [class.sd-view]="sdView?.templateRef" [class.c-focused]="isFocused"\r\n  [class.c-disabled]="formControl.disabled" (click)="onClick()">\r\n  <ng-container *ngIf="sdView?.templateRef && !isFocused; else default">\r\n    <ng-container\r\n      *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 class="sd-md" [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 #select [formControl]="formControl" placeholder="{{placeholder || label}}" multiple\r\n        (selectionChange)="onSelectionChange($event)" disableOptionCentering="true" panelClass="sd-select-panel"\r\n        [ngClass]="{\'sd-selected\': !isRequired && (multiple ? formControl?.value?.length : formControl?.value)}"\r\n        [required]="isRequired" (openedChange)="onOpenChange($event)" *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 #input placeholder="{{\'Search\' | sdTranslate}}" matInput autocomplete="off"\r\n              (keydown)="$event.stopPropagation()" (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}"\r\n            (change)="onSelectAll()">\r\n            Tất cả</mat-checkbox>\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}">\r\n                </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}">\r\n                </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 #select [formControl]="formControl" placeholder="{{placeholder || label}}"\r\n        (selectionChange)="onSelectionChange($event)" disableOptionCentering="true" panelClass="sd-select-panel"\r\n        [ngClass]="{\'sd-selected\': !isRequired && formControl?.value}" [required]="isRequired"\r\n        (openedChange)="onOpenChange($event)" *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 #input placeholder="{{\'Search\' | sdTranslate}}" matInput autocomplete="off"\r\n              (keydown)="$event.stopPropagation()" (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}">\r\n                </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}">\r\n                </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-icon\r\n        *ngIf="(multiple ? formControl?.value?.length : formControl?.value) && !isRequired && !formControl.disabled"\r\n        class="pointer sd-suffix-icon" (click)="clear($event)" matSuffix>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-form-field>\r\n  </ng-template>\r\n</div>',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}.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)}"]}]}],W.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:void 0,decorators:[{type:t.Inject,args:[p.FORM_CONFIG]},{type:t.Optional}]}]},W.propDecorators={input:[{type:t.ViewChild,args:[a.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}],placeholder:[{type:t.Input}],model:[{type:t.Input}],items:[{type:t.Input}],valueField:[{type:t.Input}],displayField:[{type:t.Input}],required:[{type:t.Input}],validator:[{type:t.Input}],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:[E]}],_selectAll:[{type:t.Input,args:["selectAll"]}],modelChange:[{type:t.Output}],sdChange:[{type:t.Output}],sdSelection:[{type:t.Output}],sdView:[{type:t.ContentChild,args:[p.SdViewDefDirective]}]};var $=function(){};$.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,r.FormsModule,r.ReactiveFormsModule,a.MatInputModule,l.MatTooltipModule,i.MatFormFieldModule,o.MatIconModule,f.MatSelectModule,s.MatProgressSpinnerModule,h.MatCheckboxModule,m.SdTranslateModule,p.SdCommonModule],declarations:[W,E],exports:[W,E,p.SdCommonModule],providers:[]}]}],e.SdSelect=W,e.SdSelectDisplayDefDirective=E,e.SdSelectModule=$,Object.defineProperty(e,"__esModule",{value:!0})}));
+    ***************************************************************************** */function g(e,t,n,r){return new(n||(n=Promise))((function(i,a){function o(e){try{s(r.next(e))}catch(e){a(e)}}function l(e){try{s(r.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,l)}s((r=r.apply(e,t||[])).next())}))}function v(e,t){var n,r,i,a,o={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return a={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(a){return function(l){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;o;)try{if(n=1,r&&(i=2&a[0]?r.return:a[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,a[1])).done)return i;switch(r=0,i&&(a=[2&a[0],i.value]),a[0]){case 0:case 1:i=a;break;case 4:return o.label++,{value:a[1],done:!1};case 5:o.label++,r=a[1],a=[0];continue;case 7:a=o.ops.pop(),o.trys.pop();continue;default:if(!(i=o.trys,(i=i.length>0&&i[i.length-1])||6!==a[0]&&2!==a[0])){o=0;continue}if(3===a[0]&&(!i||a[1]>i[0]&&a[1]<i[3])){o.label=a[1];break}if(6===a[0]&&o.label<i[1]){o.label=i[1],i=a;break}if(i&&o.label<i[2]){o.label=i[2],o.ops.push(a);break}i[2]&&o.ops.pop(),o.trys.pop();continue}a=t.call(e,o)}catch(e){a=[6,e],r=0}finally{n=i=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}}Object.create;function y(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,i,a=n.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(r=a.next()).done;)o.push(r.value)}catch(e){i={error:e}}finally{try{r&&!r.done&&(n=a.return)&&n.call(a)}finally{if(i)throw i.error}}return o}function b(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(y(arguments[t]));return e}Object.create;function C(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 w(e,t,n,r,i){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?i.call(e,n):i?i.value=n:t.set(e,n),n}var F,I,k,M,S,O,x,D,T,j,P,q,R,V,A,E=function(e){this.templateRef=e};E.decorators=[{type:t.Directive,args:[{selector:"[sdSelectDisplayDef]"}]}],E.ctorParameters=function(){return[{type:t.TemplateRef}]};var W=function(){function e(e,n){var i=this;this.ref=e,this.formConfig=n,F.set(this,void 0),I.set(this,c.v4()),this.disableErrorMessage=!1,this.formControl=new p.SdFormControl,this.searchTerm$=new u.Subject,k.set(this,void 0),M.set(this,new u.BehaviorSubject([])),this.loading=!1,S.set(this,200),this.isRequired=!1,O.set(this,void 0),this.multiple=!1,this.limit=100,this.filtered=!1,this.selectAll=!1,this.modelChange=new t.EventEmitter,this.sdChange=new t.EventEmitter,this.sdSelection=new t.EventEmitter,x.set(this,new u.Subscription),D.set(this,void 0),T.set(this,{}),this.allSelected=!1,j.set(this,{}),this.isFocused=!1,P.set(this,(function(){i.formControl.clearValidators(),i.formControl.clearAsyncValidators();var e=[],t=[];i.isRequired&&e.push(r.Validators.required),C(i,O)&&t.push(C(i,A).call(i,C(i,O))),i.formControl.setValidators(e),i.formControl.setAsyncValidators(t),i.formControl.updateValueAndValidity()})),q.set(this,(function(e,t){return g(i,void 0,void 0,(function(){var n,r,i,a,o=this;return v(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===C(o,T)[e]}))?[4,t(e,!0).catch((function(){return[]})).finally((function(){return o.loading=!1}))]:[3,2]):[2,n]):[2,[]];case 1:r=l.sent(),i=Array.toObject(r,this.valueField),a=Array.toObject(n.map((function(e){var t,n;return(t={})[null==e?void 0:e.toString()]=((n={})[o.valueField]=e,n[o.displayField]=e,n),t})),this.valueField),w(this,T,Object.assign(Object.assign(Object.assign({},a),C(this,T)),i)),l.label=2;case 2:return[2,n.map((function(e){var t,n;return null!==(n=C(o,T)[null==e?void 0:e.toString()])&&void 0!==n?n:((t={})[o.valueField]=e,t[o.displayField]=e,t)}))]}}))}))})),R.set(this,(function(e,t){return g(i,void 0,void 0,(function(){var n,r,i=this;return v(this,(function(a){switch(a.label){case 0:return e=(null==e?void 0:e.toString())||"",void 0!==C(this,j)[e]?[3,2]:(this.loading=!0,[4,t(e).catch((function(){return[]})).finally((function(){return i.loading=!1}))]);case 1:n=a.sent(),r=Array.toObject(n,this.valueField),w(this,T,Object.assign(Object.assign({},C(this,T)),r)),C(this,j)[e]=n.union(this.valueField),a.label=2;case 2:return this.multiple?[4,C(this,q).call(this,this.formControl.value,t)]:[2,C(this,j)[e]];case 3:return[2,b(a.sent(),C(this,j)[e]).union(this.valueField)]}}))}))})),this.onSelectionChange=function(e){var t;i.allSelected=!i.select.options.some((function(e){return!e.selected}));var n=null!==(t=null==e?void 0:e.value)&&void 0!==t?t:"";i.multiple?C(i,V).call(i,n||[]):(i.searchTerm$.next(""),C(i,V).call(i,n))},this.reValidate=function(){i.formControl.updateValueAndValidity({emitEvent:!0})},V.set(this,(function(e){return g(i,void 0,void 0,(function(){var t=this;return v(this,(function(n){return Array.isArray(e)?(this.modelChange.emit(e),this.sdChange.emit(e),this.sdSelection.emit({value:e,items:e.map((function(e){return C(t,T)[null==e?void 0:e.toString()]}))})):(this.modelChange.emit(e),this.sdChange.emit(e),this.sdSelection.emit({value:e,item:C(this,T)[null==e?void 0:e.toString()]})),[2]}))}))})),this.clear=function(e){null==e||e.stopPropagation(),i.multiple?(i.formControl.setValue([]),i.modelChange.emit([]),i.sdChange.emit([]),i.sdSelection.emit({value:[],items:[]})):(i.formControl.setValue(null),i.modelChange.emit(null),i.sdChange.emit(null),i.sdSelection.emit({value:null,item:null}))},this.onClick=function(){var e;(null===(e=i.sdView)||void 0===e?void 0:e.templateRef)&&(i.formControl.disabled||i.isFocused||i.focus())},this.focus=function(){i.isFocused=!0,setTimeout((function(){var e,t;null===(e=i.select)||void 0===e||e.focus(),null===(t=i.select)||void 0===t||t.open()}),100)},A.set(this,(function(e){return function(t){return g(i,void 0,void 0,(function(){var n,r,i;return v(this,(function(a){switch(a.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(i=a.sent())?[2,{customValidator:i}]:[2,null];case 2:return r?[2,{customValidator:r}]:[2,null];case 3:return[2,null]}}))}))}})),this.onOpenChange=function(e){e?(i.isFocused=!0,C(i,F)&&(C(i,F).value=null),i.searchTerm$.next("")):i.isFocused=!1},this.onOptionChange=function(e){null==e||e.hide()},this.trackByKey=function(e,t){return i.valueField?null==t?void 0:t[i.valueField]:t}}return Object.defineProperty(e.prototype,"input",{set:function(e){C(this,F)!==e&&(w(this,F,e),C(this,F).value=null)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"name",{set:function(e){e&&w(this,I,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?w(this,k,e.form):w(this,k,e))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"model",{set:function(e){this.formControl.setValue(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"items",{set:function(e){w(this,S,0),e?Array.isArray(e)?C(this,M).next(e.filter((function(e){return null!=e}))):(w(this,S,500),C(this,M).next(e)):C(this,M).next([]),this.searchTerm$.next("")},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"required",{set:function(e){this.isRequired=""===e||e,C(this,P).call(this)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"validator",{set:function(e){w(this,O,e),C(this,P).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}),e.prototype.ngOnInit=function(){var e,t=this;this.appearance=this.appearance||(null===(e=this.formConfig)||void 0===e?void 0:e.appearance),C(this,x).add(this.formControl.sdChanges.subscribe((function(){t.ref.markForCheck()}))),w(this,D,u.combineLatest([C(this,M).asObservable(),this.searchTerm$.asObservable().pipe(d.startWith(""),d.debounceTime(C(this,S))),this.formControl.valueChanges.pipe(d.startWith(this.formControl.value))]).pipe(d.switchMap((function(e){var n=y(e,3),r=n[0],i=n[1],a=n[2];return g(t,void 0,void 0,(function(){var e,t,n,o=this;return v(this,(function(l){switch(l.label){case 0:return a=this.formControl.value,"function"!=typeof r?[3,2]:[4,C(this,R).call(this,i,r)];case 1:return[2,l.sent()];case 2:return w(this,T,r.toObject(this.valueField)),e=Array.isArray(a),t=!!this.valueField&&!!this.displayField,n=r.filter((function(n){var r=t?n[o.valueField]:n,l=t?n[o.displayField]:n;return!(!String.aliasIncludes(r,i)&&!String.aliasIncludes(l,i))||(e?a.some((function(e){return e===r})):a===r)})),r.length<=this.limit?[2,n]:[2,n.sort((function(n,r){var i=t?n[o.valueField]:n,l=t?r[o.valueField]:r,s=0;return e?(s=a.some((function(e){return e===i}))?1:0,(a.some((function(e){return e===l}))?1:0)-s):(a===l?1:0)-(s=a===i?1:0)}))]}}))}))})))),this.selectedItems=u.combineLatest([C(this,M).asObservable(),this.formControl.valueChanges.pipe(d.startWith(this.formControl.value))]).pipe(d.switchMap((function(e){var n=y(e,2),r=n[0],i=n[1];return g(t,void 0,void 0,(function(){var e,t=this;return v(this,(function(n){switch(n.label){case 0:return(null==(i=this.formControl.value)?void 0:i.toString())?(e=Array.isArray(i)?i:[i],this.valueField?"function"!=typeof r?[3,2]:[4,C(this,q).call(this,i,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=C(this,D).pipe(d.map((function(e){return e.paging(t.limit)}))),this.display=this.selectedItems.pipe(d.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(", ")})))},e.prototype.ngAfterViewInit=function(){var e;null===(e=C(this,k))||void 0===e||e.addControl(C(this,I),this.formControl)},e.prototype.ngOnDestroy=function(){var e;null===(e=C(this,k))||void 0===e||e.removeControl(C(this,I)),C(this,x).unsubscribe()},e.prototype.onSelectAll=function(){this.allSelected?this.formControl.setValue(this.select.options.map((function(e){return e.value}))):this.formControl.setValue([]),C(this,V).call(this,this.formControl.value)},e}();F=new WeakMap,I=new WeakMap,k=new WeakMap,M=new WeakMap,S=new WeakMap,O=new WeakMap,x=new WeakMap,D=new WeakMap,T=new WeakMap,j=new WeakMap,P=new WeakMap,q=new WeakMap,R=new WeakMap,V=new WeakMap,A=new WeakMap,W.decorators=[{type:t.Component,args:[{selector:"sd-select",template:'<label *ngIf="!appearance && label" class="d-block mb-0 T14M">{{label}} <span class="text-danger mb-2" *ngIf="required">*</span></label>\r\n<div class="d-flex align-items-center" [class.sd-view]="sdView?.templateRef" [class.c-focused]="isFocused"\r\n  [class.c-disabled]="formControl.disabled" (click)="onClick()">\r\n  <ng-container *ngIf="sdView?.templateRef && !isFocused; else default">\r\n    <ng-container\r\n      *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 class="sd-md" [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 #select [formControl]="formControl" placeholder="{{placeholder || label}}" multiple\r\n        (selectionChange)="onSelectionChange($event)" disableOptionCentering="true" panelClass="sd-select-panel"\r\n        [ngClass]="{\'sd-selected\': !isRequired && (multiple ? formControl?.value?.length : formControl?.value)}"\r\n        [required]="isRequired" (openedChange)="onOpenChange($event)" *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 #input placeholder="{{\'Search\' | sdTranslate}}" matInput autocomplete="off"\r\n              (keydown)="$event.stopPropagation()" (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}"\r\n            (change)="onSelectAll()">\r\n            Tất cả</mat-checkbox>\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}">\r\n                </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}">\r\n                </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 #select [formControl]="formControl" placeholder="{{placeholder || label}}"\r\n        (selectionChange)="onSelectionChange($event)" disableOptionCentering="true" panelClass="sd-select-panel"\r\n        [ngClass]="{\'sd-selected\': !isRequired && formControl?.value}" [required]="isRequired"\r\n        (openedChange)="onOpenChange($event)" *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 #input placeholder="{{\'Search\' | sdTranslate}}" matInput autocomplete="off"\r\n              (keydown)="$event.stopPropagation()" (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}">\r\n                </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}">\r\n                </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-icon\r\n        *ngIf="(multiple ? formControl?.value?.length : formControl?.value) && !isRequired && !formControl.disabled"\r\n        class="pointer sd-suffix-icon" (click)="clear($event)" matSuffix>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-form-field>\r\n  </ng-template>\r\n</div>',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}.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)}"]}]}],W.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:void 0,decorators:[{type:t.Inject,args:[p.FORM_CONFIG]},{type:t.Optional}]}]},W.propDecorators={input:[{type:t.ViewChild,args:[a.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}],placeholder:[{type:t.Input}],model:[{type:t.Input}],items:[{type:t.Input}],valueField:[{type:t.Input}],displayField:[{type:t.Input}],required:[{type:t.Input}],validator:[{type:t.Input}],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:[E]}],_selectAll:[{type:t.Input,args:["selectAll"]}],modelChange:[{type:t.Output}],sdChange:[{type:t.Output}],sdSelection:[{type:t.Output}],sdView:[{type:t.ContentChild,args:[p.SdViewDefDirective]}]};var $=function(){};$.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,r.FormsModule,r.ReactiveFormsModule,a.MatInputModule,l.MatTooltipModule,i.MatFormFieldModule,o.MatIconModule,f.MatSelectModule,s.MatProgressSpinnerModule,h.MatCheckboxModule,m.SdTranslateModule,p.SdCommonModule],declarations:[W,E],exports:[W,E,p.SdCommonModule],providers:[]}]}],e.SdSelect=W,e.SdSelectDisplayDefDirective=E,e.SdSelectModule=$,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=sd-angular-core-select.umd.min.js.map

package/date-month/sd-angular-core-date-month.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"ɵa":{"parse":{"dateInput":"MM/YYYY"},"display":{"dateInput":"MM/YYYY","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}},"SdDateMonthModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MatMomentDateModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatDatetimePickerModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatTimepickerModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular-material-components/moment-adapter","name":"NgxMatMomentModule","line":28,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":29,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":30,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdDateMonth"}],"exports":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":36,"character":4},{"__symbolic":"reference","name":"SdDateMonth"}],"providers":[]}]}],"members":{}},"SdDateMonth":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":36,"character":1},"arguments":[{"selector":"sd-date-month","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":40,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":42,"character":14},"useValue":{"__symbolic":"reference","name":"ɵa"}}],"template":"<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n     [class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n  <ng-container *ngIf=\"sdView?.templateRef && !isFocused && !datePicker?.opened; else default\">\r\n    <ng-container *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value }\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field class=\"sd-md\"\r\n                    [ngClass]=\"{ 'sd-sm': size === 'sm' , 'no-padding-wrapper': disableErrorMessage}\"\r\n                    appearance=\"outline\">\r\n      <mat-label *ngIf=\"label\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" matInput (dateInput)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n             [formControl]=\"formControl\" [required]=\"isRequired\" [matDatepicker]=\"pickerMonth\"\r\n             placeholder=\"{{ placeholder || label }}\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n             #input/>\r\n\r\n      <mat-icon *ngIf=\"formControl?.value && !isRequired && !formControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n                (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && pickerMonth.open()\" #btn matSuffix>\r\n        today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #pickerMonth [touchUi]=\"isMobileOrTablet\" startView=\"multi-year\"\r\n                      (monthSelected)=\"setMonthAndYear($event, pickerMonth)\"></mat-datepicker>\r\n\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        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n","styles":[":host{display:block;padding-top:5px}: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 input.mat-input-element:disabled{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}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3},"arguments":["disableErrorMessage"]}]}],"_min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3},"arguments":["min"]}]}],"_max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3},"arguments":["max"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":3}}]}],"defaultTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":3}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":3}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":137,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":150,"character":3}}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":152,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":152,"character":16}]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":153,"character":3},"arguments":["input"]}]}],"datePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":154,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepicker","line":154,"character":13}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":158,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":159,"character":19}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}}},"origins":{"ɵa":"./src/lib/date-month.component","SdDateMonthModule":"./src/lib/date-month.module","SdDateMonth":"./src/lib/date-month.component"},"importAs":"@sd-angular/core/date-month"}
+{"__symbolic":"module","version":4,"metadata":{"ɵa":{"parse":{"dateInput":"MM/YYYY"},"display":{"dateInput":"MM/YYYY","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}},"SdDateMonthModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MatMomentDateModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatDatetimePickerModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatTimepickerModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular-material-components/moment-adapter","name":"NgxMatMomentModule","line":28,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":29,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":30,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdDateMonth"}],"exports":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":36,"character":4},{"__symbolic":"reference","name":"SdDateMonth"}],"providers":[]}]}],"members":{}},"SdDateMonth":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"sd-date-month","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":42,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":44,"character":15},"useValue":{"__symbolic":"reference","name":"ɵa"}}],"template":"<label *ngIf=\"!appearance && label\" class=\"d-block mb-0 T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n  *ngIf=\"required\">*</span></label>\r\n<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n     [class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n  <ng-container *ngIf=\"sdView?.templateRef && !isFocused && !datePicker?.opened; else default\">\r\n    <ng-container *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value }\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field 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      <input [id]=\"id\" matInput (dateInput)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n             [formControl]=\"formControl\" [required]=\"isRequired\" [matDatepicker]=\"pickerMonth\"\r\n             placeholder=\"{{ placeholder || label }}\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n             #input/>\r\n\r\n      <mat-icon *ngIf=\"formControl?.value && !isRequired && !formControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n                (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && pickerMonth.open()\" #btn matSuffix>\r\n        today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #pickerMonth [touchUi]=\"isMobileOrTablet\" startView=\"multi-year\"\r\n                      (monthSelected)=\"setMonthAndYear($event, pickerMonth)\"></mat-datepicker>\r\n\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        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n","styles":[":host{display:block;padding-top:5px}: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 input.mat-input-element:disabled{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}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":3},"arguments":["disableErrorMessage"]}]}],"_min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3},"arguments":["min"]}]}],"_max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3},"arguments":["max"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3}}]}],"defaultTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":3}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":3}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":139,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":152,"character":3}}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":154,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":154,"character":16}]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":155,"character":3},"arguments":["input"]}]}],"datePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":156,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepicker","line":156,"character":13}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":162,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":162,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":162,"character":26}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":160,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":161,"character":19},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":162,"character":57}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}}},"origins":{"ɵa":"./src/lib/date-month.component","SdDateMonthModule":"./src/lib/date-month.module","SdDateMonth":"./src/lib/date-month.component"},"importAs":"@sd-angular/core/date-month"}

package/date-month/src/lib/date-month.component.d.ts

@@ -3,7 +3,8 @@ import { Moment } from 'moment';
 import { FormGroup, NgForm } from '@angular/forms';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
-import { SdFormControl, SdViewDefDirective } from '@sd-angular/core/common';
+import { IFormConfiguration, SdFormControl, SdViewDefDirective } from '@sd-angular/core/common';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 export declare const MY_FORMATS: {
     parse: {
         dateInput: string;
@@ -18,9 +19,11 @@ export declare const MY_FORMATS: {
 export declare class SdDateMonth implements OnDestroy, OnInit, AfterViewInit {
     #private;
     private ref;
+    private formConfig;
     id: string;
     isMobileOrTablet: boolean;
     set name(val: string);
+    appearance: MatFormFieldAppearance;
     disableErrorMessage: boolean;
     set _disableErrorMessage(val: boolean | '');
     formControl: SdFormControl;
@@ -46,7 +49,7 @@ export declare class SdDateMonth implements OnDestroy, OnInit, AfterViewInit {
     input: ElementRef;
     datePicker: MatDatepicker<Moment>;
     isFocused: boolean;
-    constructor(ref: ChangeDetectorRef, deviceService: DeviceDetectorService);
+    constructor(ref: ChangeDetectorRef, deviceService: DeviceDetectorService, formConfig: IFormConfiguration);
     ngOnDestroy(): void;
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/date-range/sd-angular-core-date-range.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"SdDateRangeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MatMomentDateModule","line":18,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":19,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdDateRange"}],"exports":[{"__symbolic":"reference","name":"SdDateRange"}],"providers":[]}]}],"members":{}},"SdDateRange":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":31,"character":1},"arguments":[{"selector":"sd-date-range","providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":35,"character":25},"useValue":{"parse":{"dateInput":"DD/MM/YYYY"},"display":{"dateInput":"DD/MM/YYYY","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}}}],"template":"<mat-form-field class=\"sd-md\" [ngClass]=\"{'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage}\" appearance=\"outline\">\r\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n  <mat-date-range-input [max]=\"max\" [min]=\"min\" [rangePicker]=\"picker\" [disabled]=\"formControl.disabled\">\r\n    <input [id]=\"id1\" autocomplete=\"off\" autocorrect=\"off\" matStartDate [formControl]=\"control1\"\r\n      (dateInput)=\"onStartChange($event)\" [placeholder]=\"formControl.disabled ? '' : ('Start' | sdTranslate)\">\r\n    <input [id]=\"id2\" [autocomplete]=\"id2\" autocorrect=\"off\" matEndDate [formControl]=\"control2\"\r\n      (dateInput)=\"onEndChange($event)\" [placeholder]=\"formControl.disabled ? '' : ('End' | sdTranslate)\">\r\n  </mat-date-range-input>\r\n  <mat-icon *ngIf=\"control1?.value || control2?.value\" class=\"pointer sd-suffix-icon\" (click)=\"clear()\" matSuffix>cancel\r\n  </mat-icon>\r\n  <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl.disabled && picker.open()\" matSuffix>today\r\n  </mat-icon>\r\n  <mat-date-range-picker [touchUi]=\"isMobileOrTablet\" #picker></mat-date-range-picker>\r\n</mat-form-field>","styles":[":host{display:block;padding-top:5px}: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 input.mat-end-date:disabled,:host ::ng-deep .mat-form-field input.mat-start-date:disabled{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3},"arguments":["disableErrorMessage"]}]}],"_min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3},"arguments":["min"]}]}],"_max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3},"arguments":["max"]}]}],"from":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"to":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":111,"character":3}}]}],"fromChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":112,"character":3}}]}],"toChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":113,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":121,"character":29}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}}},"origins":{"SdDateRangeModule":"./src/lib/date-range.module","SdDateRange":"./src/lib/date-range.component"},"importAs":"@sd-angular/core/date-range"}
+{"__symbolic":"module","version":4,"metadata":{"SdDateRangeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MatMomentDateModule","line":18,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":19,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdDateRange"}],"exports":[{"__symbolic":"reference","name":"SdDateRange"}],"providers":[]}]}],"members":{}},"SdDateRange":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":35,"character":1},"arguments":[{"selector":"sd-date-range","providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":39,"character":25},"useValue":{"parse":{"dateInput":"DD/MM/YYYY"},"display":{"dateInput":"DD/MM/YYYY","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}}}],"template":"<label *ngIf=\"!appearance && label\" class=\"d-block mb-0 T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n  *ngIf=\"required\">*</span></label>\r\n<mat-form-field class=\"sd-md\" [ngClass]=\"{'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage}\" [appearance]=\"appearance || 'outline'\">\r\n  <mat-label *ngIf=\"appearance && label\">{{label}}</mat-label>\r\n  <mat-date-range-input [max]=\"max\" [min]=\"min\" [rangePicker]=\"picker\" [disabled]=\"formControl.disabled\">\r\n    <input [id]=\"id1\" autocomplete=\"off\" autocorrect=\"off\" matStartDate [formControl]=\"control1\"\r\n      (dateInput)=\"onStartChange($event)\" [placeholder]=\"formControl.disabled ? '' : ('Start' | sdTranslate)\">\r\n    <input [id]=\"id2\" [autocomplete]=\"id2\" autocorrect=\"off\" matEndDate [formControl]=\"control2\"\r\n      (dateInput)=\"onEndChange($event)\" [placeholder]=\"formControl.disabled ? '' : ('End' | sdTranslate)\">\r\n  </mat-date-range-input>\r\n  <mat-icon *ngIf=\"control1?.value || control2?.value\" class=\"pointer sd-suffix-icon\" (click)=\"clear()\" matSuffix>cancel\r\n  </mat-icon>\r\n  <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl.disabled && picker.open()\" matSuffix>today\r\n  </mat-icon>\r\n  <mat-date-range-picker [touchUi]=\"isMobileOrTablet\" #picker></mat-date-range-picker>\r\n</mat-form-field>","styles":[":host{display:block;padding-top:5px}: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 input.mat-end-date:disabled,:host ::ng-deep .mat-form-field input.mat-start-date:disabled{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3},"arguments":["disableErrorMessage"]}]}],"_min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3},"arguments":["min"]}]}],"_max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":3},"arguments":["max"]}]}],"from":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"to":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":116,"character":3}}]}],"fromChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":117,"character":3}}]}],"toChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":118,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":127,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":127,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":127,"character":26}}]],"parameters":[{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":126,"character":29},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":127,"character":57}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}}},"origins":{"SdDateRangeModule":"./src/lib/date-range.module","SdDateRange":"./src/lib/date-range.component"},"importAs":"@sd-angular/core/date-range"}

package/date-range/src/lib/date-range.component.d.ts

@@ -3,13 +3,17 @@ import { FormControl, FormGroup, NgForm } from '@angular/forms';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Moment } from 'moment';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { IFormConfiguration } from '@sd-angular/core/common';
 export declare class SdDateRange implements OnDestroy, OnInit, AfterViewInit {
     #private;
     private detectorService;
+    private formConfig;
     id1: string;
     id2: string;
     isMobileOrTablet: boolean;
     set name(val: string);
+    appearance: MatFormFieldAppearance;
     size: 'sm' | 'lg';
     formControl: FormControl;
     set form(val: NgForm | FormGroup);
@@ -32,7 +36,7 @@ export declare class SdDateRange implements OnDestroy, OnInit, AfterViewInit {
     toChange: EventEmitter<any>;
     control1: FormControl;
     control2: FormControl;
-    constructor(detectorService: DeviceDetectorService);
+    constructor(detectorService: DeviceDetectorService, formConfig: IFormConfiguration);
     ngOnDestroy(): void;
     ngOnInit(): void;
     ngAfterViewInit(): void;