@ds-autonomie/web-components 2.14.0 → 2.14.1

package/dist/chunks/chunk.KWGL62GY.js

@@ -0,0 +1,547 @@
+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
+};

package/dist/chunks/chunk.LEZF7PY5.js

@@ -0,0 +1,116 @@
+import {
+  avatar_styles_default
+} from "./chunk.NHRDZGLI.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  DSAIcon
+} from "./chunk.Y2L4ZHNY.js";
+import {
+  watch
+} from "./chunk.QB2NJE2Y.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/avatar/avatar.ts
+import { html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var DSAAvatar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasError = false;
+    this.image = "";
+    this.label = "";
+    this.initials = "";
+    this.loading = "eager";
+    this.size = "medium";
+  }
+  handleImageChange() {
+    this.hasError = false;
+  }
+  render() {
+    const avatarWithImage = html`
+      <img
+        part="image"
+        class="avatar__image"
+        src="${this.image}"
+        loading="${this.loading}"
+        alt=""
+        @error="${() => this.hasError = true}"
+      />
+    `;
+    let avatarWithoutImage = html``;
+    if (this.initials) {
+      avatarWithoutImage = html`<div
+        part="initials"
+        aria-hidden="true"
+        class="avatar__initials"
+      >
+        ${this.initials}
+      </div>`;
+    } else {
+      avatarWithoutImage = html`
+        <div part="icon" class="avatar__icon" aria-hidden="true">
+          <slot name="icon">
+            <dsa-icon name="person_filled" library="system"></dsa-icon>
+          </slot>
+        </div>
+      `;
+    }
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      avatar: true,
+      "avatar--small": this.size === "small",
+      "avatar--medium": this.size === "medium",
+      "avatar--large": this.size === "large",
+      "avatar--x-large": this.size === "x-large"
+    })}
+        role=${ifDefined(this.label ? "img" : void 0)}
+        aria-label=${ifDefinedAndNotEmpty(this.label)}
+      >
+        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
+      </div>
+    `;
+  }
+};
+DSAAvatar.styles = avatar_styles_default;
+DSAAvatar.dependencies = {
+  "dsa-icon": DSAIcon
+};
+__decorateClass([
+  state()
+], DSAAvatar.prototype, "hasError", 2);
+__decorateClass([
+  property()
+], DSAAvatar.prototype, "image", 2);
+__decorateClass([
+  property()
+], DSAAvatar.prototype, "label", 2);
+__decorateClass([
+  property()
+], DSAAvatar.prototype, "initials", 2);
+__decorateClass([
+  property()
+], DSAAvatar.prototype, "loading", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAAvatar.prototype, "size", 2);
+__decorateClass([
+  watch("image")
+], DSAAvatar.prototype, "handleImageChange", 1);
+DSAAvatar = __decorateClass([
+  customElement("dsa-avatar")
+], DSAAvatar);
+
+export {
+  DSAAvatar
+};