@ds-autonomie/web-components 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @ds-autonomie/web-components
 
+## 1.6.0
+
+### Minor Changes
+
+- 9c16827: `error-message-panel`: implémentation du panneau de message d'erreur utilisable lorsqu'une page n'existe pas
+- e86df51: `download-link`, `download-card` : implémentation des composants download-link et download-card
+- 8f5529f: `combobox` : utilisation de l'évenement dsa-input pour la recherche asynchrone
+
+### Patch Changes
+
+- cc3eb57: `skip-links`: correction d'un bug d'affichage des skip-link-item
+- 88054cd: `accordion` : ajout de la possibilité d'avoir un aria-level sur l'en-tête
+- Updated dependencies [e86df51]
+  - @ds-autonomie/assets@1.2.0
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/chunks/{chunk.AO3M5GSN.js → chunk.2SUJL5O6.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.NHRDZGLI.js";
 import {
   DSAIcon
-} from "./chunk.VRU3XH45.js";
+} from "./chunk.M3FN3PFT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.ZU3MRZA4.js → chunk.5YABZV2L.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.DXQY7NLW.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.XV2S7PIY.js → chunk.6DSM44NV.js}

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

package/dist/chunks/{chunk.5ND4OP7Q.js → chunk.6SWOU4CL.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.OVCI74KS.js → chunk.6Y5VNWAK.js}

@@ -1,12 +1,6 @@
 import {
   DSASelect
-} from "./chunk.INCMVGXU.js";
-import {
-  PhoneConfig
-} from "./chunk.UCJGKOXX.js";
-import {
-  input_phone_styles_default
-} from "./chunk.ZR7AGQFC.js";
+} from "./chunk.WLJH2IWB.js";
 import {
   frenchFlag,
   frenchNumberPrefix,
@@ -18,6 +12,12 @@ import {
   rawValueToMaskedValue,
   stripSpecialChars
 } from "./chunk.7OLEA3GQ.js";
+import {
+  PhoneConfig
+} from "./chunk.UCJGKOXX.js";
+import {
+  input_phone_styles_default
+} from "./chunk.ZR7AGQFC.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";

package/dist/chunks/{chunk.E7NM6WTF.js → chunk.7F5X7SQN.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/chunk.ATDDIVPX.js

@@ -0,0 +1,87 @@
+import {
+  error_message_panel_styles_default
+} from "./chunk.KUXAIXES.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.CKDL37GT.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/error-message-panel/error-message-panel.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSAErrorMessagePanel = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "description",
+      "action",
+      "error-code"
+    );
+    this.errorCode = "";
+  }
+  render() {
+    const hasDescription = this.hasSlotController.test("description");
+    const hasAction = this.hasSlotController.test("action");
+    const hasErrorCode = this.errorCode ? true : this.hasSlotController.test("error-code");
+    return html`
+      <div part="base">
+        <div class="top-left-quarter-circle">
+          <svg viewBox="0 0 150 60" width="150" height="60">
+            <path
+              fill="#D4D90D"
+              d="M150-39.398V-90c-20.118 0-69.498 9.036-106.075 45.18C7.347-8.674-.578 40.12.032 60h49.38c0-73.735 67.059-96.988 100.588-99.398Z"
+            />
+          </svg>
+        </div>
+        <div
+          class=${classMap({
+      "error-message-panel": true,
+      "error-message-panel--has-description": hasDescription,
+      "error-message-panel--has-action": hasAction,
+      "error-message-panel--has-error-code": hasErrorCode
+    })}
+        >
+          <slot part="title" class="error-message-panel__title"></slot>
+          <p part="error-code">
+            ${this.localize.term("errorMessagePanelCodePrefix")}<slot
+              name="error-code"
+              >${this.errorCode}</slot
+            >
+          </p>
+          <slot name="description" part="description"></slot>
+          <slot name="action" part="action"></slot>
+        </div>
+        <div class="bottom-right-quarter-circle">
+          <svg viewBox="0 0 241 101" width="241" height="101">
+            <path
+              fill="#530ABC"
+              d="M0 158.889V241c35.19-2.133 104.504-17.062 161.249-73.58C219.783 109.12 236.735 47.987 241 0h-78.912C143.96 111.969 53.394 154.984 0 158.889Z"
+            />
+          </svg>
+        </div>
+      </div>
+    `;
+  }
+};
+DSAErrorMessagePanel.styles = error_message_panel_styles_default;
+__decorateClass([
+  property({ attribute: "error-code" })
+], DSAErrorMessagePanel.prototype, "errorCode", 2);
+DSAErrorMessagePanel = __decorateClass([
+  customElement("dsa-error-message-panel")
+], DSAErrorMessagePanel);
+
+export {
+  DSAErrorMessagePanel
+};

