@sd-angular/core 1.1.14 → 1.1.15

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

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

package/esm2015/input-currency/src/lib/input-currency.component.js

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

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

@@ -371,7 +371,7 @@ _input = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _itemsChan
 SdSelect.decorators = [
     { type: 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: 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/fesm2015/sd-angular-core-autocomplete.js

@@ -297,7 +297,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}"]
             },] }

package/fesm2015/sd-angular-core-date-month.js

@@ -1,4 +1,4 @@
-import { EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output, ContentChild, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, Inject, Optional, Input, Output, ContentChild, ViewChild, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NgForm, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -10,7 +10,7 @@ import moment from 'moment';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { MAT_DATE_FORMATS } from '@angular/material/core';
 import { Subscription } from 'rxjs';
-import { SdFormControl, SdViewDefDirective, SdCommonModule } from '@sd-angular/core/common';
+import { SdFormControl, FORM_CONFIG, SdViewDefDirective, SdCommonModule } from '@sd-angular/core/common';
 import { SdTranslateModule } from '@sd-angular/core/translate';
 import { MatInputModule } from '@angular/material/input';
 import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
@@ -30,8 +30,9 @@ const MY_FORMATS = {
     },
 };
 class SdDateMonth {
-    constructor(ref, deviceService) {
+    constructor(ref, deviceService, formConfig) {
         this.ref = ref;
+        this.formConfig = formConfig;
         this.id = `I${v4()}`;
         this.isMobileOrTablet = false;
         _date.set(this, void 0);
@@ -191,12 +192,13 @@ class SdDateMonth {
         __classPrivateFieldGet(this, _subscription).unsubscribe();
     }
     ngOnInit() {
-        var _a;
+        var _a, _b;
+        this.appearance = this.appearance || ((_a = this.formConfig) === null || _a === void 0 ? void 0 : _a.appearance);
         __classPrivateFieldGet(this, _subscription).add(this.formControl.sdChanges.subscribe(() => {
             // this.formControl.updateValueAndValidity();
             this.ref.markForCheck();
         }));
-        (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _name), this.formControl);
+        (_b = __classPrivateFieldGet(this, _form)) === null || _b === void 0 ? void 0 : _b.addControl(__classPrivateFieldGet(this, _name), this.formControl);
     }
     ngAfterViewInit() {
     }
@@ -205,7 +207,7 @@ _date = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _subscripti
 SdDateMonth.decorators = [
     { type: Component, args: [{
                 selector: 'sd-date-month',
-                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",
+                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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
@@ -215,10 +217,12 @@ SdDateMonth.decorators = [
 ];
 SdDateMonth.ctorParameters = () => [
     { type: ChangeDetectorRef },
-    { type: DeviceDetectorService }
+    { type: DeviceDetectorService },
+    { type: undefined, decorators: [{ type: Inject, args: [FORM_CONFIG,] }, { type: Optional }] }
 ];
 SdDateMonth.propDecorators = {
     name: [{ type: Input }],
+    appearance: [{ type: Input }],
     _disableErrorMessage: [{ type: Input, args: ['disableErrorMessage',] }],
     _min: [{ type: Input, args: ['min',] }],
     _max: [{ type: Input, args: ['max',] }],

package/fesm2015/sd-angular-core-date-month.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-date-month.js","sources":["../../../../projects/sd-core/date-month/src/lib/date-month.component.ts","../../../../projects/sd-core/date-month/src/lib/date-month.module.ts","../../../../projects/sd-core/date-month/sd-angular-core-date-month.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  EventEmitter,\r\n  Output,\r\n  OnDestroy,\r\n  AfterViewInit,\r\n  ChangeDetectorRef,\r\n  OnInit,\r\n  ViewChild,\r\n  ChangeDetectionStrategy,\r\n  ContentChild,\r\n  ElementRef\r\n} from '@angular/core';\r\nimport * as uuid from 'uuid';\r\nimport moment, {Moment} from 'moment';\r\nimport {FormGroup, NgForm, Validators} from '@angular/forms';\r\nimport {DeviceDetectorService} from 'ngx-device-detector';\r\nimport {MatDatepicker, MatDatepickerInputEvent} from '@angular/material/datepicker';\r\nimport {NgxMatDatetimePicker,} from '@angular-material-components/datetime-picker';\r\nimport {MAT_DATE_FORMATS} from '@angular/material/core';\r\nimport {Subscription} from 'rxjs';\r\nimport {SdFormControl, SdViewDefDirective} from '@sd-angular/core/common';\r\n\r\nexport const MY_FORMATS = {\r\n  parse: {\r\n    dateInput: 'MM/YYYY',\r\n  },\r\n  display: {\r\n    dateInput: 'MM/YYYY',\r\n    monthYearLabel: 'MMM YYYY',\r\n    dateA11yLabel: 'LL',\r\n    monthYearA11yLabel: 'MMMM YYYY',\r\n  },\r\n};\r\n\r\n@Component({\r\n  selector: 'sd-date-month',\r\n  templateUrl: './date-month.component.html',\r\n  styleUrls: ['./date-month.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  providers: [\r\n    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}\r\n  ]\r\n})\r\nexport class SdDateMonth implements OnDestroy, OnInit, AfterViewInit {\r\n  id = `I${uuid.v4()}`;\r\n  isMobileOrTablet = false;\r\n  #date: any;\r\n  #name = uuid.v4();\r\n  @Input() set name(val: string) {\r\n    if (val) {\r\n      this.#name = val;\r\n    }\r\n  }\r\n\r\n  disableErrorMessage = false;\r\n\r\n  @Input('disableErrorMessage') set _disableErrorMessage(val: boolean | '') {\r\n    this.disableErrorMessage = (val === '') || val;\r\n    val = (val === '') || val;\r\n  }\r\n\r\n  formControl = new SdFormControl();\r\n  min: Date;\r\n\r\n  @Input('min') set _min(val: string | Date) {\r\n    if (Date.isDate(val)) {\r\n      this.min = new Date(val);\r\n    } else {\r\n      this.min = null;\r\n    }\r\n  }\r\n\r\n  max: Date;\r\n\r\n  @Input('max') set _max(val: string | Date) {\r\n    if (Date.isDate(val)) {\r\n      this.max = new Date(val);\r\n    } else {\r\n      this.max = null;\r\n    }\r\n  }\r\n\r\n  @Input() size: 'sm' | 'lg';\r\n  #form: FormGroup;\r\n  @Input() set form(val: NgForm | FormGroup) {\r\n    if (val) {\r\n      if (val instanceof NgForm) {\r\n        this.#form = val.form;\r\n      } else {\r\n        this.#form = val;\r\n      }\r\n    }\r\n  }\r\n\r\n  @Input() set disabled(val: boolean | '') {\r\n    val = (val === '') || val;\r\n    if (val) {\r\n      this.formControl.disable();\r\n    } else {\r\n      this.formControl.enable();\r\n    }\r\n  }\r\n\r\n  isRequired = false;\r\n\r\n  @Input() set required(val: boolean | '') {\r\n    this.isRequired = (val === '') || val;\r\n    if (this.isRequired) {\r\n      this.formControl.setValidators([Validators.required]);\r\n    } else {\r\n      this.formControl.clearValidators();\r\n    }\r\n  }\r\n\r\n  @Input() label: string;\r\n  @Input() placeholder: string;\r\n  @Input() defaultTime: any;\r\n\r\n  @Input() set minDate(val: string | Date) {\r\n    if (Date.isDate(val)) {\r\n      this.min = new Date(val);\r\n    } else {\r\n      this.min = null;\r\n    }\r\n  }\r\n\r\n  @Input() set maxDate(val: string | Date) {\r\n    if (Date.isDate(val)) {\r\n      this.max = new Date(val);\r\n    } else {\r\n      this.max = null;\r\n    }\r\n  }\r\n\r\n  @Input() validator: (value: any) => string | Promise<string>;\r\n  @Output() sdChange = new EventEmitter();\r\n\r\n  @Input() set model(val: any) {\r\n    if (!Date.isDate(val)) {\r\n      val = null;\r\n    }\r\n    if (this.#date !== val) {\r\n      this.#date = val;\r\n      const date = Date.isDate(this.#date) ? moment(Date.toFormat(this.#date, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n      this.formControl.setValue(date);\r\n    }\r\n  }\r\n\r\n  @Output() modelChange = new EventEmitter();\r\n  #subscription = new Subscription();\r\n  @ContentChild(SdViewDefDirective) sdView: SdViewDefDirective;\r\n  @ViewChild('input') input: ElementRef;\r\n  @ViewChild(MatDatepicker) datePicker: MatDatepicker<Moment>;\r\n  isFocused = false;\r\n\r\n  constructor(\r\n    private ref: ChangeDetectorRef,\r\n    deviceService: DeviceDetectorService) {\r\n    this.isMobileOrTablet = !deviceService.isDesktop();\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#form?.removeControl(this.#name);\r\n    this.#subscription.unsubscribe();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.#subscription.add(this.formControl.sdChanges.subscribe(() => {\r\n      // this.formControl.updateValueAndValidity();\r\n      this.ref.markForCheck();\r\n    }));\r\n    this.#form?.addControl(this.#name, this.formControl);\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n  }\r\n\r\n  onFocus = () => {\r\n    this.isFocused = true;\r\n  }\r\n\r\n  onBlur = () => {\r\n    this.isFocused = false;\r\n  }\r\n\r\n  onClick = () => {\r\n    if (this.sdView?.templateRef) {\r\n      if (!this.formControl.disabled && !this.isFocused) {\r\n        this.focus();\r\n      }\r\n    }\r\n  }\r\n\r\n  blur = () => {\r\n    this.input?.nativeElement?.blur();\r\n  }\r\n\r\n  focus = () => {\r\n    this.isFocused = true;\r\n    setTimeout(() => {\r\n      this.input?.nativeElement?.focus();\r\n      this.datePicker?.open();\r\n    }, 100);\r\n  }\r\n\r\n  onChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n    const value = event.value?.toDate();\r\n    this.input?.nativeElement?.focus();\r\n    if (value) {\r\n      if (new Date(this.#date) !== value) {\r\n        this.modelChange.emit(value);\r\n        this.sdChange.emit(value);\r\n      }\r\n    } else {\r\n      if (!this.formControl?.value) {\r\n        this.modelChange.emit(null);\r\n        this.sdChange.emit(null);\r\n      }\r\n    }\r\n  }\r\n\r\n  clear = ($event: any) => {\r\n    $event?.stopPropagation();\r\n    if (this.formControl.value) {\r\n      this.formControl.setValue(null);\r\n      this.modelChange.emit(null);\r\n      this.sdChange.emit(null);\r\n    }\r\n  }\r\n\r\n  setMonthAndYear = (normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) => {\r\n    const ctrlValue = this.formControl.value || moment();\r\n    ctrlValue.month(normalizedMonthAndYear.month());\r\n    ctrlValue.year(normalizedMonthAndYear.year());\r\n    this.formControl.setValue(ctrlValue);\r\n    datepicker.close();\r\n    this.modelChange.emit(ctrlValue);\r\n    this.sdChange.emit(ctrlValue);\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport {\r\n  NgxMatDatetimePickerModule,\r\n  NgxMatTimepickerModule\r\n} from '@angular-material-components/datetime-picker';\r\nimport { SdDateMonth } from './date-month.component';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { NgxMatMomentModule } from '@angular-material-components/moment-adapter';\r\nimport { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdCommonModule } from '@sd-angular/core/common';\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    FormsModule,\r\n    ReactiveFormsModule,\r\n    MatInputModule,\r\n    MatIconModule,\r\n    MatFormFieldModule,\r\n    MatDatepickerModule,\r\n    MatMomentDateModule,\r\n    NgxMatDatetimePickerModule,\r\n    NgxMatTimepickerModule,\r\n    NgxMatMomentModule,\r\n    SdTranslateModule,\r\n    SdCommonModule\r\n  ],\r\n  declarations: [\r\n    SdDateMonth\r\n  ],\r\n  exports: [\r\n    SdCommonModule,\r\n    SdDateMonth\r\n  ],\r\n  providers: [\r\n  ]\r\n})\r\nexport class SdDateMonthModule {\r\n\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {MY_FORMATS as ɵa} from './src/lib/date-month.component';"],"names":["uuid.v4"],"mappings":";;;;;;;;;;;;;;;;;;;;MAwBa,UAAU,GAAG;IACxB,KAAK,EAAE;QACL,SAAS,EAAE,SAAS;KACrB;IACD,OAAO,EAAE;QACP,SAAS,EAAE,SAAS;QACpB,cAAc,EAAE,UAAU;QAC1B,aAAa,EAAE,IAAI;QACnB,kBAAkB,EAAE,WAAW;KAChC;EACD;MAWW,WAAW;IAgHtB,YACU,GAAsB,EAC9B,aAAoC;QAD5B,QAAG,GAAH,GAAG,CAAmB;QAhHhC,OAAE,GAAG,IAAIA,EAAO,EAAE,EAAE,CAAC;QACrB,qBAAgB,GAAG,KAAK,CAAC;QACzB,wBAAW;QACX,gBAAQA,EAAO,EAAE,EAAC;QAOlB,wBAAmB,GAAG,KAAK,CAAC;QAO5B,gBAAW,GAAG,IAAI,aAAa,EAAE,CAAC;QAsBlC,wBAAiB;QAoBjB,eAAU,GAAG,KAAK,CAAC;QAgCT,aAAQ,GAAG,IAAI,YAAY,EAAE,CAAC;QAa9B,gBAAW,GAAG,IAAI,YAAY,EAAE,CAAC;QAC3C,wBAAgB,IAAI,YAAY,EAAE,EAAC;QAInC,cAAS,GAAG,KAAK,CAAC;QAwBlB,YAAO,GAAG;YACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB,CAAA;QAED,WAAM,GAAG;YACP,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB,CAAA;QAED,YAAO,GAAG;;YACR,UAAI,IAAI,CAAC,MAAM,0CAAE,WAAW,EAAE;gBAC5B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;oBACjD,IAAI,CAAC,KAAK,EAAE,CAAC;iBACd;aACF;SACF,CAAA;QAED,SAAI,GAAG;;YACL,YAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,0CAAE,IAAI,GAAG;SACnC,CAAA;QAED,UAAK,GAAG;YACN,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,UAAU,CAAC;;gBACT,YAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,0CAAE,KAAK,GAAG;gBACnC,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,GAAG;aACzB,EAAE,GAAG,CAAC,CAAC;SACT,CAAA;QAED,aAAQ,GAAG,CAAC,KAAsC;;YAChD,MAAM,KAAK,SAAG,KAAK,CAAC,KAAK,0CAAE,MAAM,EAAE,CAAC;YACpC,YAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,0CAAE,KAAK,GAAG;YACnC,IAAI,KAAK,EAAE;gBACT,IAAI,IAAI,IAAI,qCAAY,KAAK,KAAK,EAAE;oBAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBAC3B;aACF;iBAAM;gBACL,IAAI,QAAC,IAAI,CAAC,WAAW,0CAAE,KAAK,CAAA,EAAE;oBAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAC5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBAC1B;aACF;SACF,CAAA;QAED,UAAK,GAAG,CAAC,MAAW;YAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,GAAG;YAC1B,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;gBAC1B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC1B;SACF,CAAA;QAED,oBAAe,GAAG,CAAC,sBAA8B,EAAE,UAAiC;YAClF,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,MAAM,EAAE,CAAC;YACrD,SAAS,CAAC,KAAK,CAAC,sBAAsB,CAAC,KAAK,EAAE,CAAC,CAAC;YAChD,SAAS,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;YACrC,UAAU,CAAC,KAAK,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACjC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAC/B,CAAA;QAhFC,IAAI,CAAC,gBAAgB,GAAG,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;KACpD;IA/GD,IAAa,IAAI,CAAC,GAAW;QAC3B,IAAI,GAAG,EAAE;YACP,uBAAA,IAAI,SAAS,GAAG,EAAC;SAClB;KACF;IAID,IAAkC,oBAAoB,CAAC,GAAiB;QACtE,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;QAC/C,GAAG,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;KAC3B;IAKD,IAAkB,IAAI,CAAC,GAAkB;QACvC,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;SAC1B;aAAM;YACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;SACjB;KACF;IAID,IAAkB,IAAI,CAAC,GAAkB;QACvC,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;SAC1B;aAAM;YACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;SACjB;KACF;IAID,IAAa,IAAI,CAAC,GAAuB;QACvC,IAAI,GAAG,EAAE;YACP,IAAI,GAAG,YAAY,MAAM,EAAE;gBACzB,uBAAA,IAAI,SAAS,GAAG,CAAC,IAAI,EAAC;aACvB;iBAAM;gBACL,uBAAA,IAAI,SAAS,GAAG,EAAC;aAClB;SACF;KACF;IAED,IAAa,QAAQ,CAAC,GAAiB;QACrC,GAAG,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;QAC1B,IAAI,GAAG,EAAE;YACP,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;SAC3B;KACF;IAID,IAAa,QAAQ,CAAC,GAAiB;QACrC,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;QACtC,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC;SACvD;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC;SACpC;KACF;IAMD,IAAa,OAAO,CAAC,GAAkB;QACrC,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;SAC1B;aAAM;YACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;SACjB;KACF;IAED,IAAa,OAAO,CAAC,GAAkB;QACrC,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;SAC1B;aAAM;YACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;SACjB;KACF;IAKD,IAAa,KAAK,CAAC,GAAQ;QACzB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;YACrB,GAAG,GAAG,IAAI,CAAC;SACZ;QACD,IAAI,wCAAe,GAAG,EAAE;YACtB,uBAAA,IAAI,SAAS,GAAG,EAAC;YACjB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,qCAAY,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,sCAAa,qBAAqB,CAAC,EAAE,qBAAqB,CAAC,GAAG,IAAI,CAAC;YAC9H,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACjC;KACF;IAeD,WAAW;;QACT,mFAAY,aAAa,sCAAa;QACtC,4CAAmB,WAAW,EAAE,CAAC;KAClC;IAED,QAAQ;;QACN,4CAAmB,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,SAAS,CAAC;;YAE1D,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;SACzB,CAAC,CAAC,CAAC;QACJ,mFAAY,UAAU,sCAAa,IAAI,CAAC,WAAW,EAAE;KACtD;IAED,eAAe;KACd;;;;YA7IF,SAAS,SAAC;gBACT,QAAQ,EAAE,eAAe;gBACzB,8hEAA0C;gBAE1C,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,SAAS,EAAE;oBACT,EAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAC;iBAClD;;aACF;;;YArCC,iBAAiB;YAUX,qBAAqB;;;mBAiC1B,KAAK;mCAQL,KAAK,SAAC,qBAAqB;mBAQ3B,KAAK,SAAC,KAAK;mBAUX,KAAK,SAAC,KAAK;mBAQX,KAAK;mBAEL,KAAK;uBAUL,KAAK;uBAWL,KAAK;oBASL,KAAK;0BACL,KAAK;0BACL,KAAK;sBAEL,KAAK;sBAQL,KAAK;wBAQL,KAAK;uBACL,MAAM;oBAEN,KAAK;0BAWL,MAAM;qBAEN,YAAY,SAAC,kBAAkB;oBAC/B,SAAS,SAAC,OAAO;yBACjB,SAAS,SAAC,aAAa;;;MChHb,iBAAiB;;;YA1B7B,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,WAAW;oBACX,mBAAmB;oBACnB,cAAc;oBACd,aAAa;oBACb,kBAAkB;oBAClB,mBAAmB;oBACnB,mBAAmB;oBACnB,0BAA0B;oBAC1B,sBAAsB;oBACtB,kBAAkB;oBAClB,iBAAiB;oBACjB,cAAc;iBACf;gBACD,YAAY,EAAE;oBACZ,WAAW;iBACZ;gBACD,OAAO,EAAE;oBACP,cAAc;oBACd,WAAW;iBACZ;gBACD,SAAS,EAAE,EACV;aACF;;;ACzCD;;;;;;"}
+{"version":3,"file":"sd-angular-core-date-month.js","sources":["../../../../projects/sd-core/date-month/src/lib/date-month.component.ts","../../../../projects/sd-core/date-month/src/lib/date-month.module.ts","../../../../projects/sd-core/date-month/sd-angular-core-date-month.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  EventEmitter,\r\n  Output,\r\n  OnDestroy,\r\n  AfterViewInit,\r\n  ChangeDetectorRef,\r\n  OnInit,\r\n  ViewChild,\r\n  ChangeDetectionStrategy,\r\n  ContentChild,\r\n  ElementRef,\r\n  Inject,\r\n  Optional\r\n} from '@angular/core';\r\nimport * as uuid from 'uuid';\r\nimport moment, { Moment } from 'moment';\r\nimport { FormGroup, NgForm, Validators } from '@angular/forms';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';\r\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { FORM_CONFIG, IFormConfiguration, SdFormControl, SdViewDefDirective } from '@sd-angular/core/common';\r\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\r\n\r\nexport const MY_FORMATS = {\r\n  parse: {\r\n    dateInput: 'MM/YYYY',\r\n  },\r\n  display: {\r\n    dateInput: 'MM/YYYY',\r\n    monthYearLabel: 'MMM YYYY',\r\n    dateA11yLabel: 'LL',\r\n    monthYearA11yLabel: 'MMMM YYYY',\r\n  },\r\n};\r\n\r\n@Component({\r\n  selector: 'sd-date-month',\r\n  templateUrl: './date-month.component.html',\r\n  styleUrls: ['./date-month.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  providers: [\r\n    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }\r\n  ]\r\n})\r\nexport class SdDateMonth implements OnDestroy, OnInit, AfterViewInit {\r\n  id = `I${uuid.v4()}`;\r\n  isMobileOrTablet = false;\r\n  #date: any;\r\n  #name = uuid.v4();\r\n  @Input() set name(val: string) {\r\n    if (val) {\r\n      this.#name = val;\r\n    }\r\n  }\r\n  @Input() appearance: MatFormFieldAppearance;\r\n  disableErrorMessage = false;\r\n\r\n  @Input('disableErrorMessage') set _disableErrorMessage(val: boolean | '') {\r\n    this.disableErrorMessage = (val === '') || val;\r\n    val = (val === '') || val;\r\n  }\r\n\r\n  formControl = new SdFormControl();\r\n  min: Date;\r\n\r\n  @Input('min') set _min(val: string | Date) {\r\n    if (Date.isDate(val)) {\r\n      this.min = new Date(val);\r\n    } else {\r\n      this.min = null;\r\n    }\r\n  }\r\n\r\n  max: Date;\r\n\r\n  @Input('max') set _max(val: string | Date) {\r\n    if (Date.isDate(val)) {\r\n      this.max = new Date(val);\r\n    } else {\r\n      this.max = null;\r\n    }\r\n  }\r\n\r\n  @Input() size: 'sm' | 'lg';\r\n  #form: FormGroup;\r\n  @Input() set form(val: NgForm | FormGroup) {\r\n    if (val) {\r\n      if (val instanceof NgForm) {\r\n        this.#form = val.form;\r\n      } else {\r\n        this.#form = val;\r\n      }\r\n    }\r\n  }\r\n\r\n  @Input() set disabled(val: boolean | '') {\r\n    val = (val === '') || val;\r\n    if (val) {\r\n      this.formControl.disable();\r\n    } else {\r\n      this.formControl.enable();\r\n    }\r\n  }\r\n\r\n  isRequired = false;\r\n\r\n  @Input() set required(val: boolean | '') {\r\n    this.isRequired = (val === '') || val;\r\n    if (this.isRequired) {\r\n      this.formControl.setValidators([Validators.required]);\r\n    } else {\r\n      this.formControl.clearValidators();\r\n    }\r\n  }\r\n\r\n  @Input() label: string;\r\n  @Input() placeholder: string;\r\n  @Input() defaultTime: any;\r\n\r\n  @Input() set minDate(val: string | Date) {\r\n    if (Date.isDate(val)) {\r\n      this.min = new Date(val);\r\n    } else {\r\n      this.min = null;\r\n    }\r\n  }\r\n\r\n  @Input() set maxDate(val: string | Date) {\r\n    if (Date.isDate(val)) {\r\n      this.max = new Date(val);\r\n    } else {\r\n      this.max = null;\r\n    }\r\n  }\r\n\r\n  @Input() validator: (value: any) => string | Promise<string>;\r\n  @Output() sdChange = new EventEmitter();\r\n\r\n  @Input() set model(val: any) {\r\n    if (!Date.isDate(val)) {\r\n      val = null;\r\n    }\r\n    if (this.#date !== val) {\r\n      this.#date = val;\r\n      const date = Date.isDate(this.#date) ? moment(Date.toFormat(this.#date, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n      this.formControl.setValue(date);\r\n    }\r\n  }\r\n\r\n  @Output() modelChange = new EventEmitter();\r\n  #subscription = new Subscription();\r\n  @ContentChild(SdViewDefDirective) sdView: SdViewDefDirective;\r\n  @ViewChild('input') input: ElementRef;\r\n  @ViewChild(MatDatepicker) datePicker: MatDatepicker<Moment>;\r\n  isFocused = false;\r\n\r\n  constructor(\r\n    private ref: ChangeDetectorRef,\r\n    deviceService: DeviceDetectorService,\r\n    @Inject(FORM_CONFIG) @Optional() private formConfig: IFormConfiguration) {\r\n    this.isMobileOrTablet = !deviceService.isDesktop();\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#form?.removeControl(this.#name);\r\n    this.#subscription.unsubscribe();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.appearance = this.appearance || this.formConfig?.appearance;\r\n    this.#subscription.add(this.formControl.sdChanges.subscribe(() => {\r\n      // this.formControl.updateValueAndValidity();\r\n      this.ref.markForCheck();\r\n    }));\r\n    this.#form?.addControl(this.#name, this.formControl);\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n  }\r\n\r\n  onFocus = () => {\r\n    this.isFocused = true;\r\n  }\r\n\r\n  onBlur = () => {\r\n    this.isFocused = false;\r\n  }\r\n\r\n  onClick = () => {\r\n    if (this.sdView?.templateRef) {\r\n      if (!this.formControl.disabled && !this.isFocused) {\r\n        this.focus();\r\n      }\r\n    }\r\n  }\r\n\r\n  blur = () => {\r\n    this.input?.nativeElement?.blur();\r\n  }\r\n\r\n  focus = () => {\r\n    this.isFocused = true;\r\n    setTimeout(() => {\r\n      this.input?.nativeElement?.focus();\r\n      this.datePicker?.open();\r\n    }, 100);\r\n  }\r\n\r\n  onChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n    const value = event.value?.toDate();\r\n    this.input?.nativeElement?.focus();\r\n    if (value) {\r\n      if (new Date(this.#date) !== value) {\r\n        this.modelChange.emit(value);\r\n        this.sdChange.emit(value);\r\n      }\r\n    } else {\r\n      if (!this.formControl?.value) {\r\n        this.modelChange.emit(null);\r\n        this.sdChange.emit(null);\r\n      }\r\n    }\r\n  }\r\n\r\n  clear = ($event: any) => {\r\n    $event?.stopPropagation();\r\n    if (this.formControl.value) {\r\n      this.formControl.setValue(null);\r\n      this.modelChange.emit(null);\r\n      this.sdChange.emit(null);\r\n    }\r\n  }\r\n\r\n  setMonthAndYear = (normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) => {\r\n    const ctrlValue = this.formControl.value || moment();\r\n    ctrlValue.month(normalizedMonthAndYear.month());\r\n    ctrlValue.year(normalizedMonthAndYear.year());\r\n    this.formControl.setValue(ctrlValue);\r\n    datepicker.close();\r\n    this.modelChange.emit(ctrlValue);\r\n    this.sdChange.emit(ctrlValue);\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport {\r\n  NgxMatDatetimePickerModule,\r\n  NgxMatTimepickerModule\r\n} from '@angular-material-components/datetime-picker';\r\nimport { SdDateMonth } from './date-month.component';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { NgxMatMomentModule } from '@angular-material-components/moment-adapter';\r\nimport { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdCommonModule } from '@sd-angular/core/common';\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    FormsModule,\r\n    ReactiveFormsModule,\r\n    MatInputModule,\r\n    MatIconModule,\r\n    MatFormFieldModule,\r\n    MatDatepickerModule,\r\n    MatMomentDateModule,\r\n    NgxMatDatetimePickerModule,\r\n    NgxMatTimepickerModule,\r\n    NgxMatMomentModule,\r\n    SdTranslateModule,\r\n    SdCommonModule\r\n  ],\r\n  declarations: [\r\n    SdDateMonth\r\n  ],\r\n  exports: [\r\n    SdCommonModule,\r\n    SdDateMonth\r\n  ],\r\n  providers: [\r\n  ]\r\n})\r\nexport class SdDateMonthModule {\r\n\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {MY_FORMATS as ɵa} from './src/lib/date-month.component';"],"names":["uuid.v4"],"mappings":"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"}

package/fesm2015/sd-angular-core-date-range.js

@@ -1,5 +1,5 @@
-import '@sd-angular/core/common';
-import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { FORM_CONFIG } from '@sd-angular/core/common';
+import { EventEmitter, Component, Inject, Optional, Input, Output, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, NgForm, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -29,8 +29,9 @@ const CUSTOM_DATE_FORMATS = {
 };
 const ɵ0 = CUSTOM_DATE_FORMATS;
 class SdDateRange {
-    constructor(detectorService) {
+    constructor(detectorService, formConfig) {
         this.detectorService = detectorService;
+        this.formConfig = formConfig;
         this.id1 = `I${v4()}`;
         this.id2 = `I${v4()}`;
         _from.set(this, null);
@@ -185,10 +186,11 @@ class SdDateRange {
         __classPrivateFieldGet(this, _subscription).unsubscribe();
     }
     ngOnInit() {
-        var _a, _b, _c;
-        (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _c1), this.control1);
-        (_b = __classPrivateFieldGet(this, _form)) === null || _b === void 0 ? void 0 : _b.addControl(__classPrivateFieldGet(this, _c2), this.control2);
-        (_c = __classPrivateFieldGet(this, _form)) === null || _c === void 0 ? void 0 : _c.addControl(__classPrivateFieldGet(this, _name), this.formControl);
+        var _a, _b, _c, _d;
+        this.appearance = this.appearance || ((_a = this.formConfig) === null || _a === void 0 ? void 0 : _a.appearance);
+        (_b = __classPrivateFieldGet(this, _form)) === null || _b === void 0 ? void 0 : _b.addControl(__classPrivateFieldGet(this, _c1), this.control1);
+        (_c = __classPrivateFieldGet(this, _form)) === null || _c === void 0 ? void 0 : _c.addControl(__classPrivateFieldGet(this, _c2), this.control2);
+        (_d = __classPrivateFieldGet(this, _form)) === null || _d === void 0 ? void 0 : _d.addControl(__classPrivateFieldGet(this, _name), this.formControl);
     }
     ngAfterViewInit() {
         __classPrivateFieldGet(this, _subscription).add(merge(this.control1.valueChanges, this.control2.valueChanges).pipe(debounceTime(500)).subscribe(() => {
@@ -217,16 +219,18 @@ _from = new WeakMap(), _to = new WeakMap(), _name = new WeakMap(), _form = new W
 SdDateRange.decorators = [
     { type: Component, args: [{
                 selector: 'sd-date-range',
-                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>",
+                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>",
                 providers: [{ provide: MAT_DATE_FORMATS, useValue: ɵ0 }],
                 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}"]
             },] }
 ];
 SdDateRange.ctorParameters = () => [
-    { type: DeviceDetectorService }
+    { type: DeviceDetectorService },
+    { type: undefined, decorators: [{ type: Inject, args: [FORM_CONFIG,] }, { type: Optional }] }
 ];
 SdDateRange.propDecorators = {
     name: [{ type: Input }],
+    appearance: [{ type: Input }],
     size: [{ type: Input }],
     form: [{ type: Input }],
     disabled: [{ type: Input }],

package/fesm2015/sd-angular-core-date-range.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-date-range.js","sources":["../../../../projects/sd-core/date-range/src/lib/date-range.component.ts","../../../../projects/sd-core/date-range/src/lib/date-range.module.ts","../../../../projects/sd-core/date-range/sd-angular-core-date-range.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  EventEmitter,\r\n  Output,\r\n  OnDestroy,\r\n  AfterViewInit,\r\n  OnInit\r\n} from '@angular/core';\r\n\r\nimport { FormControl, FormGroup, NgForm } from '@angular/forms';\r\nimport { MatDatepickerInputEvent, } from '@angular/material/datepicker';\r\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport moment, { Moment } from 'moment';\r\nimport * as uuid from 'uuid';\r\nimport { merge, Subscription } from 'rxjs';\r\nimport { debounceTime } from 'rxjs/operators';\r\n\r\nconst CUSTOM_DATE_FORMATS = {\r\n  parse: {\r\n    dateInput: 'DD/MM/YYYY'\r\n  },\r\n  display: {\r\n    dateInput: 'DD/MM/YYYY',\r\n    monthYearLabel: 'MMM YYYY',\r\n    dateA11yLabel: 'LL',\r\n    monthYearA11yLabel: 'MMMM YYYY'\r\n  }\r\n};\r\n\r\n@Component({\r\n  selector: 'sd-date-range',\r\n  templateUrl: './date-range.component.html',\r\n  styleUrls: ['./date-range.component.scss'],\r\n  providers: [{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }],\r\n})\r\nexport class SdDateRange implements OnDestroy, OnInit, AfterViewInit {\r\n  id1 = `I${uuid.v4()}`;\r\n  id2 = `I${uuid.v4()}`;\r\n  #from: any = null;\r\n  #to: any = null;\r\n  isMobileOrTablet = false;\r\n  #name = uuid.v4();\r\n  @Input() set name(val: string) {\r\n    if (val) {\r\n      this.#name = val;\r\n    }\r\n  }\r\n  @Input() size: 'sm' | 'lg';\r\n  #form: FormGroup;\r\n  formControl = new FormControl();\r\n  @Input() set form(val: NgForm | FormGroup) {\r\n    if (val) {\r\n      if (val instanceof NgForm) {\r\n        this.#form = val.form;\r\n      } else {\r\n        this.#form = val;\r\n      }\r\n    }\r\n  }\r\n  // @Input() disabled = false;\r\n  @Input() set disabled(val: boolean | '') {\r\n    val = (val === '') || val;\r\n    if (val) {\r\n      this.formControl.disable();\r\n    } else {\r\n      this.formControl.enable();\r\n    }\r\n  }\r\n  @Input() required = false;\r\n  @Input() label: string;\r\n  disableErrorMessage = false;\r\n  @Input('disableErrorMessage') set _disableErrorMessage(val: boolean | '') {\r\n    this.disableErrorMessage = (val === '') || val;\r\n    val = (val === '') || val;\r\n  }\r\n  min: Date;\r\n  @Input('min') set _min(val: string) {\r\n    if (Date.isDate(val)) {\r\n      this.min = new Date(val);\r\n    } else {\r\n      this.min = null;\r\n    }\r\n  }\r\n  max: Date;\r\n  @Input('max') set _max(val: string) {\r\n    if (Date.isDate(val)) {\r\n      this.max = new Date(val);\r\n    } else {\r\n      this.max = null;\r\n    }\r\n  }\r\n  @Input() set from(val: any) {\r\n    if (!Date.isDate(val)) {\r\n      val = null;\r\n    }\r\n    if (this.#from !== val) {\r\n      this.#from = val;\r\n      this.#onChanges();\r\n    }\r\n  }\r\n  @Input() set to(val: any) {\r\n    if (!Date.isDate(val)) {\r\n      val = null;\r\n    }\r\n    if (this.#to !== val) {\r\n      this.#to = val;\r\n      this.#onChanges();\r\n    }\r\n  }\r\n  @Output() sdChange = new EventEmitter<{ from: Date, to: Date }>();\r\n  @Output() fromChange = new EventEmitter();\r\n  @Output() toChange = new EventEmitter();\r\n\r\n  control1 = new FormControl();\r\n  #c1 = uuid.v4();\r\n  control2 = new FormControl();\r\n  #c2 = uuid.v4();\r\n  #subscription = new Subscription();\r\n  constructor(\r\n    private detectorService: DeviceDetectorService) {\r\n    this.isMobileOrTablet = !this.detectorService.isDesktop();\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#form?.removeControl(this.#c1);\r\n    this.#form?.removeControl(this.#c2);\r\n    this.#form?.removeControl(this.#name);\r\n    this.#subscription.unsubscribe();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.#form?.addControl(this.#c1, this.control1);\r\n    this.#form?.addControl(this.#c2, this.control2);\r\n    this.#form?.addControl(this.#name, this.formControl);\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.#subscription.add(merge(this.control1.valueChanges, this.control2.valueChanges).pipe(debounceTime(500)).subscribe(() => {\r\n      const from = this.control1.value?.toDate() || null;\r\n      const to = this.control2.value?.toDate() || null;\r\n      if (this.#from !== from || this.#to !== to) {\r\n        if (from && to) {\r\n          this.sdChange.emit({\r\n            from,\r\n            to\r\n          });\r\n        } else if (!from && !to) {\r\n          this.sdChange.emit({\r\n            from: null,\r\n            to: null\r\n          });\r\n        }\r\n      }\r\n    }));\r\n    this.#onChanges();\r\n  }\r\n\r\n  #onChanges = () => {\r\n    const from = Date.isDate(this.#from) ? moment(Date.toFormat(this.#from, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') :  null;\r\n    const to = Date.isDate(this.#to) ? moment(Date.toFormat(this.#to, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') :  null;\r\n    this.control1.setValue(from, {\r\n      emitEvent: false\r\n    });\r\n    this.control2.setValue(to, {\r\n      emitEvent: false\r\n    });\r\n    this.formControl.setValue({\r\n      from: from,\r\n      to: to\r\n    }, {\r\n      emitEvent: false\r\n    });\r\n  }\r\n\r\n  onStartChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n    const value = event.value?.toDate() || null;\r\n    if (value) {\r\n      if (new Date(this.#from) !== value) {\r\n        this.#from = value;\r\n        this.fromChange.emit(value);\r\n      }\r\n    } else {\r\n      this.#from = null;\r\n      this.fromChange.emit(null);\r\n    }\r\n  }\r\n\r\n  onEndChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n    const value = event.value?.toDate() || null;\r\n    if (value) {\r\n      if (new Date(this.#to) !== value) {\r\n        this.#to = value;\r\n        this.toChange.emit(value);\r\n      }\r\n    } else {\r\n      this.#to = null;\r\n      this.toChange.emit(null);\r\n    }\r\n  }\r\n\r\n  clear = () => {\r\n    this.control1.setValue(null, {\r\n      emitEvent: false\r\n    });\r\n    this.control2.setValue(null, {\r\n      emitEvent: false\r\n    });\r\n    this.formControl.setValue({\r\n      from: null,\r\n      to: null\r\n    }, {\r\n      emitEvent: false\r\n    });\r\n    this.#from = null;\r\n    this.#to = null;\r\n    this.fromChange.emit(null);\r\n    this.toChange.emit(null);\r\n    this.sdChange.emit(this.formControl.value);\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { SdDateRange } from './date-range.component';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    FormsModule,\r\n    ReactiveFormsModule,\r\n    MatFormFieldModule,\r\n    MatIconModule,\r\n    MatDatepickerModule,\r\n    MatMomentDateModule,\r\n    SdTranslateModule\r\n  ],\r\n  declarations: [\r\n    SdDateRange\r\n  ],\r\n  exports: [\r\n    SdDateRange\r\n  ],\r\n  providers: [\r\n  ]\r\n})\r\nexport class SdDateRangeModule {\r\n\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["uuid.v4"],"mappings":"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"}
+{"version":3,"file":"sd-angular-core-date-range.js","sources":["../../../../projects/sd-core/date-range/src/lib/date-range.component.ts","../../../../projects/sd-core/date-range/src/lib/date-range.module.ts","../../../../projects/sd-core/date-range/sd-angular-core-date-range.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  EventEmitter,\r\n  Output,\r\n  OnDestroy,\r\n  AfterViewInit,\r\n  OnInit,\r\n  Inject,\r\n  Optional\r\n} from '@angular/core';\r\n\r\nimport { FormControl, FormGroup, NgForm } from '@angular/forms';\r\nimport { MatDatepickerInputEvent, } from '@angular/material/datepicker';\r\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport moment, { Moment } from 'moment';\r\nimport * as uuid from 'uuid';\r\nimport { merge, Subscription } from 'rxjs';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\r\nimport { FORM_CONFIG, IFormConfiguration } from '@sd-angular/core/common';\r\n\r\nconst CUSTOM_DATE_FORMATS = {\r\n  parse: {\r\n    dateInput: 'DD/MM/YYYY'\r\n  },\r\n  display: {\r\n    dateInput: 'DD/MM/YYYY',\r\n    monthYearLabel: 'MMM YYYY',\r\n    dateA11yLabel: 'LL',\r\n    monthYearA11yLabel: 'MMMM YYYY'\r\n  }\r\n};\r\n\r\n@Component({\r\n  selector: 'sd-date-range',\r\n  templateUrl: './date-range.component.html',\r\n  styleUrls: ['./date-range.component.scss'],\r\n  providers: [{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }],\r\n})\r\nexport class SdDateRange implements OnDestroy, OnInit, AfterViewInit {\r\n  id1 = `I${uuid.v4()}`;\r\n  id2 = `I${uuid.v4()}`;\r\n  #from: any = null;\r\n  #to: any = null;\r\n  isMobileOrTablet = false;\r\n  #name = uuid.v4();\r\n  @Input() set name(val: string) {\r\n    if (val) {\r\n      this.#name = val;\r\n    }\r\n  }\r\n  @Input() appearance: MatFormFieldAppearance;\r\n  @Input() size: 'sm' | 'lg';\r\n  #form: FormGroup;\r\n  formControl = new FormControl();\r\n  @Input() set form(val: NgForm | FormGroup) {\r\n    if (val) {\r\n      if (val instanceof NgForm) {\r\n        this.#form = val.form;\r\n      } else {\r\n        this.#form = val;\r\n      }\r\n    }\r\n  }\r\n  // @Input() disabled = false;\r\n  @Input() set disabled(val: boolean | '') {\r\n    val = (val === '') || val;\r\n    if (val) {\r\n      this.formControl.disable();\r\n    } else {\r\n      this.formControl.enable();\r\n    }\r\n  }\r\n  @Input() required = false;\r\n  @Input() label: string;\r\n  disableErrorMessage = false;\r\n  @Input('disableErrorMessage') set _disableErrorMessage(val: boolean | '') {\r\n    this.disableErrorMessage = (val === '') || val;\r\n    val = (val === '') || val;\r\n  }\r\n  min: Date;\r\n  @Input('min') set _min(val: string) {\r\n    if (Date.isDate(val)) {\r\n      this.min = new Date(val);\r\n    } else {\r\n      this.min = null;\r\n    }\r\n  }\r\n  max: Date;\r\n  @Input('max') set _max(val: string) {\r\n    if (Date.isDate(val)) {\r\n      this.max = new Date(val);\r\n    } else {\r\n      this.max = null;\r\n    }\r\n  }\r\n  @Input() set from(val: any) {\r\n    if (!Date.isDate(val)) {\r\n      val = null;\r\n    }\r\n    if (this.#from !== val) {\r\n      this.#from = val;\r\n      this.#onChanges();\r\n    }\r\n  }\r\n  @Input() set to(val: any) {\r\n    if (!Date.isDate(val)) {\r\n      val = null;\r\n    }\r\n    if (this.#to !== val) {\r\n      this.#to = val;\r\n      this.#onChanges();\r\n    }\r\n  }\r\n  @Output() sdChange = new EventEmitter<{ from: Date, to: Date }>();\r\n  @Output() fromChange = new EventEmitter();\r\n  @Output() toChange = new EventEmitter();\r\n\r\n  control1 = new FormControl();\r\n  #c1 = uuid.v4();\r\n  control2 = new FormControl();\r\n  #c2 = uuid.v4();\r\n  #subscription = new Subscription();\r\n  constructor(\r\n    private detectorService: DeviceDetectorService,\r\n    @Inject(FORM_CONFIG) @Optional() private formConfig: IFormConfiguration) {\r\n    this.isMobileOrTablet = !this.detectorService.isDesktop();\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#form?.removeControl(this.#c1);\r\n    this.#form?.removeControl(this.#c2);\r\n    this.#form?.removeControl(this.#name);\r\n    this.#subscription.unsubscribe();\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.appearance = this.appearance || this.formConfig?.appearance;\r\n    this.#form?.addControl(this.#c1, this.control1);\r\n    this.#form?.addControl(this.#c2, this.control2);\r\n    this.#form?.addControl(this.#name, this.formControl);\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.#subscription.add(merge(this.control1.valueChanges, this.control2.valueChanges).pipe(debounceTime(500)).subscribe(() => {\r\n      const from = this.control1.value?.toDate() || null;\r\n      const to = this.control2.value?.toDate() || null;\r\n      if (this.#from !== from || this.#to !== to) {\r\n        if (from && to) {\r\n          this.sdChange.emit({\r\n            from,\r\n            to\r\n          });\r\n        } else if (!from && !to) {\r\n          this.sdChange.emit({\r\n            from: null,\r\n            to: null\r\n          });\r\n        }\r\n      }\r\n    }));\r\n    this.#onChanges();\r\n  }\r\n\r\n  #onChanges = () => {\r\n    const from = Date.isDate(this.#from) ? moment(Date.toFormat(this.#from, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') :  null;\r\n    const to = Date.isDate(this.#to) ? moment(Date.toFormat(this.#to, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') :  null;\r\n    this.control1.setValue(from, {\r\n      emitEvent: false\r\n    });\r\n    this.control2.setValue(to, {\r\n      emitEvent: false\r\n    });\r\n    this.formControl.setValue({\r\n      from: from,\r\n      to: to\r\n    }, {\r\n      emitEvent: false\r\n    });\r\n  }\r\n\r\n  onStartChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n    const value = event.value?.toDate() || null;\r\n    if (value) {\r\n      if (new Date(this.#from) !== value) {\r\n        this.#from = value;\r\n        this.fromChange.emit(value);\r\n      }\r\n    } else {\r\n      this.#from = null;\r\n      this.fromChange.emit(null);\r\n    }\r\n  }\r\n\r\n  onEndChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n    const value = event.value?.toDate() || null;\r\n    if (value) {\r\n      if (new Date(this.#to) !== value) {\r\n        this.#to = value;\r\n        this.toChange.emit(value);\r\n      }\r\n    } else {\r\n      this.#to = null;\r\n      this.toChange.emit(null);\r\n    }\r\n  }\r\n\r\n  clear = () => {\r\n    this.control1.setValue(null, {\r\n      emitEvent: false\r\n    });\r\n    this.control2.setValue(null, {\r\n      emitEvent: false\r\n    });\r\n    this.formControl.setValue({\r\n      from: null,\r\n      to: null\r\n    }, {\r\n      emitEvent: false\r\n    });\r\n    this.#from = null;\r\n    this.#to = null;\r\n    this.fromChange.emit(null);\r\n    this.toChange.emit(null);\r\n    this.sdChange.emit(this.formControl.value);\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { SdDateRange } from './date-range.component';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    FormsModule,\r\n    ReactiveFormsModule,\r\n    MatFormFieldModule,\r\n    MatIconModule,\r\n    MatDatepickerModule,\r\n    MatMomentDateModule,\r\n    SdTranslateModule\r\n  ],\r\n  declarations: [\r\n    SdDateRange\r\n  ],\r\n  exports: [\r\n    SdDateRange\r\n  ],\r\n  providers: [\r\n  ]\r\n})\r\nexport class SdDateRangeModule {\r\n\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["uuid.v4"],"mappings":"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"}

package/fesm2015/sd-angular-core-date-time.js

@@ -237,7 +237,7 @@ _date = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _subscripti
 SdDateTime.decorators = [
     { type: Component, args: [{
                 selector: 'sd-date-time',
-                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>",
+                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>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: MAT_DATE_FORMATS, useValue: ɵ0 },

package/fesm2015/sd-angular-core-grid-material.js

@@ -421,7 +421,7 @@ _filterOptionChanges = new WeakMap(), _subscription = new WeakMap(), _loadDefaul
 SdGridFilter.decorators = [
     { type: Component, args: [{
                 selector: 'sd-grid-filter',
-                template: "<ng-container *ngIf=\"isVisible\">\r\n  <div *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n    class=\"row mx-0 pb-10\">\r\n    <ng-container *ngIf=\"filter?.sorts?.length\">\r\n      <ng-container *ngFor=\"let field of filter?.sorts\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n            class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n      <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n        <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n          <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"externalFilters?.length\">\r\n        <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n          <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let item of filterDefs\">\r\n        <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n          <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #filterColumn let-item=\"item\">\r\n    <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\"\r\n        [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n        [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option?.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\">\r\n      </sd-autocomplete>\r\n      <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n        [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #filterExternal let-item=\"item\">\r\n    <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\" multiple=\"true\">\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-autocomplete>\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" multiple>\r\n        </sd-select>\r\n        <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-select>\r\n      </ng-container>\r\n      <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n        [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n      <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n        [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n        [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-range>\r\n    </div>\r\n  </ng-template>\r\n  <sd-popup-filter [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n    (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n  </sd-popup-filter>\r\n</ng-container>",
+                template: "<ng-container *ngIf=\"isVisible\">\r\n  <div *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n    class=\"row mx-0 pb-10\">\r\n    <ng-container *ngIf=\"filter?.sorts?.length\">\r\n      <ng-container *ngFor=\"let field of filter?.sorts\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n            class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n      <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n        <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n          <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"externalFilters?.length\">\r\n        <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n          <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let item of filterDefs\">\r\n        <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n          <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #filterColumn let-item=\"item\">\r\n    <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-select>\r\n      <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\"\r\n        [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n        [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" apperance=\"outline\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option?.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\" apperance=\"outline\">\r\n      </sd-autocomplete>\r\n      <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n        [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-date-time>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #filterExternal let-item=\"item\">\r\n    <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-select>\r\n      <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\" apperance=\"outline\" multiple>\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n        </sd-autocomplete>\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" apperance=\"outline\" multiple>\r\n        </sd-select>\r\n        <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n        </sd-select>\r\n      </ng-container>\r\n      <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n        [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-date-time>\r\n      <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n        [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n        [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-date-range>\r\n    </div>\r\n  </ng-template>\r\n  <sd-popup-filter [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n    (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n  </sd-popup-filter>\r\n</ng-container>",
                 styles: [":host{display:block;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
             },] }
 ];