@sd-angular/core 1.3.213 → 1.3.214

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"ɵa":{"parse":{"dateInput":"MM/YYYY"},"display":{"dateInput":"MM/YYYY","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}},"SdDateMonthModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MatMomentDateModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatDatetimePickerModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatTimepickerModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular-material-components/moment-adapter","name":"NgxMatMomentModule","line":28,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":29,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":30,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdDateMonth"}],"exports":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":36,"character":4},{"__symbolic":"reference","name":"SdDateMonth"}],"providers":[]}]}],"members":{}},"SdDateMonth":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":41,"character":1},"arguments":[{"selector":"sd-date-month","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":45,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_LOCALE","line":47,"character":14},"useValue":"vi-VN"},{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"DateAdapter","line":49,"character":15},"useClass":{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MomentDateAdapter","line":50,"character":16},"deps":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_LOCALE","line":51,"character":13},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MAT_MOMENT_DATE_ADAPTER_OPTIONS","line":51,"character":30}]},{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":53,"character":14},"useValue":{"__symbolic":"reference","name":"ɵa"}}],"template":"<ng-container *ngIf=\"!appearance && sdLabelDef?.templateRef\">\r\n  <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n  </ng-container>\r\n</ng-container>\r\n<label *ngIf=\"!appearance && label && !sdLabelDef?.templateRef\" class=\"d-block mb-0 T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n  *ngIf=\"required\">*</span></label>\r\n<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n     [class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n  <ng-container *ngIf=\"sdView?.templateRef && !isFocused && !datePicker?.opened; else default\">\r\n    <ng-container *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value }\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field class=\"sd-md\"\r\n                    [ngClass]=\"{ 'sd-sm': size === 'sm' , 'no-padding-wrapper': disableErrorMessage}\"\r\n                    [appearance]=\"appearance || 'outline'\">\r\n      <mat-label *ngIf=\"appearance && label\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" matInput (dateInput)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n             [formControl]=\"formControl\" [required]=\"isRequired\" [matDatepicker]=\"pickerMonth\"\r\n             placeholder=\"{{ placeholder || label }}\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n             #input/>\r\n\r\n      <mat-icon *ngIf=\"formControl?.value && !isRequired && !formControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n                (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && pickerMonth.open()\" #btn matSuffix>\r\n        today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #pickerMonth [touchUi]=\"isMobileOrTablet\" startView=\"multi-year\"\r\n                      (monthSelected)=\"setMonthAndYear($event, pickerMonth)\"></mat-datepicker>\r\n\r\n      <mat-error *ngIf=\"formControl?.errors?.required && !disableErrorMessage\">\r\n        {{ \"This field is required\" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n","styles":[":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field input.mat-input-element:disabled{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3},"arguments":["disableErrorMessage"]}]}],"_min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3},"arguments":["min"]}]}],"_max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3},"arguments":["max"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3}}]}],"defaultTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":3}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":3}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":149,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":151,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":162,"character":3}}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":164,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":164,"character":16}]}]}],"sdLabelDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":165,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdLabelDefDirective","line":165,"character":16}]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":166,"character":3},"arguments":["input"]}]}],"datePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":167,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepicker","line":167,"character":13}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":173,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":173,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":173,"character":26}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":171,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":172,"character":19},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":173,"character":57}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}}},"origins":{"ɵa":"./src/lib/date-month.component","SdDateMonthModule":"./src/lib/date-month.module","SdDateMonth":"./src/lib/date-month.component"},"importAs":"@sd-angular/core/date-month"}
+{"__symbolic":"module","version":4,"metadata":{"ɵa":{"parse":{"dateInput":"MM/YYYY"},"display":{"dateInput":"MM/YYYY","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}},"SdDateMonthModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MatMomentDateModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatDatetimePickerModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatTimepickerModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular-material-components/moment-adapter","name":"NgxMatMomentModule","line":28,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":29,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":30,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdDateMonth"}],"exports":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":36,"character":4},{"__symbolic":"reference","name":"SdDateMonth"}],"providers":[]}]}],"members":{}},"SdDateMonth":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":41,"character":1},"arguments":[{"selector":"sd-date-month","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":45,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_LOCALE","line":47,"character":14},"useValue":"vi-VN"},{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"DateAdapter","line":49,"character":15},"useClass":{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MomentDateAdapter","line":50,"character":16},"deps":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_LOCALE","line":51,"character":13},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MAT_MOMENT_DATE_ADAPTER_OPTIONS","line":51,"character":30}]},{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":53,"character":14},"useValue":{"__symbolic":"reference","name":"ɵa"}}],"template":"<ng-container *ngIf=\"!appearance && sdLabelDef?.templateRef\">\r\n  <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n  </ng-container>\r\n</ng-container>\r\n<label *ngIf=\"!appearance && label && !sdLabelDef?.templateRef\" 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-error *ngIf=\"formControl.errors?.inlineError\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{inlineError}}</ng-container>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n","styles":[":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field input.mat-input-element:disabled{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3},"arguments":["disableErrorMessage"]}]}],"_min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3},"arguments":["min"]}]}],"_max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3},"arguments":["max"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3}}]}],"_inlineError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3},"arguments":["inlineError"]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":3}}]}],"defaultTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":3}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":3}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":161,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":162,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":175,"character":3}}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":177,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":177,"character":16}]}]}],"sdLabelDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":178,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdLabelDefDirective","line":178,"character":16}]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":179,"character":3},"arguments":["input"]}]}],"datePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":180,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepicker","line":180,"character":13}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":186,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":186,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":186,"character":26}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":184,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":185,"character":19},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":186,"character":57}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"customInlineErrorValidator":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}}},"origins":{"ɵa":"./src/lib/date-month.component","SdDateMonthModule":"./src/lib/date-month.module","SdDateMonth":"./src/lib/date-month.component"},"importAs":"@sd-angular/core/date-month"}

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