package/dist/chunks/{chunk.5DKPV25M.js → chunk.B5NS5VQR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.FIGO7UV2.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.HCQNPYQZ.js → chunk.CBFLGIED.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.OIS5HMFT.js → chunk.CHM74JXS.js}

@@ -1,6 +1,6 @@
 import {
   skip_links_styles_default
-} from "./chunk.DX25IW4S.js";
+} from "./chunk.ZC74GTBL.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -26,7 +26,20 @@ var DSASkipLinks = class extends ShoelaceElement {
   }
   // Gets an array of all <dsa-skip-link-item> elements
   getAllLinks() {
-    return [...this.querySelectorAll(LINK_ITEM_TAG)];
+    const linksNode = this.querySelectorAll(LINK_ITEM_TAG);
+    const allLinks = [];
+    linksNode.forEach((option) => {
+      const clonedOption = option.cloneNode(true);
+      allLinks.push(clonedOption);
+    });
+    return allLinks;
+  }
+  handleDefaultSlotChange() {
+    if (customElements.get(LINK_ITEM_TAG)) {
+      this.allLinks = this.getAllLinks();
+    } else {
+      customElements.whenDefined(LINK_ITEM_TAG).then(() => this.handleDefaultSlotChange());
+    }
   }
   render() {
     return html`
@@ -38,6 +51,12 @@ var DSASkipLinks = class extends ShoelaceElement {
     })}
           </ul>
         </nav>
+        <slot
+          tabindex="-1"
+          class="slot_links"
+          @slotchange=${this.handleDefaultSlotChange}
+        >
+        </slot>
       </div>
     `;
   }

package/dist/chunks/{chunk.RVUFDCSS.js → chunk.CICCL52W.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.EMIT7S33.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.7BYKP4SA.js → chunk.CKDL37GT.js}

