@tylertech/forge 2.0.0 → 2.1.0

package/dist/esm/chunks/chunk.ZABF5CI6.js

@@ -0,0 +1,760 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import {
+  BASE_DATE_PICKER_CONSTANTS,
+  BaseDatePickerAdapter,
+  BaseDatePickerComponent,
+  BaseDatePickerFoundation,
+  createToggleElement
+} from "./chunk.MAGJQ2PP.js";
+import {
+  CalendarComponent
+} from "./chunk.JQQOZMKQ.js";
+import {
+  CalendarDropdown
+} from "./chunk.YDPSV74L.js";
+import {
+  DateRange
+} from "./chunk.SNAZ6JSS.js";
+import {
+  TEXT_FIELD_CONSTANTS
+} from "./chunk.Q4YMHFRY.js";
+import {
+  listenOwnProperty
+} from "./chunk.RV3E762Y.js";
+import {
+  PopupComponent
+} from "./chunk.5EEEKOOK.js";
+import {
+  IconButtonComponent
+} from "./chunk.7Y4NHCJH.js";
+import {
+  tylIconDateRange
+} from "./chunk.GS2AXUCN.js";
+import {
+  Platform
+} from "./chunk.BYN27JXZ.js";
+import {
+  IconComponent,
+  IconRegistry
+} from "./chunk.P43Z3YAS.js";
+import {
+  FormFieldComponentDelegate
+} from "./chunk.HZISALRH.js";
+import {
+  DateInputMask
+} from "./chunk.WIYLQTSX.js";
+import {
+  isSameDate
+} from "./chunk.52F6VUCF.js";
+import {
+  FoundationProperty
+} from "./chunk.MMIZOYAS.js";
+import {
+  COMPONENT_NAME_PREFIX,
+  CustomElement
+} from "./chunk.35U3UPDV.js";
+import {
+  attachShadowTemplate,
+  defineCustomElement,
+  emitEvent
+} from "./chunk.K2PCTUVN.js";
+import {
+  getActiveElement
+} from "./chunk.4JURZYE4.js";
+import {
+  isDate,
+  isValidDate
+} from "./chunk.MEFT5FQC.js";
+import {
+  __decorateClass
+} from "./chunk.LM5TVNZY.js";
+
+// dist/build/lib/staging/src/date-range-picker/date-range-picker-constants.ts
+var elementName = `${COMPONENT_NAME_PREFIX}date-range-picker`;
+var DatePickerRange = class {
+  constructor(range) {
+    if (range) {
+      this.from = range.from;
+      this.to = range.to;
+    }
+  }
+  copy() {
+    return new DatePickerRange(this);
+  }
+};
+var observedAttributes = {
+  FROM: "from",
+  TO: "to",
+  END_VALUE: "end-value"
+};
+var selectors = {
+  INPUT: "input"
+};
+var events = {
+  CHANGE: `${elementName}-change`,
+  OPEN: `${elementName}-open`,
+  CLOSE: `${elementName}-close`,
+  INPUT: `${elementName}-input`
+};
+var DATE_RANGE_PICKER_CONSTANTS = {
+  elementName,
+  selectors,
+  events,
+  observedAttributes
+};
+
+// dist/build/lib/staging/src/date-range-picker/date-range-picker-adapter.ts
+var DateRangePickerAdapter = class extends BaseDatePickerAdapter {
+  constructor(component) {
+    super(component);
+    this._dropdownIdentifier = `forge-date-range-picker-${this._identifier}`;
+  }
+  _initializeInput() {
+    this._fromInputElement = this._component.querySelectorAll(DATE_RANGE_PICKER_CONSTANTS.selectors.INPUT)[0];
+    this._toInputElement = this._component.querySelectorAll(DATE_RANGE_PICKER_CONSTANTS.selectors.INPUT)[1];
+    if (!this._fromInputElement || !this._fromInputElement) {
+      throw new Error(`The ${DATE_RANGE_PICKER_CONSTANTS.elementName} requires two inputs`);
+    }
+  }
+  _initializeCalendarDropdown() {
+    const targetElement = this._getDefaultTargetElement();
+    this._calendarDropdown = new CalendarDropdown(targetElement, this._dropdownIdentifier);
+  }
+  initializeMask(fromOptions) {
+    if (this._fromInputMask) {
+      this._fromInputMask.destroy();
+    }
+    this._fromInputMask = new DateInputMask(this._fromInputElement, fromOptions);
+  }
+  initializeToMask(toOptions) {
+    if (this._toInputMask) {
+      this._toInputMask.destroy();
+    }
+    this._toInputMask = new DateInputMask(this._toInputElement, toOptions);
+  }
+  destroy() {
+    super.destroy();
+    this._destroyToValueChangeListener();
+  }
+  destroyMask() {
+    if (this._fromInputMask) {
+      this._fromInputMask.destroy();
+      this._fromInputMask = void 0;
+    }
+    if (this._toInputMask) {
+      this._toInputMask.destroy();
+      this._toInputMask = void 0;
+    }
+  }
+  _destroyToValueChangeListener() {
+    if (typeof this._toValueChangeListener === "function") {
+      this._toValueChangeListener();
+    }
+  }
+  initializeAccessibility() {
+    this._applyToInputs((input) => input.setAttribute("autocomplete", "off"));
+    this._applyToInputs((input) => input.setAttribute("autocorrect", "off"));
+    this._applyToInputs((input) => input.setAttribute("autocapitalize", "off"));
+    this._applyToInputs((input) => input.setAttribute("spellcheck", "false"));
+    this._applyToInputs((input) => input.setAttribute("role", "combobox"));
+    this._applyToInputs((input) => input.setAttribute("aria-live", "assertive"));
+    this._applyToInputs((input) => input.setAttribute("aria-atomic", "true"));
+    this._applyToInputs((input) => input.setAttribute("aria-haspopup", "true"));
+    this._applyToInputs((input) => input.setAttribute("aria-expanded", "false"));
+    this._applyToInputs((input) => input.setAttribute("aria-owns", this._dropdownIdentifier));
+  }
+  addInputListener(type, listener, capture) {
+    var _a;
+    (_a = this._fromInputElement) == null ? void 0 : _a.addEventListener(type, listener, { capture });
+  }
+  addToInputListener(type, listener, capture) {
+    var _a;
+    (_a = this._toInputElement) == null ? void 0 : _a.addEventListener(type, listener, { capture });
+  }
+  removeInputListener(type, listener) {
+    var _a;
+    (_a = this._fromInputElement) == null ? void 0 : _a.removeEventListener(type, listener);
+  }
+  removeToInputListener(type, listener) {
+    var _a;
+    (_a = this._toInputElement) == null ? void 0 : _a.removeEventListener(type, listener);
+  }
+  setInputValueChangedListener(context, listener) {
+    if (this._valueChangeListeners.length) {
+      this.destroyValueChangeListener();
+    }
+    const destroyListenerCb = listenOwnProperty(context, this._fromInputElement, "value", listener);
+    this._valueChangeListeners.push(destroyListenerCb);
+  }
+  setToInputValueChangedListener(context, listener) {
+    this._destroyToValueChangeListener();
+    this._toValueChangeListener = listenOwnProperty(context, this._toInputElement, "value", listener);
+  }
+  hasInputElement() {
+    return !!this._fromInputElement && !!this._toInputElement;
+  }
+  attachCalendar(calendarConfig, dropdownConfig) {
+    super.attachCalendar(calendarConfig, dropdownConfig);
+    this._fromInputElement.setAttribute("aria-expanded", "true");
+  }
+  detachCalendar() {
+    super.detachCalendar();
+    if (this._fromInputElement) {
+      this._fromInputElement.setAttribute("aria-expanded", "false");
+      this._fromInputElement.removeAttribute("aria-activedescendant");
+    }
+  }
+  setActiveDescendant(id) {
+    this._fromInputElement.setAttribute("aria-activedescendant", id);
+  }
+  setInputValue(value, emitEvents) {
+    if (this._fromInputElement.value === value) {
+      return;
+    }
+    this._fromInputElement.value = value;
+    if (this._fromInputMask) {
+      this._fromInputMask.updateMask();
+    }
+    if (emitEvents) {
+      this._fromInputElement.dispatchEvent(new Event("change"));
+      this._fromInputElement.dispatchEvent(new Event("input"));
+      ;
+    }
+  }
+  setToInputValue(value, emitEvents) {
+    if (this._toInputElement.value === value) {
+      return;
+    }
+    this._toInputElement.value = value;
+    if (this._toInputMask) {
+      this._toInputMask.updateMask();
+    }
+    if (emitEvents) {
+      this._toInputElement.dispatchEvent(new Event("change"));
+      this._toInputElement.dispatchEvent(new Event("input"));
+    }
+  }
+  isInputDisabled() {
+    return this._fromInputElement.disabled;
+  }
+  isInputFocused() {
+    return this._toInputElement === getActiveElement() || this._fromInputElement === getActiveElement();
+  }
+  getInputValue() {
+    return this._fromInputElement.value;
+  }
+  getToInputValue() {
+    return this._toInputElement.value;
+  }
+  setDisabled(isDisabled) {
+    this._fromInputElement.disabled = isDisabled;
+    this._toInputElement.disabled = isDisabled;
+    this._toInputElement.setAttribute("aria-disabled", isDisabled.toString());
+    this._fromInputElement.setAttribute("aria-disabled", isDisabled.toString());
+    if (this._toggleElement) {
+      this._toggleElement.setAttribute("aria-disabled", isDisabled.toString());
+      if (this._toggleElement.hasOwnProperty("disabled")) {
+        this._toggleElement.disabled = isDisabled;
+      }
+    }
+  }
+  emitInputEvent(type, data) {
+    emitEvent(this._fromInputElement, type, data);
+  }
+  emitToInputEvent(type, data) {
+    emitEvent(this._toInputElement, type, data);
+  }
+  _createToggleElement() {
+    return createToggleElement("date_range");
+  }
+  tryFocusInput() {
+    this._fromInputElement.focus();
+  }
+  tryBlurInput() {
+    this._fromInputElement.blur();
+  }
+  selectInputText() {
+    this._fromInputElement.select();
+  }
+  selectToInputText() {
+    this._toInputElement.select();
+  }
+  _applyToInputs(action) {
+    [this._fromInputElement, this._toInputElement].forEach(action);
+  }
+};
+
+// dist/build/lib/staging/src/date-range-picker/date-range-picker-foundation.ts
+var DateRangePickerFoundation = class extends BaseDatePickerFoundation {
+  constructor(adapter) {
+    super(adapter);
+    this._mode = "range";
+    this._from = null;
+    this._to = null;
+    this._toInputListener = (evt) => this._onToInput(evt);
+    this._toInputValueChangedListener = (value) => this._onToInputValueChanged(value);
+    this._toInputKeydownListener = (evt) => this._onInputKeydown(evt);
+    this._toInputFocusListener = (evt) => this._onToInputFocus();
+    this._toInputBlurListener = (evt) => this._onToInputBlur(evt);
+  }
+  _initializeState() {
+    if (!this._from) {
+      this._from = this._coerceDateValue(this._adapter.getInputValue());
+    }
+    if (!this._to) {
+      this._to = this._coerceDateValue(this._adapter.getToInputValue());
+    }
+  }
+  _initializeListeners() {
+    super._initializeListeners();
+    this._adapter.addToInputListener("keydown", this._toInputKeydownListener);
+    this._adapter.addToInputListener("focus", this._toInputFocusListener);
+    this._adapter.addToInputListener("blur", this._toInputBlurListener);
+  }
+  _initializeValueChangedListeners() {
+    super._initializeValueChangedListeners();
+    this._adapter.setToInputValueChangedListener(this, this._toInputValueChangedListener);
+  }
+  _setInputChangeListeners() {
+    super._setInputChangeListeners();
+    this._adapter.addToInputListener("input", this._toInputListener);
+  }
+  _removeInputChangeListeners() {
+    super._removeInputChangeListeners();
+    this._adapter.removeToInputListener("input", this._toInputListener);
+  }
+  _openCalendar(emitOpenEvent) {
+    this._formatToInputValue();
+    super._openCalendar(emitOpenEvent);
+    const currentValue = this._getCurrentValue();
+    if (!!(currentValue == null ? void 0 : currentValue.to)) {
+      this._adapter.goToCalendarDate(new Date(currentValue.to));
+    } else if (!!(currentValue == null ? void 0 : currentValue.from)) {
+      this._adapter.goToCalendarDate(new Date(currentValue.from));
+    }
+  }
+  _emitChangeEvent(value, force) {
+    const typedStartValue = this._getTypedValue(value && value.from || null);
+    const typedEndValue = this._getTypedValue(value && value.to || null);
+    const detail = new DatePickerRange({ from: typedStartValue, to: typedEndValue });
+    const wasCancelled = !this._adapter.emitHostEvent(DATE_RANGE_PICKER_CONSTANTS.events.CHANGE, detail, true, !force);
+    if (!wasCancelled) {
+      this._setValue(this._coerceDateValue(value && value.from || null));
+      this._setToValue(this._coerceDateValue(value && value.to || null));
+      return true;
+    }
+    return false;
+  }
+  _emitOpenEvent() {
+    this._adapter.emitHostEvent(DATE_RANGE_PICKER_CONSTANTS.events.OPEN, void 0, false);
+  }
+  _emitCloseEvent() {
+    this._adapter.emitHostEvent(DATE_RANGE_PICKER_CONSTANTS.events.CLOSE, void 0, false);
+  }
+  _onToday() {
+    const today = new Date();
+    const range = new DateRange({ from: today });
+    this.value = range;
+    this._onDateSelected({ date: today, range, selected: true, type: "date" });
+    this._adapter.setCalendarActiveDate(today);
+  }
+  _onClear() {
+    this._onDateSelected({ date: null, range: new DateRange(), selected: false, type: "date" });
+    this._closeCalendar(true);
+  }
+  _getCurrentValue() {
+    return this._value;
+  }
+  _formatToInputValue() {
+    const inputValue = this._adapter.getToInputValue();
+    if (inputValue) {
+      const parsedDate = this._parseDateString(inputValue);
+      if (isValidDate(parsedDate) && this._isDateValueAcceptable(parsedDate)) {
+        const formattedDate = this._formatDate(parsedDate);
+        if (formattedDate) {
+          this._adapter.setToInputValue(formattedDate, this._notifyInputValueChanges);
+        }
+      } else {
+        if (!this._allowInvalidDate) {
+          this._adapter.setToInputValue("", this._notifyInputValueChanges);
+        }
+      }
+    }
+  }
+  _setFormattedInputValue(suppressValueChanges) {
+    let formattedDate = this._formatDate(this._from);
+    if (!formattedDate && !this._allowInvalidDate) {
+      formattedDate = "";
+    }
+    this._adapter.setInputValue(formattedDate, suppressValueChanges ? false : this._notifyInputValueChanges);
+  }
+  _setFormattedToInputValue(suppressValueChanges) {
+    let formattedDate = this._formatDate(this._to);
+    if (!formattedDate && !this._allowInvalidDate) {
+      formattedDate = "";
+    }
+    this._adapter.setToInputValue(formattedDate, suppressValueChanges ? false : this._notifyInputValueChanges);
+  }
+  _setValue(value) {
+    if (this._isDateValueAcceptable(value)) {
+      this._from = value || null;
+      if (!this._value) {
+        this._value = { from: this._from, to: this._to };
+      } else {
+        this._value.from = this._from;
+      }
+    }
+  }
+  _setToValue(value) {
+    if (this._isDateValueAcceptable(value)) {
+      this._to = value || null;
+      if (!this._value) {
+        this._value = { from: this._from, to: this._to };
+      } else {
+        this._value.to = this._to;
+      }
+    }
+  }
+  _onDateSelected(event) {
+    const value = event.range;
+    if (event.rangeSelectionState === "to") {
+      this._closeCalendar(true);
+    }
+    if (!this._emitChangeEvent(value != null ? value : null)) {
+      return;
+    }
+    const formattedFromValue = this._formatDate(value && value.from || null);
+    const formattedToValue = this._formatDate(value && value.to || null);
+    this._adapter.setInputValue(formattedFromValue, this._notifyInputValueChanges);
+    this._adapter.setToInputValue(formattedToValue, this._notifyInputValueChanges);
+    this._formatInputValue();
+    this._formatToInputValue();
+    this._from = value && value.from || null;
+    this._to = value && value.to || null;
+    if (!Platform.isMobile) {
+      if (formattedToValue) {
+        this._adapter.selectToInputText();
+      } else {
+        this._adapter.selectInputText();
+      }
+    }
+  }
+  _applyMin() {
+    if (this._from && !this._isDateValueAcceptable(this._from)) {
+      this._emitChangeEvent(new DateRange({ to: this._to || void 0 }), true);
+      this._setFormattedInputValue();
+    }
+    if (this._to && !this._isDateValueAcceptable(this._to)) {
+      this._emitChangeEvent(new DateRange({ from: this._from || void 0 }), true);
+      this._setFormattedToInputValue();
+    }
+    super._applyMin();
+  }
+  _applyMax() {
+    if (this._from && !this._isDateValueAcceptable(this._from)) {
+      this._emitChangeEvent(new DateRange({ to: this._to || void 0 }), true);
+      this._setFormattedInputValue();
+    }
+    if (this._to && !this._isDateValueAcceptable(this._to)) {
+      this._emitChangeEvent(new DateRange({ from: this._from || void 0 }), true);
+      this._setFormattedToInputValue();
+    }
+    super._applyMax();
+  }
+  _initializeMask() {
+    super._initializeMask();
+    if (this._masked) {
+      const options = {
+        showMaskFormat: this._showMaskFormat,
+        pattern: this._maskFormat,
+        onChange: (value) => this._handleToInput(value)
+      };
+      if (this._prepareMaskCallback) {
+        options.prepareCallback = (value, masked, flags, maskInstance) => {
+          return this._prepareMaskCallback.call(null, value, masked, flags, maskInstance);
+        };
+      }
+      this._adapter.initializeToMask(options);
+    }
+  }
+  _applyDisabledDates() {
+    if (this._from && !this._isDateValueAcceptable(this._from)) {
+      this._emitChangeEvent(new DateRange({ to: this._to || void 0 }), true);
+      this._setFormattedInputValue();
+    }
+    if (this._to && !this._isDateValueAcceptable(this._to)) {
+      this._emitChangeEvent(new DateRange({ from: this._from || void 0 }), true);
+      this._setFormattedToInputValue();
+    }
+  }
+  _applyDisabledDaysOfWeek() {
+    if (this._from && !this._isDateValueAcceptable(this._from)) {
+      this._emitChangeEvent(null, true);
+      this._setFormattedInputValue();
+    }
+    if (this._to && !this._isDateValueAcceptable(this._to)) {
+      this._emitChangeEvent(null, true);
+      this._setFormattedToInputValue();
+    }
+  }
+  _onToInput(evt) {
+    this._handleInput(this._adapter.getInputValue());
+  }
+  _handleInput(value) {
+    const sanitizedValue = this._getSanitizedDateString(value);
+    const date = this._coerceDateValue(sanitizedValue);
+    if (this._masked) {
+      this._adapter.emitInputEvent(DATE_RANGE_PICKER_CONSTANTS.events.INPUT, sanitizedValue);
+    }
+    if (!isSameDate(date, this._from) && this._isDateValueAcceptable(date)) {
+      this._emitChangeEvent(new DateRange({ from: date || void 0, to: this._to || void 0 }));
+    }
+  }
+  _handleToInput(value) {
+    const sanitizedValue = this._getSanitizedDateString(value);
+    const date = this._coerceDateValue(sanitizedValue);
+    if (this._masked) {
+      this._adapter.emitToInputEvent(DATE_RANGE_PICKER_CONSTANTS.events.INPUT, sanitizedValue);
+    }
+    if (!isSameDate(date, this._to) && this._isDateValueAcceptable(date)) {
+      this._emitChangeEvent(new DateRange({ from: this._from || void 0, to: date || void 0 }));
+    }
+  }
+  _onToInputFocus() {
+    this._adapter.selectToInputText();
+  }
+  _onToInputBlur(evt) {
+    this._formatToInputValue();
+    if (this._open) {
+      this._closeCalendar(true);
+    }
+  }
+  _onInputValueChanged(value) {
+    if (this._masked) {
+      return;
+    }
+    const sanitizedValue = this._getSanitizedDateString(value);
+    const date = this._coerceDateValue(sanitizedValue);
+    if (!isSameDate(date, this._from)) {
+      this.from = date;
+      this._emitChangeEvent(new DateRange({ from: date || void 0, to: this._to || void 0 }));
+    }
+  }
+  _onToInputValueChanged(value) {
+    if (this._masked) {
+      return;
+    }
+    const sanitizedValue = this._getSanitizedDateString(value);
+    const date = this._coerceDateValue(sanitizedValue);
+    if (!isSameDate(date, this._to)) {
+      this.to = date;
+      this._emitChangeEvent(new DateRange({ from: this._from || void 0, to: date || void 0 }));
+    }
+  }
+  get value() {
+    return { from: this.from, to: this.to };
+  }
+  set value(value) {
+    if (!value) {
+      return;
+    }
+    if (value.from === void 0) {
+      value.from = null;
+    }
+    if (value.to === void 0) {
+      value.to = null;
+    }
+    this.from = value.from;
+    this.to = value.to;
+    this._value = { from: this.from, to: this.to };
+  }
+  get from() {
+    const date = this._getTypedValue(this._from);
+    if (!date) {
+      return null;
+    }
+    if (isDate(date)) {
+      return new Date(date.getTime());
+    }
+    return date;
+  }
+  set from(value) {
+    if (this._from !== value) {
+      this._setValue(this._coerceDateValue(value));
+      if (this._isInitialized) {
+        this._setFormattedInputValue();
+        if (this._open) {
+          this._adapter.setCalendarValue(new DateRange({ from: this._coerceDateValue(value) || void 0, to: this._coerceDateValue(this._to) || void 0 }));
+        }
+      }
+    }
+  }
+  get to() {
+    const date = this._getTypedValue(this._to);
+    if (!date) {
+      return null;
+    }
+    if (isDate(date)) {
+      return new Date(date.getTime());
+    }
+    return date;
+  }
+  set to(value) {
+    if (this._to !== value) {
+      this._setToValue(this._coerceDateValue(value));
+      if (this._isInitialized) {
+        this._setFormattedToInputValue();
+        if (this._open) {
+          this._adapter.setCalendarValue(new DateRange({ to: this._coerceDateValue(value) || void 0, from: this._coerceDateValue(this._from) || void 0 }));
+        }
+      }
+    }
+  }
+};
+
+// dist/build/lib/staging/src/date-range-picker/date-range-picker.ts
+var template = "<template><slot></slot></template>";
+var styles = ":host{display:block}:host([hidden]){display:none}";
+var DateRangePickerComponent = class extends BaseDatePickerComponent {
+  constructor() {
+    super();
+    IconRegistry.define(tylIconDateRange);
+    attachShadowTemplate(this, template, styles);
+    this._foundation = new DateRangePickerFoundation(new DateRangePickerAdapter(this));
+  }
+  static get observedAttributes() {
+    return [
+      ...Object.values(BASE_DATE_PICKER_CONSTANTS.observedAttributes),
+      DATE_RANGE_PICKER_CONSTANTS.observedAttributes.FROM,
+      DATE_RANGE_PICKER_CONSTANTS.observedAttributes.TO
+    ];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case DATE_RANGE_PICKER_CONSTANTS.observedAttributes.FROM:
+        this.from = newValue;
+        return;
+      case DATE_RANGE_PICKER_CONSTANTS.observedAttributes.TO:
+        this.to = newValue;
+        return;
+    }
+    super.attributeChangedCallback(name, oldValue, newValue);
+  }
+};
+__decorateClass([
+  FoundationProperty()
+], DateRangePickerComponent.prototype, "from", 2);
+__decorateClass([
+  FoundationProperty()
+], DateRangePickerComponent.prototype, "to", 2);
+DateRangePickerComponent = __decorateClass([
+  CustomElement({
+    name: DATE_RANGE_PICKER_CONSTANTS.elementName,
+    dependencies: [
+      PopupComponent,
+      CalendarComponent,
+      IconButtonComponent,
+      IconComponent
+    ]
+  })
+], DateRangePickerComponent);
+
+// dist/build/lib/staging/src/date-range-picker/date-range-picker-component-delegate.ts
+var DateRangeComponentDelegate = class extends FormFieldComponentDelegate {
+  constructor(config) {
+    super(config);
+  }
+  _build() {
+    const dateRangePicker = document.createElement(DATE_RANGE_PICKER_CONSTANTS.elementName);
+    this._attachTextField(dateRangePicker);
+    return dateRangePicker;
+  }
+  get fromInput() {
+    return this._textField.querySelector(`input[${TEXT_FIELD_CONSTANTS.attributes.MULTI_INPUT}-0]`);
+  }
+  get toInput() {
+    return this._textField.querySelector(`input[${TEXT_FIELD_CONSTANTS.attributes.MULTI_INPUT}-1]`);
+  }
+  get textField() {
+    return this._textField;
+  }
+  get value() {
+    return this._element.value;
+  }
+  set value(value) {
+    this._element.value = value;
+  }
+  get disabled() {
+    return this._element.disabled;
+  }
+  set disabled(value) {
+    this._element.disabled = value;
+  }
+  get invalid() {
+    return this._textField.invalid || false;
+  }
+  set invalid(value) {
+    this._textField.invalid = value;
+  }
+  onChange(listener) {
+    this._element.addEventListener(DATE_RANGE_PICKER_CONSTANTS.events.CHANGE, (evt) => listener(evt.detail));
+  }
+  onFocus(listener) {
+    this._element.addEventListener("focusin", (evt) => {
+      const isFocusWithin = !this._element.contains(evt.relatedTarget);
+      if (isFocusWithin) {
+        listener(evt);
+      }
+    });
+  }
+  onBlur(listener) {
+    this._element.addEventListener("focusout", (evt) => {
+      const isFocusOutside = !this._element.contains(evt.relatedTarget);
+      if (isFocusOutside) {
+        listener(evt);
+      }
+    });
+  }
+  _attachTextField(dateRangePicker) {
+    var _a, _b, _c, _d, _e;
+    this._textField = document.createElement(TEXT_FIELD_CONSTANTS.elementName);
+    if ((_a = this._config.options) == null ? void 0 : _a.required) {
+      this._textField.required = true;
+    }
+    if ((_b = this._config.options) == null ? void 0 : _b.density) {
+      this._textField.density = this._config.options.density;
+    }
+    this._fromInput = document.createElement("input");
+    this._fromInput.type = "text";
+    this._fromInput.placeholder = ((_c = this._config.options) == null ? void 0 : _c.fromPlaceholder) || "From";
+    this._textField.appendChild(this._fromInput);
+    this._toInput = document.createElement("input");
+    this._toInput.type = "text";
+    this._toInput.placeholder = ((_d = this._config.options) == null ? void 0 : _d.toPlaceholder) || "To";
+    this._textField.appendChild(this._toInput);
+    const label = document.createElement("label");
+    label.textContent = ((_e = this._config.options) == null ? void 0 : _e.label) || "Choose date range";
+    this._textField.appendChild(label);
+    dateRangePicker.appendChild(this._textField);
+  }
+};
+
+// dist/build/lib/staging/src/date-range-picker/index.ts
+function defineDateRangePickerComponent() {
+  defineCustomElement(DateRangePickerComponent);
+}
+
+export {
+  DatePickerRange,
+  DATE_RANGE_PICKER_CONSTANTS,
+  DateRangePickerAdapter,
+  DateRangePickerFoundation,
+  DateRangePickerComponent,
+  DateRangeComponentDelegate,
+  defineDateRangePickerComponent
+};
+//# sourceMappingURL=chunk.ZABF5CI6.js.map