@ds-autonomie/web-components 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @ds-autonomie/web-components
 
+## 1.7.0
+
+### Minor Changes
+
+- d0ddca3: `footer`, `footer-sitemap`, `footer-sitemap-item`, `footer-inline-divider`, `footer-content-block`: implémentation du composant `footer` et de ses sous-composants.
+- e7669d9: `file-upload`, `file-upload-item`: implémentation des composants file-upload et file-upload-item
+- 4b8f839: `alert` : ajout d'un attribut `duration`
+- e53ca70: `radio-button`, `checkbox-button` : ajout d'un état d'erreur
+
+### Patch Changes
+
+- 62e792a: `radio-button`, `checkbox-button` : correction du bug sur l'attribut `readonly` et ajustement des styles
+
+## 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.2PA4QKLT.js

@@ -0,0 +1,43 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/footer-sitemap-item/footer-sitemap-item.styles.ts
+import { css } from "lit";
+var footer_sitemap_item_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  :host ::slotted(*) {
+    font: inherit;
+    font-size: inherit;
+    color: var(--dsa-color-text-on-layer-primary);
+    text-decoration: none;
+  }
+
+  ::slotted(*:hover) {
+    border-bottom-style: solid;
+    border-bottom-width: var(--dsa-wc-link-underline-thickness);
+    color: var(--dsa-color-text-on-layer-primary);
+  }
+
+  ::slotted(*:visited) {
+    color: var(--dsa-wc-link-visited-on-base-color);
+  }
+
+  ::slotted(*:active) {
+    color: var(--dsa-wc-link-active-on-base-color);
+  }
+  
+  ::slotted(*:focus-visible) {
+    outline: var(--dsa-wc-focus-ring);
+    border-radius: var(--dsa-wc-focus-ring-radius);
+  })
+`;
+
+export {
+  footer_sitemap_item_styles_default
+};

package/dist/chunks/{chunk.BNJQHJKO.js → chunk.4ABNA6LY.js}

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

package/dist/chunks/{chunk.E7NM6WTF.js → chunk.5LSEWF5M.js}

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

package/dist/chunks/{chunk.AO3M5GSN.js → chunk.5MXBL3PY.js}

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

package/dist/chunks/{chunk.BGNHUCCD.js → chunk.5T654YBW.js}

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

package/dist/chunks/chunk.672XI6OQ.js

@@ -0,0 +1,108 @@
+import {
+  file_upload_item_styles_default
+} from "./chunk.ZOKFJBTV.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/file-upload-item/file-upload-item.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { LocalizeController } from "@shoelace-style/localize";
+var DSAFileUploadItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.size = "medium";
+    this.error = false;
+    this.errorMessage = "";
+  }
+  handleRemoveClick(event) {
+    event.stopPropagation();
+    this.emit("dsa-clear");
+  }
+  render() {
+    var _a;
+    const isUploadCompleted = (this.uploadProgress === void 0 || this.uploadProgress === 100) && !this.error;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "file-item-container": true,
+      "file-item-container--error": this.error,
+      "file-item-container--small": this.size === "small",
+      "file-item-container--medium": this.size === "medium",
+      "file-item-container--large": this.size === "large"
+    })}
+      >
+        <article part="file-item" aria-describedby="error-text">
+          <slot part="label"></slot>
+          <slot
+            part="upload-indicator"
+            name="upload-indicator"
+            class=${classMap({
+      "upload-indicator": true,
+      "upload-indicator--show": this.uploadProgress !== void 0 && !isUploadCompleted
+    })}
+            >${this.uploadProgress}%</slot
+          >
+          <button
+            part="clear-button"
+            type="button"
+            @click=${this.handleRemoveClick}
+            aria-label=${this.localize.term("clearFile")}
+          >
+            ${isUploadCompleted ? html`<dsa-icon name="delete"></dsa-icon>` : html`<dsa-icon name="close"></dsa-icon>`}
+          </button>
+          <div
+            part="progress-bar"
+            role="progressbar"
+            title=${this.localize.term("uploadFileProgressBar")}
+            class=${classMap({
+      "progress-bar": this.uploadProgress !== void 0 && !isUploadCompleted
+    })}
+            aria-label=${this.localize.term("uploadFileProgressBar")}
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow=${this.uploadProgress === void 0 ? 0 : this.uploadProgress}
+          >
+            <div
+              part="progress-bar-indicator"
+              style=${styleMap({ width: `${(_a = this.uploadProgress) != null ? _a : 0}%` })}
+            ></div>
+          </div>
+        </article>
+        ${this.error ? html`
+              <dsa-error-text id="error-text" part="error-text"
+                >${this.errorMessage}</dsa-error-text
+              >
+            ` : html``}
+      </div>
+    `;
+  }
+};
+DSAFileUploadItem.styles = file_upload_item_styles_default;
+__decorateClass([
+  property({ reflect: true })
+], DSAFileUploadItem.prototype, "size", 2);
+__decorateClass([
+  property({ type: Number, attribute: "upload-progress" })
+], DSAFileUploadItem.prototype, "uploadProgress", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAFileUploadItem.prototype, "error", 2);
+__decorateClass([
+  property({ attribute: "error-message" })
+], DSAFileUploadItem.prototype, "errorMessage", 2);
+DSAFileUploadItem = __decorateClass([
+  customElement("dsa-file-upload-item")
+], DSAFileUploadItem);
+
+export {
+  DSAFileUploadItem
+};

