import * as i0 from '@angular/core';
import { EventEmitter, ContentChild, Output, Input, ViewChild, Inject, Optional, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormControl, NgForm, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { provideMomentDateAdapter } from '@angular/material-moment-adapter';
import { MatNativeDateModule } from '@angular/material/core';
import * as i6 from '@angular/material/datepicker';
import { MatDatepickerModule, MatDateRangePicker } from '@angular/material/datepicker';
import * as i5 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i3 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { SdLabelDefDirective } from '@sd-angular/core/forms/directives';
import { SD_FORM_CONFIGURATION } from '@sd-angular/core/forms/models';
import { DateUtilities, SdUtilities } from '@sd-angular/core/utilities/extensions';
import moment from 'moment';
import * as uuid from 'uuid';
import { SdLabel } from '@sd-angular/core/forms/label';
import * as i4 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';

class SdDateRange {
    cdRef;
    formConfig;
    picker;
    autoId;
    set _autoId(val) {
        if (!val) {
            return;
        }
        this.autoId = `forms-date-range-${val}`;
    }
    id1 = `I${uuid.v4()}`;
    id2 = `I${uuid.v4()}`;
    isMobileOrTablet = false;
    #name = uuid.v4();
    set name(val) {
        if (val) {
            this.#name = val;
        }
    }
    appearance = 'outline';
    size = 'md';
    #form;
    formControl = new FormControl();
    set _form(val) {
        if (val) {
            if (val instanceof NgForm) {
                this.#form = val.form;
            }
            else {
                this.#form = val;
            }
        }
    }
    set disabled(val) {
        val = val === '' || !!val;
        if (val) {
            this.formControl.disable();
        }
        else {
            this.formControl.enable();
        }
    }
    required = false;
    set _required(val) {
        this.required = val === '' || !!val;
        if (this.required) {
            this.formControl.setValidators([Validators.required]);
            this.control1.setValidators([Validators.required]);
            this.control2.setValidators([Validators.required]);
        }
        else {
            this.formControl.clearValidators();
            this.control1.clearValidators();
            this.control2.clearValidators();
        }
    }
    label;
    set _label(label) {
        this.label = label;
    }
    helperText;
    set _helperText(val) {
        this.helperText = val;
    }
    hideInlineError = false;
    set _hideInlineError(val) {
        this.hideInlineError = val === '' || !!val;
    }
    min;
    set _min(val) {
        if (val === 'TODAY') {
            this.min = new Date();
        }
        else if (val && DateUtilities.isDate(val)) {
            this.min = new Date(val);
        }
        else {
            this.min = null;
        }
    }
    max;
    set _max(val) {
        if (val === 'TODAY') {
            this.max = new Date();
        }
        else if (val && DateUtilities.isDate(val)) {
            this.max = new Date(val);
        }
        else {
            this.max = null;
        }
    }
    #model;
    set model(val) {
        const from = DateUtilities.isDate(val?.from) ? DateUtilities.toFormat(val?.from, 'yyyy/MM/dd') : null;
        const to = DateUtilities.isDate(val?.to) ? DateUtilities.toFormat(val?.to, 'yyyy/MM/dd') : null;
        if (this.#model?.from !== from && this.#model?.to !== to) {
            this.#model = {
                from,
                to,
            };
        }
        else if (this.#model?.from !== from) {
            this.#model = {
                ...this.#model,
                from,
            };
        }
        else if (this.#model?.to !== to) {
            this.#model = {
                ...this.#model,
                to,
            };
        }
        // Form chỉ nhận moment nên cần format lại trước khi gán vào form
        const value = {
            from: DateUtilities.isDate(this.#model?.from) ? moment(DateUtilities.toFormat(this.#model?.from, 'yyyy/MM/dd'), 'YYYY/MM/DD') : null,
            to: DateUtilities.isDate(this.#model?.to) ? moment(DateUtilities.toFormat(this.#model?.to, 'yyyy/MM/dd'), 'YYYY/MM/DD') : null,
        };
        this.control1.setValue(value.from);
        this.control2.setValue(value.to);
    }
    modelChange = new EventEmitter();
    sdChange = new EventEmitter();
    sdLabelDef;
    control1 = new FormControl();
    #c1 = uuid.v4();
    control2 = new FormControl();
    #c2 = uuid.v4();
    #isFocus = false;
    #isModelChange = false;
    #isSdChangeEmittedByEnter = false;
    #isSdChangeEmittedByClear = false;
    constructor(cdRef, formConfig) {
        this.cdRef = cdRef;
        this.formConfig = formConfig;
        this.isMobileOrTablet = SdUtilities.isMobile();
        this.cdRef.markForCheck();
    }
    ngOnDestroy() {
        this.#form?.removeControl(this.#c1);
        this.#form?.removeControl(this.#c2);
        this.#form?.removeControl(this.#name);
    }
    ngOnInit() {
        this.appearance = this.appearance || this.formConfig?.appearance;
        this.#form?.addControl(this.#c1, this.control1);
        this.#form?.addControl(this.#c2, this.control2);
        this.#form?.addControl(this.#name, this.formControl);
    }
    onStartChange = (event) => {
        // NOTE: Chỉ lắng nghe change khi chọn từ date-picker
        if (!this.#isFocus) {
            this.#emit();
        }
    };
    onEndChange = (event) => {
        // NOTE: Chỉ lắng nghe change khi chọn từ date-picker
        if (!this.#isFocus) {
            this.#emit();
        }
    };
    #emit = () => {
        const value = {
            from: this.control1.value?.toDate() || null,
            to: this.control2.value?.toDate() || null,
        };
        if (!DateUtilities.equal(value.from, this.#model?.from) || !DateUtilities.equal(value.to, this.#model?.to)) {
            this.#model = {
                from: DateUtilities.isDate(value?.from) ? DateUtilities.toFormat(value?.from, 'yyyy/MM/dd') : null,
                to: DateUtilities.isDate(value?.to) ? DateUtilities.toFormat(value?.to, 'yyyy/MM/dd') : null,
            };
            this.formControl.setValue({
                from: this.control1.value,
                to: this.control2.value,
            });
            this.modelChange.emit(this.#model);
            this.#isModelChange = true;
            this.cdRef.markForCheck();
        }
    };
    clear = () => {
        this.#model = {
            from: null,
            to: null,
        };
        this.control1.setValue(null, {
            emitEvent: false,
        });
        this.control2.setValue(null, {
            emitEvent: false,
        });
        this.formControl.setValue(this.#model);
        this.modelChange.emit(this.#model);
        this.sdChange.emit(this.#model);
        this.#isSdChangeEmittedByClear = true;
        this.cdRef.markForCheck();
    };
    onEnter = () => {
        this.#emit();
        this.sdChange.emit(this.#model);
        this.#isSdChangeEmittedByEnter = true;
    };
    onFocus = () => {
        // Reset data đảm bảo chỉ có luồng focus hoạt động chính xác
        this.#isFocus = true;
        this.#isModelChange = false;
        this.#isSdChangeEmittedByEnter = false;
        this.#isSdChangeEmittedByClear = false;
    };
    onBlur = () => {
        this.#isFocus = false;
        this.#emit();
        // NOTE:
        // 1. setTimeout ném vào queue để đảm bảo người dùng không focus tiếp vào input còn lại thì mới sdChange
        // 2. Trước đó đã từng emit sdChange bằng nút Enter hoặc ấn nút Clear thì blur input sẽ không cần emit nữa
        setTimeout(() => {
            if (!this.#isFocus && this.#isModelChange && !(this.#isSdChangeEmittedByEnter || this.#isSdChangeEmittedByClear)) {
                this.sdChange.emit(this.#model);
            }
        });
    };
    onClosePicker = () => {
        this.sdChange.emit(this.#model);
    };
    onOpenPicker = (event) => {
        event.stopPropagation();
        if (!this.formControl.disabled) {
            this.picker.open();
        }
    };
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDateRange, deps: [{ token: i0.ChangeDetectorRef }, { token: SD_FORM_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdDateRange, isStandalone: true, selector: "sd-date-range", inputs: { _autoId: ["autoId", "_autoId"], name: "name", appearance: "appearance", size: "size", _form: ["form", "_form"], disabled: "disabled", _required: ["required", "_required"], _label: ["label", "_label"], _helperText: ["helperText", "_helperText"], _hideInlineError: ["hideInlineError", "_hideInlineError"], _min: ["min", "_min"], _max: ["max", "_max"], model: "model" }, outputs: { modelChange: "modelChange", sdChange: "sdChange" }, providers: [
            provideMomentDateAdapter({
                parse: {
                    dateInput: 'DD/MM/YYYY',
                },
                display: {
                    dateInput: 'DD/MM/YYYY',
                    monthYearLabel: 'MMM YYYY',
                    dateA11yLabel: 'LL',
                    monthYearA11yLabel: 'MMMM YYYY',
                },
            }),
        ], queries: [{ propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true }], viewQueries: [{ propertyName: "picker", first: true, predicate: MatDateRangePicker, descendants: true }], ngImport: i0, template: "@if (!appearance && sdLabelDef?.templateRef) {\r\n  <ng-container *ngTemplateOutlet=\"sdLabelDef?.templateRef!\"> </ng-container>\r\n}\r\n@if (!appearance && label && !sdLabelDef?.templateRef) {\r\n  <sd-label [label]=\"label\" [required]=\"required\"></sd-label>\r\n}\r\n<mat-form-field\r\n  [class.sd-md]=\"size === 'md'\"\r\n  [class.sd-sm]=\"size === 'sm'\"\r\n  [class.hide-inline-error]=\"hideInlineError\"\r\n  [appearance]=\"appearance\">\r\n  @if (appearance && label) {\r\n    <mat-label style=\"display: inline-block\">\r\n      <div style=\"display: flex; align-items: center; gap: 4px\">\r\n        <span>{{ label }}</span>\r\n        @if (helperText) {\r\n          <mat-icon [matTooltip]=\"helperText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n        }\r\n      </div>\r\n    </mat-label>\r\n  }\r\n  <mat-date-range-input [max]=\"max\" [min]=\"min\" [rangePicker]=\"picker\" [disabled]=\"formControl.disabled\" [required]=\"required\">\r\n    <input\r\n      aria-hidden=\"true\"\r\n      [id]=\"id1\"\r\n      autocomplete=\"off\"\r\n      autocorrect=\"off\"\r\n      matStartDate\r\n      [formControl]=\"control1\"\r\n      [placeholder]=\"formControl.disabled ? '' : 'T\u1EEB'\"\r\n      (dateInput)=\"onStartChange($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n      (keyup.enter)=\"onEnter()\"\r\n      [attr.data-qclabel]=\"label\"\r\n      [attr.data-autoId]=\"autoId + '-from'\" />\r\n    <input\r\n      aria-hidden=\"true\"\r\n      [id]=\"id2\"\r\n      [autocomplete]=\"id2\"\r\n      autocorrect=\"off\"\r\n      matEndDate\r\n      [formControl]=\"control2\"\r\n      [placeholder]=\"formControl.disabled ? '' : '\u0111\u1EBFn'\"\r\n      (dateInput)=\"onEndChange($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n      (keyup.enter)=\"onEnter()\"\r\n      [attr.data-qclabel]=\"label\"\r\n      [attr.data-autoId]=\"autoId + '-to'\" />\r\n  </mat-date-range-input>\r\n  @if (control1.value || control2.value) {\r\n    <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"clear()\" matSuffix>cancel </mat-icon>\r\n  }\r\n  <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"onOpenPicker($event)\" matSuffix>today</mat-icon>\r\n  <mat-date-range-picker [touchUi]=\"isMobileOrTablet\" (closed)=\"onClosePicker()\" #picker></mat-date-range-picker>\r\n  @if (\r\n    (formControl.errors?.['required'] && formControl.touched) ||\r\n    (control1.errors?.['required'] && control1.touched) ||\r\n    (control2.errors?.['required'] && control2.touched)\r\n  ) {\r\n    <mat-error>\r\n      @if (!hideInlineError) {\r\n        {{ 'Vui l\u00F2ng nh\u1EADp th\u00F4ng tin' }}\r\n      }\r\n    </mat-error>\r\n  }\r\n</mat-form-field>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{padding-top:5px;display:block}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-black100)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-start-date:disabled,:host ::ng-deep .mat-mdc-form-field input.mat-mdc-end-date:disabled{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .sd-md mat-date-range-input{padding-top:12px;font-size:14px}:host ::ng-deep .sd-sm mat-date-range-input{padding-top:4px;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDateRange, decorators: [{
            type: Component,
            args: [{ selector: 'sd-date-range', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        provideMomentDateAdapter({
                            parse: {
                                dateInput: 'DD/MM/YYYY',
                            },
                            display: {
                                dateInput: 'DD/MM/YYYY',
                                monthYearLabel: 'MMM YYYY',
                                dateA11yLabel: 'LL',
                                monthYearA11yLabel: 'MMMM YYYY',
                            },
                        }),
                    ], standalone: true, imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        MatIconModule,
                        MatTooltipModule,
                        MatFormFieldModule,
                        MatDatepickerModule,
                        MatNativeDateModule,
                        SdLabel,
                    ], template: "@if (!appearance && sdLabelDef?.templateRef) {\r\n  <ng-container *ngTemplateOutlet=\"sdLabelDef?.templateRef!\"> </ng-container>\r\n}\r\n@if (!appearance && label && !sdLabelDef?.templateRef) {\r\n  <sd-label [label]=\"label\" [required]=\"required\"></sd-label>\r\n}\r\n<mat-form-field\r\n  [class.sd-md]=\"size === 'md'\"\r\n  [class.sd-sm]=\"size === 'sm'\"\r\n  [class.hide-inline-error]=\"hideInlineError\"\r\n  [appearance]=\"appearance\">\r\n  @if (appearance && label) {\r\n    <mat-label style=\"display: inline-block\">\r\n      <div style=\"display: flex; align-items: center; gap: 4px\">\r\n        <span>{{ label }}</span>\r\n        @if (helperText) {\r\n          <mat-icon [matTooltip]=\"helperText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n        }\r\n      </div>\r\n    </mat-label>\r\n  }\r\n  <mat-date-range-input [max]=\"max\" [min]=\"min\" [rangePicker]=\"picker\" [disabled]=\"formControl.disabled\" [required]=\"required\">\r\n    <input\r\n      aria-hidden=\"true\"\r\n      [id]=\"id1\"\r\n      autocomplete=\"off\"\r\n      autocorrect=\"off\"\r\n      matStartDate\r\n      [formControl]=\"control1\"\r\n      [placeholder]=\"formControl.disabled ? '' : 'T\u1EEB'\"\r\n      (dateInput)=\"onStartChange($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n      (keyup.enter)=\"onEnter()\"\r\n      [attr.data-qclabel]=\"label\"\r\n      [attr.data-autoId]=\"autoId + '-from'\" />\r\n    <input\r\n      aria-hidden=\"true\"\r\n      [id]=\"id2\"\r\n      [autocomplete]=\"id2\"\r\n      autocorrect=\"off\"\r\n      matEndDate\r\n      [formControl]=\"control2\"\r\n      [placeholder]=\"formControl.disabled ? '' : '\u0111\u1EBFn'\"\r\n      (dateInput)=\"onEndChange($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n      (keyup.enter)=\"onEnter()\"\r\n      [attr.data-qclabel]=\"label\"\r\n      [attr.data-autoId]=\"autoId + '-to'\" />\r\n  </mat-date-range-input>\r\n  @if (control1.value || control2.value) {\r\n    <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"clear()\" matSuffix>cancel </mat-icon>\r\n  }\r\n  <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"onOpenPicker($event)\" matSuffix>today</mat-icon>\r\n  <mat-date-range-picker [touchUi]=\"isMobileOrTablet\" (closed)=\"onClosePicker()\" #picker></mat-date-range-picker>\r\n  @if (\r\n    (formControl.errors?.['required'] && formControl.touched) ||\r\n    (control1.errors?.['required'] && control1.touched) ||\r\n    (control2.errors?.['required'] && control2.touched)\r\n  ) {\r\n    <mat-error>\r\n      @if (!hideInlineError) {\r\n        {{ 'Vui l\u00F2ng nh\u1EADp th\u00F4ng tin' }}\r\n      }\r\n    </mat-error>\r\n  }\r\n</mat-form-field>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{padding-top:5px;display:block}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-black100)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-start-date:disabled,:host ::ng-deep .mat-mdc-form-field input.mat-mdc-end-date:disabled{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .sd-md mat-date-range-input{padding-top:12px;font-size:14px}:host ::ng-deep .sd-sm mat-date-range-input{padding-top:4px;font-size:14px}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [SD_FORM_CONFIGURATION]
                }, {
                    type: Optional
                }] }], propDecorators: { picker: [{
                type: ViewChild,
                args: [MatDateRangePicker]
            }], _autoId: [{
                type: Input,
                args: ['autoId']
            }], name: [{
                type: Input
            }], appearance: [{
                type: Input
            }], size: [{
                type: Input
            }], _form: [{
                type: Input,
                args: ['form']
            }], disabled: [{
                type: Input
            }], _required: [{
                type: Input,
                args: ['required']
            }], _label: [{
                type: Input,
                args: ['label']
            }], _helperText: [{
                type: Input,
                args: ['helperText']
            }], _hideInlineError: [{
                type: Input,
                args: ['hideInlineError']
            }], _min: [{
                type: Input,
                args: ['min']
            }], _max: [{
                type: Input,
                args: ['max']
            }], model: [{
                type: Input
            }], modelChange: [{
                type: Output
            }], sdChange: [{
                type: Output
            }], sdLabelDef: [{
                type: ContentChild,
                args: [SdLabelDefDirective]
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { SdDateRange };
//# sourceMappingURL=sd-angular-core-forms-date-range.mjs.map