@@ -43,6 +43,7 @@ var translation = {
   stepCompleted: "\xC9tape valid\xE9e",
   stepInProgress: "\xC9tape en cours",
   stepError: "\xC9tape en erreur",
+  errorMessagePanelCodePrefix: "Code d'erreur: ",
   // countries
   fr_FR: "France",
   fr_GP: "Guadeloupe",
@@ -100,6 +101,7 @@ var translation2 = {
   stepCompleted: "Step completed",
   stepInProgress: "Step in progress",
   stepError: "Step in error",
+  errorMessagePanelCodePrefix: "Error code: ",
   // countries
   fr_FR: "France",
   fr_GP: "Guadeloupe",

package/dist/chunks/{chunk.TUZ72ZDQ.js → chunk.CSQ2UP6E.js}

@@ -1,10 +1,10 @@
-import {
-  input_styles_default
-} from "./chunk.AQC66RY2.js";
 import {
   getOverridenIconDetails,
   isPrefixIconOverriden
 } from "./chunk.KBT2EKLF.js";
+import {
+  input_styles_default
+} from "./chunk.AQC66RY2.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -16,7 +16,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.WF42CVOM.js → chunk.DDLGH65N.js}

@@ -1,3 +1,6 @@
+import {
+  drawer_styles_default
+} from "./chunk.DXVNWE2M.js";
 import {
   Modal
 } from "./chunk.ISAFRNR2.js";
@@ -5,9 +8,6 @@ import {
   lockBodyScrolling,
   unlockBodyScrolling
 } from "./chunk.EMIT7S33.js";
-import {
-  drawer_styles_default
-} from "./chunk.DXVNWE2M.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.DXP3BNWO.js → chunk.DUJFQEVS.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.WFHOSUOX.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";

package/dist/chunks/chunk.EVHNFCQF.js

@@ -0,0 +1,121 @@
+// src/components/download-link/download-link.styles.ts
+import { css } from "lit";
+var download_link_styles_default = css`
+  .document-link {
+    font: var(--dsa-wc-link-font);
+    --icon-size: var(--dsa-spacing-24);
+  }
+  .document-link--x-large {
+    font: var(--dsa-wc-link-font-x-large);
+    --icon-size: var(--dsa-spacing-32);
+  }
+  .document-link--large {
+    font: var(--dsa-wc-link-font-large);
+    --icon-size: 28px;
+  }
+  .document-link--small {
+    font: var(--dsa-wc-link-font-small);
+    --icon-size: 20px;
+  }
+  .document-link--x-small {
+    font: var(--dsa-wc-link-font-x-small);
+    --icon-size: var(--dsa-spacing-16);
+  }
+  .document-link--2x-small {
+    font: var(--dsa-wc-link-font-2x-small);
+    --icon-size: 14px;
+  }
+
+  .link {
+    color: var(--dsa-wc-link-on-base-color);
+    text-decoration: none;
+    border-bottom-width: var(--dsa-wc-link-underline-thickness);
+    border-bottom-style: solid;
+    transition: border-width 0.1s ease-out;
+  }
+
+  .link--on-contrasted {
+    color: var(--dsa-wc-link-on-contrasted-color);
+  }
+  .link--on-layer {
+    color: var(--dsa-wc-link-on-layer-color);
+  }
+  .link--floating-menu {
+    color: var(--dsa-wc-link-floating-menu-color);
+  }
+
+  .link:hover {
+    color: var(--dsa-wc-link-hover-on-base-color);
+    border-bottom-width: calc(
+      var(--dsa-wc-link-underline-thickness) *
+        var(--dsa-wc-link-hover-underline-thickness-multiplier)
+    );
+  }
+  .link--on-contrasted:hover {
+    color: var(--dsa-wc-link-hover-on-contrasted-color);
+  }
+  .link--on-layer:hover {
+    color: var(--dsa-wc-link-hover-on-layer-color);
+  }
+  .link--floating-menu:hover {
+    color: var(--dsa-wc-link-hover-floating-menu-color);
+  }
+
+  .link:visited {
+    color: var(--dsa-wc-link-visited-on-base-color);
+  }
+  .link--on-contrasted:visited {
+    color: var(--dsa-wc-link-visited-on-contrasted-color);
+  }
+  .link--on-layer:visited {
+    color: var(--dsa-wc-link-visited-on-layer-color);
+  }
+  .link--floating-menu:visited {
+    color: var(--dsa-wc-link-visited-floating-menu-color);
+  }
+
+  .link:active {
+    color: var(--dsa-wc-link-active-on-base-color);
+  }
+  .link--on-contrasted:active {
+    color: var(--dsa-wc-link-active-on-contrasted-color);
+  }
+  .link--on-layer:active {
+    color: var(--dsa-wc-link-active-on-layer-color);
+  }
+  .link--floating-menu:active {
+    color: var(--dsa-wc-link-active-floating-menu-color);
+  }
+
+  .link:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    border-radius: var(--dsa-wc-focus-ring-radius);
+  }
+
+  .document-info {
+    color: var(--dsa-wc-link-document-info-on-base-color);
+    margin-top: var(--dsa-spacing-8);
+    margin-bottom: 0;
+    pointer-events: none;
+  }
+  .document-info--on-layer {
+    color: var(--dsa-wc-link-document-info-on-layer-color);
+  }
+  .document-info--on-contrasted {
+    color: var(--dsa-wc-link-document-info-on-contrasted-color);
+  }
+  .document-info--floating-menu {
+    color: var(--dsa-wc-link-document-info-floating-menu-color);
+  }
+
+  dsa-icon {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    margin-inline-start: var(--dsa-spacing-8);
+    vertical-align: bottom;
+  }
+`;
+
+export {
+  download_link_styles_default
+};

package/dist/chunks/{chunk.FSXPFNBX.js → chunk.FFFHQKNB.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.LC54322H.js → chunk.FYTGBKGY.js}

@@ -25,6 +25,10 @@ var accordion_styles_default = css`
   }
 
   .accordion__header {
+    border-radius: inherit;
+  }
+
+  .accordion__header-button {
     display: flex;
     align-items: center;
     border-radius: inherit;
@@ -40,19 +44,19 @@ var accordion_styles_default = css`
     border-color: var(--dsa-wc-accordion-hover-border-color);
   }
 
-  .accordion:hover:not(.accordion--disabled) .accordion__header {
+  .accordion:hover:not(.accordion--disabled) .accordion__header-button {
     background-color: var(--dsa-wc-accordion-header-hover-background-color);
   }
 
-  .accordion__header:not(accordion--open):focus-visible {
+  .accordion__header-button:not(accordion--open):focus-visible {
     outline: none;
   }
 
-  .accordion--disabled .accordion__header {
+  .accordion--disabled .accordion__header-button {
     cursor: not-allowed;
   }
 
-  .accordion--disabled .accordion__header:focus-visible {
+  .accordion--disabled .accordion__header-button:focus-visible {
     outline: none;
     box-shadow: none;
   }

package/dist/chunks/{chunk.YZHYOXYA.js → chunk.HCI6BR7B.js}

@@ -1,6 +1,3 @@
-import {
-  debounce
-} from "./chunk.HRBNFVC5.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -29,7 +26,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -58,11 +55,11 @@ var DSACombobox = class extends ShoelaceElement {
     );
     this.localize = new LocalizeController(this);
     this.hasVisualFocus = false;
-    this.fetchingState = "success";
     this.displayLabel = "";
     this.selectedOptions = [];
     this.allOptions = [];
     this.filteredOptions = [];
+    this.debounceTimerId = null;
     this.name = "";
     this.title = "";
     this.open = false;
@@ -85,8 +82,8 @@ var DSACombobox = class extends ShoelaceElement {
     this.items = void 0;
     this.multiple = false;
     this.maxOptionsVisible = 3;
-    this.onSearch = void 0;
     this.debounceTimeout = 300;
+    this.fetchingState = "success";
   }
   /** Gets the validity state object */
   get validity() {
@@ -96,18 +93,13 @@ var DSACombobox = class extends ShoelaceElement {
   get validationMessage() {
     return this.valueInput.validationMessage;
   }
-  async connectedCallback() {
-    var _a;
+  connectedCallback() {
     super.connectedCallback();
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.open = false;
-    if (this.onSearch !== void 0) {
-      this.allOptions = (_a = await this.getRemoteOptions()) != null ? _a : [];
-    } else {
-      this.allOptions = this.getAllOptions();
-    }
+    this.allOptions = this.getAllOptions();
     this.filteredOptions = [...this.allOptions];
   }
   /** Input events */
@@ -153,41 +145,23 @@ var DSACombobox = class extends ShoelaceElement {
     }
     this.filterOptions(this.displayLabel);
   }
-  async handleInput() {
-    var _a, _b;
+  handleInput() {
+    var _a;
     this.displayLabel = this.displayInput.value;
     this.show();
-    this.emit("dsa-input");
+    if (this.debounceTimerId !== null) {
+      clearTimeout(this.debounceTimerId);
+    }
+    this.debounceTimerId = setTimeout(
+      () => this.emit("dsa-input"),
+      this.debounceTimeout
+    );
     if (!this.multiple) {
       if (this.displayLabel !== ((_a = this.selectedOptions[0]) == null ? void 0 : _a.getTextLabel())) {
         this.clearSelectedOptions();
       }
     }
-    if (this.onSearch !== void 0) {
-      const remoteOptions = (_b = await this.getRemoteOptions()) != null ? _b : [];
-      this.filterRemoteOptions(remoteOptions);
-    } else {
-      this.filterOptions(this.displayLabel);
-    }
-  }
-  filterRemoteOptions(remoteOptions) {
-    const nonSelectedOptions = remoteOptions.filter(
-      (option) => this.selectedOptions.every((selectedOption) => {
-        return selectedOption.value !== option.value;
-      })
-    );
-    this.allOptions = [...this.selectedOptions, ...nonSelectedOptions];
-    this.filteredOptions = [...this.selectedOptions, ...nonSelectedOptions];
-  }
-  asyncFetchOptions() {
-    if (this.onSearch !== void 0) {
-      const debouncedOnSearch = debounce(this.onSearch, this.debounceTimeout);
-      return debouncedOnSearch(
-        this.displayLabel,
-        this.selectedOptions.map((option) => option.value)
-      );
-    }
-    return void 0;
+    this.filterOptions(this.displayLabel);
   }
   handleClearClick(event) {
     event.stopPropagation();
@@ -202,11 +176,9 @@ var DSACombobox = class extends ShoelaceElement {
     }
   }
   filterOptions(filter) {
-    if (this.onSearch === void 0) {
-      this.filteredOptions = this.allOptions.filter((option) => {
-        return option.innerText.toLowerCase().includes(filter.toLowerCase());
-      });
-    }
+    this.filteredOptions = this.allOptions.filter((option) => {
+      return option.innerText.toLowerCase().includes(filter.toLowerCase());
+    });
   }
   // Toggles an option's selected state
   toggleOptionSelection(option, force) {
@@ -271,23 +243,6 @@ var DSACombobox = class extends ShoelaceElement {
     });
     return allOptions;
   }
-  // Gets an array of all remote <dsa-option> elements
-  async getRemoteOptions() {
-    var _a;
-    let remoteOptions = [];
-    try {
-      this.fetchingState = "loading";
-      remoteOptions = (_a = await this.asyncFetchOptions()) != null ? _a : [];
-      this.fetchingState = "success";
-      this.emit("dsa-load");
-    } catch (e) {
-      remoteOptions = [];
-      this.fetchingState = "error";
-      this.emit("dsa-error");
-      throw e;
-    }
-    return remoteOptions;
-  }
   clearSelectedOptions() {
     this.allOptions.forEach((el) => {
       el.selected = false;
@@ -809,9 +764,6 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSACombobox.prototype, "hasVisualFocus", 2);
-__decorateClass([
-  state()
-], DSACombobox.prototype, "fetchingState", 2);
 __decorateClass([
   state()
 ], DSACombobox.prototype, "displayLabel", 2);
@@ -827,6 +779,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSACombobox.prototype, "filteredOptions", 2);
+__decorateClass([
+  state()
+], DSACombobox.prototype, "debounceTimerId", 2);
 __decorateClass([
   property()
 ], DSACombobox.prototype, "name", 2);
@@ -904,12 +859,12 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "max-options-visible", type: Number })
 ], DSACombobox.prototype, "maxOptionsVisible", 2);
-__decorateClass([
-  property({ type: Function, attribute: false })
-], DSACombobox.prototype, "onSearch", 2);
 __decorateClass([
   property({ type: Number, attribute: "debounce-timeout" })
 ], DSACombobox.prototype, "debounceTimeout", 2);
+__decorateClass([
+  property({ attribute: "fetching-state" })
+], DSACombobox.prototype, "fetchingState", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], DSACombobox.prototype, "handleDisabledChange", 1);