@ds-autonomie/web-components 1.6.0 → 1.7.0

package/dist/chunks/chunk.R5PR2MDK.js

@@ -0,0 +1,256 @@
+import {
+  file_upload_styles_default
+} from "./chunk.CWMR6PEK.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  watch
+} from "./chunk.6IH66JBY.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/file-upload/file-upload.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { LocalizeController } from "@shoelace-style/localize";
+var DSAFileUpload = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "help-text",
+      "label",
+      "description"
+    );
+    this.localize = new LocalizeController(this);
+    this.size = "medium";
+    this.label = "";
+    this.description = "";
+    this.helpText = "";
+    this.disabled = false;
+    this.required = false;
+    this.accept = "";
+    this.multiple = false;
+    this.error = false;
+    this.errorMessage = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const allFiles = this.getAllFiles();
+    allFiles.forEach((el) => el.setAttribute("size", this.size));
+  }
+  handleClick() {
+    this.fileUploadInput.click();
+  }
+  handleChange(event) {
+    const addedFiles = this.handleFileSelectedChange(event);
+    this.emit("dsa-file-upload", { detail: { files: addedFiles } });
+  }
+  handleFileSelectedChange(event) {
+    var _a, _b;
+    if (!this.accept || !/^(change|drop)$/.test(event.type)) {
+      return Array.from((_a = this.fileUploadInput.files) != null ? _a : []);
+    }
+    if (((_b = this.fileUploadInput) == null ? void 0 : _b.files) === null) {
+      return [];
+    }
+    const acceptedTypes = new Set(this.accept.split(", "));
+    return Array.prototype.filter.call(
+      this.fileUploadInput.files,
+      (file) => {
+        var _a2;
+        const fileExtensionRegExp = /\.[^.]+$/;
+        const hasFileExtension = fileExtensionRegExp.test(file.name);
+        const [fileExtension] = !hasFileExtension ? [void 0] : (_a2 = fileExtensionRegExp.exec(file.name)) != null ? _a2 : [];
+        return acceptedTypes.has(file.type) || fileExtension && acceptedTypes.has(fileExtension);
+      }
+    );
+  }
+  // Gets an array of all <dsa-file-upload-item> elements
+  getAllFiles() {
+    return [
+      ...this.querySelectorAll("dsa-file-upload-item")
+    ];
+  }
+  handleDefaultSlotChange() {
+    const allFiles = this.getAllFiles();
+    allFiles.forEach((el) => el.setAttribute("size", this.size));
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  handleSizeChange() {
+    const allFiles = this.getAllFiles();
+    allFiles.forEach((el) => el.setAttribute("size", this.size));
+  }
+  /** Sets focus on the control. */
+  focus(options) {
+    this.fileUploadButton.focus(options);
+  }
+  /** Removes focus from the control. */
+  blur() {
+    this.fileUploadButton.blur();
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasDescriptionSlot = this.hasSlotController.test("description");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasDescription = this.description ? true : !!hasDescriptionSlot;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "form-control": true,
+      "form-control--error": this.error && !this.disabled,
+      "form-control--disabled": this.disabled,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--has-label": hasLabel,
+      "form-control--has-description": hasDescription,
+      "form-control--has-help-text": hasHelpText
+    })}
+      >
+        <label
+          id="label"
+          for="button"
+          part="file-upload-label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? "false" : "true"}
+        >
+          ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
+          <slot name="label">${this.label}</slot>
+        </label>
+        <slot
+          part="file-upload-description"
+          id="description"
+          name="description"
+          class="form-control__description"
+          >${this.description}</slot
+        >
+        <div class="form-control__field">
+          <div class="button-container">
+            <button
+              part="file-upload-button"
+              id="button"
+              type="button"
+              class=${classMap({
+      button: true,
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--disabled": this.disabled
+    })}
+              ?disabled=${this.disabled}
+              aria-disabled=${this.disabled ? "true" : "false"}
+              tabindex=${this.disabled ? "-1" : "0"}
+              aria-describedby=${this.error ? "error-text description help-text slot_files" : "description help-text slot_files"}
+              @click=${this.handleClick}
+              @blur=${this.handleBlur}
+              @focus=${this.handleFocus}
+            >
+              ${this.localize.term("fileSelect", this.multiple)}
+            </button>
+            <input
+              part="input"
+              id="file"
+              type="file"
+              ?disabled=${this.disabled}
+              ?required=${this.required}
+              accept=${ifDefinedAndNotEmpty(this.accept)}
+              tabindex="-1"
+              aria-hidden="true"
+              ?multiple=${this.multiple}
+              @change=${this.handleChange}
+            />
+          </div>
+        </div>
+
+        <slot
+          name="help-text"
+          id="help-text"
+          part="file-upload-help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? "false" : "true"}
+        >
+          ${this.helpText}
+        </slot>
+        ${this.error && !this.disabled ? html`<dsa-error-text
+              id="error-text"
+              class="form-control__error-text"
+              >${this.errorMessage}</dsa-error-text
+            >` : ""}
+        <slot
+          id="slot_files"
+          part="slot_files"
+          @slotchange=${this.handleDefaultSlotChange}
+        >
+        </slot>
+      </div>
+    `;
+  }
+};
+DSAFileUpload.styles = file_upload_styles_default;
+__decorateClass([
+  query("#file")
+], DSAFileUpload.prototype, "fileUploadInput", 2);
+__decorateClass([
+  query("#button")
+], DSAFileUpload.prototype, "fileUploadButton", 2);
+__decorateClass([
+  query(".drop-container")
+], DSAFileUpload.prototype, "dropContainer", 2);
+__decorateClass([
+  property()
+], DSAFileUpload.prototype, "size", 2);
+__decorateClass([
+  property()
+], DSAFileUpload.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "description" })
+], DSAFileUpload.prototype, "description", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], DSAFileUpload.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAFileUpload.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAFileUpload.prototype, "required", 2);
+__decorateClass([
+  property()
+], DSAFileUpload.prototype, "accept", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAFileUpload.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAFileUpload.prototype, "error", 2);
+__decorateClass([
+  property({ attribute: "error-message" })
+], DSAFileUpload.prototype, "errorMessage", 2);
+__decorateClass([
+  watch("size")
+], DSAFileUpload.prototype, "handleSizeChange", 1);
+DSAFileUpload = __decorateClass([
+  customElement("dsa-file-upload")
+], DSAFileUpload);
+
+export {
+  DSAFileUpload
+};

package/dist/chunks/{chunk.FFFHQKNB.js → chunk.RBJL56T2.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.VLRL3RJT.js → chunk.RC2LGXYT.js}

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

package/dist/chunks/chunk.RTNJV3ZL.js

@@ -0,0 +1,52 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/footer-inline-divider/footer-inline-divider.styles.ts
+import { css } from "lit";
+var footer_inline_divider_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  [part~='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-8);
+  }
+
+  [part~='divider'] {
+    display: none;
+  }
+
+  [part~='divider'] {
+    --spacing-start: var(--dsa-wc-footer-inline-divider-spacing);
+    --spacing-end: var(--dsa-wc-footer-inline-divider-spacing);
+  }
+
+  [part~='text-left']::slotted(*),
+  [part~='text-right']::slotted(*) {
+    margin: var(--dsa-wc-footer-inline-divider-text-margin);
+    font: var(--dsa-wc-footer-inline-divider-text-font);
+    color: var(--dsa-wc-footer-inline-divider-text-color);
+  }
+
+  @media only screen and (min-width: 720px) {
+    [part~='base'] {
+      flex-direction: row;
+      align-items: center;
+      gap: 0px;
+    }
+
+    [part~='divider'] {
+      display: block;
+      height: var(--dsa-wc-footer-inline-divider-vertical-size);
+    }
+  }
+`;
+
+export {
+  footer_inline_divider_styles_default
+};

