@ds-autonomie/web-components 1.16.2 → 1.18.0

package/dist/chunks/chunk.6K3AQESH.js

@@ -0,0 +1,31 @@
+// src/utilities/date.ts
+function parseDate(dateString, lang) {
+  const dateFormat = new Intl.DateTimeFormat(lang, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  });
+  const dateOrder = dateFormat.formatToParts(new Date()).filter((part) => ["day", "month", "year"].includes(part.type)).map((part) => part.type);
+  const parts = dateString.split(/[-/]/);
+  if (parts.length !== 3)
+    return null;
+  const dateObj = {};
+  dateOrder.forEach((part, index) => {
+    dateObj[part] = parseInt(parts[index], 10);
+  });
+  dateObj.month -= 1;
+  const date = new Date(dateObj.year, dateObj.month, dateObj.day);
+  return isNaN(date.getTime()) ? null : date;
+}
+function getLocaleDateFromISO(isoDate, lang) {
+  if (isoDate === "") {
+    return "";
+  } else {
+    return new Date(isoDate).toLocaleDateString(lang !== "" ? lang : "");
+  }
+}
+
+export {
+  parseDate,
+  getLocaleDateFromISO
+};

package/dist/chunks/{chunk.Z5LJXDHJ.js → chunk.7PFNOFBI.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -36,9 +36,11 @@ var DSAPagination = class extends LoadingStateElement {
     this.mobile = false;
   }
   handlePageButtonClick(event) {
-    if (event.target.value !== -1 && !event.target.selected) {
+    if (event.currentTarget.value !== -1 && !event.currentTarget.selected) {
       this.emit("dsa-page-change", {
-        detail: { page: `${event.target.value}` }
+        detail: {
+          page: `${event.currentTarget.value}`
+        }
       });
     }
   }
@@ -69,6 +71,7 @@ var DSAPagination = class extends LoadingStateElement {
           ?compact=${this.compact}
           value=${pageNumber}
           ?selected=${this.currentPage === pageNumber}
+          @click=${this.handlePageButtonClick}
         ></dsa-pagination-button>
       `;
     });
@@ -110,7 +113,10 @@ var DSAPagination = class extends LoadingStateElement {
   renderItemsDisplayedItemsPerPage() {
     var _a;
     const fromItem = 1 + (this.currentPage - 1) * this.itemsPerPage;
-    const toItem = this.currentPage * this.itemsPerPage;
+    const toItem = Math.min(
+      this.currentPage * this.itemsPerPage,
+      this.totalItems
+    );
     return html`
       <div class="pagination__items">
         <p
@@ -186,10 +192,11 @@ var DSAPagination = class extends LoadingStateElement {
                   navigation-type=${this.navigationType}
                   value="${this.currentPage - 1}"
                   ?disabled=${this.currentPage < 2}
-                  class="pagination__navigation__button--mobile"
+                  class="pagination__navigation__button--mobile previous-button"
+                  @click=${this.handlePageButtonClick}
                 >
-                  <dsa-icon name="chevron_left" slot="prefix"></dsa-icon
-                  >${this.localize.term("previousPage")}
+                  <dsa-icon name="chevron_left" slot="prefix"></dsa-icon>
+                  ${this.localize.term("previousPage")}
                 </dsa-pagination-button>
                 <div class="pagination__navigation__page-input">
                   <dsa-input
@@ -211,19 +218,22 @@ var DSAPagination = class extends LoadingStateElement {
                   navigation-type=${this.navigationType}
                   value="${this.currentPage + 1}"
                   ?disabled=${this.currentPage > this.totalPages - 1}
-                  class="pagination__navigation__button--mobile"
-                  >${this.localize.term("nextPage")}
+                  class="pagination__navigation__button--mobile next-button"
+                  @click=${this.handlePageButtonClick}
+                >
+                  ${this.localize.term("nextPage")}
                   <dsa-icon name="chevron_right" slot="suffix"></dsa-icon>
                 </dsa-pagination-button>
               ` : html`
-                <ul class="button-list" @click=${this.handlePageButtonClick}>
+                <ul class="button-list">
                   <dsa-pagination-button
                     role="listitem"
                     navigation-type=${this.navigationType}
                     ?compact=${this.compact}
                     value="${this.currentPage - 1}"
                     ?disabled=${this.currentPage < 2}
-                    class="first-button"
+                    class="first-button previous-button"
+                    @click=${this.handlePageButtonClick}
                   >
                     <dsa-icon name="chevron_left" slot="prefix"></dsa-icon>
                     ${this.compact ? html`
@@ -241,7 +251,8 @@ var DSAPagination = class extends LoadingStateElement {
                     ?compact=${this.compact}
                     value="${this.currentPage + 1}"
                     ?disabled=${this.currentPage > this.totalPages - 1}
-                    class="last-button"
+                    class="last-button next-button"
+                    @click=${this.handlePageButtonClick}
                   >
                     ${this.compact ? html`<dsa-visually-hidden
                           >${this.localize.term(

package/dist/chunks/{chunk.MZF7MK5G.js → chunk.7UPFI4HE.js}

@@ -111,6 +111,7 @@ var table_of_contents_styles_default = css`
   }
   a[aria-current='true'] {
     color: var(--dsa-wc-table-of-contents-link-color-active);
+    font: var(--dsa-wc-menu-item-font-current);
   }
   @media (forced-colors: active) {
     a:hover,

package/dist/chunks/{chunk.7J3HDP6J.js → chunk.AC3HBDLB.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.D2OFSSMT.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.ORNTGXRO.js → chunk.ARYKCY32.js}

@@ -89,6 +89,7 @@ var download_link_styles_default = css`
 
   .link:focus-visible {
     outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
     border-radius: var(--dsa-wc-focus-ring-radius);
   }
 

package/dist/chunks/{chunk.KKAOTWJY.js → chunk.ATFH7NZ3.js}

@@ -22,8 +22,30 @@ var radio_button_styles_default = css`
     border-color: var(--dsa-wc-toggle-button-border-color);
     color: var(--dsa-wc-toggle-button-color);
     border-width: 1px;
-    boder-style: solid;
+    border-style: solid;
     font-weight: 400;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+    line-height: 130%;
+  }
+  .button--toggle.button--small {
+    min-height: var(--dsa-wc-form-input-height-small);
+  }
+  .button--toggle.button--medium {
+    min-height: var(--dsa-wc-form-input-height);
+  }
+  .button--toggle.button--large {
+    min-height: var(--dsa-wc-form-input-height-large);
+  }
+  .button--toggle.button--small .button__label {
+    padding-block: 4px;
+  }
+  .button--toggle.button--medium .button__label {
+    padding-block: 8px;
+  }
+  .button--toggle.button--large .button__label {
+    padding-block: 10px;
   }
 
   .button--toggle:hover {

package/dist/chunks/{chunk.7KF6Z37I.js → chunk.ATHRVCEP.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.A2AK34DU.js → chunk.B5XEZJD7.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.WFHOSUOX.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.KOW5OFDN.js → chunk.BAASBQN5.js}

@@ -1,10 +1,14 @@
 import {
   filter_date_styles_default
-} from "./chunk.IJMNSKEV.js";
+} from "./chunk.TVVACMGN.js";
 import {
   formatDateRange,
   parseDateRange
 } from "./chunk.BY3RW35M.js";
+import {
+  getLocaleDateFromISO,
+  parseDate
+} from "./chunk.6K3AQESH.js";
 import {
   getDateFromISO,
   getISOFormattedDate
@@ -22,7 +26,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -46,12 +50,14 @@ var DSAFilterDate = class extends ShoelaceElement {
     super(...arguments);
     this.isIconButtonFocused = false;
     this.localize = new LocalizeController(this);
+    this.maxLength = 0;
     this.value = "";
     this.label = "";
     this.buttonLabel = "";
     this.open = false;
     this.hoist = false;
     this.range = false;
+    this.placeholder = "";
     this.disabled = false;
     this.readonly = false;
   }
@@ -61,8 +67,10 @@ var DSAFilterDate = class extends ShoelaceElement {
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
     this.handleSelectedDate = this.handleSelectedDate.bind(this);
     this.shouldDisableDate = this.shouldDisableDate.bind(this);
+    this.currentLocale = this.lang || this.localize.lang();
   }
   firstUpdated() {
+    this.handleLangChange();
     this.updateComplete.then(() => {
       this.datepickerButton.button.setAttribute("aria-expanded", "false");
     });
@@ -91,8 +99,8 @@ var DSAFilterDate = class extends ShoelaceElement {
     }
   }
   handleDefaultKeyDown(event) {
+    event.stopPropagation();
     if (this.open && event.key === "Escape") {
-      event.stopPropagation();
       event.preventDefault();
       this.hide();
       this.datepickerButton.focus({ preventScroll: true });
@@ -111,7 +119,7 @@ var DSAFilterDate = class extends ShoelaceElement {
     }
     const path = event.composedPath();
     const isDatepickerButton = path.some((el) => el === this.datepickerButton);
-    if (isDatepickerButton && (event.key === "Enter" || event.key === " ")) {
+    if (isDatepickerButton && !this.readonly && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       if (!this.open) {
         this.show();
@@ -129,7 +137,7 @@ var DSAFilterDate = class extends ShoelaceElement {
     }
   }
   handleInputKeyDown(event) {
-    if (event.key === " ") {
+    if (event.key === " " && !this.readonly) {
       event.preventDefault();
       this.show();
     }
@@ -139,11 +147,40 @@ var DSAFilterDate = class extends ShoelaceElement {
     this.show();
   }
   handleInput() {
-    this.value = this.range ? formatDateRange(this.filterInputStart.value, this.filterInputEnd.value) : this.filterInputStart.value;
+    this.filterInputStart.setCustomValidity("");
     this.emit("dsa-input");
   }
   handleChange() {
-    this.value = this.range ? formatDateRange(this.filterInputStart.value, this.filterInputEnd.value) : this.filterInputStart.value;
+    let startISODate = "";
+    let endISODate = "";
+    const startDate = parseDate(
+      this.filterInputStart.value,
+      this.currentLocale
+    );
+    if (startDate && !this.shouldDisableDate(startDate)) {
+      startISODate = getISOFormattedDate(startDate);
+    }
+    if (!startDate) {
+      this.filterInputStart.setCustomValidity(
+        this.localize.term("invalidDateFormat")
+      );
+      this.filterInputStart.reportValidity();
+      return;
+    }
+    if (this.range) {
+      const endDate = parseDate(this.filterInputEnd.value, this.currentLocale);
+      if (endDate && !this.shouldDisableDate(endDate)) {
+        endISODate = getISOFormattedDate(endDate);
+      }
+      if (!endDate) {
+        this.filterInputEnd.setCustomValidity(
+          this.localize.term("invalidDateFormat")
+        );
+        this.filterInputEnd.reportValidity();
+        return;
+      }
+    }
+    this.value = this.range ? formatDateRange(startISODate, endISODate) : startISODate;
     this.emit("dsa-change");
   }
   handleInputFocus() {
@@ -210,6 +247,13 @@ var DSAFilterDate = class extends ShoelaceElement {
       this.emit("dsa-after-hide");
     }
   }
+  handleLangChange() {
+    this.currentLocale = this.lang || this.localize.lang();
+    this.maxLength = getLocaleDateFromISO(
+      "2010-10-10",
+      this.currentLocale
+    ).length;
+  }
   /** Shows the listbox. */
   async show() {
     if (this.open) {
@@ -229,8 +273,8 @@ var DSAFilterDate = class extends ShoelaceElement {
     return await waitForEvent(this, "dsa-after-hide");
   }
   render() {
+    var _a;
     const isDateActive = this.value !== "";
-    const isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
     return html`
       <dsa-popup
         class="filter"
@@ -262,10 +306,11 @@ var DSAFilterDate = class extends ShoelaceElement {
 
           <input
             id="input-start"
-            type="date"
+            type="text"
             class="filter-input"
-            .value=${ifDefinedAndNotEmpty(
-      this.range ? parseDateRange(this.value)[0] : this.value
+            .value=${getLocaleDateFromISO(
+      this.range ? parseDateRange(this.value)[0] : this.value,
+      this.currentLocale
     )}
             @input=${this.handleInput}
             @change=${this.handleChange}
@@ -280,18 +325,19 @@ var DSAFilterDate = class extends ShoelaceElement {
             ?readonly=${this.readonly}
             title=${this.range ? this.localize.term("startDate") : this.label}
             aria-label=${this.range ? this.localize.term("startDate") : this.label}
-            aria-describedby="firefox-limitation"
-            min=${ifDefined(this.min)}
-            max=${ifDefined(this.max)}
-            tabindex=${ifDefined(this.readonly ? "-1" : void 0)}
+            maxlength=${this.maxLength}
+            placeholder=${this.placeholder}
           />
           ${this.range ? html`
                 <span class="filter-separator">-</span>
                 <input
                   id="input-end"
-                  type="date"
+                  type="text"
                   class="filter-input"
-                  .value=${ifDefinedAndNotEmpty(parseDateRange(this.value)[1])}
+                  .value=${getLocaleDateFromISO(
+      (_a = parseDateRange(this.value)[1]) != null ? _a : "",
+      this.currentLocale
+    )}
                   @input=${this.handleInput}
                   @change=${this.handleChange}
                   @keydown=${this.handleInputKeyDown}
@@ -305,17 +351,10 @@ var DSAFilterDate = class extends ShoelaceElement {
                   ?readonly=${this.readonly}
                   title=${this.localize.term("endDate")}
                   aria-label=${this.localize.term("endDate")}
-                  aria-describedby="firefox-limitation"
-                  min=${ifDefined(this.min)}
-                  max=${ifDefined(this.max)}
-                  tabindex=${ifDefined(this.readonly ? "-1" : void 0)}
+                  maxlength=${this.maxLength}
+                  placeholder=${this.placeholder}
                 />
               ` : ""}
-          ${isFirefox ? html`
-                <dsa-visually-hidden id="firefox-limitation">
-                  ${this.localize.term("firefoxLimitation", this.buttonLabel)}
-                </dsa-visually-hidden>
-              ` : ""}
           <dsa-icon-button
             part="date-button"
             class="datepicker-button"
@@ -334,9 +373,10 @@ var DSAFilterDate = class extends ShoelaceElement {
         <div id="filter-panel" class="filter-panel">
           <dsa-calendar
             class="calendar"
-            .value=${ifDefinedAndNotEmpty(this.value)}
+            .value=${ifDefined(this.value)}
             ?range=${ifDefined(this.range)}
             .disableDate=${this.shouldDisableDate}
+            start-date=${ifDefined(this.calendarStartDate)}
           ></dsa-calendar>
         </div>
       </dsa-popup>
@@ -362,6 +402,12 @@ __decorateClass([
 __decorateClass([
   query(".datepicker-button")
 ], DSAFilterDate.prototype, "datepickerButton", 2);
+__decorateClass([
+  state()
+], DSAFilterDate.prototype, "maxLength", 2);
+__decorateClass([
+  state()
+], DSAFilterDate.prototype, "currentLocale", 2);
 __decorateClass([
   property({ reflect: true })
 ], DSAFilterDate.prototype, "value", 2);
@@ -380,6 +426,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAFilterDate.prototype, "range", 2);
+__decorateClass([
+  property()
+], DSAFilterDate.prototype, "lang", 2);
+__decorateClass([
+  property()
+], DSAFilterDate.prototype, "placeholder", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAFilterDate.prototype, "disabled", 2);
@@ -392,12 +444,18 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSAFilterDate.prototype, "max", 2);
+__decorateClass([
+  property({ attribute: "calendar-start-date" })
+], DSAFilterDate.prototype, "calendarStartDate", 2);
 __decorateClass([
   watch(["disabled", "readonly"], { waitUntilFirstUpdate: true })
 ], DSAFilterDate.prototype, "handleDisabledChange", 1);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], DSAFilterDate.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("lang")
+], DSAFilterDate.prototype, "handleLangChange", 1);
 DSAFilterDate = __decorateClass([
   customElement("dsa-filter-date")
 ], DSAFilterDate);

package/dist/chunks/{chunk.BROIFXIH.js → chunk.BCJMEP6L.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";