package/dist/chunks/{chunk.7WQVFO44.js → chunk.6HEEXQ6Q.js}

@@ -22,9 +22,9 @@ var checkbox_button_styles_default = css`
     background-color: var(--dsa-wc-toggle-button-background-color);
     border-color: var(--dsa-wc-toggle-button-border-color);
     color: var(--dsa-wc-toggle-button-color);
-
     border-width: 1px;
     boder-style: solid;
+    font-weight: 400;
   }
 
   .button--toggle:hover {
@@ -60,21 +60,21 @@ var checkbox_button_styles_default = css`
     color: var(--dsa-wc-toggle-button-checked-active-color);
   }
 
-  .button--toggle.button--readonly.button--readonly {
+  .button--toggle.button--readonly {
     background-color: var(--dsa-wc-toggle-button-read-only-background-color);
     border-color: var(--dsa-wc-toggle-button-read-only-border-color);
     color: var(--dsa-wc-toggle-button-read-only-color);
     padding-left: var(--dsa-wc-toggle-button-icon-padding-x);
+    cursor: not-allowed;
   }
-  .button--toggle.button--checked.button--readonly.button--readonly {
+  .button--toggle.button--checked.button--readonly {
     background-color: var(
       --dsa-wc-toggle-button-read-only-checked-background-color
     );
     border-color: var(--dsa-wc-toggle-button-read-only-checked-border-color);
     color: var(--dsa-wc-toggle-button-read-only-checked-color);
   }
-  .button--toggle.button--checked.button--read-only.button--readonly
-    .button__icon-check {
+  .button--toggle.button--checked.button--readonly .button__icon-check {
     color: var(--dsa-wc-toggle-button-read-only-checked-icon-color);
   }
 
@@ -95,6 +95,12 @@ var checkbox_button_styles_default = css`
     flex-shrink: 0;
   }
 
+  .button--error {
+    background-color: var(--dsa-wc-toggle-button-error-background-color);
+    border-color: var(--dsa-wc-toggle-button-error-border-color);
+    color: var(--dsa-wc-toggle-button-error-color);
+  }
+
   /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
     We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
   .hidden-input {

package/dist/chunks/{chunk.D2QVNPSR.js → chunk.7FSWPNRP.js}

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

package/dist/chunks/{chunk.DXP3BNWO.js → chunk.7PKGNYXP.js}

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

package/dist/chunks/chunk.7RMRIPUN.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.Y5M7ZKHX.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.IH3JU5S6.js → chunk.ADVUEL4K.js}

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

package/dist/chunks/{chunk.INCMVGXU.js → chunk.AJ4QV4YB.js}

@@ -26,7 +26,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.Y5M7ZKHX.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.CWMR6PEK.js

@@ -0,0 +1,227 @@
+import {
+  form_control_styles_default
+} from "./chunk.AXG2LFB3.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/file-upload/file-upload.styles.ts
+import { css } from "lit";
+var file_upload_styles_default = css`
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  /* Overrides form-control styles */
+  .form-control {
+    display: grid;
+    align-content: start;
+    grid-template:
+      'label . .'
+      'description description description'
+      'field field field' 1fr
+      'helpText helpText helpText'
+      'errorText errorText errorText'
+      'fileList fileList fileList'
+      / auto auto minmax(0, 1fr);
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* Label */
+  .form-control--has-label.form-control--medium .form-control__label {
+    font: var(--dsa-wc-file-upload-label-font-medium);
+    padding-bottom: var(--dsa-spacing-16);
+  }
+
+  .form-control--has-label.form-control--small .form-control__label {
+    font: var(--dsa-wc-file-upload-label-font-small);
+    padding-bottom: var(--dsa-spacing-16);
+  }
+
+  .form-control--has-label.form-control--large .form-control__label {
+    font: var(--dsa-wc-file-upload-label-font-large);
+    padding-bottom: var(--dsa-spacing-16);
+  }
+
+  /* Description */
+  .form-control .form-control__description {
+    grid-area: description;
+    display: none;
+  }
+
+  .form-control--has-description .form-control__description {
+    display: block;
+    color: var(--dsa-color-input-label-on-base-helper);
+  }
+
+  .form-control--small .form-control__description {
+    font: var(--dsa-wc-error-text-font-small);
+  }
+
+  .form-control.form-control--small .form-control__description {
+    padding-bottom: var(--dsa-spacing-16);
+  }
+
+  .form-control--medium .form-control__description {
+    font: var(--dsa-wc-error-text-font);
+  }
+
+  .form-control.form-control--medium .form-control__description {
+    padding-bottom: var(--dsa-spacing-16);
+  }
+
+  .form-control--large .form-control__description {
+    font: var(--dsa-wc-error-text-font-large);
+  }
+
+  .form-control.form-control--large .form-control__description {
+    padding-bottom: var(--dsa-spacing-16);
+  }
+
+  /* Help Text */
+  .form-control.form-control--small .form-control__help-text {
+    font: var(--dsa-wc-file-upload-help-text-font-small);
+    padding-top: var(--dsa-spacing-16);
+  }
+
+  .form-control.form-control--medium .form-control__help-text {
+    font: var(--dsa-wc-file-upload-help-text-font-medium);
+    padding-top: var(--dsa-spacing-16);
+  }
+
+  .form-control.form-control--large .form-control__help-text {
+    font: var(--dsa-wc-file-upload-help-text-font-large);
+    padding-top: var(--dsa-spacing-16);
+  }
+
+  /* Error Text */
+  .form-control.form-control--small .form-control__error-text {
+    font: var(--dsa-wc-file-upload-error-text-font-small);
+    padding-top: var(--dsa-spacing-16);
+  }
+
+  .form-control.form-control--medium .form-control__error-text {
+    font: var(--dsa-wc-file-upload-error-text-font-medium);
+    padding-top: var(--dsa-spacing-16);
+  }
+
+  .form-control.form-control--large .form-control__error-text {
+    font: var(--dsa-wc-file-upload-error-text-font-large);
+    padding-top: var(--dsa-spacing-16);
+  }
+
+  /* Slot Files */
+  [part~='slot_files'] {
+    grid-area: fileList;
+    display: inline-block;
+    padding-top: var(--dsa-spacing-16);
+  }
+
+  [part~='slot_files']::slotted(dsa-file-upload-item:not(:first-of-type)) {
+    padding-top: var(--dsa-spacing-8);
+  }
+
+  .button-container {
+    position: relative;
+  }
+
+  /* Button (Copy of button primary styles) */
+  .button {
+    display: inline-flex;
+    align-items: stretch;
+    justify-content: center;
+    width: auto;
+    border-style: solid;
+    border-width: var(--dsa-wc-button-border-width);
+    border-radius: var(--dsa-wc-button-border-radius);
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: 0 var(--dsa-wc-button-padding-horizontal);
+    transition: var(--dsa-wc-transition-x-fast) background-color,
+      var(--dsa-wc-transition-x-fast) color,
+      var(--dsa-wc-transition-x-fast) border,
+      var(--dsa-wc-transition-x-fast) box-shadow;
+    cursor: pointer;
+    background-color: var(--dsa-wc-button-primary-on-base-color);
+    border-color: var(--dsa-wc-button-primary-on-base-color);
+    color: var(--dsa-wc-button-primary-on-base-font-color);
+  }
+
+  .button::-moz-focus-inner {
+    border: 0;
+  }
+
+  .button:focus {
+    outline: none;
+  }
+
+  .button:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  /* When disabled, prevent mouse events from bubbling up from children */
+  .button--disabled * {
+    pointer-events: none;
+  }
+  .button--disabled {
+    cursor: not-allowed;
+  }
+
+  .button:hover:not(.button--disabled) {
+    background-color: var(--dsa-wc-button-primary-on-base-hover-color);
+    border-color: var(--dsa-wc-button-primary-on-base-hover-color);
+    color: var(--dsa-wc-button-primary-on-base-hover-font-color);
+  }
+  .button:active:not(.button--disabled) {
+    background-color: var(--dsa-wc-button-primary-on-base-active-color);
+    border-color: var(--dsa-wc-button-primary-on-base-active-color);
+    color: var(--dsa-wc-button-primary-on-base-active-font-color);
+  }
+  .button.button--disabled {
+    background-color: var(--dsa-wc-button-primary-on-base-disabled-color);
+    border-color: var(--dsa-wc-button-primary-on-base-disabled-color);
+    color: var(--dsa-wc-button-primary-on-base-disabled-font-color);
+  }
+
+  .button--small {
+    font: var(--dsa-wc-button-font-small);
+    border-radius: var(--dsa-wc-button-border-radius);
+    padding-top: var(--dsa-spacing-8);
+    padding-bottom: var(--dsa-spacing-8);
+  }
+
+  .button--medium {
+    font: var(--dsa-wc-button-font);
+    border-radius: var(--dsa-wc-button-border-radius);
+    padding-top: var(--dsa-spacing-12);
+    padding-bottom: var(--dsa-spacing-12);
+  }
+
+  .button--large {
+    font: var(--dsa-wc-button-font-large);
+    border-radius: var(--dsa-wc-button-border-radius);
+    padding-top: var(--dsa-spacing-16);
+    padding-bottom: var(--dsa-spacing-16);
+  }
+
+  /* Input */
+  [part~='input'] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+`;
+
+export {
+  file_upload_styles_default
+};