package/dist/chunks/{chunk.CSQ2UP6E.js → chunk.SL4M42DS.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.CKDL37GT.js";
+} from "./chunk.Y5M7ZKHX.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.2FVPNPAG.js → chunk.SN4AILXB.js}

@@ -1,6 +1,6 @@
 import {
   checkbox_button_styles_default
-} from "./chunk.7WQVFO44.js";
+} from "./chunk.6HEEXQ6Q.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -27,6 +27,7 @@ var DSACheckboxButton = class extends ShoelaceElement {
     this.checked = false;
     this.disabled = false;
     this.size = "medium";
+    this.error = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -49,10 +50,23 @@ var DSACheckboxButton = class extends ShoelaceElement {
     this.emit("dsa-focus");
   }
   handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    this.setAttribute(
+      "aria-disabled",
+      this.disabled || this.readonly ? "true" : "false"
+    );
   }
   handleReadonlyChange() {
-    this.disabled = this.readonly;
+    this.setAttribute(
+      "aria-disabled",
+      this.disabled || this.readonly ? "true" : "false"
+    );
+  }
+  handleErrorChange() {
+    if (this.error) {
+      this.setAttribute("aria-invalid", "true");
+    } else {
+      this.removeAttribute("aria-invalid");
+    }
   }
   /** Sets focus on the checbox button. */
   focus(options) {
@@ -81,10 +95,11 @@ var DSACheckboxButton = class extends ShoelaceElement {
       "button--disabled": this.disabled,
       "button--focused": this.hasFocus,
       // TODO: remove ?
-      "button--has-label": this.hasSlotController.test("[default]")
+      "button--has-label": this.hasSlotController.test("[default]"),
+      "button--error": this.error
     })}
