@ds-autonomie/web-components 2.7.0 → 2.8.0

package/cdn/chunks/chunk.QRL5IEW6.js

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

package/cdn/chunks/chunk.R45HP3PR.js

@@ -0,0 +1,33 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/navbar/navbar.styles.ts
+var navbar_styles_default = i`
+  ${component_styles_default}
+
+  .navbar__list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  :host([mobile]) .navbar__list {
+    flex-direction: column;
+  }
+  :host([mobile]) nav,
+  :host([mobile]) ::slotted(*) {
+    width: 100%;
+  }
+
+  ::slotted(.hidden) {
+    display: none;
+  }
+`;
+
+export {
+  navbar_styles_default
+};

package/cdn/chunks/chunk.RBCREK7M.js

@@ -0,0 +1,445 @@
+import {
+  filter_date_styles_default
+} from "./chunk.L57YXDBH.js";
+import {
+  FilterBase
+} from "./chunk.EXKO4BNS.js";
+import {
+  l
+} from "./chunk.LDYYA5WE.js";
+import {
+  formatDateRange,
+  getDateFromISO,
+  getISOFormattedDate,
+  getLocaleDateFromISO,
+  isValidDate,
+  parseDateRange
+} from "./chunk.OYVF3HNG.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.SUUV7E4I.js";
+import {
+  o
+} from "./chunk.XED65RH5.js";
+import {
+  e2
+} from "./chunk.JY4LUWQC.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  e,
+  n,
+  r,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/filter-date/filter-date.ts
+var DSAFilterDate = class extends FilterBase {
+  constructor() {
+    super(...arguments);
+    this.isIconButtonFocused = false;
+    this.isStartDateValid = true;
+    this.isEndDateValid = true;
+    this.value = "";
+    this.buttonLabel = "";
+    this.range = false;
+    this.placeholder = "";
+    this.hideCalendarButton = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleSelectedDate = this.handleSelectedDate.bind(this);
+    this.shouldDisableDate = this.shouldDisableDate.bind(this);
+    this.handleLangChange();
+    this.currentLocale = this.lang || this.localize.lang();
+  }
+  firstUpdated() {
+    super.firstUpdated();
+    this.updateComplete.then(() => {
+      if (!this.drawer && this.filterTrigger) {
+        this.filterTrigger.button.setAttribute("aria-expanded", "false");
+      }
+    });
+  }
+  handleSelectedDate(event) {
+    const { detail } = event;
+    if (!this.range || detail.dates.length !== 1) {
+      this.value = detail.dates.map((date) => getISOFormattedDate(date)).join(",");
+      if (!this.drawer) {
+        this.hide();
+        this.filterTrigger.focus();
+      }
+      this.emit("dsa-change");
+    }
+  }
+  addOpenListeners() {
+    super.addOpenListeners();
+    this.addEventListener("dsa-date-selected", this.handleSelectedDate);
+  }
+  removeOpenListeners() {
+    super.removeOpenListeners();
+    this.removeEventListener("dsa-date-selected", this.handleSelectedDate);
+  }
+  handleChange() {
+    var _a, _b;
+    let startISODate = "";
+    let endISODate = "";
+    this.isStartDateValid = this.filterInputStart.validity.valid;
+    this.isEndDateValid = (_b = (_a = this.filterInputEnd) == null ? void 0 : _a.validity.valid) != null ? _b : true;
+    const startDate = isValidDate(this.filterInputStart.value) && getDateFromISO(this.filterInputStart.value);
+    if (startDate && this.shouldDisableDate(startDate)) {
+      this.isStartDateValid = false;
+    }
+    startISODate = this.filterInputStart.value;
+    if (this.range) {
+      const endDate = isValidDate(this.filterInputEnd.value) && getDateFromISO(this.filterInputEnd.value);
+      if (endDate && this.shouldDisableDate(endDate) || startDate && endDate < startDate) {
+        this.isEndDateValid = false;
+      }
+      endISODate = this.filterInputEnd.value;
+    }
+    this.errorMessages = [
+      ...!this.isStartDateValid ? [this.localize.term(this.range ? "invalidStartDate" : "invalidDate")] : [],
+      ...!this.isEndDateValid ? [this.localize.term("invalidEndDate")] : []
+    ];
+    this.value = this.range ? formatDateRange(startISODate, endISODate) : startISODate;
+    this.emit("dsa-change");
+  }
+  // (Drawer) Method to handle changes in the sub component
+  handleChangeInDrawer() {
+    var _a, _b;
+    this.value = (_b = (_a = this.drawerFilter) == null ? void 0 : _a.value) != null ? _b : "";
+  }
+  handleIconButtonFocus() {
+    this.isIconButtonFocused = true;
+    this.emit("dsa-focus");
+  }
+  handleIconButtonBlur() {
+    this.isIconButtonFocused = false;
+    this.emit("dsa-blur");
+  }
+  handleReset() {
+    this.value = "";
+    this.drawerFilter.filterInputStart.clear();
+    this.drawerFilter.filterInputEnd.clear();
+    this.errorMessages = [];
+    this.drawerFilter.filterInputStart.focus({ preventScroll: true });
+    this.emit("dsa-change");
+  }
+  getFullDateFromISO(date) {
+    return getDateFromISO(date).toLocaleDateString(
+      this.lang || this.localize.lang(),
+      {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      }
+    );
+  }
+  getDescriptionText(item) {
+    const errorMessage = this.errorMessages.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 = [
+      ...this.errorMessages.length > 0 ? [errorMessage] : [],
+      ...this.value ? [selectedDateLabel] : []
+    ];
+    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;
+  }
+  handleFilterDateOpenChange() {
+    if (this.drawer) {
+      return;
+    }
+    if (this.open) {
+      this.filterTrigger.button.setAttribute("aria-expanded", "true");
+    } else {
+      this.filterTrigger.button.setAttribute("aria-expanded", "false");
+    }
+  }
+  handleLangChange() {
+    this.currentLocale = this.lang || this.localize.lang();
+  }
+  handleHideCalendarButtonChange() {
+    if (!this.drawer && this.hideCalendarButton) {
+      this.hide();
+    }
+  }
+  renderTrigger() {
+    var _a;
+    if (!this.label) {
+      a11yWarning(
+        "<dsa-filter-date> require a label attribute for accessibility"
+      );
+    }
+    if (!this.buttonLabel) {
+      a11yWarning(
+        "<dsa-filter-date> require a button-label attribute for accessibility"
+      );
+    }
+    if (this.drawer) {
+      const displayedValue = this.value ? `
+          ${getLocaleDateFromISO(
+        this.range ? parseDateRange(this.value)[0] : this.value,
+        this.currentLocale
+      )}
+          ${this.range ? " - " : ""}
+          ${this.range ? getLocaleDateFromISO(
+        parseDateRange(this.value)[1],
+        this.currentLocale
+      ) : ""}` : "";
+      return x` <dsa-filter-button
+        slot="anchor"
+        class="filter__trigger"
+        label=${this.label}
+        selected-option=${displayedValue}
+        selection-count=${this.value !== "" ? 1 : 0}
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls="filter__panel"
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?drawer=${this.drawer}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @mousedown=${this.handleFilterTriggerMouseDown}
+      ></dsa-filter-button>`;
+    }
+    const isDateActive = this.value !== "";
+    return x`
+      <fieldset
+        slot="anchor"
+        part="filter-button"
+        class=${e2({
+      "filter-button": true,
+      "filter-button--date-active": isDateActive,
+      "filter-button--opened": this.open,
+      "filter-button--readonly": this.readonly,
+      "filter-button--disabled": this.disabled,
+      "filter-button--icon-focused": this.isIconButtonFocused,
+      "filter-button--no-calendar": this.hideCalendarButton
+    })}
+      >
+        <legend part="filter-label" id="filter-label" class="filter-label">
+          ${this.label}${" : "}
+        </legend>
+
+        <dsa-internal-date-field
+          id="input-start"
+          class=${e2({
+      "filter-input": true,
+      "filter-input--invalid": !this.isStartDateValid
+    })}
+          .value=${l(
+      this.range ? parseDateRange(this.value)[0] : this.value
+    )}
+          @dsa-change=${this.handleChange}
+          ?disabled=${this.disabled}
+          aria-disabled=${o(
+      this.disabled || this.readonly ? "true" : void 0
+    )}
+          ?readonly=${this.readonly}
+          parent-name=${this.range ? `${this.label} - ${this.localize.term("startDate")}` : this.label}
+          description=${this.getDescriptionText("start")}
+          lang=${o(this.lang)}
+        ></dsa-internal-date-field>
+        ${this.range ? x`
+              <span class="filter-separator">-</span>
+              <dsa-internal-date-field
+                id="input-end"
+                class=${e2({
+      "filter-input": true,
+      "filter-input--invalid": !this.isEndDateValid
+    })}
+                .value=${(_a = parseDateRange(this.value)[1]) != null ? _a : ""}
+                @dsa-change=${this.handleChange}
+                ?disabled=${this.disabled}
+                aria-disabled=${o(
+      this.disabled || this.readonly ? "true" : void 0
+    )}
+                ?readonly=${this.readonly}
+                parent-name=${`${this.label} - ${this.localize.term(
+      "endDate"
+    )}`}
+                description=${this.getDescriptionText("end")}
+                min=${l(parseDateRange(this.value)[0])}
+                lang=${o(this.lang)}
+              ></dsa-internal-date-field>
+            ` : ""}
+        ${!this.hideCalendarButton ? x`
+              <dsa-icon-button
+                part="date-button"
+                class="filter__trigger"
+                type="button"
+                size="small"
+                name="calendar_today"
+                @focus=${this.handleIconButtonFocus}
+                @blur=${this.handleIconButtonBlur}
+                label=${ifDefinedAndNotEmpty(this.buttonLabel)}
+                description=${this.getDescriptionText("calendarButton")}
+                ?disabled=${this.disabled || this.readonly}
+                @mousedown=${this.handleFilterTriggerMouseDown}
+                library="system"
+              >
+              </dsa-icon-button>
+            ` : ""}
+      </fieldset>
+    `;
+  }
+  renderDrawerPanelContent() {
+    return x`
+      <div class="filter__content">
+        <dsa-filter-date
+          id="drawer__filter"
+          button-label=${this.buttonLabel}
+          calendar-start-date=${this.calendarStartDate}
+          hide-calendar-button=${this.hideCalendarButton}
+          hoist
+          label=${this.label}
+          lang=${this.lang}
+          max=${ifDefinedAndNotEmpty(this.max)}
+          min=${ifDefinedAndNotEmpty(this.min)}
+          placeholder=${this.placeholder}
+          placement="bottom"
+          ?range=${this.range}
+          value=${this.value}
+          @dsa-change=${this.handleChangeInDrawer}
+        ></dsa-filter-date>
+      </div>
+      <div class="filter__footer">
+        <dsa-button
+          variant="tertiary"
+          size="small"
+          class="reset__button"
+          @click=${this.handleReset}
+          ?disabled=${this.value === ""}
+        >
+          <dsa-icon
+            name="restart_alt"
+            slot="prefix"
+            library="system"
+          ></dsa-icon>
+          ${this.localize.term("filterReset")}
+        </dsa-button>
+      </div>
+    `;
+  }
+  renderPanelContent() {
+    if (this.drawer) {
+      return this.renderDrawerPanelContent();
+    } else
+      return x`
+        <dsa-calendar
+          class="calendar"
+          .value=${o(this.value)}
+          ?range=${o(this.range)}
+          .disableDate=${this.shouldDisableDate}
+          start-date=${o(this.calendarStartDate)}
+        ></dsa-calendar>
+      `;
+  }
+};
+DSAFilterDate.styles = filter_date_styles_default;
+__decorateClass([
+  r()
+], DSAFilterDate.prototype, "isIconButtonFocused", 2);
+__decorateClass([
+  e(".calendar")
+], DSAFilterDate.prototype, "calendar", 2);
+__decorateClass([
+  e("#input-start")
+], DSAFilterDate.prototype, "filterInputStart", 2);
+__decorateClass([
+  e("#input-end")
+], DSAFilterDate.prototype, "filterInputEnd", 2);
+__decorateClass([
+  e(".filter__trigger")
+], DSAFilterDate.prototype, "filterTrigger", 2);
+__decorateClass([
+  e("#drawer__filter")
+], DSAFilterDate.prototype, "drawerFilter", 2);
+__decorateClass([
+  r()
+], DSAFilterDate.prototype, "currentLocale", 2);
+__decorateClass([
+  r()
+], DSAFilterDate.prototype, "isStartDateValid", 2);
+__decorateClass([
+  r()
+], DSAFilterDate.prototype, "isEndDateValid", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSAFilterDate.prototype, "value", 2);
+__decorateClass([
+  n({ attribute: "button-label" })
+], DSAFilterDate.prototype, "buttonLabel", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAFilterDate.prototype, "range", 2);
+__decorateClass([
+  n()
+], DSAFilterDate.prototype, "lang", 2);
+__decorateClass([
+  n()
+], DSAFilterDate.prototype, "placeholder", 2);
+__decorateClass([
+  n()
+], DSAFilterDate.prototype, "min", 2);
+__decorateClass([
+  n()
+], DSAFilterDate.prototype, "max", 2);
+__decorateClass([
+  n({ attribute: "calendar-start-date" })
+], DSAFilterDate.prototype, "calendarStartDate", 2);
+__decorateClass([
+  n({ attribute: "hide-calendar-button", type: Boolean })
+], DSAFilterDate.prototype, "hideCalendarButton", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSAFilterDate.prototype, "handleFilterDateOpenChange", 1);
+__decorateClass([
+  watch("lang")
+], DSAFilterDate.prototype, "handleLangChange", 1);
+__decorateClass([
+  watch("hideCalendarButton")
+], DSAFilterDate.prototype, "handleHideCalendarButtonChange", 1);
+DSAFilterDate = __decorateClass([
+  t("dsa-filter-date")
+], DSAFilterDate);
+
+export {
+  DSAFilterDate
+};

