@sd-angular/core 1.1.13 → 1.1.16

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;

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"SdDateTimeModule":{"__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":"SdDateTime"}],"exports":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":36,"character":4},{"__symbolic":"reference","name":"SdDateTime"}],"providers":[]}]}],"members":{}},"SdDateTime":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":50,"character":1},"arguments":[{"selector":"sd-date-time","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":54,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":56,"character":15},"useValue":{"parse":{"dateInput":"DD/MM/YYYY"},"display":{"dateInput":"DD/MM/YYYY","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}}},{"provide":{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NGX_MAT_DATE_FORMATS","line":57,"character":15},"useValue":{"parse":{"dateInput":"DD/MM/YYYY HH:mm"},"display":{"dateInput":"DD/MM/YYYY HH:mm","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}}}],"template":"<label *ngIf=\"!appearance && label\" class=\"d-block pb-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\r\n    *ngIf=\"sdView?.templateRef && !isFocused && !datePicker?.opened && !dateTimePicker?.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 *ngIf=\"type === 'datetime' || type === 'time'\" 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\" [ngxMatDatetimePicker]=\"picker1\" placeholder=\"{{ placeholder || label }}\"\r\n        [min]=\"min\" [required]=\"isRequired\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" #input />\r\n      <!-- <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && picker1.open()\" matSuffix>today\r\n      </mat-icon> -->\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-datepicker-toggle matSuffix [for]=\"picker1\">\r\n      </mat-datepicker-toggle>\r\n      <ngx-mat-datetime-picker #picker1 [defaultTime]=\"defaultTime\" [touchUi]=\"isMobileOrTablet\" [showSpinners]=\"false\"\r\n        (opened)=\"onFocus()\" (closed)=\"onBlur();focusInputElement()\">\r\n      </ngx-mat-datetime-picker>\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?.matDatetimePickerMin && !disableErrorMessage\">\r\n        {{ \"Min date\" | sdTranslate }}:\r\n        <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerMax && !disableErrorMessage\">\r\n        {{ \"Max date\" | sdTranslate }}:\r\n        <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerParse && !disableErrorMessage\">\r\n        {{ \"Parse error\" | sdTranslate }}:\r\n        <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\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    <mat-form-field *ngIf=\"type === 'date'\" 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]=\"picker2\"\r\n        placeholder=\"{{ placeholder || label }}\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" #input />\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\r\n      <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && picker2.open()\" #btn matSuffix>today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #picker2 [touchUi]=\"isMobileOrTablet\"></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    <!-- <ngx-mat-timepicker *ngIf=\"type === 'time'\" formControlName=\"name\" [disabled]=\"disabled\" showSpinners=\"false\" stepHour=\"1\"\r\n  stepMinute=\"1\" stepSecond=\"1\">\r\n</ngx-mat-timepicker> -->\r\n    <mat-form-field *ngIf=\"type === 'month'\" class=\"sd-md\"\r\n      [ngClass]=\"{ 'sd-sm': size === 'sm' , 'no-padding-wrapper': disableErrorMessage}\" 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()\" #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>","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":65,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"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"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":3}}]}],"defaultTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":3}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":3}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":140,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"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}]}]}],"dateTimePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":157,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatDatetimePicker","line":157,"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"}],"focusInputElement":[{"__symbolic":"method"}]}}},"origins":{"SdDateTimeModule":"./src/lib/date-time.module","SdDateTime":"./src/lib/date-time.component"},"importAs":"@sd-angular/core/date-time"}
+{"__symbolic":"module","version":4,"metadata":{"SdDateTimeModule":{"__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":"SdDateTime"}],"exports":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":36,"character":4},{"__symbolic":"reference","name":"SdDateTime"}],"providers":[]}]}],"members":{}},"SdDateTime":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":50,"character":1},"arguments":[{"selector":"sd-date-time","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":54,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":56,"character":15},"useValue":{"parse":{"dateInput":"DD/MM/YYYY"},"display":{"dateInput":"DD/MM/YYYY","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}}},{"provide":{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NGX_MAT_DATE_FORMATS","line":57,"character":15},"useValue":{"parse":{"dateInput":"DD/MM/YYYY HH:mm"},"display":{"dateInput":"DD/MM/YYYY HH:mm","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<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\r\n    *ngIf=\"sdView?.templateRef && !isFocused && !datePicker?.opened && !dateTimePicker?.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 *ngIf=\"type === 'datetime' || type === 'time'\" 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\" [ngxMatDatetimePicker]=\"picker1\" placeholder=\"{{ placeholder || label }}\"\r\n        [min]=\"min\" [required]=\"isRequired\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" #input />\r\n      <!-- <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && picker1.open()\" matSuffix>today\r\n      </mat-icon> -->\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-datepicker-toggle matSuffix [for]=\"picker1\">\r\n      </mat-datepicker-toggle>\r\n      <ngx-mat-datetime-picker #picker1 [defaultTime]=\"defaultTime\" [touchUi]=\"isMobileOrTablet\" [showSpinners]=\"false\"\r\n        (opened)=\"onFocus()\" (closed)=\"onBlur();focusInputElement()\">\r\n      </ngx-mat-datetime-picker>\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?.matDatetimePickerMin && !disableErrorMessage\">\r\n        {{ \"Min date\" | sdTranslate }}:\r\n        <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerMax && !disableErrorMessage\">\r\n        {{ \"Max date\" | sdTranslate }}:\r\n        <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerParse && !disableErrorMessage\">\r\n        {{ \"Parse error\" | sdTranslate }}:\r\n        <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\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    <mat-form-field *ngIf=\"type === 'date'\" 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]=\"picker2\"\r\n        placeholder=\"{{ placeholder || label }}\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" #input />\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\r\n      <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && picker2.open()\" #btn matSuffix>today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #picker2 [touchUi]=\"isMobileOrTablet\"></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    <!-- <ngx-mat-timepicker *ngIf=\"type === 'time'\" formControlName=\"name\" [disabled]=\"disabled\" showSpinners=\"false\" stepHour=\"1\"\r\n  stepMinute=\"1\" stepSecond=\"1\">\r\n</ngx-mat-timepicker> -->\r\n    <mat-form-field *ngIf=\"type === 'month'\" class=\"sd-md\"\r\n      [ngClass]=\"{ 'sd-sm': size === 'sm' , 'no-padding-wrapper': disableErrorMessage}\" 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()\" #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>","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":65,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"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"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":3}}]}],"defaultTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":3}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":3}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":140,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"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}]}]}],"dateTimePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":157,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatDatetimePicker","line":157,"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"}],"focusInputElement":[{"__symbolic":"method"}]}}},"origins":{"SdDateTimeModule":"./src/lib/date-time.module","SdDateTime":"./src/lib/date-time.component"},"importAs":"@sd-angular/core/date-time"}

package/esm2015/autocomplete/src/lib/autocomplete.component.js

@@ -276,7 +276,7 @@ _model = new WeakMap(), _delay = new WeakMap(), _name = new WeakMap(), _form = n
 SdAutocomplete.decorators = [
     { type: Component, args: [{
                 selector: 'sd-autocomplete',
-                template: "<label *ngIf=\"!appearance && label\" class=\"d-block pb-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 && !autocompleteTrigger?.panelOpen && !isFocused; else default\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value, selectedItem: selected | 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      [floatLabel]=\"size === 'sm' || formControl.value ? 'always':'auto'\" [appearance]=\"appearance || 'outline'\">\r\n      <mat-label *ngIf=\"appearance && label\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" #autocompleteTrigger [formControl]=\"inputControl\" [placeholder]=\"controlPlaceHolder | async\"\r\n        [ngClass]=\"{'c-selected': formControl?.value}\" [matAutocomplete]=\"auto\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n        matInput [autocomplete]=\"id\" autocorrect=\"off\" [errorStateMatcher]=\"matcher\" [required]=\"isRequired\" #input />\r\n      <mat-icon *ngIf=\"!loading && formControl?.value && !inputControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-icon *ngIf=\"actionIcon && !loading && !formControl?.value && !inputControl.disabled\"\r\n        class=\"pointer sd-suffix-icon\" (click)=\"onAction($event)\" matSuffix>{{actionIcon}}\r\n      </mat-icon>\r\n      <mat-spinner *ngIf=\"loading\" strokeWidth=\"2\" mode=\"indeterminate\" diameter=\"18\" value=\"100\" matSuffix>\r\n      </mat-spinner>\r\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"displayField ? item[displayField] : item\">\r\n          <ng-container *ngIf=\"autocompleteDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"autocompleteDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!autocompleteDisplayDef?.templateRef\">\r\n            {{ displayField ? item[displayField] : item }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n      <mat-error *ngIf=\"formControl?.errors?.required && !disableErrorMessage\">\r\n        {{ \"This field is required\" | sdTranslate }}\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\"\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 && !autocompleteTrigger?.panelOpen && !isFocused; else default\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value, selectedItem: selected | 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      [floatLabel]=\"size === 'sm' || formControl.value ? 'always':'auto'\" [appearance]=\"appearance || 'outline'\">\r\n      <mat-label *ngIf=\"appearance && label\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" #autocompleteTrigger [formControl]=\"inputControl\" [placeholder]=\"controlPlaceHolder | async\"\r\n        [ngClass]=\"{'c-selected': formControl?.value}\" [matAutocomplete]=\"auto\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n        matInput [autocomplete]=\"id\" autocorrect=\"off\" [errorStateMatcher]=\"matcher\" [required]=\"isRequired\" #input />\r\n      <mat-icon *ngIf=\"!loading && formControl?.value && !inputControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-icon *ngIf=\"actionIcon && !loading && !formControl?.value && !inputControl.disabled\"\r\n        class=\"pointer sd-suffix-icon\" (click)=\"onAction($event)\" matSuffix>{{actionIcon}}\r\n      </mat-icon>\r\n      <mat-spinner *ngIf=\"loading\" strokeWidth=\"2\" mode=\"indeterminate\" diameter=\"18\" value=\"100\" matSuffix>\r\n      </mat-spinner>\r\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"displayField ? item[displayField] : item\">\r\n          <ng-container *ngIf=\"autocompleteDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"autocompleteDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!autocompleteDisplayDef?.templateRef\">\r\n            {{ displayField ? item[displayField] : item }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n      <mat-error *ngIf=\"formControl?.errors?.required && !disableErrorMessage\">\r\n        {{ \"This field is required\" | sdTranslate }}\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 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.c-selected::-moz-placeholder{color:#000;opacity:1}:host ::ng-deep .mat-form-field input.c-selected::placeholder{color:#000;opacity:1}:host ::ng-deep .mat-form-field input.c-selected:-ms-input-placeholder{color:#000}:host ::ng-deep .mat-form-field input.c-selected::-ms-input-placeholder{color:#000}:host ::ng-deep .mat-form-field input.mat-input-element:disabled{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected::-moz-placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected::placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected:-ms-input-placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected::-ms-input-placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}"]
             },] }