@ds-autonomie/web-components 2.1.0 → 2.3.0

package/cdn/chunks/chunk.PQYUBPRU.js

@@ -0,0 +1,676 @@
+import {
+  compareTimeStrings,
+  setTimeStringValue,
+  timeStringToObject
+} from "./chunk.IONY2GZF.js";
+import {
+  input_time_styles_default
+} from "./chunk.ITHTXYNC.js";
+import {
+  FormControlLayout
+} from "./chunk.SF3YU6PZ.js";
+import {
+  scrollIntoView
+} from "./chunk.EMIT7S33.js";
+import {
+  l
+} from "./chunk.7PPSHHT2.js";
+import {
+  defaultValue
+} from "./chunk.YY5FKN3H.js";
+import {
+  FormControlController
+} from "./chunk.3NWILHZZ.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.UBKKXGSV.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.2WRFDMKN.js";
+import {
+  LocalizeController
+} from "./chunk.LICWCBKN.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.B6GVVW66.js";
+import {
+  o
+} from "./chunk.YQLIIKLI.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
+import {
+  e,
+  n,
+  r,
+  t
+} from "./chunk.DZB6XUZ7.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/input-time/input-time.ts
+var DSAInputTime = class extends FormControlLayout {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["dsa-blur", "dsa-input"]
+    });
+    this.localize = new LocalizeController(this);
+    this.isTimePickerOpen = false;
+    this.hasFocus = false;
+    this.value = "";
+    this.defaultValue = "";
+    this.clearable = false;
+    this.min = "00:00";
+    this.max = "23:59";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.nativeInput.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.nativeInput.validationMessage;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+  }
+  async firstUpdated() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+  }
+  //Adds opened dropdown event listeners
+  addOpenListeners() {
+    document.addEventListener("focusin", this.handleDocumentFocusIn);
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+    document.addEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  //Removes opened dropdown event listeners
+  removeOpenListeners() {
+    document.removeEventListener("focusin", this.handleDocumentFocusIn);
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  handleDocumentFocusIn(event) {
+    const path = event.composedPath();
+    if (this && !path.includes(this)) {
+      this.hideTimePicker();
+    }
+  }
+  handleDocumentMouseDown(event) {
+    const path = event.composedPath();
+    if (this && !path.includes(this)) {
+      this.hideTimePicker();
+    }
+  }
+  handleDocumentKeyDown(event) {
+    event.stopPropagation();
+    if (this.isTimePickerOpen && event.key === "Escape") {
+      event.preventDefault();
+      this.hideTimePicker();
+    }
+    if (this.isTimePickerOpen && 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.hideTimePicker();
+        }
+      });
+    }
+    const path = event.composedPath();
+    const isTimePickerButton = path.some((el) => el === this.timePickerButton);
+    if (isTimePickerButton && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      this.toggleTimePicker();
+    }
+  }
+  handleInputBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleInputChange() {
+    this.emit("dsa-change");
+  }
+  handleInputClearClick(event) {
+    this.value = "";
+    this.emit("dsa-clear");
+    this.emit("dsa-input");
+    this.emit("dsa-change");
+    this.nativeInput.focus();
+    event.stopPropagation();
+  }
+  handleInputFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleInputInput() {
+    this.value = this.nativeInput.value;
+    this.formControlController.updateValidity();
+    this.emit("dsa-input");
+  }
+  handleInputInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleInputKeyDown(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();
+        }
+      });
+    }
+    if (event.key === " ") {
+      event.preventDefault();
+      this.showTimePicker();
+    }
+  }
+  getDescriptionIds() {
+    const ids = [
+      "input__prefix",
+      "input__suffix",
+      ...this.error ? ["error-text"] : [],
+      "selected-value",
+      "help-text"
+    ];
+    return ids.join(" ");
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  handleStepChange() {
+    this.nativeInput.step = String(this.step);
+    this.formControlController.updateValidity();
+  }
+  async handleValueChange() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+    if (this.isTimePickerOpen) {
+      this.scrollSelectedTimeUnitsIntoView();
+    }
+  }
+  async handleOpenChange() {
+    var _a, _b;
+    if (this.isTimePickerOpen) {
+      this.emit("dsa-show");
+      this.addOpenListeners();
+      await stopAnimations(this);
+      this.popup.active = true;
+      this.timePickerButton.button.setAttribute("aria-expanded", "true");
+      const { keyframes, options } = getAnimation(this, "time-popup.show", {
+        dir: this.localize.dir()
+      });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.emit("dsa-after-show");
+      this.scrollSelectedTimeUnitsIntoView();
+      (_b = (_a = this.popup.querySelector('[aria-selected="true"]')) != null ? _a : this.popup.querySelector("li")) == null ? void 0 : _b.focus();
+    } else {
+      this.emit("dsa-hide");
+      this.removeOpenListeners();
+      await stopAnimations(this);
+      this.popup.active = false;
+      this.timePickerButton.button.setAttribute("aria-expanded", "false");
+      const { keyframes, options } = getAnimation(this, "time-popup.hide", {
+        dir: this.localize.dir()
+      });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.timePickerButton.focus({ preventScroll: true });
+      this.emit("dsa-after-hide");
+    }
+  }
+  /** Sets focus on the input. */
+  focus(options) {
+    this.nativeInput.focus(options);
+  }
+  /** Removes focus from the input. */
+  blur() {
+    this.nativeInput.blur();
+  }
+  /** Selects all the text in the input. */
+  select() {
+    if (this.nativeInput instanceof HTMLInputElement) {
+      this.nativeInput.select();
+    }
+  }
+  /** Shows or hides the time picker */
+  toggleTimePicker() {
+    if (!this.isTimePickerOpen) {
+      this.showTimePicker();
+    } else {
+      this.hideTimePicker();
+    }
+  }
+  /** Displays the time picker for an input element. */
+  async showTimePicker() {
+    if (this.value === "" || compareTimeStrings(this.value, this.min) === -1) {
+      this.value = this.min;
+    } else if (compareTimeStrings(this.value, this.max) === 1) {
+      this.value = this.max;
+    }
+    this.isTimePickerOpen = true;
+    return await waitForEvent(this, "dsa-after-show");
+  }
+  /** Hides the time picker */
+  async hideTimePicker() {
+    if (!this.isTimePickerOpen) {
+      return void 0;
+    }
+    this.isTimePickerOpen = false;
+    return await waitForEvent(this, "dsa-after-hide");
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.nativeInput.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.nativeInput.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.nativeInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  scrollSelectedTimeUnitsIntoView() {
+    const selectedTimeUnits = this.popup.querySelectorAll(
+      '[aria-selected="true"]'
+    );
+    selectedTimeUnits.forEach((selectedTimeUnit) => {
+      scrollIntoView(
+        selectedTimeUnit,
+        selectedTimeUnit.parentElement,
+        "vertical",
+        "auto"
+      );
+    });
+  }
+  selectTimeUnit(timeUnit) {
+    const oldValue = this.value;
+    const newValue = setTimeStringValue(
+      oldValue,
+      timeUnit.dataset.timetype,
+      timeUnit.dataset.timevalue
+    );
+    this.emit("dsa-input");
+    if (compareTimeStrings(newValue, this.min) === -1) {
+      this.value = this.min;
+      this.emit("dsa-change");
+    } else if (compareTimeStrings(newValue, this.max) === 1) {
+      this.value = this.max;
+      this.emit("dsa-change");
+    } else if (this.value !== newValue) {
+      this.value = newValue;
+      this.emit("dsa-change");
+    }
+  }
+  handlePanelKeydown(event) {
+    var _a, _b, _c, _d;
+    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(
+      event.key
+    )) {
+      event.preventDefault();
+    }
+    if (event.key === "ArrowUp") {
+      const previousSelectableTimeUnit = (_a = event.target.closest("li")) == null ? void 0 : _a.previousElementSibling;
+      if (!previousSelectableTimeUnit) return;
+      previousSelectableTimeUnit.focus();
+      this.selectTimeUnit(previousSelectableTimeUnit);
+    }
+    if (event.key === "ArrowDown") {
+      const nextSelectableTimeUnit = (_b = event.target.closest("li")) == null ? void 0 : _b.nextElementSibling;
+      if (!nextSelectableTimeUnit) return;
+      nextSelectableTimeUnit.focus();
+      this.selectTimeUnit(nextSelectableTimeUnit);
+    }
+    if (event.key === "ArrowLeft") {
+      const targetUlElement = event.target.closest("ul");
+      if (!(targetUlElement instanceof HTMLUListElement)) return;
+      const previousListElement = targetUlElement.previousElementSibling;
+      if (!(previousListElement instanceof HTMLUListElement)) return;
+      const focusableLiElement = (_c = previousListElement.querySelector(
+        'li[aria-selected="true"]'
+      )) != null ? _c : previousListElement.querySelector("li");
+      if (!focusableLiElement) return;
+      focusableLiElement.focus();
+      this.selectTimeUnit(focusableLiElement);
+    }
+    if (event.key === "ArrowRight") {
+      const targetUlElement = event.target.closest("ul");
+      if (!(targetUlElement instanceof HTMLUListElement)) return;
+      const nextListElement = targetUlElement.nextElementSibling;
+      if (!(nextListElement instanceof HTMLUListElement)) return;
+      const focusableLiElement = (_d = nextListElement.querySelector(
+        'li[aria-selected="true"]'
+      )) != null ? _d : nextListElement.querySelector("li");
+      if (!focusableLiElement) return;
+      focusableLiElement.focus();
+      this.selectTimeUnit(focusableLiElement);
+    }
+    if (event.key === "Enter") {
+      this.hideTimePicker();
+    }
+  }
+  handlePanelClick(event) {
+    const target = event.target.closest("li");
+    if (!(target == null ? void 0 : target.dataset.timetype) || !target.dataset.timevalue) {
+      return;
+    }
+    this.selectTimeUnit(target);
+  }
+  generateTimeUnitArrays() {
+    var _a;
+    const minTimeValues = timeStringToObject(this.min);
+    const maxTimeValues = timeStringToObject(this.max);
+    const timeStepValue = this.step ? this.step : 60;
+    if (!minTimeValues || !maxTimeValues) {
+      throw new Error("Invalid min or max time values");
+    }
+    const selectedTimeObject = (_a = timeStringToObject(this.value)) != null ? _a : minTimeValues;
+    const hoursStep = timeStepValue > 3600 ? Math.floor(timeStepValue / 3600) : 1;
+    const minutesStep = timeStepValue > 60 ? Math.floor(timeStepValue % 3600 / 60) : 1;
+    const secondsStep = timeStepValue % 60;
+    const displayedHours = Array.from(
+      { length: 24 },
+      (_, index) => index
+    ).filter((index) => {
+      return index >= minTimeValues.hours && index <= maxTimeValues.hours && index % hoursStep === 0;
+    });
+    const displayedMinutes = Array.from(
+      { length: 60 },
+      (_, index) => index
+    ).filter((index) => {
+      if (selectedTimeObject.hours === (minTimeValues == null ? void 0 : minTimeValues.hours)) {
+        return index >= (minTimeValues == null ? void 0 : minTimeValues.minutes) && index % minutesStep === 0;
+      }
+      if (selectedTimeObject.hours === (maxTimeValues == null ? void 0 : maxTimeValues.hours)) {
+        return index <= (maxTimeValues == null ? void 0 : maxTimeValues.minutes) && index % minutesStep === 0;
+      }
+      return timeStepValue > 60 ? index % minutesStep === 0 : true;
+    });
+    const displayedSeconds = Array.from(
+      { length: 60 },
+      (_, index) => index
+    ).filter((index) => {
+      return index % secondsStep === 0;
+    });
+    return { displayedHours, displayedMinutes, displayedSeconds };
+  }
+  generateTimeUnitList(unitType, valuesArray) {
+    var _a, _b;
+    const minTimeValues = timeStringToObject(this.min);
+    const selectedTimeObject = (_a = timeStringToObject(this.value)) != null ? _a : minTimeValues;
+    const selectedValue = (_b = selectedTimeObject[unitType]) != null ? _b : 0;
+    const getTimeTypeLabel = (unitTimeType, unitValue) => {
+      switch (unitTimeType) {
+        case "hours":
+          return this.localize.term("hours", unitValue);
+        case "minutes":
+          return this.localize.term("minutes", unitValue);
+        case "seconds":
+          return this.localize.term("seconds", unitValue);
+        case "milliseconds":
+          return this.localize.term("milliseconds", unitValue);
+        default:
+          return "";
+      }
+    };
+    if (valuesArray.length === 0) {
+      return x``;
+    }
+    return x`
+      <ul
+        id="${unitType}-list"
+        class="time-popup--unit-container"
+        role="listbox"
+        aria-label=${this.localize.term(unitType, "")}
+      >
+        ${valuesArray.map(
+      (value) => x`
+              <li
+                data-timetype="${unitType}"
+                data-timevalue="${value}"
+                role="option"
+                aria-selected="${selectedValue === value ? "true" : "false"}"
+                tabindex="${value === selectedValue ? 0 : -1}"
+                class=${e2({
+        "time-popup--unit": true,
+        "time-popup--unit-selected": value === selectedValue
+      })}
+              >
+                <span aria-hidden="true"
+                  >${value.toString().padStart(2, "0")}</span
+                >
+                <dsa-visually-hidden
+                  >${getTimeTypeLabel(unitType, value)}</dsa-visually-hidden
+                >
+              </li>
+            `
+    )}
+      </ul>
+    `;
+  }
+  renderInput() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasPrefixIcon = this.hasSlotController.test("prefix");
+    const hasSuffixIcon = this.hasSlotController.test("suffix");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasClearIcon = this.clearable && !this.disabled && !this.readonly && this.value.length > 0;
+    const hasSeconds = this.step < 60;
+    const { displayedHours, displayedMinutes, displayedSeconds } = this.generateTimeUnitArrays();
+    const hoursElement = this.generateTimeUnitList("hours", displayedHours);
+    const minutesElement = this.generateTimeUnitList(
+      "minutes",
+      displayedMinutes
+    );
+    const secondsElement = this.generateTimeUnitList(
+      "seconds",
+      displayedSeconds
+    );
+    return x`
+      <div
+        part="base"
+        class=${e2({
+      input: true,
+      "input--time": true,
+      // Sizes
+      "input--small": this.size === "small",
+      "input--medium": this.size === "medium",
+      "input--large": this.size === "large",
+      // States
+      "input--error": 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,
+      "form-control--has-prefix-icon": hasPrefixIcon
+    })}
+      >
+        <slot
+          name="prefix"
+          part="prefix"
+          id="input__prefix"
+          class="input__prefix"
+        ></slot>
+
+        <input
+          part="input"
+          id="input"
+          class="input__control"
+          type="time"
+          title=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+          name=${ifDefinedAndNotEmpty(this.name)}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          min=${o(this.min)}
+          max=${o(this.max)}
+          step=${o(this.step)}
+          .value=${l(this.value)}
+          autocomplete=${o(this.autocomplete)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${o(this.enterkeyhint)}
+          inputmode="numeric"
+          aria-label=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+          aria-describedby=${this.getDescriptionIds()}
+          aria-invalid=${o(this.error ? "true" : void 0)}
+          @change=${this.handleInputChange}
+          @input=${this.handleInputInput}
+          @invalid=${this.handleInputInvalid}
+          @keydown=${this.handleInputKeyDown}
+          @focus=${this.handleInputFocus}
+          @blur=${this.handleInputBlur}
+        />
+
+        ${hasSuffixIcon ? x`<slot
+              name="suffix"
+              id="input__suffix"
+              class="input__suffix"
+            ></slot>` : ""}
+        ${hasClearIcon ? x`
+              <dsa-icon-button
+                part="clear-button"
+                class="input__action-button"
+                name="clear"
+                label=${this.localize.term("clearEntry")}
+                @click=${this.handleInputClearClick}
+                library="system"
+              ></dsa-icon-button>
+            ` : ""}
+
+        <dsa-popup
+          class="time-popup"
+          part="popup"
+          placement="bottom-end"
+          distance="12"
+          strategy="absolute"
+          flip
+          shift
+          auto-size="both"
+          auto-size-padding="10"
+        >
+          <div slot="anchor" class="time-anchor">
+            <dsa-icon-button
+              part="picker-button"
+              class="input__action-button icon-button--time"
+              name="schedule"
+              label=${this.localize.term("selectATime")}
+              @click=${this.toggleTimePicker}
+              library="system"
+              size=${this.size}
+              ?disabled=${this.disabled || this.readonly}
+            ></dsa-icon-button>
+          </div>
+
+          <div
+            id="time-popup--panel"
+            class="time-popup--panel"
+            @keydown=${this.handlePanelKeydown}
+            @click=${this.handlePanelClick}
+          >
+            ${hoursElement} ${minutesElement}
+            ${hasSeconds ? secondsElement : ""}
+          </div>
+        </dsa-popup>
+      </div>
+    `;
+  }
+};
+DSAInputTime.styles = input_time_styles_default;
+__decorateClass([
+  e("input")
+], DSAInputTime.prototype, "nativeInput", 2);
+__decorateClass([
+  e(".icon-button--time")
+], DSAInputTime.prototype, "timePickerButton", 2);
+__decorateClass([
+  e(".time-popup")
+], DSAInputTime.prototype, "popup", 2);
+__decorateClass([
+  r()
+], DSAInputTime.prototype, "isTimePickerOpen", 2);
+__decorateClass([
+  r()
+], DSAInputTime.prototype, "hasFocus", 2);
+__decorateClass([
+  n()
+], DSAInputTime.prototype, "value", 2);
+__decorateClass([
+  defaultValue()
+], DSAInputTime.prototype, "defaultValue", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAInputTime.prototype, "clearable", 2);
+__decorateClass([
+  n()
+], DSAInputTime.prototype, "min", 2);
+__decorateClass([
+  n()
+], DSAInputTime.prototype, "max", 2);
+__decorateClass([
+  n()
+], DSAInputTime.prototype, "step", 2);
+__decorateClass([
+  n()
+], DSAInputTime.prototype, "autocomplete", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAInputTime.prototype, "autofocus", 2);
+__decorateClass([
+  n()
+], DSAInputTime.prototype, "enterkeyhint", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSAInputTime.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("step", { waitUntilFirstUpdate: true })
+], DSAInputTime.prototype, "handleStepChange", 1);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], DSAInputTime.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("isTimePickerOpen", { waitUntilFirstUpdate: true })
+], DSAInputTime.prototype, "handleOpenChange", 1);
+DSAInputTime = __decorateClass([
+  t("dsa-input-time")
+], DSAInputTime);
+setDefaultAnimation("time-popup.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+setDefaultAnimation("time-popup.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+
+export {
+  DSAInputTime
+};

package/cdn/chunks/chunk.PWL7QCVG.js

@@ -0,0 +1,9 @@
+// src/internal/a11y-warning.ts
+var A11Y_WARNING_START = "(DSA a11y) ";
+function a11yWarning(message) {
+  console.warn(`${A11Y_WARNING_START}${message}`);
+}
+
+export {
+  a11yWarning
+};

package/cdn/chunks/{chunk.XSXBXWVS.js → chunk.QFP2EIRS.js}

@@ -32,6 +32,7 @@ var footer_styles_default = i`
   .footer-center-divider,
   [part~='footer-bottom-container'] {
     width: 100%;
+    /* stylelint-disable-next-line */
     max-width: var(--footer-max-width);
   }