@@ -1,6 +1,6 @@
 import { EventEmitter, OnDestroy, AfterViewInit, ChangeDetectorRef, OnInit, ElementRef } from '@angular/core';
 import { Moment } from 'moment';
-import { FormGroup, NgForm } from '@angular/forms';
+import { FormGroup, NgForm, ValidatorFn } from '@angular/forms';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { IFormConfiguration, SdFormControl, SdViewDefDirective } from '@sd-angular/core/common';
@@ -37,6 +37,8 @@ export declare class SdDateMonth implements OnDestroy, OnInit, AfterViewInit {
     set disabled(val: boolean | '');
     isRequired: boolean;
     set required(val: boolean | '');
+    inlineError: string;
+    set _inlineError(val: string);
     label: string;
     placeholder: string;
     defaultTime: any;
@@ -54,6 +56,7 @@ export declare class SdDateMonth implements OnDestroy, OnInit, AfterViewInit {
     constructor(ref: ChangeDetectorRef, deviceService: DeviceDetectorService, formConfig: IFormConfiguration);
     ngOnDestroy(): void;
     ngOnInit(): void;
+    customInlineErrorValidator(): ValidatorFn;
     ngAfterViewInit(): void;
     onFocus: () => void;
     onBlur: () => void;

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"SdDateTimeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":17,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MatMomentDateModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatDatetimePickerModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatTimepickerModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular-material-components/moment-adapter","name":"NgxMatMomentModule","line":29,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":30,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":31,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/popover","name":"SdPopoverModule","line":32,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdDateTime"}],"exports":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":38,"character":4},{"__symbolic":"reference","name":"SdDateTime"}],"providers":[]}]}],"members":{}},"SdDateTime":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":51,"character":1},"arguments":[{"selector":"sd-date-time","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":55,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":57,"character":15},"useValue":{"parse":{"dateInput":"DD/MM/YYYY"},"display":{"dateInput":"DD/MM/YYYY","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}}},{"provide":{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NGX_MAT_DATE_FORMATS","line":58,"character":15},"useValue":{"parse":{"dateInput":"DD/MM/YYYY HH:mm"},"display":{"dateInput":"DD/MM/YYYY HH:mm","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}}}],"template":"<ng-container *ngIf=\"!appearance && sdLabelDef?.templateRef\">\r\n  <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n  </ng-container>\r\n</ng-container>\r\n<label *ngIf=\"!appearance && label && !sdLabelDef?.templateRef\" 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 aria-hidden=\"true\" [id]=\"id\" matInput (keyup)=\"onKeyup($event)\" (keydown)=\"onKeyDown($event)\" (dateChange)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [ngxMatDatetimePicker]=\"picker1\"\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\" [min]=\"min\" [required]=\"required\" [max]=\"max\"\r\n        (focus)=\"onFocus()\" (blur)=\"onBlur()\" [attr.data-qclabel]=\"label\" [attr.data-qcid]=\"qcId\"\r\n        [sdPopoverTriggerFor]=\"null\" [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\" #input [maxLength]=\"maxlength\"/>\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 && !required && !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 && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerMin && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Min date\" | sdTranslate }}:\r\n          <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerMax && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Max date\" | sdTranslate }}:\r\n          <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerParse && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Parse error\" | sdTranslate }}:\r\n          <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ formControl?.errors?.customValidator }}\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.date && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ formControl?.errors?.date }}\r\n        </ng-container>\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 aria-hidden=\"true\" [id]=\"id\" matInput (keyup)=\"onKeyup($event)\" (keydown)=\"onKeyDown($event)\" (dateChange)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [required]=\"required\" [matDatepicker]=\"picker2\"\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" [attr.data-qclabel]=\"label\" [attr.data-qcid]=\"qcId\" [sdPopoverTriggerFor]=\"null\"\r\n        [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\" #input [maxLength]=\"maxlength\" />\r\n      <mat-icon *ngIf=\"formControl?.value && !required && !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 && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatepickerMin && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Min date\" | sdTranslate }}:\r\n          <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatepickerMax && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Max date\" | sdTranslate }}:\r\n          <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerParse && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Parse error\" | sdTranslate }}:\r\n          <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ formControl?.errors?.customValidator }}\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.date && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ formControl?.errors?.date }}\r\n        </ng-container>\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 aria-hidden=\"true\" [id]=\"id\" matInput (keyup)=\"onKeyup($event)\" (keydown)=\"onKeyDown($event)\" (dateChange)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [required]=\"required\" [matDatepicker]=\"pickerMonth\"\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" [sdPopoverTriggerFor]=\"null\" [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\"\r\n        #input />\r\n\r\n      <mat-icon *ngIf=\"formControl?.value && !required && !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 && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatepickerMin && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Min date\" | sdTranslate }}:\r\n          <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatepickerMax && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Max date\" | sdTranslate }}:\r\n          <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerParse && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Parse error\" | sdTranslate }}:\r\n          <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ formControl?.errors?.customValidator }}\r\n        </ng-container>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n<!-- <sd-popover #error=\"sdPopover\" type=\"danger\" width=\"300px\">\r\n  <span *ngIf=\"formControl.errors?.required\">\r\n    {{ \"This field is required\" | sdTranslate }}\r\n  </span>\r\n  <span *ngIf=\"formControl?.errors?.matDatetimePickerMin\">\r\n    {{ \"Min date\" | sdTranslate }}:\r\n    <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n  </span>\r\n  <span *ngIf=\"formControl?.errors?.matDatetimePickerMax\">\r\n    {{ \"Max date\" | sdTranslate }}:\r\n    <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n  </span>\r\n  <span *ngIf=\"formControl?.errors?.matDatetimePickerParse\">\r\n    {{ \"Parse error\" | sdTranslate }}:\r\n    <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n  </span>\r\n  <span *ngIf=\"formControl?.errors?.customValidator\">\r\n    {{ formControl?.errors?.customValidator }}\r\n  </span>\r\n</sd-popover> -->\r\n","styles":[":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field input.mat-input-element:disabled{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3},"arguments":["disableErrorMessage"]}]}],"_min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":3},"arguments":["min"]}]}],"_max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3},"arguments":["max"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"_type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":3},"arguments":["type"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":3}}]}],"_required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3},"arguments":["required"]}]}],"_label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3},"arguments":["label"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":3}}]}],"defaultTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":3}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":3}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":153,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":165,"character":3}}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":167,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":167,"character":16}]}]}],"sdLabelDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":168,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdLabelDefDirective","line":168,"character":16}]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":169,"character":3},"arguments":["input"]}]}],"datePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":170,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepicker","line":170,"character":13}]}]}],"dateTimePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":171,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatDatetimePicker","line":171,"character":13}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":176,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":176,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":176,"character":26}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":174,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":175,"character":19},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":176,"character":57}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"focusInputElement":[{"__symbolic":"method"}]}}},"origins":{"SdDateTimeModule":"./src/lib/date-time.module","SdDateTime":"./src/lib/date-time.component"},"importAs":"@sd-angular/core/date-time"}
+{"__symbolic":"module","version":4,"metadata":{"SdDateTimeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":17,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MatMomentDateModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatDatetimePickerModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatTimepickerModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular-material-components/moment-adapter","name":"NgxMatMomentModule","line":29,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":30,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":31,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/popover","name":"SdPopoverModule","line":32,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdDateTime"}],"exports":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":38,"character":4},{"__symbolic":"reference","name":"SdDateTime"}],"providers":[]}]}],"members":{}},"SdDateTime":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":51,"character":1},"arguments":[{"selector":"sd-date-time","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":55,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":57,"character":15},"useValue":{"parse":{"dateInput":"DD/MM/YYYY"},"display":{"dateInput":"DD/MM/YYYY","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}}},{"provide":{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NGX_MAT_DATE_FORMATS","line":58,"character":15},"useValue":{"parse":{"dateInput":"DD/MM/YYYY HH:mm"},"display":{"dateInput":"DD/MM/YYYY HH:mm","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}}}],"template":"<ng-container *ngIf=\"!appearance && sdLabelDef?.templateRef\">\r\n  <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n  </ng-container>\r\n</ng-container>\r\n<label *ngIf=\"!appearance && label && !sdLabelDef?.templateRef\" 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 aria-hidden=\"true\" [id]=\"id\" matInput (keyup)=\"onKeyup($event)\" (keydown)=\"onKeyDown($event)\" (dateChange)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [ngxMatDatetimePicker]=\"picker1\"\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\" [min]=\"min\" [required]=\"required\" [max]=\"max\"\r\n        (focus)=\"onFocus()\" (blur)=\"onBlur()\" [attr.data-qclabel]=\"label\" [attr.data-qcid]=\"qcId\"\r\n        [sdPopoverTriggerFor]=\"null\" [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\" #input [maxLength]=\"maxlength\"/>\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 && !required && !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 && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerMin && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Min date\" | sdTranslate }}:\r\n          <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerMax && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Max date\" | sdTranslate }}:\r\n          <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerParse && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Parse error\" | sdTranslate }}:\r\n          <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ formControl?.errors?.customValidator }}\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.date && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ formControl?.errors?.date }}\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.inlineError && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{inlineError}}</ng-container>\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 aria-hidden=\"true\" [id]=\"id\" matInput (keyup)=\"onKeyup($event)\" (keydown)=\"onKeyDown($event)\" (dateChange)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [required]=\"required\" [matDatepicker]=\"picker2\"\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" [attr.data-qclabel]=\"label\" [attr.data-qcid]=\"qcId\" [sdPopoverTriggerFor]=\"null\"\r\n        [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\" #input [maxLength]=\"maxlength\" />\r\n      <mat-icon *ngIf=\"formControl?.value && !required && !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 && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatepickerMin && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Min date\" | sdTranslate }}:\r\n          <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatepickerMax && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Max date\" | sdTranslate }}:\r\n          <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerParse && formControl?.touched && !isFocused\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Parse error\" | sdTranslate }}:\r\n          <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ formControl?.errors?.customValidator }}\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.date && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ formControl?.errors?.date }}\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.inlineError && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{inlineError}}</ng-container>\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 aria-hidden=\"true\" [id]=\"id\" matInput (keyup)=\"onKeyup($event)\" (keydown)=\"onKeyDown($event)\" (dateChange)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [required]=\"required\" [matDatepicker]=\"pickerMonth\"\r\n        [placeholder]=\"placeholder || (appearance ? label : '')\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" [sdPopoverTriggerFor]=\"null\" [sdPopoverDisabled]=\"!disableErrorMessage || formControl.valid\"\r\n        #input />\r\n\r\n      <mat-icon *ngIf=\"formControl?.value && !required && !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 && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"This field is required\" | sdTranslate }}</ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatepickerMin && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Min date\" | sdTranslate }}:\r\n          <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatepickerMax && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Max date\" | sdTranslate }}:\r\n          <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerParse && formControl?.touched\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ \"Parse error\" | sdTranslate }}:\r\n          <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{ formControl?.errors?.customValidator }}\r\n        </ng-container>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl.errors?.inlineError && formControl?.touched && !disableErrorMessage\">\r\n        <ng-container *ngIf=\"!disableErrorMessage\">{{inlineError}}</ng-container>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>\r\n<!-- <sd-popover #error=\"sdPopover\" type=\"danger\" width=\"300px\">\r\n  <span *ngIf=\"formControl.errors?.required\">\r\n    {{ \"This field is required\" | sdTranslate }}\r\n  </span>\r\n  <span *ngIf=\"formControl?.errors?.matDatetimePickerMin\">\r\n    {{ \"Min date\" | sdTranslate }}:\r\n    <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n  </span>\r\n  <span *ngIf=\"formControl?.errors?.matDatetimePickerMax\">\r\n    {{ \"Max date\" | sdTranslate }}:\r\n    <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n  </span>\r\n  <span *ngIf=\"formControl?.errors?.matDatetimePickerParse\">\r\n    {{ \"Parse error\" | sdTranslate }}:\r\n    <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n  </span>\r\n  <span *ngIf=\"formControl?.errors?.customValidator\">\r\n    {{ formControl?.errors?.customValidator }}\r\n  </span>\r\n</sd-popover> -->\r\n","styles":[":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field input.mat-input-element:disabled{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"_disableErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3},"arguments":["disableErrorMessage"]}]}],"_min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":3},"arguments":["min"]}]}],"_max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3},"arguments":["max"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"_type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":3},"arguments":["type"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":3}}]}],"_required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3},"arguments":["required"]}]}],"_inlineError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3},"arguments":["inlineError"]}]}],"_label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":3},"arguments":["label"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":3}}]}],"defaultTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":3}}]}],"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":157,"character":3}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":172,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":174,"character":3}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":184,"character":3}}]}],"sdView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":186,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdViewDefDirective","line":186,"character":16}]}]}],"sdLabelDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":187,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdLabelDefDirective","line":187,"character":16}]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":188,"character":3},"arguments":["input"]}]}],"datePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":189,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepicker","line":189,"character":13}]}]}],"dateTimePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":190,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular-material-components/datetime-picker","name":"NgxMatDatetimePicker","line":190,"character":13}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":195,"character":5},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"FORM_CONFIG","line":195,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":195,"character":26}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":193,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":194,"character":19},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"IFormConfiguration","line":195,"character":57}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"customInlineErrorValidator":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"focusInputElement":[{"__symbolic":"method"}]}}},"origins":{"SdDateTimeModule":"./src/lib/date-time.module","SdDateTime":"./src/lib/date-time.component"},"importAs":"@sd-angular/core/date-time"}

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

