@ds-autonomie/web-components 1.16.2 → 1.18.0

package/dist/chunks/chunk.MVFQ3IXQ.js

@@ -0,0 +1,179 @@
+import {
+  FilterBase
+} from "./chunk.EWT3XVAN.js";
+import {
+  filter_counter_styles_default
+} from "./chunk.GBE3NP7T.js";
+import {
+  watch
+} from "./chunk.6IH66JBY.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/filter/filter-counter/filter-counter.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+var DSAFilterCounter = class extends FilterBase {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.defaultValue = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.tempValue = this.value === "" ? this.defaultValue : this.value;
+  }
+  handleInput(event) {
+    event.stopPropagation();
+    this.tempValue = this.filterInput.value;
+  }
+  handleDecrease() {
+    if (this.tempValue === "") {
+      this.tempValue = this.defaultValue !== "" ? this.defaultValue : "0";
+    } else if (!this.min || parseFloat(this.tempValue) > this.min) {
+      this.tempValue = `${parseFloat(this.tempValue) - 1}`;
+      this.emit("dsa-input");
+    }
+  }
+  handleIncrease() {
+    if (this.tempValue === "") {
+      this.tempValue = this.defaultValue !== "" ? this.defaultValue : "0";
+    } else if (!this.max || parseFloat(this.tempValue) < this.max) {
+      this.tempValue = `${parseFloat(this.tempValue) + 1}`;
+      this.emit("dsa-input");
+    }
+  }
+  handleReset() {
+    this.tempValue = this.defaultValue;
+    this.emit("dsa-input");
+    this.filterInput.focus({ preventScroll: true });
+  }
+  handleSubmit() {
+    this.value = this.tempValue;
+    this.emit("dsa-submit");
+    this.hide();
+    this.filterTrigger.focus({ preventScroll: true });
+  }
+  handleValueChange() {
+    if (this.value !== "") {
+      this.tempValue = this.value === "" ? this.defaultValue : this.value;
+    }
+  }
+  handleTempValueChange() {
+    if (this.drawer) {
+      this.value = this.tempValue;
+    }
+  }
+  handleFilterCounterOpenChange() {
+    if (!this.open) {
+      this.tempValue = this.value === "" ? this.defaultValue : this.value;
+    }
+  }
+  renderPanelContent() {
+    return html`
+      <div class="filter__content">
+        <dsa-icon-button
+          name="remove"
+          variant="secondary"
+          size="xlarge"
+          label=${this.localize.term("decrease")}
+          @click=${this.handleDecrease}
+          ?disabled=${this.min && parseFloat(this.tempValue) <= this.min}
+          class="filter__decrease"
+        ></dsa-icon-button>
+        <dsa-input
+          type="number"
+          .value=${this.tempValue}
+          @input=${this.handleInput}
+          min=${this.min}
+          max=${this.max}
+          variant=${this.drawer ? "layer" : "base"}
+          title=${this.label}
+          aria-label=${this.label}
+        ></dsa-input>
+        <dsa-icon-button
+          name="add"
+          variant="secondary"
+          size="xlarge"
+          label=${this.localize.term("increase")}
+          @click=${this.handleIncrease}
+          ?disabled=${this.max && parseFloat(this.tempValue) >= this.max}
+          class="filter__increase"
+        ></dsa-icon-button>
+      </div>
+
+      <div class="filter__footer">
+        <dsa-button
+          variant="tertiary"
+          size="small"
+          @click=${this.handleReset}
+          class="filter__reset"
+          ?disabled=${this.tempValue === this.defaultValue}
+        >
+          <dsa-icon name="restart_alt" slot="prefix"></dsa-icon>
+          ${this.localize.term("reinitialize")}
+        </dsa-button>
+
+        ${!this.drawer ? html`
+              <dsa-button
+                variant="primary"
+                size="small"
+                @click=${this.handleSubmit}
+                class="filter__submit"
+                ?disabled=${this.min && parseFloat(this.tempValue) < this.min || this.max && parseFloat(this.tempValue) > this.max}
+              >
+                ${this.localize.term("validate")}
+              </dsa-button>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+DSAFilterCounter.styles = filter_counter_styles_default;
+__decorateClass([
+  query("dsa-input")
+], DSAFilterCounter.prototype, "filterInput", 2);
+__decorateClass([
+  query(".filter__decrease")
+], DSAFilterCounter.prototype, "decreaseButton", 2);
+__decorateClass([
+  query(".filter__increase")
+], DSAFilterCounter.prototype, "increaseButton", 2);
+__decorateClass([
+  query(".filter__reset")
+], DSAFilterCounter.prototype, "resetButton", 2);
+__decorateClass([
+  query(".filter__submit")
+], DSAFilterCounter.prototype, "submitButton", 2);
+__decorateClass([
+  state()
+], DSAFilterCounter.prototype, "tempValue", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAFilterCounter.prototype, "value", 2);
+__decorateClass([
+  property({ attribute: "default-value" })
+], DSAFilterCounter.prototype, "defaultValue", 2);
+__decorateClass([
+  property()
+], DSAFilterCounter.prototype, "min", 2);
+__decorateClass([
+  property()
+], DSAFilterCounter.prototype, "max", 2);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], DSAFilterCounter.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("tempValue", { waitUntilFirstUpdate: true })
+], DSAFilterCounter.prototype, "handleTempValueChange", 1);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSAFilterCounter.prototype, "handleFilterCounterOpenChange", 1);
+DSAFilterCounter = __decorateClass([
+  customElement("dsa-filter-counter")
+], DSAFilterCounter);
+
+export {
+  DSAFilterCounter
+};