package/cdn/chunks/chunk.RGLXYSXF.js

@@ -0,0 +1,83 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/avatar/avatar.styles.ts
+var avatar_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    background-color: var(--dsa-wc-avatar-background-color);
+    color: var(--dsa-wc-avatar-color);
+    user-select: none;
+    vertical-align: middle;
+    border-radius: var(--dsa-wc-avatar-border-radius);
+    border: var(--dsa-wc-internal-avatar-border, 'inherit');
+  }
+
+  .avatar.avatar--small {
+    width: var(--dsa-wc-avatar-small-size);
+    height: var(--dsa-wc-avatar-small-size);
+    font: var(--dsa-wc-avatar-small-font);
+  }
+
+  .avatar.avatar--medium {
+    width: var(--dsa-wc-avatar-medium-size);
+    height: var(--dsa-wc-avatar-medium-size);
+    font: var(--dsa-wc-avatar-medium-font);
+  }
+
+  .avatar.avatar--large {
+    width: var(--dsa-wc-avatar-large-size);
+    height: var(--dsa-wc-avatar-large-size);
+    font: var(--dsa-wc-avatar-large-font);
+  }
+
+  .avatar.avatar--x-large {
+    width: var(--dsa-wc-avatar-x-large-size);
+    height: var(--dsa-wc-avatar-x-large-size);
+    font: var(--dsa-wc-avatar-x-large-font);
+  }
+
+  .avatar__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .avatar__initials {
+    line-height: 1;
+    text-transform: uppercase;
+  }
+
+  .avatar__image {
+    border-radius: var(--dsa-wc-avatar-border-radius);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    overflow: hidden;
+  }
+`;
+
+export {
+  avatar_styles_default
+};