@ds-autonomie/web-components 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @ds-autonomie/web-components
 
+## 1.3.0
+
+### Minor Changes
+
+- 24922c0: `badge`: suppression de l'attribut `dot` sur le composant badge
+- 1830489: `combobox`: ajout de l'attribut `onSearch` permettant la recherche asynchrone
+
+### Patch Changes
+
+- 24922c0: `tag`: changement de la valeur par défaut du variant sur le composant tag
+- f6b74f4: `breadcrumb`, `breadcrumb-item`: mise en conformité d'accessibilité
+- c2bdab5: `radio-button`: l'icône check a été retiré
+- 07b353b: `combobox`: Résolution des bugs concernant l'utilisation de l'attribut 'items' sur le composant combobox
+
+## 1.2.0
+
+### Minor Changes
+
+- b63aa59: `stepper`, `step`: implémentation des composants stepper et step
+
+### Patch Changes
+
+- Updated dependencies [b63aa59]
+  - @ds-autonomie/assets@1.1.1
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/chunks/chunk.2WSMYCPC.js

@@ -0,0 +1,24 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/stepper/stepper.styles.ts
+import { css } from "lit";
+var stepper_styles_default = css`
+  ${component_styles_default}
+
+  .stepper {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    list-style-type: none;
+  }
+
+  .slot_steps {
+    display: none;
+  }
+`;
+
+export {
+  stepper_styles_default
+};

package/dist/chunks/{chunk.7EWUWW3E.js → chunk.3Y4CKW7H.js}

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

package/dist/chunks/{chunk.V6V7AGDB.js → chunk.4XH7INOL.js}

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

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

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

package/dist/chunks/{chunk.3BL7JA77.js → chunk.5KOTVDN5.js}

@@ -1,6 +1,6 @@
 import {
   badge_styles_default
-} from "./chunk.ZVGZDTBF.js";
+} from "./chunk.IFXLU6P3.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -16,7 +16,6 @@ var DSABadge = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.variant = "primary";
-    this.dot = false;
     this.pulse = false;
   }
   render() {
@@ -30,12 +29,11 @@ var DSABadge = class extends ShoelaceElement {
       "badge--neutral": this.variant === "neutral",
       "badge--warning": this.variant === "warning",
       "badge--danger": this.variant === "danger",
-      "badge--dot": this.dot,
       "badge--pulse": this.pulse
     })}
         role="status"
       >