package/dist/chunks/{chunk.ZWVWEQGL.js → chunk.NDQ5XCHJ.js}

@@ -73,6 +73,7 @@ var select_styles_default = css`
 
   .select__display-input::placeholder {
     color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+    opacity: 1;
   }
 
   .select__display-input:focus {
@@ -393,6 +394,10 @@ var select_styles_default = css`
     font-size: var(--dsa-wc-input-text-field-font-small);
     padding-inline: var(--dsa-wc-select-listbox-padding-inline);
   }
+
+  .hidden-tag-label {
+    display: none;
+  }
 `;
 
 export {

package/dist/chunks/{chunk.GZMFP7UN.js → chunk.O5STCK5X.js}

@@ -1,9 +1,9 @@
 import {
   filter_button_styles_default
-} from "./chunk.SUCVNPSQ.js";
+} from "./chunk.VNMJ2D4A.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -27,6 +27,7 @@ var DSAFilterButton = class extends ShoelaceElement {
     this.tabindex = 0;
     this.disabled = false;
     this.readonly = false;
+    this.drawer = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -45,7 +46,7 @@ var DSAFilterButton = class extends ShoelaceElement {
     }
   }
   handleDisabledChange() {
-    this.tabindex = this.disabled || this.readonly ? -1 : 0;
+    this.tabindex = this.disabled ? -1 : 0;
     this.setAttribute(
       "aria-disabled",
       this.disabled || this.readonly ? "true" : "false"
@@ -54,7 +55,7 @@ var DSAFilterButton = class extends ShoelaceElement {
   render() {
     return html`
       <span class="label"
-        >${`${this.label}${this.selectionCount > 0 ? " : " : ""}`}</span
+        >${`${this.label}${this.selectionCount > 0 && !this.drawer ? " : " : ""}`}</span
       >
 
       ${this.selectionCount > 1 ? html` <span class="results-badge"> ${this.selectionCount} </span> ` : html` <span class="value"> ${this.selectedOption} </span> `}
@@ -82,6 +83,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAFilterButton.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAFilterButton.prototype, "drawer", 2);
 __decorateClass([
   watch("selectionCount", { waitUntilFirstUpdate: true })
 ], DSAFilterButton.prototype, "handleSelectionCountChange", 1);

package/dist/chunks/{chunk.3YSH35MM.js → chunk.O7DWCXXH.js}

