import { Component, ContentChild, Pipe, Output, EventEmitter, HostListener, Directive } from '@angular/core';
import { NgControl } from '@angular/forms';
import { IgxInputDirective } from '../input-group/public_api';
import { IgxInputGroupComponent } from '../input-group/input-group.component';
import { IgxInputGroupBase } from '../input-group/input-group.common';
import { DatePickerUtil } from '../date-picker/date-picker.utils';
import { IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api';
/** @hidden @internal */
export class DateRangePickerFormatPipe {
    transform(values, appliedFormat, locale, formatter) {
        if (!values || !values.start && !values.end) {
            return '';
        }
        if (formatter) {
            return formatter(values);
        }
        const { start, end } = values;
        const startDate = appliedFormat ? DatePickerUtil.formatDate(start, appliedFormat, locale || 'en') : start === null || start === void 0 ? void 0 : start.toLocaleDateString();
        const endDate = appliedFormat ? DatePickerUtil.formatDate(end, appliedFormat, locale || 'en') : end === null || end === void 0 ? void 0 : end.toLocaleDateString();
        let formatted;
        if (start) {
            formatted = `${startDate} - `;
            if (end) {
                formatted += endDate;
            }
        }
        return formatted ? formatted : '';
    }
}
DateRangePickerFormatPipe.decorators = [
    { type: Pipe, args: [{ name: 'dateRange' },] }
];
/** @hidden @internal */
export class IgxDateRangeInputsBaseComponent extends IgxInputGroupComponent {
    /** @hidden @internal */
    get nativeElement() {
        return this.element.nativeElement;
    }
    /** @hidden @internal */
    setFocus() {
        this.input.focus();
    }
    /** @hidden @internal */
    updateInputValue(value) {
        if (this.ngControl) {
            this.ngControl.control.setValue(value);
        }
        else {
            this.dateTimeEditor.value = value;
        }
    }
    /** @hidden @internal */
    updateInputValidity(state) {
        this.inputDirective.valid = state;
    }
}
IgxDateRangeInputsBaseComponent.decorators = [
    { type: Component, args: [{
                template: ``,
                selector: `igx-date-range-base`,
                providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateRangeInputsBaseComponent }]
            },] }
];
IgxDateRangeInputsBaseComponent.propDecorators = {
    dateTimeEditor: [{ type: ContentChild, args: [IgxDateTimeEditorDirective,] }],
    inputDirective: [{ type: ContentChild, args: [IgxInputDirective,] }],
    ngControl: [{ type: ContentChild, args: [NgControl,] }]
};
/**
 * Templates the default icon in the `IgxDateRangePicker`.
 *
 * @igxModule IgxDateRangePickerModule
 *
 * @igxKeyWords date range icon, date picker icon
 *
 * @igxGroup scheduling
 *
 * @example
 * ```html
 * <igx-date-range-picker>
 *   <igx-picker-toggle igxSuffix>
 *      <igx-icon>calendar_view_day</igx-icon>
 *   </igx-picker-toggle>
 * </igx-date-range-picker>
 * ```
 */
export class IgxPickerToggleComponent {
    constructor() {
        this.clicked = new EventEmitter();
    }
    onClick(event) {
        // do not focus input on click
        event.stopPropagation();
        this.clicked.emit();
    }
}
IgxPickerToggleComponent.decorators = [
    { type: Component, args: [{
                template: `<ng-content></ng-content>`,
                selector: 'igx-picker-toggle'
            },] }
];
IgxPickerToggleComponent.propDecorators = {
    clicked: [{ type: Output }],
    onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};
/**
 * Defines the start input for a date range picker
 *
 * @igxModule IgxDateRangePickerModule
 *
 * @igxTheme igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme
 *
 * @igxKeywords date, range, date range, date picker
 *
 * @igxGroup scheduling
 *
 * @remarks
 * When templating, start input has to be templated separately
 *
 * @example
 * ```html
 * <igx-date-range-picker mode="dropdown">
 *      <igx-date-range-start>
 *          <input igxInput igxDateTimeEditor type="text">
 *      </igx-date-range-start>
 *      ...
 * </igx-date-range-picker>
 * ```
 */
export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent {
}
IgxDateRangeStartComponent.decorators = [
    { type: Component, args: [{
                selector: 'igx-date-range-start',
                template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\">\n        <button\n            igxButton=\"raised\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n",
                providers: [
                    { provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent },
                    { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeStartComponent }
                ]
            },] }
];
/**
 * Defines the end input for a date range picker
 *
 * @igxModule IgxDateRangeModule
 *
 * @igxTheme igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme
 *
 * @igxKeywords date, range, date range, date picker
 *
 * @igxGroup scheduling
 *
 * @remarks
 * When templating, end input has to be template separately
 *
 * @example
 * ```html
 * <igx-date-range-picker mode="dropdown">
 *      <igx-date-range-end>
 *          <input igxInput igxDateTimeEditor type="text">
 *      </igx-date-range-end>
 *      ...
 * </igx-date-range-picker>
 * ```
 */
export class IgxDateRangeEndComponent extends IgxDateRangeInputsBaseComponent {
}
IgxDateRangeEndComponent.decorators = [
    { type: Component, args: [{
                selector: 'igx-date-range-end',
                template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\">\n        <button\n            igxButton=\"raised\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n",
                providers: [
                    { provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent },
                    { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeEndComponent }
                ]
            },] }
];
export class IgxDateRangeSeparatorDirective {
}
IgxDateRangeSeparatorDirective.decorators = [
    { type: Directive, args: [{
                selector: '[igxDateRangeSeparator]'
            },] }
];
//# sourceMappingURL=data:application/json;base64, 