-        <slot class="${classMap({ "badge__slot-dot": this.dot })}"></slot>
+        <slot></slot>
       </div>
     `;
   }
@@ -44,9 +42,6 @@ DSABadge.styles = badge_styles_default;
 __decorateClass([
   property({ reflect: true })
 ], DSABadge.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSABadge.prototype, "dot", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSABadge.prototype, "pulse", 2);

package/dist/chunks/chunk.5NO4YOTV.js

@@ -0,0 +1,126 @@
+import {
+  step_styles_default
+} from "./chunk.YRBTSDUN.js";
+import {
+  getStepIcon
+} from "./chunk.CCTWXABH.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.7BYKP4SA.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/step/step.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSAStep = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "title",
+      "content"
+    );
+    this.localize = new LocalizeController(this);
+    this.status = "default";
+    this.title = "";
+    this.content = "";
+  }
+  getStepLabel() {
+    switch (this.status) {
+      case "default":
+        return this.localize.term("step");
+      case "complete":
+        return this.localize.term("stepCompleted");
+      case "in-progress":
+        return this.localize.term("stepInProgress");
+      case "active":
+        return this.localize.term("stepActive");
+      case "error":
+        return this.localize.term("stepError");
+    }
+    return this.localize.term("step");
+  }
+  render() {
+    const hasTitleSlot = this.hasSlotController.test("title");
+    const hasContentSlot = this.hasSlotController.test("content");
+    const hasTitle = this.title ? true : !!hasTitleSlot;
+    const hasContent = this.content ? true : !!hasContentSlot;
+    const stepIconName = this.status !== "in-progress" && this.status !== "active" ? getStepIcon(this.status) : void 0;
+    const stepLabel = this.getStepLabel();
+    return html`
+      <div
+        role="listitem"
+        part="step"
+        class=${classMap({
+      "step-container": true,
+      "step-container--has-title": hasTitle,
+      "step-container--has-content": hasContent
+    })}
+      >
+        <div
+          class=${classMap({
+      step: true,
+      "step--default": this.status === "default",
+      "step--complete": this.status === "complete",
+      "step--in-progress": this.status === "in-progress" || this.status === "active",
+      "step--error": this.status === "error"
+    })}
+        >
+          ${this.status === "in-progress" || this.status === "active" ? html`<span class="step-icon--in-progress"
+                ><dsa-visually-hidden>${stepLabel}</dsa-visually-hidden></span
+              >` : html`<dsa-icon
+                class="step-icon"
+                name="${stepIconName}"
+                label=${stepLabel}
+              ></dsa-icon>`}
+        </div>
+
+        ${this.index !== void 0 ? html`
+              <p class="step-index">
+                ${this.localize.term("step")} ${this.index + 1}
+              </p>
+            ` : html``}
+
+        <div class="step-title-container">
+          <slot
+            name="title"
+            class="step-title"
+            aria-hidden=${hasTitle ? "false" : "true"}
+            >${this.title}</slot
+          >
+          <slot name="tooltip" class="step-tooltip"></slot>
+        </div>
+        <slot name="content" class="step-content">${this.content}</slot>
+      </div>
+    `;
+  }
+};
+DSAStep.styles = step_styles_default;
+__decorateClass([
+  property()
+], DSAStep.prototype, "status", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "title", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "content", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "index", 2);
+DSAStep = __decorateClass([
+  customElement("dsa-step")
+], DSAStep);
+
+export {
+  DSAStep
+};

package/dist/chunks/{chunk.GJCVGGCP.js → chunk.76JEX27F.js}

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

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

@@ -36,6 +36,13 @@ var translation = {
   slideNum: (slide) => `Diapositive ${slide}`,
   toggleColorFormat: "Changer le format de couleur",
   noMatchFound: "Aucune correspondance trouv\xE9e",
+  optionsLoading: "Chargement des options",
+  optionsError: "Une erreur est survenue",
+  step: "\xC9tape",
+  stepActive: "\xC9tape active",
+  stepCompleted: "\xC9tape valid\xE9e",
+  stepInProgress: "\xC9tape en cours",
+  stepError: "\xC9tape en erreur",
   // countries
   fr_FR: "France",
   fr_GP: "Guadeloupe",
@@ -86,6 +93,13 @@ var translation2 = {
   slideNum: (slide) => `Slide ${slide}`,
   toggleColorFormat: "Toggle color format",
   noMatchFound: "No match found",
+  optionsLoading: "Options loading",
+  optionsError: "An error has occurred",
+  step: "Step",
+  stepActive: "Active step",
+  stepCompleted: "Step completed",
+  stepInProgress: "Step in progress",
+  stepError: "Step in error",
   // countries
   fr_FR: "France",
   fr_GP: "Guadeloupe",

package/dist/chunks/{chunk.LSKBY2HF.js → chunk.BGNHUCCD.js}

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

package/dist/chunks/{chunk.HEOTAAPU.js → chunk.BHLKMLHB.js}

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

package/dist/chunks/{chunk.NOEQVLAW.js → chunk.BNJQHJKO.js}

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

package/dist/chunks/chunk.CCTWXABH.js

@@ -0,0 +1,13 @@
+// src/components/step/step.utils.ts
+var stepIcons = {
+  default: "",
+  complete: "check",
+  error: "error_outline"
+};
+function getStepIcon(status) {
+  return stepIcons[status];
+}
+
+export {
+  getStepIcon
+};

package/dist/chunks/{chunk.6BJBVSW4.js → chunk.E7NM6WTF.js}

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

package/dist/chunks/{chunk.DC6CT5PU.js → chunk.EM4JONLW.js}

@@ -71,9 +71,6 @@ var radio_button_styles_default = css`
     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--readonly.button__icon-check {
-    color: var(--dsa-wc-toggle-button-read-only-checked-icon-color);
-  }
 
   .button--toggle.button--disabled {
     background-color: var(--dsa-wc-toggle-button-disabled-background-color);
@@ -81,10 +78,6 @@ var radio_button_styles_default = css`
     color: var(--dsa-wc-toggle-button-disabled-color);
   }
 
-  .button--toggle .button__icon-check {
-    margin-inline-start: var(--dsa-wc-toggle-button-icon-spacing);
-  }
-
   .button--toggle .button__icon-readonly {
     margin-inline-end: var(--dsa-wc-toggle-button-icon-spacing);
   }

package/dist/chunks/{chunk.W74UQSZJ.js → chunk.FN42VBEO.js}

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

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

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

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

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

package/dist/chunks/chunk.HRBNFVC5.js

@@ -0,0 +1,16 @@
+// src/utilities/debounce.ts
+function debounce(fn, time) {
+  let timerId = void 0;
+  return function debounceFn(search, selectedOptions) {
+    if (timerId !== void 0) {
+      clearTimeout(timerId);
+    }
+    return new Promise((resolve) => {
+      timerId = setTimeout(() => resolve(fn(search, selectedOptions)), time);
+    });
+  };
+}
+
+export {
+  debounce
+};

package/dist/chunks/{chunk.ZVGZDTBF.js → chunk.IFXLU6P3.js}

@@ -12,23 +12,21 @@ var badge_styles_default = css`
   }
 
   .badge {
-    display: inline-flex;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    white-space: pre;
     font: var(--dsa-wc-badge-font);
-    line-height: 1;
     border-radius: var(--dsa-wc-badge-border-radius);
     white-space: nowrap;
-    padding: 0.5rem;
+    padding: var(--spacing-8, 0.5rem);
     user-select: none;
     cursor: inherit;
+    height: var(--dsa-wc-badge-dot-size);
+    min-width: var(--dsa-wc-badge-dot-size);
   }
 
