@ds-autonomie/web-components 2.14.1 → 2.16.0

package/dist/chunks/chunk.KWGL62GY.js

@@ -1,547 +0,0 @@
-import {
-  InputBase
-} from "./chunk.ZKUGZ55W.js";
-import {
-  input_date_styles_default
-} from "./chunk.ZWLVZ5XN.js";
-import {
-  formatDateRange,
-  getDateFromISO,
-  getISOFormattedDate,
-  parseDateRange
-} from "./chunk.OYVF3HNG.js";
-import {
-  waitForEvent
-} from "./chunk.B4BZKR24.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.D6XRV35U.js";
-import {
-  getAnimation,
-  setDefaultAnimation
-} from "./chunk.HPDCOGLH.js";
-import {
-  LocalizeController
-} from "./chunk.QY3AIGLE.js";
-import {
-  watch
-} from "./chunk.QB2NJE2Y.js";
-import {
-  __decorateClass
-} from "./chunk.N3L4GIUO.js";
-
-// src/components/input-date/input-date.ts
-import { html } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { live } from "lit/directives/live.js";
-var DSAInputDate = class extends InputBase {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.isDatepickerOpen = false;
-    this.hideCalendarButton = false;
-    this.range = false;
-    this.hoist = false;
-  }
-  /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
-  get valueAsDate() {
-    var _a;
-    if (!this.range) {
-      return (_a = this.inputStart) == null ? void 0 : _a.valueAsDate;
-    } else {
-      return null;
-    }
-  }
-  set valueAsDate(newValue) {
-    if (!this.range) {
-      const input = document.createElement("input");
-      input.type = "date";
-      input.valueAsDate = newValue;
-      this.value = input.value;
-    }
-  }
-  /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
-  get valueAsNumber() {
-    if (!this.range) {
-      return this.inputStart.valueAsNumber;
-    } else {
-      return NaN;
-    }
-  }
-  set valueAsNumber(newValue) {
-    if (!this.range) {
-      this.inputStart.valueAsNumber = newValue;
-      this.value = this.inputStart.value;
-    }
-  }
-  /** Gets the validity state object */
-  get validity() {
-    const startValidity = this.inputStart.validity;
-    if (this.range) {
-      const endValidity = this.inputEnd.validity;
-      return {
-        badInput: startValidity.badInput || endValidity.badInput,
-        customError: startValidity.customError || endValidity.customError,
-        patternMismatch: startValidity.patternMismatch || endValidity.patternMismatch,
-        rangeOverflow: startValidity.rangeOverflow || endValidity.rangeOverflow,
-        rangeUnderflow: startValidity.rangeUnderflow || endValidity.rangeUnderflow,
-        stepMismatch: startValidity.stepMismatch || endValidity.stepMismatch,
-        tooLong: startValidity.tooLong || endValidity.tooLong,
-        tooShort: startValidity.tooShort || endValidity.tooShort,
-        typeMismatch: startValidity.typeMismatch || endValidity.typeMismatch,
-        valid: startValidity.valid && endValidity.valid,
-        valueMissing: startValidity.valueMissing || endValidity.valueMissing
-      };
-    } else {
-      return startValidity;
-    }
-  }
-  /** Gets the validation message */
-  get validationMessage() {
-    var _a;
-    return `${this.inputStart.validationMessage}${(_a = this.inputEnd) == null ? void 0 : _a.validationMessage}`;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    this.shouldDisableDate = this.shouldDisableDate.bind(this);
-  }
-  async firstUpdated() {
-    var _a;
-    await this.updateComplete;
-    (_a = this.datepickerButton) == null ? void 0 : _a.button.setAttribute("aria-expanded", "false");
-    this.formControlController.updateValidity();
-  }
-  addOpenListeners() {
-    document.addEventListener("focusin", this.handleDocumentFocusIn);
-    document.addEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  removeOpenListeners() {
-    document.removeEventListener("focusin", this.handleDocumentFocusIn);
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  async handleSelectedDate(event) {
-    const { detail } = event;
-    if (!this.range || detail.dates.length !== 1) {
-      this.value = detail.dates.map((date) => getISOFormattedDate(date)).join(",");
-      this.hideDatepicker();
-      await this.updateComplete;
-      this.emit("dsa-change");
-    }
-  }
-  handleDocumentFocusIn(event) {
-    const path = event.composedPath();
-    if (this && !path.includes(this)) {
-      this.hideDatepicker();
-    }
-  }
-  handleDocumentMouseDown(event) {
-    const path = event.composedPath();
-    if (this && !path.includes(this)) {
-      this.hideDatepicker();
-    }
-  }
-  handleInputClick(e) {
-    if (!this.disabled && e.currentTarget === e.target) {
-      this.focus();
-    }
-  }
-  handleDefaultKeyDown(event) {
-    if (this.isDatepickerOpen && event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      this.hideDatepicker();
-    }
-    if (this.isDatepickerOpen && event.key === "Tab") {
-      setTimeout(() => {
-        var _a, _b;
-        const activeElement = (this == null ? void 0 : this.getRootNode()) instanceof ShadowRoot ? (_b = (_a = document.activeElement) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.activeElement : document.activeElement;
-        if (!this || (activeElement == null ? void 0 : activeElement.closest(this.tagName.toLowerCase())) !== this) {
-          this.hideDatepicker();
-        }
-      });
-    }
-    const path = event.composedPath();
-    const isDatepickerButton = path.some((el) => el === this.datepickerButton);
-    if (isDatepickerButton && (event.key === "Enter" || event.key === " ")) {
-      event.preventDefault();
-      if (!this.isDatepickerOpen) {
-        this.showDatepicker();
-        return;
-      }
-      if (isDatepickerButton) {
-        this.hideDatepicker();
-      }
-    }
-  }
-  handleDateFieldKeydown(event) {
-    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-    if (event.key === "Enter" && !hasModifier) {
-      setTimeout(() => {
-        if (!event.defaultPrevented && !event.isComposing) {
-          this.formControlController.submit();
-        }
-      });
-    }
-  }
-  handleChange() {
-    let startISODate = "";
-    let endISODate = "";
-    startISODate = this.inputStart.value;
-    if (this.range) {
-      endISODate = this.inputEnd.value;
-      this.value = formatDateRange(startISODate, endISODate);
-    } else {
-      this.value = startISODate;
-    }
-    this.formControlController.updateValidity();
-  }
-  handleDateFieldFocus() {
-    setTimeout(() => {
-      this.hasFocus = true;
-    });
-  }
-  handleDateFieldBlur() {
-    this.hasFocus = false;
-  }
-  getFullDateFromISO(date) {
-    return getDateFromISO(date).toLocaleDateString(
-      this.lang || this.localize.lang(),
-      {
-        year: "numeric",
-        month: "long",
-        day: "numeric"
-      }
-    );
-  }
-  getDescriptionText(item) {
-    const errorMessage = typeof this.errorMessage === "string" ? this.errorMessage : this.errorMessage.join(", ");
-    let selectedDateLabel = "";
-    if (this.value !== "") {
-      if (item === "calendarButton" && this.range) {
-        const selectedStartDate = parseDateRange(this.value)[0];
-        const selectedEndDate = parseDateRange(this.value)[1];
-        selectedDateLabel = `${this.localize.term(
-          "selectedDates"
-        )}${this.getFullDateFromISO(
-          selectedStartDate
-        )} - ${this.getFullDateFromISO(selectedEndDate)}`;
-      } else {
-        let selectedDate = "";
-        if (item === "end") {
-          selectedDate = parseDateRange(this.value)[1];
-        } else {
-          selectedDate = this.range ? parseDateRange(this.value)[0] : this.value;
-        }
-        selectedDateLabel = `${this.localize.term(
-          "selectedDate"
-        )}${this.getFullDateFromISO(selectedDate)}`;
-      }
-    }
-    const descriptions = [
-      ...errorMessage.length > 0 && this.error ? [errorMessage] : [],
-      ...this.value ? [selectedDateLabel] : [],
-      ...this.helpText ? [this.helpText] : [],
-      ...this.description ? [this.description] : []
-    ];
-    return descriptions.join(", ");
-  }
-  shouldDisableDate(date) {
-    const isLessThanMin = typeof this.min === "string" && date < getDateFromISO(this.min);
-    const isMoreThanMax = typeof this.max === "string" && date > getDateFromISO(this.max);
-    return isLessThanMin || isMoreThanMax;
-  }
-  async handleOpenChange() {
-    if (this.isDatepickerOpen) {
-      this.emit("dsa-show");
-      this.addOpenListeners();
-      await stopAnimations(this);
-      this.popup.active = true;
-      this.datepickerButton.button.setAttribute("aria-expanded", "true");
-      const { keyframes, options } = getAnimation(this, "date-popup.show", {
-        dir: this.localize.dir()
-      });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.emit("dsa-after-show");
-    } else {
-      this.emit("dsa-hide");
-      this.removeOpenListeners();
-      await stopAnimations(this);
-      this.popup.active = false;
-      this.datepickerButton.button.setAttribute("aria-expanded", "false");
-      this.datepickerButton.focus({ preventScroll: true });
-      const { keyframes, options } = getAnimation(this, "date-popup.hide", {
-        dir: this.localize.dir()
-      });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.emit("dsa-after-hide");
-    }
-  }
-  /** Displays the dsa-calendar picker for an input element. */
-  async showDatepicker() {
-    if (this.isDatepickerOpen) {
-      this.isDatepickerOpen = false;
-      return void 0;
-    }
-    this.isDatepickerOpen = true;
-    return await waitForEvent(this, "dsa-after-show");
-  }
-  /** Hides dsa-calendar. */
-  async hideDatepicker() {
-    if (!this.isDatepickerOpen) {
-      this.isDatepickerOpen = false;
-      return void 0;
-    }
-    this.isDatepickerOpen = false;
-    return await waitForEvent(this, "dsa-after-hide");
-  }
-  async getUpdateComplete() {
-    const result = await super.getUpdateComplete();
-    await Promise.allSettled([
-      this.inputStart.updateComplete,
-      ...this.range ? [this.inputEnd.updateComplete] : []
-    ]);
-    return result;
-  }
-  handleLabelClick() {
-    this.focus();
-  }
-  /** Sets focus on the first input. */
-  focus(options) {
-    this.inputStart.focus(options);
-  }
-  /** Removes focus from the input. */
-  blur() {
-    var _a, _b;
-    this.inputStart.blur();
-    (_a = this.inputEnd) == null ? void 0 : _a.blur();
-    (_b = this.datepickerButton) == null ? void 0 : _b.blur();
-  }
-  /** Increments the value by an optional number parameter. */
-  stepUp(stepNumber) {
-    this.inputStart.stepUp(stepNumber);
-    this.handleChange();
-  }
-  /** Decrements the value by an optional number parameter.  */
-  stepDown(stepNumber) {
-    this.inputStart.stepDown(stepNumber);
-    this.handleChange();
-  }
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    var _a;
-    return this.inputStart.checkValidity() && (!this.range || ((_a = this.inputEnd) == null ? void 0 : _a.checkValidity()));
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    var _a;
-    return this.inputStart.reportValidity() && (!this.range || ((_a = this.inputEnd) == null ? void 0 : _a.reportValidity()));
-  }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message) {
-    this.inputStart.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-  renderInput() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    const hasPrefixIcon = this.hasSlotController.test("prefix");
-    const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-      input: true,
-      "input--date": true,
-      // Sizes
-      "input--small": this.size === "small",
-      "input--medium": this.size === "medium",
-      "input--large": this.size === "large",
-      // States
-      "input--error": this.error,
-      "input--success": this.success && !this.error,
-      "input--on-layer": this.variant === "layer",
-      "input--on-base": this.variant === "base",
-      "input--disabled": this.disabled,
-      "input--readonly": this.readonly,
-      "input--focused": this.hasFocus,
-      "input--empty": !this.value,
-      "input--no-calendar": !this.value,
-      "form-control--has-prefix-icon": hasPrefixIcon
-    })}
-        @keydown=${this.handleDefaultKeyDown}
-      >
-        <slot name="prefix" part="prefix" class="input__prefix"></slot>
-
-        <div
-          class="input__control input__control--date"
-          @click=${this.handleInputClick}
-        >
-          <dsa-internal-date-field
-            id="input-start"
-            parent-name=${this.range ? `${(_b = (_a = this.label) != null ? _a : this.accessibleName) != null ? _b : this.title} - ${this.localize.term(
-      "startDate"
-    )}` : (_d = (_c = this.label) != null ? _c : this.accessibleName) != null ? _d : this.title}
-            description=${this.getDescriptionText("start")}
-            .value=${live(
-      this.range ? parseDateRange(this.value)[0] : this.value
-    )}
-            .defaultValue=${ifDefined(
-      this.range ? parseDateRange(this.defaultValue)[0] : this.defaultValue
-    )}
-            ?disabled=${this.disabled}
-            lang=${ifDefined(this.lang)}
-            ?readonly=${this.readonly}
-            ?error=${this.error}
-            ?required=${this.required}
-            min=${ifDefined(this.min)}
-            max=${ifDefined(live(parseDateRange(this.value)[1] || this.max))}
-            ?autofocus=${this.autofocus}
-            autocomplete=${ifDefined(this.autocomplete)}
-            enterkeyhint=${ifDefined(this.enterkeyhint)}
-            @dsa-change=${this.handleChange}
-            @dsa-focus=${this.handleDateFieldFocus}
-            @dsa-blur=${this.handleDateFieldBlur}
-            @dsa-invalid=${this.handleInvalid}
-            @keydown=${this.handleDateFieldKeydown}
-          >
-          </dsa-internal-date-field>
-          <span
-            class="filter-separator"
-            hidden=${ifDefined(!this.range ? true : void 0)}
-            >-</span
-          >
-          <dsa-internal-date-field
-            hidden=${ifDefined(!this.range ? true : void 0)}
-            id="input-end"
-            parent-name=${`${(_f = (_e = this.label) != null ? _e : this.accessibleName) != null ? _f : this.title} - ${this.localize.term(
-      "endDate"
-    )}`}
-            description=${this.getDescriptionText("end")}
-            .value=${(_g = parseDateRange(this.value)[1]) != null ? _g : ""}
-            .defaultValue=${ifDefined(parseDateRange(this.defaultValue)[1])}
-            ?disabled=${this.disabled}
-            lang=${ifDefined(this.lang)}
-            ?readonly=${this.readonly}
-            ?error=${this.error}
-            ?required=${this.required}
-            min=${ifDefined(live(parseDateRange(this.value)[0] || this.min))}
-            max=${ifDefined(this.max)}
-            enterkeyhint=${ifDefined(this.enterkeyhint)}
-            @dsa-change=${this.handleChange}
-            @dsa-focus=${this.handleDateFieldFocus}
-            @dsa-blur=${this.handleDateFieldBlur}
-            @dsa-invalid=${this.handleInvalid}
-            @keydown=${this.handleDateFieldKeydown}
-          ></dsa-internal-date-field>
-        </div>
-
-        ${!this.hideCalendarButton ? html`
-              <dsa-popup
-                class="date-popup"
-                part="popup"
-                placement="bottom-start"
-                distance="12"
-                strategy=${this.hoist ? "fixed" : "absolute"}
-                flip
-                shift
-                auto-size="vertical"
-                auto-size-padding="10"
-              >
-                <div slot="anchor" class="date-anchor">
-                  <dsa-icon-button
-                    part="picker-button"
-                    class="input__action-button icon-button--date"
-                    name="calendar_today"
-                    label=${`${this.localize.term("picker")} - ${(_i = (_h = this.label) != null ? _h : this.accessibleName) != null ? _i : this.title}`}
-                    size=${this.size}
-                    ?disabled=${this.disabled || this.readonly}
-                    @click=${this.showDatepicker}
-                    description=${this.getDescriptionText("calendarButton")}
-                    library="system"
-                  ></dsa-icon-button>
-                </div>
-                <div id="date-panel" class="date--panel">
-                  <dsa-calendar
-                    class="calendar"
-                    .value=${ifDefined(this.value)}
-                    ?range=${ifDefined(this.range)}
-                    .disableDate=${this.shouldDisableDate}
-                    start-date=${ifDefined(this.calendarStartDate)}
-                    @dsa-date-selected=${this.handleSelectedDate}
-                  ></dsa-calendar>
-                </div>
-              </dsa-popup>
-            ` : ""}
-        ${hasClearIcon ? html`
-              <dsa-icon-button
-                part="clear-button"
-                class="input__action-button"
-                name="clear"
-                label=${this.localize.term("clearEntry")}
-                @click=${this.handleClearClick}
-                library="system"
-              ></dsa-icon-button>
-            ` : ""}
-      </div>
-    `;
-  }
-};
-DSAInputDate.styles = input_date_styles_default;
-__decorateClass([
-  query("#input-start")
-], DSAInputDate.prototype, "inputStart", 2);
-__decorateClass([
-  query("#input-end")
-], DSAInputDate.prototype, "inputEnd", 2);
-__decorateClass([
-  query(".date-popup")
-], DSAInputDate.prototype, "popup", 2);
-__decorateClass([
-  query(".icon-button--date")
-], DSAInputDate.prototype, "datepickerButton", 2);
-__decorateClass([
-  state()
-], DSAInputDate.prototype, "isDatepickerOpen", 2);
-__decorateClass([
-  property()
-], DSAInputDate.prototype, "lang", 2);
-__decorateClass([
-  property({ attribute: "calendar-start-date" })
-], DSAInputDate.prototype, "calendarStartDate", 2);
-__decorateClass([
-  property({ attribute: "hide-calendar-button", type: Boolean })
-], DSAInputDate.prototype, "hideCalendarButton", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAInputDate.prototype, "range", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSAInputDate.prototype, "hoist", 2);
-__decorateClass([
-  watch("isDatepickerOpen", { waitUntilFirstUpdate: true })
-], DSAInputDate.prototype, "handleOpenChange", 1);
-DSAInputDate = __decorateClass([
-  customElement("dsa-input-date")
-], DSAInputDate);
-setDefaultAnimation("date-popup.show", {
-  keyframes: [
-    { opacity: 0, scale: 0.9 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 100, easing: "ease" }
-});
-setDefaultAnimation("date-popup.hide", {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.9 }
-  ],
-  options: { duration: 100, easing: "ease" }
-});
-
-export {
-  DSAInputDate
-};