@sd-angular/core/bundles/sd-angular-core-date-time.umd.min.js

Sd Angular Core Lib

!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular-material-components/datetime-picker"),require("@angular-material-components/moment-adapter"),require("@angular/common"),require("@angular/core"),require("@angular/forms"),require("@angular/material-moment-adapter"),require("@angular/material/datepicker"),require("@angular/material/form-field"),require("@angular/material/icon"),require("@angular/material/input"),require("@sd-angular/core/button"),require("@sd-angular/core/common"),require("@sd-angular/core/translate"),require("ngx-material-timepicker"),require("uuid"),require("object-hash"),require("moment"),require("ngx-device-detector"),require("@angular/material/core"),require("rxjs")):"function"==typeof define&&define.amd?define("@sd-angular/core/date-time",["exports","@angular-material-components/datetime-picker","@angular-material-components/moment-adapter","@angular/common","@angular/core","@angular/forms","@angular/material-moment-adapter","@angular/material/datepicker","@angular/material/form-field","@angular/material/icon","@angular/material/input","@sd-angular/core/button","@sd-angular/core/common","@sd-angular/core/translate","ngx-material-timepicker","uuid","object-hash","moment","ngx-device-detector","@angular/material/core","rxjs"],e):e(((r="undefined"!=typeof globalThis?globalThis:r||self)["sd-angular"]=r["sd-angular"]||{},r["sd-angular"].core=r["sd-angular"].core||{},r["sd-angular"].core["date-time"]={}),r["@angular-material-components/datetime-picker"],r["@angular-material-components/moment-adapter"],r.ng.common,r.ng.core,r.ng.forms,r.ng.materialMomentAdapter,r.ng.material.datepicker,r.ng.material.formField,r.ng.material.icon,r.ng.material.input,r["sd-angular"].core.button,r["sd-angular"].core.common,r["sd-angular"].core.translate,r.ngxMaterialTimepicker,r.uuid,r.hash,r.moment,r["ngx-device-detector"],r.ng.material.core,r.rxjs)}(this,(function(r,e,n,t,o,a,i,l,s,d,m,c,u,f,p,g,h,b,y,M,C){"use strict";function I(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var v=I(h),k=I(b);Object.create;var x,D,E,T;Object.create;function w(r,e,n,t){if("a"===n&&!t)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?r!==e||!t:!e.has(r))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?t:"a"===n?t.call(r):t?t.value:e.get(r)}function q(r,e,n,t,o){if("m"===t)throw new TypeError("Private method is not writable");if("a"===t&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?r!==e||!o:!e.has(r))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===t?o.call(r,n):o?o.value=n:e.set(r,n),n}var P={parse:{dateInput:"DD/MM/YYYY"},display:{dateInput:"DD/MM/YYYY",monthYearLabel:"MMM YYYY",dateA11yLabel:"LL",monthYearA11yLabel:"MMMM YYYY"}},V={parse:{dateInput:"DD/MM/YYYY HH:mm"},display:{dateInput:"DD/MM/YYYY HH:mm",monthYearLabel:"MMM YYYY",dateA11yLabel:"LL",monthYearA11yLabel:"MMMM YYYY"}},Y=function(){function r(r,e,n){var t=this;this.ref=r,this.formConfig=n,this.id="I"+g.v4(),this.isMobileOrTablet=!1,x.set(this,void 0),D.set(this,g.v4()),this.disableErrorMessage=!1,this.formControl=new u.SdFormControl,E.set(this,void 0),this.type="datetime",this.required=!1,this.sdChange=new o.EventEmitter,this.sdFocus=new o.EventEmitter,this.modelChange=new o.EventEmitter,T.set(this,new C.Subscription),this.isFocused=!1,this.onFocus=function(){t.isFocused=!0,t.sdFocus.emit()},this.onBlur=function(){t.isFocused=!1},this.onClick=function(){var r;(null===(r=t.sdView)||void 0===r?void 0:r.templateRef)&&(t.formControl.disabled||t.isFocused||t.focus())},this.blur=function(){var r,e;null===(e=null===(r=t.input)||void 0===r?void 0:r.nativeElement)||void 0===e||e.blur()},this.focus=function(){t.isFocused=!0,setTimeout((function(){var r,e,n,o;null===(e=null===(r=t.input)||void 0===r?void 0:r.nativeElement)||void 0===e||e.focus(),"date"===t.type?null===(n=t.datePicker)||void 0===n||n.open():null===(o=t.dateTimePicker)||void 0===o||o.open()}),100)},this.onKeyDown=function(r){var e=r.keyCode||r.charCode,n=!1;return 16===e&&(n=!0),!r.ctrlKey||67!==e&&86!==e?(e>=48&&e<=57||8===e||e<=37||e<=39||e>=96&&e<=105||191===e||186===e||59===e)&&!1===n:(console.log("action copy parse... datepicker"),!0)},this.onKeyup=function(r){var e=r.target.value,n=t.formControl,o=/^([1-9]|([012][0-9])|(3[01]))\/([0]{0,1}[1-9]|1[012])\/\d\d\d\d$/g;"datetime"!==t.type&&"time"!==t.type||(o=/^([1-9]|([012][0-9])|(3[01]))\/([0]{0,1}[1-9]|1[012])\/\d\d\d\d [012]{0,1}[0-9]:[0-6][0-9]$/g),"month"===t.type&&(o=/^([0]{0,1}[1-9]|1[012])\/\d\d\d\d [012]{0,1}[0-9]:[0-6][0-9]$/g);var a="date"===t.type?"dd/MM/yyyy":"dd/MM/yyyy HH:mm";e&&!o.test(e)?setTimeout((function(){t.isValid=!0,n.markAsDirty(),n.markAsTouched(),n.setErrors(Object.assign(Object.assign({},n.errors),{date:"Chưa đúng định dạng "+a}))}),0):setTimeout((function(){t.isValid=!1,n.setErrors(Object.assign(Object.assign({},n.errors),{date:null})),t.formControl.updateValueAndValidity()}),0)},this.onChange=function(r){var e,n,o,a=null===(e=r.value)||void 0===e?void 0:e.toDate();t.dateTimePicker||null===(o=null===(n=t.input)||void 0===n?void 0:n.nativeElement)||void 0===o||o.focus(),t.isValid?(t.isValid=!1,t.formControl.setValue(null),t.modelChange.emit(null),t.sdChange.emit(null)):new Date(w(t,x))!==a&&(t.modelChange.emit(a),t.sdChange.emit(a))},this.timeChanged=function(r){var e=r;t.formControl.setValue(e),t.modelChange.emit(e),t.sdChange.emit(e)},this.clear=function(r){null==r||r.stopPropagation(),t.formControl.value&&(t.formControl.setValue(null),t.modelChange.emit(null),t.sdChange.emit(null))},this.setMonthAndYear=function(r,e){var n=t.formControl.value||k.default();n.month(r.month()),n.year(r.year()),t.formControl.setValue(n),e.close(),t.modelChange.emit(n),t.sdChange.emit(n)},this.isMobileOrTablet=!e.isDesktop()}return Object.defineProperty(r.prototype,"name",{set:function(r){r&&q(this,D,r)},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"_disableErrorMessage",{set:function(r){this.disableErrorMessage=""===r||r,r=""===r||r},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"_min",{set:function(r){Date.isDate(r)?this.min=new Date(r):this.min=null},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"_max",{set:function(r){Date.isDate(r)?this.max=new Date(r):this.max=null},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"form",{set:function(r){r&&(r instanceof a.NgForm?q(this,E,r.form):q(this,E,r))},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"_type",{set:function(r){this.type=r||"datetime"},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"disabled",{set:function(r){(r=""===r||r)?this.formControl.disable():this.formControl.enable()},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"_required",{set:function(r){this.required=""===r||r,this.required?this.formControl.setValidators([a.Validators.required]):this.formControl.clearValidators()},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"_inlineError",{set:function(r){this.inlineError=r,this.inlineError?(this.formControl.setValidators([this.customInlineErrorValidator()]),this.formControl.updateValueAndValidity()):(this.formControl.clearValidators(),this.formControl.updateValueAndValidity())},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"_label",{set:function(r){this.label=r,this.qcId=v.default({selector:"sd-date-time",label:r})},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"minDate",{set:function(r){Date.isDate(r)?this.min=new Date(r):this.min=null},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"maxDate",{set:function(r){Date.isDate(r)?this.max=new Date(r):this.max=null},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"model",{set:function(r){if(Date.isDate(r)||(r=null),w(this,x)!==r){q(this,x,r);var e=Date.isDate(w(this,x))?k.default(Date.toFormat(w(this,x),"MM/dd/yyyy HH:mm:ss"),"MM/DD/YYYY HH:mm:ss"):null;this.formControl.setValue(e)}},enumerable:!1,configurable:!0}),r.prototype.ngOnDestroy=function(){var r;null===(r=w(this,E))||void 0===r||r.removeControl(w(this,D)),w(this,T).unsubscribe()},r.prototype.ngOnInit=function(){var r,e,n=this;this.maxlength="datetime"===this.type?16:10,this.appearance=this.appearance||(null===(r=this.formConfig)||void 0===r?void 0:r.appearance),w(this,T).add(this.formControl.sdChanges.subscribe((function(){n.ref.markForCheck()}))),null===(e=w(this,E))||void 0===e||e.addControl(w(this,D),this.formControl)},r.prototype.customInlineErrorValidator=function(){return function(r){return{inlineError:!0}}},r.prototype.ngAfterViewInit=function(){},r.prototype.focusInputElement=function(){var r,e;null===(e=null===(r=this.input)||void 0===r?void 0:r.nativeElement)||void 0===e||e.focus()},r}();x=new WeakMap,D=new WeakMap,E=new WeakMap,T=new WeakMap,Y.decorators=[{type:o.Component,args:[{selector:"sd-date-time",template:'<ng-container *ngIf="!appearance && sdLabelDef?.templateRef">\r\n  <ng-container *ngTemplateOutlet="sdLabelDef.templateRef"> </ng-container>\r\n</ng-container>\r\n<label *ngIf="!appearance && label && !sdLabelDef?.templateRef" class="d-block mb-0 T14M"\r\n  >{{ label }} <span class="text-danger mb-2" *ngIf="required">*</span></label\r\n>\r\n<div\r\n  class="d-flex align-items-center"\r\n  [class.sd-view]="sdView?.templateRef"\r\n  [class.c-focused]="isFocused"\r\n  [class.c-disabled]="formControl.disabled"\r\n  (click)="onClick()">\r\n  <ng-container *ngIf="sdView?.templateRef && !isFocused && !datePicker?.opened && !dateTimePicker?.opened; else default">\r\n    <ng-container *ngTemplateOutlet="sdView.templateRef; context: { value: formControl.value }"> </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field\r\n      *ngIf="type === \'datetime\'"\r\n      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\r\n        aria-hidden="true"\r\n        [id]="id"\r\n        matInput\r\n        (keyup)="onKeyup($event)"\r\n        (keydown)="onKeyDown($event)"\r\n        (dateChange)="onChange($event)"\r\n        [autocomplete]="id"\r\n        autocorrect="off"\r\n        [formControl]="formControl"\r\n        [ngxMatDatetimePicker]="picker1"\r\n        [placeholder]="placeholder || (appearance ? label : \'\')"\r\n        [min]="min"\r\n        [required]="required"\r\n        [max]="max"\r\n        (focus)="onFocus()"\r\n        (blur)="onBlur()"\r\n        [attr.data-qclabel]="label"\r\n        [attr.data-qcid]="qcId"\r\n        #input\r\n        [maxLength]="maxlength" />\r\n      \x3c!-- <mat-icon class="pointer sd-suffix-icon" (click)="!formControl?.disabled && picker1.open()" matSuffix>today\r\n      </mat-icon> --\x3e\r\n      <ng-content select="[sdSuffixIcon]" matSuffix></ng-content>\r\n      <mat-icon\r\n        *ngIf="formControl?.value && !required && !formControl.disabled"\r\n        class="pointer sd-suffix-icon"\r\n        (click)="clear($event)"\r\n        matSuffix\r\n        >cancel\r\n      </mat-icon>\r\n      <mat-datepicker-toggle matSuffix [for]="picker1"> </mat-datepicker-toggle>\r\n      <ngx-mat-datetime-picker\r\n        #picker1\r\n        [defaultTime]="defaultTime"\r\n        [touchUi]="isMobileOrTablet"\r\n        [showSpinners]="false"\r\n        (opened)="onFocus()"\r\n        (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"\r\n          >{{ \'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"\r\n          >{{ \'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"\r\n          >{{ \'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 }} </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 }} </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\r\n      *ngIf="type === \'date\'"\r\n      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\r\n        aria-hidden="true"\r\n        [id]="id"\r\n        matInput\r\n        (keyup)="onKeyup($event)"\r\n        (keydown)="onKeyDown($event)"\r\n        (dateChange)="onChange($event)"\r\n        [autocomplete]="id"\r\n        autocorrect="off"\r\n        [formControl]="formControl"\r\n        [required]="required"\r\n        [matDatepicker]="picker2"\r\n        [placeholder]="placeholder || (appearance ? label : \'\')"\r\n        [min]="min"\r\n        [max]="max"\r\n        (focus)="onFocus()"\r\n        (blur)="onBlur()"\r\n        [attr.data-qclabel]="label"\r\n        [attr.data-qcid]="qcId"\r\n        #input\r\n        [maxLength]="maxlength" />\r\n      <ng-content select="[sdSuffixIcon]" matSuffix></ng-content>\r\n      <mat-icon\r\n        *ngIf="formControl?.value && !required && !formControl.disabled"\r\n        class="pointer sd-suffix-icon"\r\n        (click)="clear($event)"\r\n        matSuffix\r\n        >cancel\r\n      </mat-icon>\r\n\r\n      <mat-icon class="pointer sd-suffix-icon" (click)="!formControl?.disabled && picker2.open()" #btn matSuffix>today </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"\r\n          >{{ \'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"\r\n          >{{ \'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"\r\n          >{{ \'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 }} </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 }} </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\r\n    <mat-form-field\r\n      *ngIf="type === \'month\'"\r\n      class="sd-md"\r\n      [ngClass]="{ \'sd-sm\': size === \'sm\', \'no-padding-wrapper\': disableErrorMessage }"\r\n      appearance="outline">\r\n      <mat-label *ngIf="label">{{ label }}</mat-label>\r\n      <input\r\n        aria-hidden="true"\r\n        [id]="id"\r\n        matInput\r\n        (keyup)="onKeyup($event)"\r\n        (keydown)="onKeyDown($event)"\r\n        (dateChange)="onChange($event)"\r\n        [autocomplete]="id"\r\n        autocorrect="off"\r\n        [formControl]="formControl"\r\n        [required]="required"\r\n        [matDatepicker]="pickerMonth"\r\n        [placeholder]="placeholder || (appearance ? label : \'\')"\r\n        [min]="min"\r\n        [max]="max"\r\n        (focus)="onFocus()"\r\n        (blur)="onBlur()"\r\n        #input />\r\n\r\n      <mat-icon\r\n        *ngIf="formControl?.value && !required && !formControl.disabled"\r\n        class="pointer sd-suffix-icon"\r\n        (click)="clear($event)"\r\n        matSuffix\r\n        >cancel\r\n      </mat-icon>\r\n      <mat-icon class="pointer sd-suffix-icon" (click)="!formControl?.disabled && pickerMonth.open()" #btn matSuffix> today </mat-icon>\r\n\r\n      <mat-datepicker\r\n        #pickerMonth\r\n        [touchUi]="isMobileOrTablet"\r\n        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"\r\n          >{{ \'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"\r\n          >{{ \'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"\r\n          >{{ \'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 }} </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\r\n    <ng-container *ngIf="type === \'time\'">\r\n      <mat-form-field [appearance]="appearance || \'outline\'" class="sd-md pt-5">\r\n        <mat-label *ngIf="appearance && label">{{ label }}</mat-label>\r\n        <input\r\n          [ngxTimepicker]="openingTime"\r\n          aria-hidden="true"\r\n          [id]="id"\r\n          matInput\r\n          (keyup)="onKeyup($event)"\r\n          (keydown)="onKeyDown($event)"\r\n          [autocomplete]="id"\r\n          autocorrect="off"\r\n          [formControl]="formControl"\r\n          [required]="required"\r\n          [placeholder]="placeholder || (appearance ? label : \'\')"\r\n          [min]="min"\r\n          [max]="max"\r\n          (focus)="onFocus()"\r\n          (blur)="onBlur()"\r\n          [attr.data-qclabel]="label"\r\n          [attr.data-qcid]="qcId"\r\n          #input\r\n          [format]="24" />\r\n\r\n        <ngx-material-timepicker\r\n          #openingTime\r\n          [defaultTime]="defaultTime"\r\n          (timeChanged)="timeChanged($event)"\r\n          [enableKeyboardInput]="true"\r\n          [cancelBtnTmpl]="cancelBtn"\r\n          [confirmBtnTmpl]="confirmBtn"></ngx-material-timepicker>\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?.inlineError && formControl?.touched">\r\n          <ng-container *ngIf="!disableErrorMessage">{{ inlineError }}</ng-container>\r\n        </mat-error>\r\n      </mat-form-field>\r\n\r\n      <ng-template #cancelBtn>\r\n        <sd-button title="{{ \'Cancel\' | sdTranslate }}" size="sm"></sd-button>\r\n      </ng-template>\r\n      <ng-template #confirmBtn>\r\n        <sd-button class="ml-8" title="{{ \'Apply\' | sdTranslate }}" color="primary" size="sm"></sd-button>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\x3c!-- <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> --\x3e\r\n',changeDetection:o.ChangeDetectionStrategy.OnPush,providers:[{provide:M.MAT_DATE_FORMATS,useValue:P},{provide:e.NGX_MAT_DATE_FORMATS,useValue:V}],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}"]}]}],Y.ctorParameters=function(){return[{type:o.ChangeDetectorRef},{type:y.DeviceDetectorService},{type:void 0,decorators:[{type:o.Inject,args:[u.FORM_CONFIG]},{type:o.Optional}]}]},Y.propDecorators={name:[{type:o.Input}],appearance:[{type:o.Input}],_disableErrorMessage:[{type:o.Input,args:["disableErrorMessage"]}],_min:[{type:o.Input,args:["min"]}],_max:[{type:o.Input,args:["max"]}],size:[{type:o.Input}],form:[{type:o.Input}],_type:[{type:o.Input,args:["type"]}],disabled:[{type:o.Input}],_required:[{type:o.Input,args:["required"]}],_inlineError:[{type:o.Input,args:["inlineError"]}],_label:[{type:o.Input,args:["label"]}],placeholder:[{type:o.Input}],defaultTime:[{type:o.Input}],minDate:[{type:o.Input}],maxDate:[{type:o.Input}],validator:[{type:o.Input}],sdChange:[{type:o.Output}],sdFocus:[{type:o.Output}],model:[{type:o.Input}],modelChange:[{type:o.Output}],sdView:[{type:o.ContentChild,args:[u.SdViewDefDirective]}],sdLabelDef:[{type:o.ContentChild,args:[u.SdLabelDefDirective]}],input:[{type:o.ViewChild,args:["input"]}],datePicker:[{type:o.ViewChild,args:[l.MatDatepicker]}],dateTimePicker:[{type:o.ViewChild,args:[e.NgxMatDatetimePicker]}]};var O=function(){};O.decorators=[{type:o.NgModule,args:[{imports:[t.CommonModule,a.FormsModule,a.ReactiveFormsModule,m.MatInputModule,d.MatIconModule,s.MatFormFieldModule,l.MatDatepickerModule,i.MatMomentDateModule,e.NgxMatDatetimePickerModule,e.NgxMatTimepickerModule,n.NgxMatMomentModule,f.SdTranslateModule,u.SdCommonModule,p.NgxMaterialTimepickerModule,c.SdButtonModule],declarations:[Y],exports:[u.SdCommonModule,Y],providers:[]}]}],r.SdDateTime=Y,r.SdDateTimeModule=O,Object.defineProperty(r,"__esModule",{value:!0})}));
//# sourceMappingURL=sd-angular-core-date-time.umd.min.js.map