-  .badge__slot-dot {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    white-space: pre;
-  }
   /* Variant modifiers */
   .badge--primary {
     background-color: var(--dsa-wc-badge-background-color-primary);
@@ -55,12 +53,6 @@ var badge_styles_default = css`
     color: var(--dsa-wc-badge-text-color-danger);
   }
 
-  /* Dot modifier */
-  .badge--dot {
-    font: var(--dsa-wc-badge-dot-font);
-    padding: var(--dsa-wc-badge-dot-padding);
-  }
-
   /* Pulse modifier */
   .badge--pulse {
     animation: pulse 1.5s var(--dsa-wc-no-animations-duration, infinite);

package/dist/chunks/{chunk.AYXPVAYS.js → chunk.IH3JU5S6.js}

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

package/dist/chunks/{chunk.R37CT3PN.js → chunk.JJLAOWR2.js}

@@ -1,3 +1,6 @@
+import {
+  debounce
+} from "./chunk.HRBNFVC5.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -6,7 +9,7 @@ import {
 } from "./chunk.CMJ2SRTL.js";
 import {
   combobox_styles_default
-} from "./chunk.7HGZSZJK.js";
+} from "./chunk.WFJLQFI3.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
@@ -26,7 +29,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.7BYKP4SA.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -55,6 +58,7 @@ var DSACombobox = class extends ShoelaceElement {
     );
     this.localize = new LocalizeController(this);
     this.hasVisualFocus = false;
+    this.fetchingState = "success";
     this.displayLabel = "";
     this.selectedOptions = [];
     this.allOptions = [];
@@ -81,6 +85,8 @@ var DSACombobox = class extends ShoelaceElement {
     this.items = void 0;
     this.multiple = false;
     this.maxOptionsVisible = 3;
+    this.onSearch = void 0;
+    this.debounceTimeout = 300;
   }
   /** Gets the validity state object */
   get validity() {
@@ -90,13 +96,18 @@ var DSACombobox = class extends ShoelaceElement {
   get validationMessage() {
     return this.valueInput.validationMessage;
   }
-  connectedCallback() {
+  async connectedCallback() {
+    var _a;
     super.connectedCallback();
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.open = false;
-    this.allOptions = this.getAllOptions();
+    if (this.onSearch !== void 0) {
+      this.allOptions = (_a = await this.getRemoteOptions()) != null ? _a : [];
+    } else {
+      this.allOptions = this.getAllOptions();
+    }
     this.filteredOptions = [...this.allOptions];
   }
   /** Input events */
@@ -142,8 +153,8 @@ var DSACombobox = class extends ShoelaceElement {
     }
     this.filterOptions(this.displayLabel);
   }
-  handleInput() {
-    var _a;
+  async handleInput() {
+    var _a, _b;
     this.displayLabel = this.displayInput.value;
     this.show();
     this.emit("dsa-input");
@@ -152,7 +163,31 @@ var DSACombobox = class extends ShoelaceElement {
         this.clearSelectedOptions();
       }
     }
-    this.filterOptions(this.displayLabel);
+    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;
   }
   handleClearClick(event) {
     event.stopPropagation();
@@ -167,9 +202,11 @@ var DSACombobox = class extends ShoelaceElement {
     }
   }
   filterOptions(filter) {
-    this.filteredOptions = this.allOptions.filter((option) => {
-      return option.innerText.toLowerCase().includes(filter.toLowerCase());
-    });
+    if (this.onSearch === void 0) {
+      this.filteredOptions = this.allOptions.filter((option) => {
+        return option.innerText.toLowerCase().includes(filter.toLowerCase());
+      });
+    }
   }
   // Toggles an option's selected state
   toggleOptionSelection(option, force) {
@@ -227,6 +264,23 @@ var DSACombobox = class extends ShoelaceElement {
     }
     return [...this.querySelectorAll(OPTION_TAG)];
   }
+  // 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;
@@ -401,7 +455,7 @@ var DSACombobox = class extends ShoelaceElement {
     }
   }
   handleItemsChange() {
-    this.allOptions = this.items !== void 0 ? this.items : [];
+    this.allOptions = this.getAllOptions();
     this.filterOptions(this.displayLabel);
   }
   handleValueChange() {
@@ -684,11 +738,23 @@ var DSACombobox = class extends ShoelaceElement {
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
             >
-              ${this.filteredOptions.length > 0 ? this.filteredOptions : html`
+              ${this.fetchingState === "loading" ? html`
+                    <div class="select__loading_text">
+                      <dsa-spinner></dsa-spinner>
+                      <p>${this.localize.term("optionsLoading")}</p>
+                    </div>
+                  ` : html``}
+              ${this.fetchingState === "error" ? html`
+                    <div class="select__loading_text">
+                      <p>${this.localize.term("optionsError")}</p>
+                    </div>
+                  ` : html``}
+              ${this.fetchingState === "success" && this.filteredOptions.length > 0 ? this.filteredOptions : html``}
+              ${this.fetchingState === "success" && this.filteredOptions.length === 0 ? html`
                     <div class="select__empty_text">
                       <p>${this.localize.term("noMatchFound")}</p>
                     </div>
-                  `}
+                  ` : html``}
             </ul>
 
             <slot
@@ -738,6 +804,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSACombobox.prototype, "hasVisualFocus", 2);
+__decorateClass([
+  state()
+], DSACombobox.prototype, "fetchingState", 2);
 __decorateClass([
   state()
 ], DSACombobox.prototype, "displayLabel", 2);
@@ -830,6 +899,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([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], DSACombobox.prototype, "handleDisabledChange", 1);

package/dist/chunks/{chunk.U5KRBVRP.js → chunk.JKHFW3KV.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.7BYKP4SA.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -23,7 +23,7 @@ var DSATag = class extends ShoelaceElement {
     super(...arguments);
     this.localize = new LocalizeController(this);
     this.disableRemovableFocus = false;
-    this.variant = "purple-300";
+    this.variant = "purple-100";
     this.size = "medium";
     this.removable = false;
     this.label = "";