@ds-autonomie/web-components 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

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.KFZV2L7L.js → chunk.4ABNA6LY.js}

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

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

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

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

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

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

@@ -15,7 +15,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.CKDL37GT.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.RJBMUBMI.js → chunk.7FSWPNRP.js}

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

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

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

package/dist/chunks/{chunk.ATDDIVPX.js → chunk.7RMRIPUN.js}

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

package/dist/chunks/{chunk.NMOENRSD.js → chunk.ADVUEL4K.js}

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

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

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

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
+};

package/dist/chunks/chunk.D3IQERM5.js

@@ -0,0 +1,92 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/footer/footer.styles.ts
+import { css } from "lit";
+var footer_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  [part~='base'] {
+    background: var(--dsa-wc-footer-background);
+    padding: var(--dsa-wc-footer-padding-y) var(--dsa-wc-footer-padding-x);
+  }
+
+  /* Dividers */
+  dsa-divider {
+    --spacing-start: var(--dsa-wc-footer-divider-spacing);
+    --spacing-end: var(--dsa-wc-footer-divider-spacing);
+  }
+
+  .footer-top-divider {
+    display: none;
+  }
+
+  .footer--has-top-section .footer-top-divider {
+    display: block;
+  }
+
+  .footer-center-divider {
+    display: none;
+  }
+
+  .footer--has-center-section .footer-center-divider {
+    display: block;
+  }
+
+  [part~='footer-top'] {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--dsa-wc-footer-top-spacing);
+  }
+
+  [part~='footer-top']::slotted(*) {
+    grid-column: span 2;
+  }
+
+  [part~='meta'] > p {
+    margin: 0;
+  }
+
+  [part~='footer-bottom-container'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-wc-footer-bottom-spacing);
+  }
+
+  @media only screen and (min-width: 720px) {
+    [part~='base'] {
+      padding: var(--dsa-wc-footer-medium-padding-y)
+        var(--dsa-wc-footer-medium-padding-x);
+    }
+
+    [part~='footer-top'] {
+      grid-template-columns: repeat(8, 1fr);
+    }
+
+    [part~='footer-bottom-container'] {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  @media only screen and (min-width: 1440px) {
+    [part~='base'] {
+      padding: var(--dsa-wc-footer-x-large-padding-y)
+        var(--dsa-wc-footer-x-large-padding-x);
+    }
+
+    [part~='footer-top'] {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+`;
+
+export {
+  footer_styles_default
+};

package/dist/chunks/{chunk.OUVQZNJQ.js → chunk.D5MIBH2P.js}

@@ -240,7 +240,7 @@ var DSARadioGroup = class extends ShoelaceElement {
     if (!target) {
       return;
     }
-    if (target.disabled) {
+    if (target.disabled || "readonly" in target && target.readonly) {
       return;
     }
     const radios = this.getAllRadios();
@@ -265,7 +265,9 @@ var DSARadioGroup = class extends ShoelaceElement {
     )) {
       return;
     }
-    const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+    const radios = this.getAllRadios().filter(
+      (radio) => !radio.disabled && !("readonly" in radio && radio.readonly)
+    );
     const focusedCheckboxIndex = radios.findIndex((t) => t.matches(":focus"));
     const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
     const oldValue = this.value;
@@ -365,12 +367,13 @@ var DSARadioGroup = class extends ShoelaceElement {
   updateCheckedRadio() {
     const radios = this.getAllRadios();
     radios.forEach((radio, index) => {
+      var _a;
       radio.checked = radio.value === this.value;
       const shouldFocus = this.value === "" && index === 0;
       if (this.hasRadioButtons) {
         const radioButton = radio;
         radioButton.button.tabIndex = shouldFocus || radio.checked ? 0 : -1;
-        radio.disabled = this.readonlyRadioButtonValue.get(this.value) || radioButton.readonly;
+        radioButton.disabled = (_a = this.readonlyRadioButtonValue.get(this.value)) != null ? _a : radioButton.disabled;
         if (shouldFocus) {
           radioButton.button.focus();
         }