@@ -1,6 +1,6 @@
 import { EventEmitter, OnDestroy, AfterViewInit, ChangeDetectorRef, OnInit, ElementRef } from '@angular/core';
 import { Moment } from 'moment';
-import { FormGroup, NgForm } from '@angular/forms';
+import { FormGroup, NgForm, ValidatorFn } from '@angular/forms';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { NgxMatDatetimePicker } from '@angular-material-components/datetime-picker';
@@ -30,6 +30,8 @@ export declare class SdDateTime implements OnDestroy, OnInit, AfterViewInit {
     set disabled(val: boolean | '');
     required: boolean;
     set _required(val: boolean | '');
+    inlineError: string;
+    set _inlineError(val: string);
     qcId: string;
     label: string;
     set _label(val: string);
@@ -50,6 +52,7 @@ export declare class SdDateTime implements OnDestroy, OnInit, AfterViewInit {
     constructor(ref: ChangeDetectorRef, deviceService: DeviceDetectorService, formConfig: IFormConfiguration);
     ngOnDestroy(): void;
     ngOnInit(): void;
+    customInlineErrorValidator(): ValidatorFn;
     ngAfterViewInit(): void;
     onFocus: () => void;
     onBlur: () => void;

package/editor/sd-angular-core-editor.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"SdEditorAction":{"__symbolic":"interface"},"SdEditorActionArgs":{"__symbolic":"interface"},"IEditorConfiguration":{"__symbolic":"interface"},"EDITOR_CONFIG":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":24,"character":33},"arguments":["editor.configuration"]},"SdEditorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SdEditor"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":15,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-quill","name":"QuillModule","line":16,"character":4},"member":"forRoot"}},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":17,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/button","name":"SdButtonModule","line":18,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/textarea","name":"SdTextareaModule","line":19,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/api","name":"SdApiModule","line":20,"character":4}],"exports":[{"__symbolic":"reference","name":"SdEditor"}],"providers":[]}]}],"members":{}},"Constants":{"ARE_YOU_WANT_TO_DELETE":"Are you sure you want to delete?","ACTIVE":"active","IN_ACTIVE":"inactive","APPROVE":"approve","UN_APPROVE":"unapprove","ACCEPT_SIZE_IMAGE":"Logo only accept image with size <= 2MB","ACCEPT_TYPE_IMAGE":"image/png, image/gif, image/jpeg, image/bmp, image/x-icon","PAGE_TYPE_NEW":"new","PAGE_TYPE_EDIT":"edit","SAVE":"saveOb","SAVE_AND_CONTINUE":"saveAndContOb","IMAGE_SIZE":2048000,"SUCCESS":"Success","IMPORT_SUCCESSFULLY":"Import successfully!","ERROR":"Error","FAILED":"fail","FILE":"file","NONE":"none","NOT_EXIST_ID_OR_LINK":"This ID/Link is not existing","FEATURE_IS_PENDING":"This feature is pending","NOT_SUPPORT_FILE_IMAGE":"File upload is not supported.","NOT_SUPPORT_FILE_IMPORT":"File import is not supported.","NETWORK_ERROR":"Network Error","SORT_BY":[{"value":0,"name":"Created Date"},{"value":1,"name":"Title"}],"DESC":[{"value":true,"name":"Descending"},{"value":false,"name":"Ascending"}],"FORM_ERRORS":{"Id":"","textSearch":"","ImportLogId":"","SortBy":"","Reverse":""},"VALIDATION_MESSAGES":{}},"PROMOTION_PERMISSIONS":["ListPromotion","AddNewPromotion","EditPromotion","ActiveOrInactivePromotion","RemovePromotion","ImportPromotion","ExportPromotion"],"ValidateMessageConstants":{"TITLE_REQUIRED":"Title is required","TITLE_MAXLENGTH":"Title is not more than 55 characters","TITLE_PATTERN":"Title is required","CREATED_AT_REQUIRED":"Created At is required","SHOW_ON_HOME_REQUIRED":"Show On Home is required","DISPLAY_NUMBER_REQUIRED":"Display Number is required","CONTENT_TYPE_REQUIRED":"Content Type is required","DISCOUNT_PERCENT_REQUIRED":"Discount percent is required","DISCOUNT_PERCENT_MAX":"Max discount percent is 100, cannot input greater","DISCOUNT_PERCENT_MIN":"Min discount percent is 0, cannot input lower"},"PROMOTION_FORM":{"FORM_ERRORS":{"title":"","createdAt":"","displayNumber":"","showOnHome":"","discountPercent":"","isActive":"","ctaLabelName":"","ctaDeepLink":"","tags":""},"VALIDATION_MESSAGES":{"title":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"TITLE_REQUIRED"},"maxlength":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"TITLE_MAXLENGTH"},"pattern":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"TITLE_PATTERN"}},"createdAt":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"CREATED_AT_REQUIRED"}},"showOnHome":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"SHOW_ON_HOME_REQUIRED"}},"displayNumber":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"DISPLAY_NUMBER_REQUIRED"}},"discountPercent":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"DISCOUNT_PERCENT_REQUIRED"},"max":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"DISCOUNT_PERCENT_MAX"},"min":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"DISCOUNT_PERCENT_MIN"}},"tags":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"CONTENT_TYPE_REQUIRED"}}}},"SdEditor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"sd-editor","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":19},"member":"OnPush"},"template":"<div id=\"box-{{ id }}\">\r\n  <ng-container *ngIf=\"sdLabelDef?.templateRef\">\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\"> </ng-container>\r\n  </ng-container>\r\n  <label *ngIf=\"label && !sdLabelDef?.templateRef\" class=\"d-block T14M\"\r\n    >{{ label }} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label\r\n  >\r\n  <ng-container *ngIf=\"!formControl.disabled && !showHtmlEditor\">\r\n    <quill-editor\r\n      #editor\r\n      [styles]=\"styles\"\r\n      (onEditorCreated)=\"editorInit($event)\"\r\n      [ngModel]=\"formControl.value\"\r\n      (onSelectionChanged)=\"onSelectionChanged($event)\"\r\n      (onContentChanged)=\"onContentChanged($event)\"\r\n      (ngModelChange)=\"onModelChange($event)\"\r\n      [id]=\"id\"\r\n      [modules]=\"quillConfig\"\r\n      [placeholder]=\"placeholder\"\r\n      [maxLength]=\"maxlength\">\r\n    </quill-editor>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.required\">\r\n      {{ 'This field is required' | sdTranslate }}\r\n    </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.minlength\">\r\n      {{ 'Max length' | sdTranslate }} <strong>{{ minlength }}</strong>\r\n    </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.maxlength\">\r\n      {{ 'Max length' | sdTranslate }} <strong>{{ maxlength }}</strong>\r\n    </span>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"formControl.disabled\">\r\n    <div [innerHtml]=\"formControl.value\"></div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"enableHTMLButton\">\r\n    <sd-textarea [(model)]=\"modelHTML\" *ngIf=\"showHtmlEditor\" rows=\"20\" (modelChange)=\"onModelChange($event)\"></sd-textarea>\r\n    <sd-button\r\n      title=\"{{ showHtmlEditor ? 'Ẩn' : 'Hiện' }} mã HTML\"\r\n      class=\"mr-8\"\r\n      fontSet=\"material-icons-outlined\"\r\n      (action)=\"onClickShowHtmlEditor()\"\r\n      type=\"light\"></sd-button>\r\n  </ng-container>\r\n</div>\r\n","styles":["::ng-deep .c-image-editor-quill-box{background:#000;display:inline-block;position:relative}::ng-deep .c-image-editor-quill-box:hover:after{background:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACoklEQVRIia2WzUtVURTF1748RCQkHIhEiIiINJAGDqMcRYRNQgqiSCKoUUVE/0FIQ2lYJtGgQUhUUA36IIIggkD6HgU6iJz0IZpmrl+Dd67c7nv6hNqTe+5dZ++19zr7bG6oZEAmqU/SQUk7JHVLqgCzEfFK0i1JjyNisezb0Gx3AJeBOWAZ+AJM2X4JfALm0/cXwCCw8eBAJ/Caqj0Dhmy35UGAJmA7MAb8tD0PjNjeUPAO229tL9k+b7vSYP8A8DHtH24UPAPGU+bnbGcFTLb32z4DtJb8epOEM8DW9Qj6gXnbT9MBFzEBj2wDdJV9bR8DVmxfWI9g1PYysKcOJttPEkF3HbwFeG/7czm53DJJgxExCzyvh0eEIiLf+5dFxIKkhxHRoWpr11hF1T6fzrLsR8pqWNLR1D2ZpH5AETEOLKQ901mWnUjrtymBbknv6hE0AauXBuiRNFR4z5c783VEfChUsZi+N69VwWxEtNuuZFn2OyKuSLqTss8iYlzSgKR9ETGdSIsJbUkVzNYjEHDD9hzQW8Zsrx6y7Z46vgLup9u9uV78TNKkpBZJR8pgyqxmXbB+VefVw4j4tlYFm9KI+A70lTABN9Ic6iphFeAusGS7psX/Mtt7bS8BU0BnHZLiYefBLybpbgLrjpZ8XJwClm3PAAdsN62RzDbbt1NwbL+3fRI4BNT4rAqbbuIIMBoRbZLeSHqQ+vwXsDUidkkaBJoj4h6wPSJy6QxcjYjT6QKuKVeP7Uu2v1JrK2k2DSWZzuZAGicrtq81lCxV1JTG8gHbh23vBtpLe46noDlB/rwOtDQk2UASLanLaiq1PWH730lst9q+lVdQlAsY+2cCqSpnTlKUC/j6XwgSSSswWWqIif9GIK3KNUH1r+QasOkPpU8FJ4KtSqcAAAAASUVORK5CYII=\") 50% no-repeat;background-size:16px;bottom:0;content:\"\";left:0;position:absolute;top:0;width:100%}::ng-deep .c-image-editor-quill-box:hover img{opacity:.4}::ng-deep .ql-toolbar input.ql-customFile[type=file]{display:none}"]}]}],"members":{"editor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":38,"character":3},"arguments":["editor"]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"pRequired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"_minlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3},"arguments":["minlength"]}]}],"_maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3},"arguments":["maxlength"]}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"styles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"args":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"domain":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":3}}]}],"toolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":3}}]}],"enableHTMLButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":3}}]}],"mentionValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":3}}]}],"hashTagValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":3}}]}],"sdLabelDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":110,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdLabelDefDirective","line":110,"character":16}]}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":177,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":183,"character":5},"arguments":[{"__symbolic":"reference","name":"EDITOR_CONFIG"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":183,"character":28}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":181,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":182,"character":17},{"__symbolic":"reference","name":"IEditorConfiguration"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSelectionChanged":[{"__symbolic":"method"}],"onContentChanged":[{"__symbolic":"method"}]}}},"origins":{"SdEditorAction":"./src/lib/editor.model","SdEditorActionArgs":"./src/lib/editor.model","IEditorConfiguration":"./src/lib/editor.model","EDITOR_CONFIG":"./src/lib/editor.model","SdEditorModule":"./src/lib/editor.module","Constants":"./src/lib/constant","PROMOTION_PERMISSIONS":"./src/lib/constant","ValidateMessageConstants":"./src/lib/constant","PROMOTION_FORM":"./src/lib/constant","SdEditor":"./src/lib/editor.component"},"importAs":"@sd-angular/core/editor"}
+{"__symbolic":"module","version":4,"metadata":{"SdEditorAction":{"__symbolic":"interface"},"SdEditorActionArgs":{"__symbolic":"interface"},"IEditorConfiguration":{"__symbolic":"interface"},"EDITOR_CONFIG":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":24,"character":33},"arguments":["editor.configuration"]},"SdEditorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SdEditor"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":15,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-quill","name":"QuillModule","line":16,"character":4},"member":"forRoot"}},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateModule","line":17,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/button","name":"SdButtonModule","line":18,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/textarea","name":"SdTextareaModule","line":19,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/api","name":"SdApiModule","line":20,"character":4}],"exports":[{"__symbolic":"reference","name":"SdEditor"}],"providers":[]}]}],"members":{}},"Constants":{"ARE_YOU_WANT_TO_DELETE":"Are you sure you want to delete?","ACTIVE":"active","IN_ACTIVE":"inactive","APPROVE":"approve","UN_APPROVE":"unapprove","ACCEPT_SIZE_IMAGE":"Logo only accept image with size <= 2MB","ACCEPT_TYPE_IMAGE":"image/png, image/gif, image/jpeg, image/bmp, image/x-icon","PAGE_TYPE_NEW":"new","PAGE_TYPE_EDIT":"edit","SAVE":"saveOb","SAVE_AND_CONTINUE":"saveAndContOb","IMAGE_SIZE":2048000,"SUCCESS":"Success","IMPORT_SUCCESSFULLY":"Import successfully!","ERROR":"Error","FAILED":"fail","FILE":"file","NONE":"none","NOT_EXIST_ID_OR_LINK":"This ID/Link is not existing","FEATURE_IS_PENDING":"This feature is pending","NOT_SUPPORT_FILE_IMAGE":"File upload is not supported.","NOT_SUPPORT_FILE_IMPORT":"File import is not supported.","NETWORK_ERROR":"Network Error","SORT_BY":[{"value":0,"name":"Created Date"},{"value":1,"name":"Title"}],"DESC":[{"value":true,"name":"Descending"},{"value":false,"name":"Ascending"}],"FORM_ERRORS":{"Id":"","textSearch":"","ImportLogId":"","SortBy":"","Reverse":""},"VALIDATION_MESSAGES":{}},"PROMOTION_PERMISSIONS":["ListPromotion","AddNewPromotion","EditPromotion","ActiveOrInactivePromotion","RemovePromotion","ImportPromotion","ExportPromotion"],"ValidateMessageConstants":{"TITLE_REQUIRED":"Title is required","TITLE_MAXLENGTH":"Title is not more than 55 characters","TITLE_PATTERN":"Title is required","CREATED_AT_REQUIRED":"Created At is required","SHOW_ON_HOME_REQUIRED":"Show On Home is required","DISPLAY_NUMBER_REQUIRED":"Display Number is required","CONTENT_TYPE_REQUIRED":"Content Type is required","DISCOUNT_PERCENT_REQUIRED":"Discount percent is required","DISCOUNT_PERCENT_MAX":"Max discount percent is 100, cannot input greater","DISCOUNT_PERCENT_MIN":"Min discount percent is 0, cannot input lower"},"PROMOTION_FORM":{"FORM_ERRORS":{"title":"","createdAt":"","displayNumber":"","showOnHome":"","discountPercent":"","isActive":"","ctaLabelName":"","ctaDeepLink":"","tags":""},"VALIDATION_MESSAGES":{"title":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"TITLE_REQUIRED"},"maxlength":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"TITLE_MAXLENGTH"},"pattern":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"TITLE_PATTERN"}},"createdAt":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"CREATED_AT_REQUIRED"}},"showOnHome":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"SHOW_ON_HOME_REQUIRED"}},"displayNumber":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"DISPLAY_NUMBER_REQUIRED"}},"discountPercent":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"DISCOUNT_PERCENT_REQUIRED"},"max":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"DISCOUNT_PERCENT_MAX"},"min":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"DISCOUNT_PERCENT_MIN"}},"tags":{"required":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ValidateMessageConstants"},"member":"CONTENT_TYPE_REQUIRED"}}}},"SdEditor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"sd-editor","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":19},"member":"OnPush"},"template":"<div id=\"box-{{ id }}\">\r\n  <ng-container *ngIf=\"sdLabelDef?.templateRef\">\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\"> </ng-container>\r\n  </ng-container>\r\n  <label *ngIf=\"label && !sdLabelDef?.templateRef\" class=\"d-block T14M\"\r\n    >{{ label }} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label\r\n  >\r\n  <ng-container *ngIf=\"!formControl.disabled && !showHtmlEditor\">\r\n    <div [ngClass]=\"{ 'has-error': formControl.errors?.required || formControl.errors?.minlength || formControl.errors?.maxlength || formControl.errors?.inlineError }\">\r\n      <quill-editor\r\n      #editor\r\n      [styles]=\"styles\"\r\n      (onEditorCreated)=\"editorInit($event)\"\r\n      [ngModel]=\"formControl.value\"\r\n      (onSelectionChanged)=\"onSelectionChanged($event)\"\r\n      (onContentChanged)=\"onContentChanged($event)\"\r\n      (ngModelChange)=\"onModelChange($event)\"\r\n      [id]=\"id\"\r\n      [modules]=\"quillConfig\"\r\n      [placeholder]=\"placeholder\"\r\n      [maxLength]=\"maxlength\">\r\n    </quill-editor>\r\n    </div>\r\n    \r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.required\">\r\n      {{ 'This field is required' | sdTranslate }}\r\n    </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.minlength\">\r\n      {{ 'Max length' | sdTranslate }} <strong>{{ minlength }}</strong>\r\n    </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.maxlength\">\r\n      {{ 'Max length' | sdTranslate }} <strong>{{ maxlength }}</strong>\r\n    </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.inlineError\">\r\n      {{ inlineError }} \r\n    </span>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"formControl.disabled\">\r\n    <div [innerHtml]=\"formControl.value\"></div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"enableHTMLButton\">\r\n    <sd-textarea [(model)]=\"modelHTML\" *ngIf=\"showHtmlEditor\" rows=\"20\" (modelChange)=\"onModelChange($event)\"></sd-textarea>\r\n    <sd-button\r\n      title=\"{{ showHtmlEditor ? 'Ẩn' : 'Hiện' }} mã HTML\"\r\n      class=\"mr-8\"\r\n      fontSet=\"material-icons-outlined\"\r\n      (action)=\"onClickShowHtmlEditor()\"\r\n      type=\"light\"></sd-button>\r\n  </ng-container>\r\n</div>\r\n","styles":["::ng-deep .c-image-editor-quill-box{background:#000;display:inline-block;position:relative}::ng-deep .c-image-editor-quill-box:hover:after{background:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACoklEQVRIia2WzUtVURTF1748RCQkHIhEiIiINJAGDqMcRYRNQgqiSCKoUUVE/0FIQ2lYJtGgQUhUUA36IIIggkD6HgU6iJz0IZpmrl+Dd67c7nv6hNqTe+5dZ++19zr7bG6oZEAmqU/SQUk7JHVLqgCzEfFK0i1JjyNisezb0Gx3AJeBOWAZ+AJM2X4JfALm0/cXwCCw8eBAJ/Caqj0Dhmy35UGAJmA7MAb8tD0PjNjeUPAO229tL9k+b7vSYP8A8DHtH24UPAPGU+bnbGcFTLb32z4DtJb8epOEM8DW9Qj6gXnbT9MBFzEBj2wDdJV9bR8DVmxfWI9g1PYysKcOJttPEkF3HbwFeG/7czm53DJJgxExCzyvh0eEIiLf+5dFxIKkhxHRoWpr11hF1T6fzrLsR8pqWNLR1D2ZpH5AETEOLKQ901mWnUjrtymBbknv6hE0AauXBuiRNFR4z5c783VEfChUsZi+N69VwWxEtNuuZFn2OyKuSLqTss8iYlzSgKR9ETGdSIsJbUkVzNYjEHDD9hzQW8Zsrx6y7Z46vgLup9u9uV78TNKkpBZJR8pgyqxmXbB+VefVw4j4tlYFm9KI+A70lTABN9Ic6iphFeAusGS7psX/Mtt7bS8BU0BnHZLiYefBLybpbgLrjpZ8XJwClm3PAAdsN62RzDbbt1NwbL+3fRI4BNT4rAqbbuIIMBoRbZLeSHqQ+vwXsDUidkkaBJoj4h6wPSJy6QxcjYjT6QKuKVeP7Uu2v1JrK2k2DSWZzuZAGicrtq81lCxV1JTG8gHbh23vBtpLe46noDlB/rwOtDQk2UASLanLaiq1PWH730lst9q+lVdQlAsY+2cCqSpnTlKUC/j6XwgSSSswWWqIif9GIK3KNUH1r+QasOkPpU8FJ4KtSqcAAAAASUVORK5CYII=\") 50% no-repeat;background-size:16px;bottom:0;content:\"\";left:0;position:absolute;top:0;width:100%}::ng-deep .c-image-editor-quill-box:hover img{opacity:.4}::ng-deep .ql-toolbar input.ql-customFile[type=file]{display:none}::ng-deep .has-error .ql-container.ql-snow,::ng-deep .has-error .ql-toolbar.ql-snow{border:1px solid #f82c13}"]}]}],"members":{"editor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":38,"character":3},"arguments":["editor"]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"pRequired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"_minlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3},"arguments":["minlength"]}]}],"_maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3},"arguments":["maxlength"]}]}],"_inlineError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3},"arguments":["inlineError"]}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":86,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3}}]}],"styles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"args":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":3}}]}],"domain":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"toolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":3}}]}],"enableHTMLButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":3}}]}],"mentionValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":3}}]}],"hashTagValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":3}}]}],"sdLabelDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":116,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdLabelDefDirective","line":116,"character":16}]}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":183,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":189,"character":5},"arguments":[{"__symbolic":"reference","name":"EDITOR_CONFIG"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":189,"character":28}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":187,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":188,"character":17},{"__symbolic":"reference","name":"IEditorConfiguration"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"customInlineErrorValidator":[{"__symbolic":"method"}],"onSelectionChanged":[{"__symbolic":"method"}],"onContentChanged":[{"__symbolic":"method"}]}}},"origins":{"SdEditorAction":"./src/lib/editor.model","SdEditorActionArgs":"./src/lib/editor.model","IEditorConfiguration":"./src/lib/editor.model","EDITOR_CONFIG":"./src/lib/editor.model","SdEditorModule":"./src/lib/editor.module","Constants":"./src/lib/constant","PROMOTION_PERMISSIONS":"./src/lib/constant","ValidateMessageConstants":"./src/lib/constant","PROMOTION_FORM":"./src/lib/constant","SdEditor":"./src/lib/editor.component"},"importAs":"@sd-angular/core/editor"}

package/editor/src/lib/editor.component.d.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectorRef, EventEmitter, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { ContentChange, QuillEditorComponent, SelectionChange } from 'ngx-quill';
-import { FormControl, FormGroup, NgForm } from '@angular/forms';
+import { FormControl, FormGroup, NgForm, ValidatorFn } from '@angular/forms';
 import 'quill-mention';
 import { SdLabelDefDirective } from '@sd-angular/core/common';
 import { IEditorConfiguration } from './editor.model';
@@ -21,6 +21,8 @@ export declare class SdEditor implements OnInit, AfterViewInit, OnDestroy {
     set _minlength(val: number);
     maxlength: number;
     set _maxlength(val: number);
+    inlineError: string;
+    set _inlineError(val: string);
     modelChange: EventEmitter<string>;
     placeholder: string;
     styles: any;
@@ -92,6 +94,7 @@ export declare class SdEditor implements OnInit, AfterViewInit, OnDestroy {
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    customInlineErrorValidator(): ValidatorFn;
     editorInit: (quill: Quill) => void;
     onModelChange: (val: string) => void;
     onClickShowHtmlEditor: () => void;