-          ?disabled=${this.disabled}
-          aria-disabled=${this.disabled}
+          ?disabled=${this.disabled || this.readonly}
+          aria-disabled=${this.disabled || this.readonly}
           type="button"
           value=${ifDefined(this.value)}
           @blur=${this.handleBlur}
@@ -131,12 +146,18 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], DSACheckboxButton.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSACheckboxButton.prototype, "error", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], DSACheckboxButton.prototype, "handleDisabledChange", 1);
 __decorateClass([
   watch("readonly")
 ], DSACheckboxButton.prototype, "handleReadonlyChange", 1);
+__decorateClass([
+  watch("error")
+], DSACheckboxButton.prototype, "handleErrorChange", 1);
 DSACheckboxButton = __decorateClass([
   customElement("dsa-checkbox-button")
 ], DSACheckboxButton);

package/dist/chunks/chunk.SUFR3KIW.js

@@ -0,0 +1,41 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/footer-content-block/footer-content-block.styles.ts
+import { css } from "lit";
+var footer_content_block_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  [part~='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-wc-footer-content-block-spacing);
+  }
+
+  @media only screen and (min-width: 1440px) {
+    [part~='base'] {
+      max-width: var(--dsa-wc-footer-content-block-max-width);
+    }
+  }
+
+  [part~='title']::slotted(*) {
+    font: var(--dsa-wc-footer-content-block-title-font);
+    color: var(--dsa-wc-footer-content-block-title-color);
+    margin: var(--dsa-wc-footer-content-block-title-margin);
+  }
+
+  [part~='content']::slotted(*) {
+    font: var(--dsa-wc-footer-content-block-content-font);
+    color: var(--dsa-wc-footer-content-block-content-color);
+    margin: var(--dsa-wc-footer-content-block-content-margin);
+  }
+`;
+
+export {
+  footer_content_block_styles_default
+};

package/dist/chunks/{chunk.B5NS5VQR.js → chunk.TFMB54OO.js}

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

package/dist/chunks/{chunk.3QQPH6YB.js → chunk.UENLYHK4.js}

@@ -24,6 +24,7 @@ var radio_button_styles_default = css`
     color: var(--dsa-wc-toggle-button-color);
     border-width: 1px;
     boder-style: solid;
