import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { viewChild, contentChild, inject, ChangeDetectorRef, input, computed, booleanAttribute, model, output, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormControl, Validators, NgForm, 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 { MatDateRangePicker, MatDatepickerModule } 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 * as i4 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import { SdLabelDefDirective } from '@sd-angular/core/forms/directives';
import { SD_FORM_CONFIGURATION } from '@sd-angular/core/forms/models';
import { SdLabel } from '@sd-angular/core/forms/label';
import { SdUtilities, DateUtilities } from '@sd-angular/core/utilities/extensions';
import moment from 'moment';
import * as uuid from 'uuid';

/* eslint-disable @angular-eslint/no-input-rename */
/* eslint-disable @typescript-eslint/no-explicit-any */
class SdDateRange {
    id1 = `I${uuid.v4()}`;
    id2 = `I${uuid.v4()}`;
    #c1 = uuid.v4();
    #c2 = uuid.v4();
    // ==========================================
    // 1. SIGNAL QUERIES
    // ==========================================
    picker = viewChild(MatDateRangePicker);
    sdLabelDef = contentChild(SdLabelDefDirective);
    // ==========================================
    // 2. INJECTS
    // ==========================================
    cdRef = inject(ChangeDetectorRef);
    formConfig = inject(SD_FORM_CONFIGURATION, { optional: true });
    // ==========================================
    // 3. SIGNAL INPUTS & MODEL
    // ==========================================
    autoIdInput = input(undefined, { alias: 'autoId' });
    autoId = computed(() => this.autoIdInput() ? `forms-date-range-${this.autoIdInput()}` : undefined);
    name = input(uuid.v4());
    size = input('md');
    // Chấp nhận mọi kiểu Form cha truyền vào để giải quyết lỗi "Type FormGroup<{}> is not assignable..."
    form = input();
    label = input();
    helperText = input();
    hideInlineError = input(false, { transform: booleanAttribute });
    required = input(false, { transform: booleanAttribute });
    disabled = input(false, { transform: booleanAttribute });
    appearanceInput = input(undefined, { alias: 'appearance' });
    appearance = computed(() => this.appearanceInput() ?? this.formConfig?.appearance ?? 'outline');
    minInput = input(undefined, { alias: 'min' });
    resolvedMin = computed(() => this.#parseDateBoundary(this.minInput()));
    maxInput = input(undefined, { alias: 'max' });
    resolvedMax = computed(() => this.#parseDateBoundary(this.maxInput()));
    valueModel = model(undefined, { alias: 'model' });
    // ==========================================
    // 4. SIGNAL OUTPUTS
    // ==========================================
    sdChange = output();
    // ==========================================
    // 5. INTERNAL STATE & STREAMS
    // ==========================================
    isMobileOrTablet = SdUtilities.isMobile();
    formControl = new FormControl();
    control1 = new FormControl();
    control2 = new FormControl();
    #isFocus = false;
    #isModelChange = false;
    #isSdChangeEmittedByEnter = false;
    #isSdChangeEmittedByClear = false;
    constructor() {
        this.cdRef.markForCheck();
        // EFFECT 1: Sync model thay đổi từ bên ngoài vào control1 và control2
        effect(() => {
            const val = this.valueModel();
            untracked(() => {
                const fromStr = DateUtilities.isDate(val?.from) ? DateUtilities.toFormat(val?.from, 'yyyy/MM/dd') : null;
                const toStr = DateUtilities.isDate(val?.to) ? DateUtilities.toFormat(val?.to, 'yyyy/MM/dd') : null;
                // Chỉ set value nếu có sự khác biệt (tránh loop)
                const currentFrom = this.control1.value ? DateUtilities.toFormat(this.control1.value.toDate(), 'yyyy/MM/dd') : null;
                const currentTo = this.control2.value ? DateUtilities.toFormat(this.control2.value.toDate(), 'yyyy/MM/dd') : null;
                if (fromStr !== currentFrom) {
                    this.control1.setValue(fromStr ? moment(fromStr, 'YYYY/MM/DD') : null, { emitEvent: false });
                }
                if (toStr !== currentTo) {
                    this.control2.setValue(toStr ? moment(toStr, 'YYYY/MM/DD') : null, { emitEvent: false });
                }
            });
        });
        // EFFECT 2: Sync Disable
        effect(() => {
            if (this.disabled()) {
                this.formControl.disable({ emitEvent: false });
                this.control1.disable({ emitEvent: false });
                this.control2.disable({ emitEvent: false });
            }
            else {
                this.formControl.enable({ emitEvent: false });
                this.control1.enable({ emitEvent: false });
                this.control2.enable({ emitEvent: false });
            }
        });
        // EFFECT 3: Sync Required
        effect(() => {
            const isReq = this.required();
            untracked(() => {
                if (isReq) {
                    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();
                }
                this.formControl.updateValueAndValidity({ emitEvent: false });
                this.control1.updateValueAndValidity({ emitEvent: false });
                this.control2.updateValueAndValidity({ emitEvent: false });
            });
        });
    }
    ngOnInit() {
        const formGroup = this.form() instanceof NgForm ? this.form().form : this.form();
        formGroup?.addControl(this.#c1, this.control1);
        formGroup?.addControl(this.#c2, this.control2);
        formGroup?.addControl(this.name(), this.formControl);
    }
    ngOnDestroy() {
        const formGroup = this.form() instanceof NgForm ? this.form().form : this.form();
        formGroup?.removeControl(this.#c1);
        formGroup?.removeControl(this.#c2);
        formGroup?.removeControl(this.name());
    }
    #parseDateBoundary(val) {
        if (val === 'TODAY')
            return new Date();
        if (val && DateUtilities.isDate(val))
            return new Date(val);
        return null;
    }
    onStartChange = (event) => {
        if (!this.#isFocus)
            this.#emit();
    };
    onEndChange = (event) => {
        if (!this.#isFocus)
            this.#emit();
    };
    #emit = () => {
        const from = this.control1.value?.toDate() || null;
        const to = this.control2.value?.toDate() || null;
        const currentModel = this.valueModel();
        const newFrom = DateUtilities.isDate(from) ? DateUtilities.toFormat(from, 'yyyy/MM/dd') : null;
        const newTo = DateUtilities.isDate(to) ? DateUtilities.toFormat(to, 'yyyy/MM/dd') : null;
        if (newFrom !== currentModel?.from || newTo !== currentModel?.to) {
            const nextModel = { from: newFrom, to: newTo };
            this.formControl.setValue({ from: this.control1.value, to: this.control2.value }, { emitEvent: false });
            this.valueModel.set(nextModel);
            this.#isModelChange = true;
            this.cdRef.markForCheck();
        }
    };
    clear = () => {
        const emptyModel = { from: null, to: null };
        this.control1.setValue(null, { emitEvent: false });
        this.control2.setValue(null, { emitEvent: false });
        this.formControl.setValue(emptyModel, { emitEvent: false });
        this.valueModel.set(emptyModel);
        this.sdChange.emit(emptyModel);
        this.#isSdChangeEmittedByClear = true;
        this.cdRef.markForCheck();
    };
    onEnter = () => {
        this.#emit();
        this.sdChange.emit(this.valueModel());
        this.#isSdChangeEmittedByEnter = true;
    };
    onFocus = () => {
        this.#isFocus = true;
        this.#isModelChange = false;
        this.#isSdChangeEmittedByEnter = false;
        this.#isSdChangeEmittedByClear = false;
    };
    onBlur = () => {
        this.#isFocus = false;
        this.#emit();
        setTimeout(() => {
            if (!this.#isFocus && this.#isModelChange && !(this.#isSdChangeEmittedByEnter || this.#isSdChangeEmittedByClear)) {
                this.sdChange.emit(this.valueModel());
            }
        });
    };
    onClosePicker = () => {
        this.sdChange.emit(this.valueModel());
    };
    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: [], 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: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, minInput: { classPropertyName: "minInput", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxInput: { classPropertyName: "maxInput", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "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, isSignal: true }], viewQueries: [{ propertyName: "picker", first: true, predicate: MatDateRangePicker, descendants: true, isSignal: true }], ngImport: i0, template: "@let lblDef = sdLabelDef();\r\n@let lbl = label();\r\n@let app = appearance();\r\n@let req = required();\r\n@let hideErr = hideInlineError();\r\n@let hText = helperText();\r\n@let minD = resolvedMin();\r\n@let maxD = resolvedMax();\r\n@let sz = size();\r\n\r\n@if (!app && lblDef?.templateRef) {\r\n  <ng-container *ngTemplateOutlet=\"lblDef!.templateRef\"> </ng-container>\r\n}\r\n@if (!app && lbl && !lblDef?.templateRef) {\r\n  <sd-label [label]=\"lbl\" [required]=\"req\"></sd-label>\r\n}\r\n\r\n<mat-form-field\r\n  [class.sd-md]=\"sz === 'md'\"\r\n  [class.sd-sm]=\"sz === 'sm'\"\r\n  [class.hide-inline-error]=\"hideErr\"\r\n  [appearance]=\"app!\">\r\n  \r\n  @if (app && lbl) {\r\n    <mat-label style=\"display: inline-block\">\r\n      <div style=\"display: flex; align-items: center; gap: 4px\">\r\n        <span>{{ lbl }}</span>\r\n        @if (hText) {\r\n          <mat-icon [matTooltip]=\"hText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n        }\r\n      </div>\r\n    </mat-label>\r\n  }\r\n  \r\n  <mat-date-range-input [max]=\"maxD\" [min]=\"minD\" [rangePicker]=\"picker\" [disabled]=\"formControl.disabled\" [required]=\"req\">\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]=\"lbl\"\r\n      [attr.data-autoId]=\"autoId() + '-from'\" />\r\n      \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]=\"lbl\"\r\n      [attr.data-autoId]=\"autoId() + '-to'\" />\r\n  </mat-date-range-input>\r\n  \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  \r\n  <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"onOpenPicker($event)\" matSuffix>today</mat-icon>\r\n  \r\n  <mat-date-range-picker [touchUi]=\"isMobileOrTablet\" (closed)=\"onClosePicker()\" #picker></mat-date-range-picker>\r\n  \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 (!hideErr) {\r\n        {{ 'Vui l\u00F2ng nh\u1EADp th\u00F4ng tin' }}\r\n      }\r\n    </mat-error>\r\n  }\r\n</mat-form-field>", 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: "@let lblDef = sdLabelDef();\r\n@let lbl = label();\r\n@let app = appearance();\r\n@let req = required();\r\n@let hideErr = hideInlineError();\r\n@let hText = helperText();\r\n@let minD = resolvedMin();\r\n@let maxD = resolvedMax();\r\n@let sz = size();\r\n\r\n@if (!app && lblDef?.templateRef) {\r\n  <ng-container *ngTemplateOutlet=\"lblDef!.templateRef\"> </ng-container>\r\n}\r\n@if (!app && lbl && !lblDef?.templateRef) {\r\n  <sd-label [label]=\"lbl\" [required]=\"req\"></sd-label>\r\n}\r\n\r\n<mat-form-field\r\n  [class.sd-md]=\"sz === 'md'\"\r\n  [class.sd-sm]=\"sz === 'sm'\"\r\n  [class.hide-inline-error]=\"hideErr\"\r\n  [appearance]=\"app!\">\r\n  \r\n  @if (app && lbl) {\r\n    <mat-label style=\"display: inline-block\">\r\n      <div style=\"display: flex; align-items: center; gap: 4px\">\r\n        <span>{{ lbl }}</span>\r\n        @if (hText) {\r\n          <mat-icon [matTooltip]=\"hText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n        }\r\n      </div>\r\n    </mat-label>\r\n  }\r\n  \r\n  <mat-date-range-input [max]=\"maxD\" [min]=\"minD\" [rangePicker]=\"picker\" [disabled]=\"formControl.disabled\" [required]=\"req\">\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]=\"lbl\"\r\n      [attr.data-autoId]=\"autoId() + '-from'\" />\r\n      \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]=\"lbl\"\r\n      [attr.data-autoId]=\"autoId() + '-to'\" />\r\n  </mat-date-range-input>\r\n  \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  \r\n  <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"onOpenPicker($event)\" matSuffix>today</mat-icon>\r\n  \r\n  <mat-date-range-picker [touchUi]=\"isMobileOrTablet\" (closed)=\"onClosePicker()\" #picker></mat-date-range-picker>\r\n  \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 (!hideErr) {\r\n        {{ 'Vui l\u00F2ng nh\u1EADp th\u00F4ng tin' }}\r\n      }\r\n    </mat-error>\r\n  }\r\n</mat-form-field>", 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: () => [] });

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

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