@@ -1,6 +1,6 @@
 import {
   range_slider_styles_default
-} from "./chunk.VO6MIHUM.js";
+} from "./chunk.RFQ2Y5SK.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.7DHGAM7P.js → chunk.PC2VIFJW.js}

@@ -1,6 +1,6 @@
 import {
   accordion_styles_default
-} from "./chunk.VDOVUA55.js";
+} from "./chunk.KOTPR264.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.RYD4BVIA.js → chunk.PSAB4UIG.js}

@@ -1,6 +1,6 @@
 import {
   table_of_contents_styles_default
-} from "./chunk.MZF7MK5G.js";
+} from "./chunk.7UPFI4HE.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";

package/dist/chunks/{chunk.GE2PTQVM.js → chunk.PT4W6K27.js}

@@ -1,6 +1,6 @@
 import {
   drawer_styles_default
-} from "./chunk.RTEOTFLP.js";
+} from "./chunk.WQVKSBYD.js";
 import {
   Modal
 } from "./chunk.ISAFRNR2.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -60,6 +60,7 @@ var DSADrawer = class extends ShoelaceElement {
     this.placement = "end";
     this.contained = false;
     this.noHeader = false;
+    this.filters = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -247,7 +248,8 @@ var DSADrawer = class extends ShoelaceElement {
       "drawer--contained": this.contained,
       "drawer--fixed": !this.contained,
       "drawer--rtl": this.localize.dir() === "rtl",
-      "drawer--has-footer": this.hasSlotController.test("footer")
+      "drawer--has-footer": this.hasSlotController.test("footer"),
+      "drawer--filters": this.filters
     })}
       >
         <div
@@ -326,6 +328,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "no-header", type: Boolean, reflect: true })
 ], DSADrawer.prototype, "noHeader", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSADrawer.prototype, "filters", 2);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], DSADrawer.prototype, "handleOpenChange", 1);

package/dist/chunks/{chunk.CWHNW2T5.js → chunk.QGNUX2KV.js}