+    font-weight: 400;
   }
 
   .button--toggle:hover {
@@ -58,7 +59,7 @@ var radio_button_styles_default = css`
     color: var(--dsa-wc-toggle-button-checked-active-color);
   }
 
-  .button--toggle.button--readonly.button--disabled {
+  .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);
@@ -84,6 +85,12 @@ var radio_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.Z7QPOCQO.js → chunk.UTAUMIPE.js}

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

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

@@ -11,7 +11,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.CKDL37GT.js";
+} from "./chunk.Y5M7ZKHX.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -39,13 +39,26 @@ var DSAAlert = class extends ShoelaceElement {
     this.open = false;
     this.closable = false;
     this.variant = "primary";
+    this.duration = Infinity;
   }
   firstUpdated() {
     this.base.hidden = !this.open;
   }
+  restartAutoHide() {
+    clearTimeout(this.autoHideTimeout);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(
+        () => this.hide(),
+        this.duration
+      );
+    }
+  }
   handleCloseClick() {
     this.hide();
   }
+  handleMouseMove() {
+    this.restartAutoHide();
+  }
   getPrefixIconName() {
     switch (this.variant) {
       case "danger":
@@ -63,6 +76,9 @@ var DSAAlert = class extends ShoelaceElement {
   async handleOpenChange() {
     if (this.open) {
       this.emit("dsa-show");
+      if (this.duration < Infinity) {
+        this.restartAutoHide();
+      }
       await stopAnimations(this.base);
       this.base.hidden = false;
       const { keyframes, options } = getAnimation(this, "alert.show", {
@@ -82,6 +98,9 @@ var DSAAlert = class extends ShoelaceElement {
       this.emit("dsa-after-hide");
     }
   }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
   /** Shows the alert. */
   async show() {
     if (this.open) {
@@ -142,6 +161,7 @@ var DSAAlert = class extends ShoelaceElement {
     })}
         role="alert"
         aria-hidden=${this.open ? "false" : "true"}
+        @mousemove=${this.handleMouseMove}
       >
         <dsa-icon
           class="alert__icon"
@@ -180,9 +200,15 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true })
 ], DSAAlert.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Number })
+], DSAAlert.prototype, "duration", 2);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], DSAAlert.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("duration")
+], DSAAlert.prototype, "handleDurationChange", 1);
 DSAAlert = __decorateClass([
   customElement("dsa-alert")
 ], DSAAlert);

package/dist/chunks/{chunk.TMG7TJJO.js → chunk.X6ZGA6WS.js}

@@ -89,7 +89,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     if (!target) {
       return;
     }
-    if (target.disabled) {
+    if (target.disabled || "readonly" in target && target.readonly) {
       return;
     }
     const oldValue = this.value;
@@ -111,7 +111,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     const target = event.target;
     if (event.key === " ") {
       event.preventDefault();
-      if (target.disabled) {
+      if (target.disabled || "readonly" in target && target.readonly) {
         return;
       }
       target.checked = !target.checked;

package/dist/chunks/{chunk.VFYKLPN2.js → chunk.XVDH3KHQ.js}

@@ -137,6 +137,15 @@ var radio_styles_default = css`
   .radio__label.radio__label--error {
     color: var(--dsa-wc-input-label-color-error) !important;
   }
+
+  /* Readonly */
+  .radio--readonly {
+    cursor: not-allowed;
+  }
+  .radio--readonly .radio__control {
+    border-color: var(--dsa-wc-radio-border-color-readonly);
+    color: var(--dsa-wc-radio-color-readonly);
+  }
 `;
 
 export {

package/dist/chunks/{chunk.CKDL37GT.js → chunk.Y5M7ZKHX.js}

@@ -44,6 +44,13 @@ var translation = {
   stepInProgress: "\xC9tape en cours",
   stepError: "\xC9tape en erreur",
   errorMessagePanelCodePrefix: "Code d'erreur: ",
+  fileSelect: (multiple) => {
+    if (multiple)
+      return "S\xE9lect. fichiers";
+    return "Choisir un fichier";
+  },
+  clearFile: "Retirer le fichier",
+  uploadFileProgressBar: "Barre de progression pour le t\xE9l\xE9chargement de fichiers",
   // countries
   fr_FR: "France",
   fr_GP: "Guadeloupe",
@@ -102,6 +109,13 @@ var translation2 = {
   stepInProgress: "Step in progress",
   stepError: "Step in error",
   errorMessagePanelCodePrefix: "Error code: ",
+  fileSelect: (multiple) => {
+    if (multiple)
+      return "Select files";
+    return "Choose a file";
+  },
+  clearFile: "Remove file",
+  uploadFileProgressBar: "Upload file progress bar",
   // countries
   fr_FR: "France",
   fr_GP: "Guadeloupe",

package/dist/chunks/chunk.YTZRADK4.js

@@ -0,0 +1,31 @@
+import {
+  footer_content_block_styles_default
+} from "./chunk.SUFR3KIW.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/footer-content-block/footer-content-block.ts
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+var DSAFooterContentBlock = class extends ShoelaceElement {
+  render() {
+    return html`
+      <div part="base">
+        <slot part="title" name="title"></slot>
+        <slot part="content" name="content"></slot>
+      </div>
+    `;
+  }
+};
+DSAFooterContentBlock.styles = footer_content_block_styles_default;
+DSAFooterContentBlock = __decorateClass([
+  customElement("dsa-footer-content-block")
+], DSAFooterContentBlock);
+
+export {
+  DSAFooterContentBlock
+};