igniteui-webcomponents/components/date-picker/date-picker.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var IgcDatePickerComponent_1;
import { LitElement, html, nothing } from 'lit';
import { property, query, queryAssignedElements } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js';
import { getThemeController, themes } from '../../theming/theming-decorator.js';
import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
import { convertToDate } from '../calendar/helpers.js';
import { DateRangeType, } from '../calendar/types.js';
import { addKeybindings, altKey, arrowDown, arrowUp, escapeKey, } from '../common/controllers/key-bindings.js';
import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { IgcCalendarResourceStringEN, } from '../common/i18n/calendar.resources.js';
import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
import { createFormValueState, defaultDateTimeTransformers, } from '../common/mixins/forms/form-value.js';
import { createCounter, findElementFromEventPath } from '../common/util.js';
import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
import IgcDialogComponent from '../dialog/dialog.js';
import IgcFocusTrapComponent from '../focus-trap/focus-trap.js';
import IgcIconComponent from '../icon/icon.js';
import IgcPopoverComponent from '../popover/popover.js';
import IgcValidationContainerComponent from '../validation-container/validation-container.js';
import { styles } from './themes/date-picker.base.css.js';
import { styles as shared } from './themes/shared/date-picker.common.css.js';
import { all } from './themes/themes.js';
import { datePickerValidators } from './validators.js';
const formats = new Set(['short', 'medium', 'long', 'full']);
let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxLikeComponent)) {
    get __validators() {
        return datePickerValidators;
    }
    static register() {
        registerComponent(IgcDatePickerComponent_1, IgcCalendarComponent, IgcDateTimeInputComponent, IgcFocusTrapComponent, IgcIconComponent, IgcPopoverComponent, IgcDialogComponent, IgcValidationContainerComponent);
    }
    get isDropDown() {
        return this.mode === 'dropdown';
    }
    get _isMaterialTheme() {
        return getThemeController(this)?.theme === 'material';
    }
    set value(value) {
        this._formValue.setValueAndFormState(value);
        this._validate();
    }
    get value() {
        return this._formValue.value;
    }
    set activeDate(value) {
        this._activeDate = convertToDate(value);
    }
    get activeDate() {
        return this._activeDate ?? this._calendar?.activeDate;
    }
    set min(value) {
        this._min = convertToDate(value);
        this.setDateConstraints();
        this._updateValidity();
    }
    get min() {
        return this._min;
    }
    set max(value) {
        this._max = convertToDate(value);
        this.setDateConstraints();
        this._updateValidity();
    }
    get max() {
        return this._max;
    }
    set disabledDates(dates) {
        this._disabledDates = dates;
        this.setDateConstraints();
        this._updateValidity();
    }
    get disabledDates() {
        return this._disabledDates;
    }
    set displayFormat(value) {
        this._displayFormat = value;
    }
    get displayFormat() {
        return this._displayFormat ?? this.inputFormat;
    }
    set inputFormat(value) {
        this._inputFormat = value;
    }
    get inputFormat() {
        return this._inputFormat ?? this._input?.inputFormat;
    }
    openChange() {
        this._rootClickController.update();
    }
    constructor() {
        super();
        this.inputId = `date-picker-${IgcDatePickerComponent_1.increment()}`;
        this._activeDate = null;
        this._min = null;
        this._max = null;
        this.open = false;
        this.mode = 'dropdown';
        this.nonEditable = false;
        this.readOnly = false;
        this.headerOrientation = 'horizontal';
        this.orientation = 'horizontal';
        this.hideHeader = false;
        this.hideOutsideDays = false;
        this.outlined = false;
        this.visibleMonths = 1;
        this.showWeekNumbers = false;
        this.locale = 'en';
        this.prompt = '_';
        this.resourceStrings = IgcCalendarResourceStringEN;
        this.weekStart = 'sunday';
        this._formValue = createFormValueState(this, {
            initialValue: null,
            transformers: defaultDateTimeTransformers,
        });
        this.addEventListener('focusin', this.handleFocusIn);
        this.addEventListener('focusout', this.handleFocusOut);
        this._rootClickController.update({ hideCallback: this.handleClosing });
        addKeybindings(this, {
            skip: () => this.disabled,
            bindingDefaults: { preventDefault: true },
        })
            .set([altKey, arrowDown], this.handleAnchorClick)
            .set([altKey, arrowUp], this.onEscapeKey)
            .set(escapeKey, this.onEscapeKey);
    }
    createRenderRoot() {
        const root = super.createRenderRoot();
        root.addEventListener('slotchange', () => this.requestUpdate());
        return root;
    }
    clear() {
        this.value = null;
        this._input?.clear();
    }
    stepUp(datePart, delta) {
        this._input.stepUp(datePart, delta);
    }
    stepDown(datePart, delta) {
        this._input.stepDown(datePart, delta);
    }
    select() {
        this._input.select();
    }
    setSelectionRange(start, end, direction) {
        this._input.setSelectionRange(start, end, direction);
    }
    setRangeText(replacement, start, end, mode) {
        this._input.setRangeText(replacement, start, end, mode);
        this.value = this._input.value;
    }
    async onEscapeKey() {
        if (await this._hide(true)) {
            this._input.focus();
        }
    }
    handleFocusIn() {
        this._dirty = true;
    }
    handleFocusOut({ relatedTarget }) {
        if (!this.contains(relatedTarget)) {
            this.checkValidity();
        }
    }
    handlerCalendarIconSlotPointerDown(event) {
        event.preventDefault();
    }
    handleInputClick(event) {
        if (findElementFromEventPath('input', event)) {
            this.handleAnchorClick();
        }
    }
    async handleAnchorClick() {
        this._calendar.activeDate = this.value ?? this._calendar.activeDate;
        super.handleAnchorClick();
        await this.updateComplete;
        this._calendar[focusActiveDate]();
    }
    async _shouldCloseCalendarDropdown() {
        if (!this.keepOpenOnSelect && (await this._hide(true))) {
            this._input.focus();
            this._input.select();
        }
    }
    handleInputChangeEvent(event) {
        event.stopPropagation();
        this.value = event.target.value;
        this.emitEvent('igcChange', { detail: this.value });
    }
    async handleCalendarChangeEvent(event) {
        event.stopPropagation();
        if (this.readOnly) {
            await this._calendar.updateComplete;
            this._calendar.value = this.value;
            return;
        }
        this.value = event.target.value;
        this.emitEvent('igcChange', { detail: this.value });
        this._shouldCloseCalendarDropdown();
    }
    handleInputEvent(event) {
        event.stopPropagation();
        if (this.nonEditable) {
            event.preventDefault();
            return;
        }
        this.value = event.target.value;
        this.emitEvent('igcInput', { detail: this.value });
    }
    handleClosing() {
        this._hide(true);
    }
    handleDialogClosing(event) {
        event.stopPropagation();
        this._hide(true);
    }
    handleDialogClosed(event) {
        event.stopPropagation();
    }
    setDateConstraints() {
        const dates = [];
        if (this._min) {
            dates.push({
                type: DateRangeType.Before,
                dateRange: [this._min],
            });
        }
        if (this._max) {
            dates.push({
                type: DateRangeType.After,
                dateRange: [this._max],
            });
        }
        if (this._disabledDates?.length) {
            dates.push(...this.disabledDates);
        }
        this._dateConstraints = dates.length ? dates : undefined;
    }
    renderClearIcon() {
        return !this.value
            ? nothing
            : html `
          <span slot="suffix" part="clear-icon" @click=${this.clear}>
            <slot name="clear-icon">
              <igc-icon
                name="input_clear"
                collection="default"
                aria-hidden="true"
              ></igc-icon>
            </slot>
          </span>
        `;
    }
    renderCalendarIcon() {
        const defaultIcon = html `
      <igc-icon name="today" collection="default" aria-hidden="true"></igc-icon>
    `;
        const state = this.open ? 'calendar-icon-open' : 'calendar-icon';
        return html `
      <span
        slot="prefix"
        part=${state}
        @pointerdown=${this.handlerCalendarIconSlotPointerDown}
        @click=${this.handleAnchorClick}
      >
        <slot name=${state}>${defaultIcon}</slot>
      </span>
    `;
    }
    renderCalendarSlots() {
        if (this.isDropDown) {
            return nothing;
        }
        const hasHeaderDate = this.headerDateSlotItems.length ? 'header-date' : '';
        return html `
      <slot name="title" slot="title">
        ${this.resourceStrings.selectDate}
      </slot>
      <slot name="header-date" slot=${hasHeaderDate}></slot>
    `;
    }
    renderCalendar(id) {
        const hideHeader = this.isDropDown ? true : this.hideHeader;
        return html `
      <igc-calendar
        aria-labelledby=${id}
        role="dialog"
        .inert=${!this.open || this.disabled}
        ?show-week-numbers=${this.showWeekNumbers}
        ?hide-outside-days=${this.hideOutsideDays}
        ?hide-header=${hideHeader}
        .activeDate=${this.activeDate ?? this.value}
        .value=${this.value}
        .headerOrientation=${this.headerOrientation}
        .orientation=${this.orientation}
        .visibleMonths=${this.visibleMonths}
        .locale=${this.locale}
        .disabledDates=${this._dateConstraints}
        .specialDates=${this.specialDates}
        .weekStart=${this.weekStart}
        @igcChange=${this.handleCalendarChangeEvent}
        exportparts="header, header-title, header-date, content: calendar-content, navigation, months-navigation,
        years-navigation, years-range, navigation-buttons, navigation-button, days-view-container,
        days-view, months-view, years-view, days-row, label: calendar-label, week-number, week-number-inner, date,
        date-inner, first, last, inactive, hidden, weekend, range, special, disabled, single, preview,
        month, month-inner, year, year-inner, selected, current"
      >
        ${this.renderCalendarSlots()}
      </igc-calendar>
    `;
    }
    renderActions() {
        const slot = this.isDropDown || !this.actions.length ? undefined : 'footer';
        return html `
      <div
        part="actions"
        ?hidden=${!this.actions.length}
        slot=${ifDefined(slot)}
      >
        <slot name="actions"></slot>
      </div>
    `;
    }
    renderPicker(id) {
        return this.isDropDown
            ? html `
          <igc-popover ?open=${this.open} anchor=${id} flip shift>
            <igc-focus-trap ?disabled=${!this.open || this.disabled}>
              ${this.renderCalendar(id)}${this.renderActions()}
            </igc-focus-trap>
          </igc-popover>
        `
            : html `
          <igc-dialog
            aria-label=${ifDefined(this.resourceStrings.selectDate)}
            role="dialog"
            ?open=${this.open}
            ?close-on-outside-click=${!this.keepOpenOnOutsideClick}
            hide-default-action
            @igcClosing=${this.handleDialogClosing}
            @igcClosed=${this.handleDialogClosed}
            exportparts="base: dialog-base, title, footer, overlay"
          >
            ${this.renderCalendar(id)}${this.renderActions()}
          </igc-dialog>
        `;
    }
    renderLabel(id) {
        return this.label
            ? html `<label
          part="label"
          for=${id}
          @click=${this.isDropDown ? nothing : this.handleAnchorClick}
          >${this.label}</label
        >`
            : nothing;
    }
    renderHelperText() {
        return IgcValidationContainerComponent.create(this);
    }
    renderInput(id) {
        const format = formats.has(this._displayFormat)
            ? `${this._displayFormat}Date`
            : this._displayFormat;
        const readOnly = !this.isDropDown || this.readOnly || this.nonEditable;
        return html `
      <igc-date-time-input
        id=${id}
        aria-haspopup="dialog"
        label=${ifDefined(this._isMaterialTheme ? this.label : undefined)}
        input-format=${ifDefined(this._inputFormat)}
        display-format=${ifDefined(format)}
        ?disabled=${this.disabled}
        ?readonly=${readOnly}
        ?required=${this.required}
        .value=${this.value}
        .locale=${this.locale}
        .prompt=${this.prompt}
        .outlined=${this.outlined}
        .placeholder=${this.placeholder}
        .min=${this.min}
        .max=${this.max}
        .invalid=${live(this.invalid)}
        @igcChange=${this.handleInputChangeEvent}
        @igcInput=${this.handleInputEvent}
        @click=${this.isDropDown ? nothing : this.handleInputClick}
        exportparts="input, label, prefix, suffix"
      >
        ${this.renderCalendarIcon()}
        <slot
          name="prefix"
          slot=${ifDefined(!this.prefixes.length ? undefined : 'prefix')}
        ></slot>
        ${this.renderClearIcon()}
        <slot
          name="suffix"
          slot=${ifDefined(!this.suffixes.length ? undefined : 'suffix')}
        ></slot>
      </igc-date-time-input>
    `;
    }
    render() {
        const id = this.id || this.inputId;
        return html `
      ${!this._isMaterialTheme ? this.renderLabel(id) : nothing}
      ${this.renderInput(id)}${this.renderPicker(id)}${this.renderHelperText()}
    `;
    }
};
IgcDatePickerComponent.tagName = 'igc-date-picker';
IgcDatePickerComponent.styles = [styles, shared];
IgcDatePickerComponent.shadowRootOptions = {
    ...LitElement.shadowRootOptions,
    delegatesFocus: true,
};
IgcDatePickerComponent.increment = createCounter();
__decorate([
    query(IgcDateTimeInputComponent.tagName)
], IgcDatePickerComponent.prototype, "_input", void 0);
__decorate([
    query(IgcCalendarComponent.tagName)
], IgcDatePickerComponent.prototype, "_calendar", void 0);
__decorate([
    queryAssignedElements({ slot: 'prefix' })
], IgcDatePickerComponent.prototype, "prefixes", void 0);
__decorate([
    queryAssignedElements({ slot: 'suffix' })
], IgcDatePickerComponent.prototype, "suffixes", void 0);
__decorate([
    queryAssignedElements({ slot: 'actions' })
], IgcDatePickerComponent.prototype, "actions", void 0);
__decorate([
    queryAssignedElements({ slot: 'header-date' })
], IgcDatePickerComponent.prototype, "headerDateSlotItems", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], IgcDatePickerComponent.prototype, "open", void 0);
__decorate([
    property()
], IgcDatePickerComponent.prototype, "label", void 0);
__decorate([
    property()
], IgcDatePickerComponent.prototype, "mode", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: 'non-editable' })
], IgcDatePickerComponent.prototype, "nonEditable", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: 'readonly' })
], IgcDatePickerComponent.prototype, "readOnly", void 0);
__decorate([
    property({ converter: convertToDate })
], IgcDatePickerComponent.prototype, "value", null);
__decorate([
    property({ attribute: 'active-date', converter: convertToDate })
], IgcDatePickerComponent.prototype, "activeDate", null);
__decorate([
    property({ converter: convertToDate })
], IgcDatePickerComponent.prototype, "min", null);
__decorate([
    property({ converter: convertToDate })
], IgcDatePickerComponent.prototype, "max", null);
__decorate([
    property({ attribute: 'header-orientation', reflect: true })
], IgcDatePickerComponent.prototype, "headerOrientation", void 0);
__decorate([
    property()
], IgcDatePickerComponent.prototype, "orientation", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: 'hide-header' })
], IgcDatePickerComponent.prototype, "hideHeader", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: 'hide-outside-days' })
], IgcDatePickerComponent.prototype, "hideOutsideDays", void 0);
__decorate([
    property({ attribute: false })
], IgcDatePickerComponent.prototype, "disabledDates", null);
__decorate([
    property({ attribute: false })
], IgcDatePickerComponent.prototype, "specialDates", void 0);
__decorate([
    property({ reflect: true, type: Boolean })
], IgcDatePickerComponent.prototype, "outlined", void 0);
__decorate([
    property()
], IgcDatePickerComponent.prototype, "placeholder", void 0);
__decorate([
    property({ type: Number, attribute: 'visible-months' })
], IgcDatePickerComponent.prototype, "visibleMonths", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })
], IgcDatePickerComponent.prototype, "showWeekNumbers", void 0);
__decorate([
    property({ attribute: 'display-format' })
], IgcDatePickerComponent.prototype, "displayFormat", null);
__decorate([
    property({ attribute: 'input-format' })
], IgcDatePickerComponent.prototype, "inputFormat", null);
__decorate([
    property()
], IgcDatePickerComponent.prototype, "locale", void 0);
__decorate([
    property()
], IgcDatePickerComponent.prototype, "prompt", void 0);
__decorate([
    property({ attribute: false })
], IgcDatePickerComponent.prototype, "resourceStrings", void 0);
__decorate([
    watch('open')
], IgcDatePickerComponent.prototype, "openChange", null);
__decorate([
    property({ attribute: 'week-start' })
], IgcDatePickerComponent.prototype, "weekStart", void 0);
IgcDatePickerComponent = IgcDatePickerComponent_1 = __decorate([
    themes(all, { exposeController: true }),
    blazorAdditionalDependencies('IgcCalendarComponent, IgcDateTimeInputComponent, IgcDialogComponent, IgcIconComponent')
], IgcDatePickerComponent);
export default IgcDatePickerComponent;
//# sourceMappingURL=date-picker.js.map