@@ -78,20 +78,27 @@ var DSACheckboxGroup = class extends ShoelaceElement {
   firstUpdated() {
     this.formControlController.updateValidity();
     this.allCheckboxes = this.getAllCheckboxes();
-    this.observeAttributeChanges();
+    this.observeSlottedElements();
   }
   // A change of attributes on the slotted elements does not trigger the "slotchange" event, so we add an observer
-  observeAttributeChanges() {
-    const observer = new MutationObserver((mutationsList) => {
+  observeSlottedElements() {
+    this.slottedElementsObserver = new MutationObserver((mutationsList) => {
+      let needsUpdate = false;
       mutationsList.forEach((mutation) => {
-        if (mutation.type === "attributes") {
-          this.allCheckboxes = this.getAllCheckboxes();
+        if (mutation.type === "attributes" || mutation.type === "childList") {
+          needsUpdate = true;
         }
       });
+      if (needsUpdate) {
+        this.handleSlottedElementChange();
+      }
     });
     [...this.defaultSlot.assignedElements({ flatten: true })].forEach(
       (element) => {
-        observer.observe(element, { attributes: true });
+        this.slottedElementsObserver.observe(element, {
+          attributes: true,
+          childList: true
+        });
       }
     );
   }
@@ -165,31 +172,34 @@ var DSACheckboxGroup = class extends ShoelaceElement {
       checkboxToFocus.focus();
     }
   }
-  handleSlotChange() {
+  handleSlottedElementChange() {
     var _a;
-    if (customElements.get("dsa-checkbox") || customElements.get("dsa-checkbox-button")) {
-      this.allCheckboxes = this.getAllCheckboxes();
-      this.allCheckboxes.forEach((checkbox) => {
-        if (this.disabled) {
-          checkbox.disabled = true;
-        }
-        if (this.readonly) {
-          checkbox.readonly = true;
-        }
-        checkbox.checked = this.value.includes(checkbox.value);
-      });
-      this.hasCheckboxButtons = this.allCheckboxes.some(
-        (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
+    this.allCheckboxes = this.getAllCheckboxes();
+    this.allCheckboxes.forEach((checkbox) => {
+      if (this.disabled) {
+        checkbox.disabled = true;
+      }
+      if (this.readonly) {
+        checkbox.readonly = true;
+      }
+      checkbox.checked = this.value.includes(checkbox.value);
+    });
+    this.hasCheckboxButtons = this.allCheckboxes.some(
+      (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
+    );
+    if (this.hasCheckboxButtons) {
+      const buttonGroup = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+        "dsa-internal-button-group"
       );
-      if (this.hasCheckboxButtons) {
-        const buttonGroup = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
-          "dsa-internal-button-group"
-        );
-        if (buttonGroup) {
-          buttonGroup.disableRole = true;
-        }
+      if (buttonGroup) {
+        buttonGroup.disableRole = true;
       }
-      this.observeAttributeChanges();
+    }
+  }
+  handleSlotChange() {
+    if (customElements.get("dsa-checkbox") || customElements.get("dsa-checkbox-button")) {
+      this.handleSlottedElementChange();
+      this.observeSlottedElements();
     } else {
       customElements.whenDefined("dsa-checkbox").then(() => this.handleSlotChange());
       customElements.whenDefined("dsa-checkbox-button").then(() => this.handleSlotChange());

package/dist/chunks/{chunk.EAP74BQL.js → chunk.QVJYJURQ.js}

@@ -1,9 +1,14 @@
 import {
   DSASelect
-} from "./chunk.PNTPO2DN.js";
+} from "./chunk.EY6DBOBY.js";
+import {
+  getPhoneConfig
+} from "./chunk.65HTBW2L.js";
+import {
+  input_phone_styles_default
+} from "./chunk.HSLR5GY4.js";
 import {
   frenchFlagOption,
-  frenchFlagSelect,
   frenchNumberPrefix,
   phonePrefixOptions
 } from "./chunk.ESYJVRG3.js";
@@ -12,12 +17,6 @@ import {
   rawValueToMaskedValue,
   stripSpecialChars
 } from "./chunk.7OLEA3GQ.js";
-import {
-  getPhoneConfig
-} from "./chunk.65HTBW2L.js";
-import {
-  input_phone_styles_default
-} from "./chunk.43EIYNTL.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -136,22 +135,8 @@ var DSAInputPhone = class extends ShoelaceElement {
     this.emit("dsa-input");
   }
   willUpdate(changedProperties) {
-    if (changedProperties.has("phonePrefix") || changedProperties.has("phoneNumber")) {
-      if (!frenchNumberPrefix.includes(this.phonePrefix)) {
-        this.phonePrefix = changedProperties.get("phonePrefix");
-      }
-      if (this.phoneNumber.length === 0) {
-        this.value = "";
-      } else {
-        const placeholderLength = stripSpecialChars(this.placeholder).length;
-        this.value = `${this.phonePrefix}${this.phoneNumber.substring(
-          0,
-          placeholderLength
-        )}`;
-      }
-    }
-    if (changedProperties.has("value")) {
-      this.setPhoneFromValue(this.value);
+    if (changedProperties.has("phonePrefix") && !frenchNumberPrefix.includes(this.phonePrefix)) {
+      this.phonePrefix = changedProperties.get("phonePrefix");
     }
   }
   setPhoneFromValue(value) {
@@ -164,22 +149,28 @@ var DSAInputPhone = class extends ShoelaceElement {
       const number = value.replace(prefix, "").substring(0, placeholderLength);
       this.phonePrefix = prefix;
       this.phoneNumber = number;
-      this.value = `${prefix}${number}`;
+    }
+  }
+  updateValue() {
+    if (this.phoneNumber.length === 0) {
+      this.value = "";
+    } else {
+      const placeholderLength = stripSpecialChars(this.placeholder).length;
+      this.value = `${this.phonePrefix}${this.phoneNumber.substring(
+        0,
+        placeholderLength
+      )}`;
     }
   }
   // Select handlers
   handlePhonePrefixChange(event) {
+    event.stopPropagation();
     const { target } = event;
     if (target instanceof DSASelect) {
       this.phonePrefix = target.value;
+      this.updateValue();
+      this.emit("dsa-change");
     }
-    this.emit("dsa-change");
-  }
-  handlePhonePrefixKeydown(event) {
-    if (event.key === "Tab") {
-      this.phonePrefixEl.hide();
-    }
-    this.emit("dsa-change");
   }
   // Input Mask handlers
   handleChange(event) {
@@ -187,8 +178,9 @@ var DSAInputPhone = class extends ShoelaceElement {
     if (target instanceof HTMLInputElement) {
       const strippedValue = stripSpecialChars(target.value);
       this.phoneNumber = strippedValue;
+      this.updateValue();
+      this.emit("dsa-change");
     }
-    this.emit("dsa-change");
   }
   handleKeyDown(event) {
     const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
@@ -244,6 +236,9 @@ var DSAInputPhone = class extends ShoelaceElement {
     await this.updateComplete;
     this.formControlController.updateValidity();
   }
+  handlePhoneChange() {
+    this.updateValue();
+  }
   /** Sets focus on the input. */
   focus(options) {
     this.inputEl.focus(options);
@@ -355,12 +350,10 @@ var DSAInputPhone = class extends ShoelaceElement {
         hoist
         .size=${this.size}
         @dsa-change=${this.handlePhonePrefixChange}
-        @keydown=${this.handlePhonePrefixKeydown}
         enterkeyhint="enter"
         display-value
         no-sync-width
       >
-        ${frenchFlagSelect}
         ${phonePrefixOptions.map((option, index) => {
       return html`
             <dsa-option value=${option.value} .size=${this.size}>
@@ -558,6 +551,10 @@ __decorateClass([
 __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], DSAInputPhone.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("phonePrefix"),
+  watch("phoneNumber")
+], DSAInputPhone.prototype, "handlePhoneChange", 1);
 DSAInputPhone = __decorateClass([
   customElement("dsa-input-phone")
 ], DSAInputPhone);

package/dist/chunks/{chunk.VO6MIHUM.js → chunk.RFQ2Y5SK.js}

@@ -64,11 +64,13 @@ var range_slider_styles_default = css`
   .from-range-slider--focused::-webkit-slider-thumb,
   .to-range-slider--focused::-webkit-slider-thumb {
     outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
   }
 
   .from-range-slider--focused::-moz-range-thumb,
   .to-range-slider--focused::-moz-range-thumb {
     outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
   }
 
   .from-range-slider--disabled::-webkit-slider-thumb,

package/dist/chunks/{chunk.QR4Z7SWH.js → chunk.RJCFCZY3.js}

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

package/dist/chunks/{chunk.BQ7R6MC6.js → chunk.RSX6EFCX.js}

@@ -22,8 +22,30 @@ var checkbox_button_styles_default = css`
     border-color: var(--dsa-wc-toggle-button-border-color);
     color: var(--dsa-wc-toggle-button-color);
     border-width: 1px;
-    boder-style: solid;
+    border-style: solid;
     font-weight: 400;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+    line-height: 130%;
+  }
+  .button--toggle.button--small {
+    min-height: var(--dsa-wc-form-input-height-small);
+  }
+  .button--toggle.button--medium {
+    min-height: var(--dsa-wc-form-input-height);
+  }
+  .button--toggle.button--large {
+    min-height: var(--dsa-wc-form-input-height-large);
+  }
+  .button--toggle.button--small .button__label {
+    padding-block: 4px;
+  }
+  .button--toggle.button--medium .button__label {
+    padding-block: 8px;
+  }
+  .button--toggle.button--large .button__label {
+    padding-block: 10px;
   }
 
   .button--toggle:hover {

package/dist/chunks/{chunk.JR77AUQ7.js → chunk.SH26MYV3.js}

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