@ds-autonomie/web-components 2.14.0 → 2.14.1

package/cdn/chunks/chunk.QQDMDNG6.js

@@ -1,657 +0,0 @@
-import {
-  l
-} from "./chunk.5YWOUFLR.js";
-import {
-  defaultValue
-} from "./chunk.APSWEF5D.js";
-import {
-  getDateFromISO,
-  isValidDate,
-  monthLength
-} from "./chunk.OYVF3HNG.js";
-import {
-  FormControlController
-} from "./chunk.LLQW6MLS.js";
-import {
-  ifDefinedAndNotEmpty
-} from "./chunk.SUUV7E4I.js";
-import {
-  LocalizeController
-} from "./chunk.AXLGDJN5.js";
-import {
-  o
-} from "./chunk.XED65RH5.js";
-import {
-  watch
-} from "./chunk.TKTCYZRK.js";
-import {
-  ShoelaceElement,
-  e,
-  n,
-  r,
-  t
-} from "./chunk.TEKUWOCD.js";
-import {
-  i
-} from "./chunk.UKK3NS3L.js";
-import {
-  x
-} from "./chunk.JXF4O366.js";
-import {
-  __decorateClass
-} from "./chunk.7WRNLPGX.js";
-
-// src/internal/components/date-field/date-field.styles.ts
-var date_field_styles_default = i`
-  .input-date__value-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-    z-index: -1;
-  }
-
-  /* 
-  * Spin buttons
-  */
-  /* Reset styles for input[type="number"] */
-  input[type='number'] {
-    -moz-appearance: textfield;
-    -webkit-appearance: none;
-    appearance: none;
-    border: none;
-    outline: none;
-    background: none;
-    padding: 0;
-    margin: 0;
-    font: inherit;
-    color: inherit;
-    caret-color: transparent;
-    text-align: center;
-  }
-
-  /* Hide the up/down arrows in number input */
-  input[type='number']::-webkit-inner-spin-button,
-  input[type='number']::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  input[type='number'] {
-    -moz-appearance: textfield;
-  }
-
-  input[type='number']::selection {
-    background: none;
-  }
-
-  input[type='number']:focus {
-    background: var(--dsa-color-primitive-colors-identity-purple-500);
-    border-radius: 2px;
-    color: var(--dsa-color-primitive-colors-neutral-0);
-  }
-  input[type='number']:not([disabled])::placeholder {
-    color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
-  }
-  input[type='number'][disabled]::placeholder {
-    color: var(--dsa-wc-input-label-color-disabled);
-  }
-  input[type='number']:focus::placeholder {
-    color: white;
-  }
-
-  .input-date__day,
-  .input-date__month {
-    width: 1.7em;
-  }
-  .input-date__year {
-    width: 2.6em;
-  }
-
-  #description {
-    display: none;
-  }
-`;
-
-// src/internal/components/date-field/date-field.utils.ts
-function isInvalidSpinbuttonKey(event2) {
-  const hasModifier = event2.metaKey || event2.ctrlKey;
-  const isValidCharacter = /^[0-9]$/.test(event2.key);
-  const isInvalidInput = !hasModifier && !isValidCharacter;
-  const isNavigationKey = [
-    "Escape",
-    "Backspace",
-    "Tab",
-    "ArrowLeft",
-    "ArrowRight",
-    "ArrowUp",
-    "ArrowDown",
-    "Delete",
-    "Enter",
-    "PageDown",
-    "PageUp",
-    "Home",
-    "End"
-  ].includes(event2.key);
-  if (!isNavigationKey && isInvalidInput) {
-    return true;
-  }
-  return false;
-}
-
-// src/internal/components/date-field/date-field.ts
-var DSAInternalDateField = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["dsa-blur", "dsa-input", "dsa-change"]
-    });
-    this.localize = new LocalizeController(this);
-    this.focusedInput = [];
-    this.selectedDay = "";
-    this.selectedMonth = "";
-    this.selectedYear = "";
-    this.dateOrder = [
-      "day",
-      "month",
-      "year"
-    ];
-    this.delimiter = "/";
-    this.lastPressedKey = "";
-    this.internalValueChange = false;
-    this.previousTentativeDate = "";
-    this.parentName = "";
-    this.description = "";
-    this.name = "";
-    this.value = "";
-    this.defaultValue = "";
-    this.disabled = false;
-    this.error = false;
-    this.readonly = false;
-    this.form = "";
-    this.required = false;
-  }
-  /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
-  get valueAsDate() {
-    var _a, _b;
-    return (_b = (_a = this.hiddenInput) == null ? void 0 : _a.valueAsDate) != null ? _b : null;
-  }
-  set valueAsDate(newValue) {
-    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() {
-    var _a;
-    return (_a = this.hiddenInput.valueAsNumber) != null ? _a : parseFloat(this.value);
-  }
-  set valueAsNumber(newValue) {
-    this.hiddenInput.valueAsNumber = newValue;
-    this.value = this.hiddenInput.value;
-  }
-  /** Gets the validity state object */
-  get validity() {
-    return this.hiddenInput.validity;
-  }
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.hiddenInput.validationMessage;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleLangChange();
-  }
-  updateDateOrder() {
-    var _a, _b;
-    const dateFormat = new Intl.DateTimeFormat(this.currentLocale, {
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit"
-    });
-    this.dateOrder = dateFormat.formatToParts(/* @__PURE__ */ new Date()).map((part) => part.type).filter((type) => ["day", "month", "year"].includes(type));
-    this.delimiter = (_b = (_a = dateFormat.formatToParts(/* @__PURE__ */ new Date()).find((part) => part.type === "literal")) == null ? void 0 : _a.value) != null ? _b : "/";
-  }
-  getSpinbuttonOrder() {
-    return this.dateOrder.map((datePart) => {
-      switch (datePart) {
-        case "day":
-        default:
-          return this.dayInput;
-        case "month":
-          return this.monthInput;
-        case "year":
-          return this.yearInput;
-      }
-    });
-  }
-  handleBlur(event2) {
-    this.handleChange();
-    const currentTarget = event2.currentTarget;
-    setTimeout(() => {
-      this.focusedInput = this.focusedInput.filter(
-        (input) => input !== currentTarget
-      );
-      if (this.focusedInput.length === 0) {
-        this.internalValueChange = false;
-      }
-    }, 0);
-  }
-  handleChange() {
-    const previousValue = this.value;
-    const tempSelectedDay = this.dayInput.value;
-    const tempSelectedMonth = this.monthInput.value;
-    const tempSelectedYear = this.yearInput.value;
-    const tentativeDate = `${tempSelectedYear}-${tempSelectedMonth}-${tempSelectedDay}`;
-    const allFilled = tempSelectedDay !== "" && tempSelectedMonth !== "" && tempSelectedYear !== "";
-    const allEmpty = tempSelectedDay === "" && tempSelectedMonth === "" && tempSelectedYear === "";
-    if (allEmpty) {
-      this.setCustomValidity("");
-      this.value = "";
-    } else if (!isValidDate(tentativeDate)) {
-      this.setCustomValidity(this.localize.term("invalidDate"));
-      this.value = "";
-    } else {
-      this.setCustomValidity("");
-      this.value = tentativeDate;
-    }
-    this.internalValueChange = true;
-    this.formControlController.updateValidity();
-    if (!isValidDate(tentativeDate)) {
-      this.formControlController.emitInvalidEvent(event);
-    }
-    if (this.value !== previousValue || tentativeDate !== this.previousTentativeDate && (allFilled || allEmpty)) {
-      this.emit("dsa-change");
-      this.previousTentativeDate = tentativeDate;
-    }
-  }
-  handleFocus(event2) {
-    if (this.focusedInput.length === 0) {
-      this.emit("dsa-focus");
-    }
-    this.focusedInput = [
-      ...this.focusedInput,
-      event2.currentTarget
-    ];
-  }
-  handleHiddenInputFocus() {
-    this.getSpinbuttonOrder()[0].focus();
-  }
-  handleSpinbuttonClick(event2) {
-    event2.currentTarget.select();
-  }
-  handleSpinbuttonKeydown(event2) {
-    const currentInput = event2.currentTarget;
-    this.lastPressedKey = event2.key;
-    if (event2.key === "Dead") {
-      currentInput.blur();
-      setTimeout(() => currentInput.focus());
-    }
-    if (isInvalidSpinbuttonKey(event2)) {
-      event2.preventDefault();
-    }
-    if (event2.key === "ArrowLeft") {
-      event2.preventDefault();
-      this.focusPreviousSpinbutton(currentInput);
-    }
-    if (event2.key === "ArrowRight") {
-      event2.preventDefault();
-      this.focusNextSpinbutton(currentInput);
-    }
-    if (event2.key === "ArrowUp" || event2.key === "ArrowDown") {
-      setTimeout(() => currentInput.select());
-    }
-    if (event2.key === "Enter") {
-      this.handleChange();
-    }
-  }
-  handleSpinbuttonInput(event2) {
-    event2.stopPropagation();
-    const currentTarget = event2.currentTarget;
-    if (Number(currentTarget.value) > Number(currentTarget.max)) {
-      currentTarget.value = currentTarget.value.slice(-1);
-      event2.preventDefault();
-      this.focusNextSpinbutton(currentTarget);
-    }
-    if (currentTarget.value !== "") {
-      currentTarget.value = parseInt(currentTarget.value).toString();
-      currentTarget.value = currentTarget.value.padStart(
-        currentTarget === this.yearInput ? 4 : 2,
-        "0"
-      );
-    }
-    switch (event2.currentTarget) {
-      case this.dayInput:
-        this.selectedDay = currentTarget.value;
-        break;
-      case this.monthInput:
-        this.selectedMonth = currentTarget.value;
-        break;
-      case this.yearInput:
-        this.selectedYear = currentTarget.value;
-        break;
-    }
-    if (!["ArrowUp", "ArrowDown"].includes(this.lastPressedKey) && Number(`${currentTarget.value}0`) > Number(currentTarget.max)) {
-      this.focusNextSpinbutton(currentTarget);
-    }
-    this.setCustomValidity("");
-    this.emit("dsa-input");
-  }
-  handleInvalid(event2) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event2);
-  }
-  focusNextSpinbutton(currentElement) {
-    const spinButtons = this.getSpinbuttonOrder();
-    const currentIndex = spinButtons.findIndex(
-      (button) => button === currentElement
-    );
-    if (currentIndex + 1 < spinButtons.length) {
-      spinButtons[currentIndex + 1].focus();
-      setTimeout(() => {
-        spinButtons[currentIndex + 1].select();
-      }, 0);
-    }
-  }
-  focusPreviousSpinbutton(currentElement) {
-    const spinButtons = this.getSpinbuttonOrder();
-    const currentIndex = spinButtons.findIndex(
-      (button) => button === currentElement
-    );
-    if (currentIndex > 0) {
-      spinButtons[currentIndex - 1].focus();
-      setTimeout(() => {
-        spinButtons[currentIndex - 1].select();
-      }, 0);
-    }
-  }
-  handleDisabledChange() {
-    this.formControlController.setValidity(this.disabled);
-  }
-  async handleValueChange() {
-    if (this.internalValueChange) {
-      this.internalValueChange = false;
-      return;
-    }
-    if (this.value === "") {
-      this.selectedDay = "";
-      this.selectedMonth = "";
-      this.selectedYear = "";
-    } else {
-      this.selectedDay = `${getDateFromISO(this.value).getDate()}`.padStart(
-        2,
-        "0"
-      );
-      this.selectedMonth = `${getDateFromISO(this.value).getMonth() + 1}`.padStart(2, "0");
-      this.selectedYear = `${getDateFromISO(
-        this.value
-      ).getFullYear()}`.padStart(4, "0");
-    }
-    await this.updateComplete;
-    this.setCustomValidity("");
-    this.formControlController.updateValidity();
-  }
-  handleLangChange() {
-    this.currentLocale = this.lang || this.localize.lang();
-    this.updateDateOrder();
-  }
-  handleFocusChange() {
-    if (this.focusedInput.length === 0) {
-      this.emit("dsa-blur");
-    }
-  }
-  /** Sets focus on the input. */
-  focus(options) {
-    const firstSpinbutton = this.getSpinbuttonOrder()[0];
-    firstSpinbutton.focus(options);
-    setTimeout(() => {
-      firstSpinbutton.select();
-    }, 0);
-  }
-  /** Removes focus from the input. */
-  blur() {
-    var _a;
-    (_a = this.focusedInput[0]) == null ? void 0 : _a.blur();
-  }
-  /** Increments the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter. */
-  stepUp(stepNumber) {
-    this.hiddenInput.stepUp(stepNumber);
-    if (this.value !== this.hiddenInput.value) {
-      this.value = this.hiddenInput.value;
-    }
-  }
-  /** Decrements the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter.  */
-  stepDown(stepNumber) {
-    this.hiddenInput.stepDown(stepNumber);
-    if (this.value !== this.hiddenInput.value) {
-      this.value = this.hiddenInput.value;
-    }
-  }
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    return this.hiddenInput.checkValidity();
-  }
-  clear() {
-    this.selectedDay = "";
-    this.selectedMonth = "";
-    this.selectedYear = "";
-    this.value = "";
-  }
-  /** 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.hiddenInput.reportValidity();
-  }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message) {
-    this.hiddenInput.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-  renderSpinbutton(part) {
-    var _a, _b;
-    let className = "";
-    let ariaLabel = "";
-    let min = 1;
-    let max;
-    let placeholder;
-    let value;
-    const minDate = getDateFromISO((_a = this.min) != null ? _a : "");
-    const maxDate = getDateFromISO((_b = this.max) != null ? _b : "");
-    const minYear = this.min ? minDate.getFullYear() : 1900;
-    const maxYear = this.max ? maxDate.getFullYear() : 2500;
-    const minMonth = minYear === maxYear ? minDate.getMonth() + 1 : 1;
-    const maxMonth = minYear === maxYear ? maxDate.getMonth() + 1 : 12;
-    const minDay = minYear === maxYear && minMonth === maxMonth ? minDate.getDate() : 1;
-    const maxDay = minYear === maxYear && minMonth === maxMonth ? maxDate.getDate() : monthLength(Number(this.selectedMonth), Number(this.selectedYear));
-    switch (part) {
-      case "day":
-        className = "input-date__day";
-        ariaLabel = this.localize.term("day");
-        min = minDay;
-        max = maxDay;
-        placeholder = this.localize.term("dayPlaceholder");
-        value = this.selectedDay;
-        break;
-      case "month":
-        className = "input-date__month";
-        ariaLabel = this.localize.term("month");
-        min = minMonth;
-        max = maxMonth;
-        placeholder = this.localize.term("monthPlaceholder");
-        value = this.selectedMonth;
-        break;
-      case "year":
-        className = "input-date__year";
-        ariaLabel = this.localize.term("year");
-        min = minYear;
-        max = maxYear;
-        placeholder = this.localize.term("yearPlaceholder");
-        value = this.selectedYear;
-        break;
-    }
-    return x`
-      <input
-        type="number"
-        class=${className}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        aria-disabled=${o(this.readonly ? "true" : void 0)}
-        ?required=${this.required}
-        aria-label=${`${ariaLabel} - ${this.parentName}`}
-        aria-describedby="description"
-        aria-invalid=${o(this.error ? "true" : void 0)}
-        min=${min}
-        max=${max}
-        placeholder=${placeholder}
-        .value=${l(value)}
-        enterkeyhint=${o(this.enterkeyhint)}
-        inputmode="numeric"
-        ?autofocus=${o(
-      this.dateOrder[0] === part ? this.autofocus : void 0
-    )}
-        @keydown=${this.handleSpinbuttonKeydown}
-        @click=${this.handleSpinbuttonClick}
-        @change=${this.handleChange}
-        @input=${this.handleSpinbuttonInput}
-        @invalid=${this.handleInvalid}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-      />
-    `;
-  }
-  render() {
-    return x`
-      ${this.renderSpinbutton(this.dateOrder[0])}
-      <span aria-hidden="true">${this.delimiter}</span>
-      ${this.renderSpinbutton(this.dateOrder[1])}
-      <span aria-hidden="true">${this.delimiter}</span>
-      ${this.renderSpinbutton(this.dateOrder[2])}
-
-      <input
-        class="input-date__value-input"
-        type="date"
-        name=${ifDefinedAndNotEmpty(this.name)}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        aria-disabled=${o(this.readonly ? "true" : void 0)}
-        ?required=${this.required}
-        min=${o(this.min)}
-        max=${o(this.max)}
-        step=${o(this.step)}
-        .value=${l(this.value)}
-        tabindex="-1"
-        aria-hidden="true"
-        @invalid=${this.handleInvalid}
-        @focus=${this.handleHiddenInputFocus}
-      />
-      <p id="description">${this.description}</p>
-    `;
-  }
-};
-DSAInternalDateField.styles = date_field_styles_default;
-__decorateClass([
-  e(".input-date__value-input")
-], DSAInternalDateField.prototype, "hiddenInput", 2);
-__decorateClass([
-  e(".input-date__day")
-], DSAInternalDateField.prototype, "dayInput", 2);
-__decorateClass([
-  e(".input-date__month")
-], DSAInternalDateField.prototype, "monthInput", 2);
-__decorateClass([
-  e(".input-date__year")
-], DSAInternalDateField.prototype, "yearInput", 2);
-__decorateClass([
-  r()
-], DSAInternalDateField.prototype, "focusedInput", 2);
-__decorateClass([
-  r()
-], DSAInternalDateField.prototype, "currentLocale", 2);
-__decorateClass([
-  r()
-], DSAInternalDateField.prototype, "selectedDay", 2);
-__decorateClass([
-  r()
-], DSAInternalDateField.prototype, "selectedMonth", 2);
-__decorateClass([
-  r()
-], DSAInternalDateField.prototype, "selectedYear", 2);
-__decorateClass([
-  r()
-], DSAInternalDateField.prototype, "dateOrder", 2);
-__decorateClass([
-  r()
-], DSAInternalDateField.prototype, "delimiter", 2);
-__decorateClass([
-  r()
-], DSAInternalDateField.prototype, "lastPressedKey", 2);
-__decorateClass([
-  n({ attribute: "parent-name" })
-], DSAInternalDateField.prototype, "parentName", 2);
-__decorateClass([
-  n()
-], DSAInternalDateField.prototype, "description", 2);
-__decorateClass([
-  n()
-], DSAInternalDateField.prototype, "name", 2);
-__decorateClass([
-  n()
-], DSAInternalDateField.prototype, "value", 2);
-__decorateClass([
-  defaultValue()
-], DSAInternalDateField.prototype, "defaultValue", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], DSAInternalDateField.prototype, "disabled", 2);
-__decorateClass([
-  n()
-], DSAInternalDateField.prototype, "lang", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInternalDateField.prototype, "error", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], DSAInternalDateField.prototype, "readonly", 2);
-__decorateClass([
-  n({ reflect: true })
-], DSAInternalDateField.prototype, "form", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], DSAInternalDateField.prototype, "required", 2);
-__decorateClass([
-  n()
-], DSAInternalDateField.prototype, "min", 2);
-__decorateClass([
-  n()
-], DSAInternalDateField.prototype, "max", 2);
-__decorateClass([
-  n()
-], DSAInternalDateField.prototype, "step", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInternalDateField.prototype, "autofocus", 2);
-__decorateClass([
-  n()
-], DSAInternalDateField.prototype, "enterkeyhint", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], DSAInternalDateField.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch("value")
-], DSAInternalDateField.prototype, "handleValueChange", 1);
-__decorateClass([
-  watch("lang", { waitUntilFirstUpdate: true })
-], DSAInternalDateField.prototype, "handleLangChange", 1);
-__decorateClass([
-  watch("focusedInput", { waitUntilFirstUpdate: true })
-], DSAInternalDateField.prototype, "handleFocusChange", 1);
-DSAInternalDateField = __decorateClass([
-  t("dsa-internal-date-field")
-], DSAInternalDateField);

package/cdn/chunks/chunk.QRL5IEW6.js

@@ -1,31 +0,0 @@
-import {
-  component_styles_default
-} from "./chunk.MQAAYEM3.js";
-import {
-  i
-} from "./chunk.UKK3NS3L.js";
-
-// src/components/divider/divider.styles.ts
-var divider_styles_default = i`
-  ${component_styles_default}
-  :host {
-    --spacing-start: var(--dsa-wc-divider-spacing);
-    --spacing-end: var(--dsa-wc-divider-spacing);
-  }
-  :host(:not([vertical])) {
-    display: block;
-    border-top: solid var(--dsa-wc-divider-width) var(--dsa-wc-divider-color);
-    margin: var(--spacing-start) 0 var(--spacing-end) 0;
-  }
-
-  :host([vertical]) {
-    display: inline-block;
-    height: 100%;
-    border-left: solid var(--dsa-wc-divider-width) var(--dsa-wc-divider-color);
-    margin: 0 var(--spacing-start) 0 var(--spacing-end);
-  }
-`;
-
-export {
-  divider_styles_default
-};