@ds-autonomie/web-components 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @ds-autonomie/web-components
 
+## 1.10.0
+
+### Minor Changes
+
+- 81e058b: `table-container`, `table-action`: implémentation du composant `table-action`
+- db19f1d: `button`, `spinner`, `icon-button`: ajout des nouveaux styles pour la surface de fond contrastée
+- fbfd9d3: `table-toolbar`: implémentation du composant table-toolbar
+- 44de0a2: `filter-button` : ajout du bouton de filtre
+- 9bd1a84: `table-caption`: ajout d'un slot d'action sur le composant table-caption
+
+### Patch Changes
+
+- 27b8b53: `radio`, `radio-button`, `radio-group`, `checkbox`, `checkbox-button`, `checkbox-group`: les radio/checkbox à l'état `readonly` ne sont plus `disabled` mais `aria-disabled`; résolution bug de focus des radios
+- e6379c6: `combobox`: résolution de non conformités sur le composant combobox
+- 335662f: `combobox`: résolution des retours d'erreur sur la combobox
+- Updated dependencies [db19f1d]
+  - @ds-autonomie/assets@1.3.0
+
 ## 1.9.0
 
 ### Minor Changes

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

@@ -0,0 +1,96 @@
+import {
+  filter_button_styles_default
+} from "./chunk.TTAJYLMN.js";
+import {
+  watch
+} from "./chunk.6IH66JBY.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/filter/filter-button/filter-button.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSAFilterButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.selectedOption = "";
+    this.selectionCount = 0;
+    this.ariaExpanded = "false";
+    this.tabindex = 0;
+  }
+  handleLabelChange() {
+    this.setAttribute("title", this.label);
+  }
+  handleActiveFilter() {
+    if (this.selectionCount > 1) {
+      this.filterButton.classList.add("filter--active");
+    } else {
+      this.filterButton.classList.remove("filter--active");
+    }
+  }
+  handleOpenChange() {
+    if (this.ariaExpanded === "true") {
+      this.filterButton.classList.add("filter--open");
+    } else {
+      this.filterButton.classList.remove("filter--open");
+    }
+  }
+  render() {
+    return html`
+      <button
+        class=${classMap({
+      "filter-button": true,
+      "filter--active": this.selectionCount > 0,
+      "filter--open": this.ariaExpanded === "true"
+    })}
+      >
+        <span class="label">${`${this.label} : `}</span>
+
+        ${this.selectionCount > 1 ? html` <dsa-badge size="small"> ${this.selectionCount} </dsa-badge> ` : html` <span class="value"> ${this.selectedOption} </span> `}
+
+        <dsa-icon class="expand-icon" name="arrow_drop_down"></dsa-icon>
+      </button>
+    `;
+  }
+};
+DSAFilterButton.styles = filter_button_styles_default;
+__decorateClass([
+  query(".filter-button")
+], DSAFilterButton.prototype, "filterButton", 2);
+__decorateClass([
+  property()
+], DSAFilterButton.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "selected-option", reflect: true })
+], DSAFilterButton.prototype, "selectedOption", 2);
+__decorateClass([
+  property({ attribute: "selection-count", reflect: true })
+], DSAFilterButton.prototype, "selectionCount", 2);
+__decorateClass([
+  property({ attribute: "aria-expanded" })
+], DSAFilterButton.prototype, "ariaExpanded", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAFilterButton.prototype, "tabindex", 2);
+__decorateClass([
+  watch("label")
+], DSAFilterButton.prototype, "handleLabelChange", 1);
+__decorateClass([
+  watch("selection-count", { waitUntilFirstUpdate: true })
+], DSAFilterButton.prototype, "handleActiveFilter", 1);
+__decorateClass([
+  watch("aria-expanded", { waitUntilFirstUpdate: true })
+], DSAFilterButton.prototype, "handleOpenChange", 1);
+DSAFilterButton = __decorateClass([
+  customElement("dsa-filter-button")
+], DSAFilterButton);
+
+export {
+  DSAFilterButton
+};

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

@@ -0,0 +1,152 @@
+import {
+  table_container_styles_default
+} from "./chunk.4BPTV7TY.js";
+import {
+  LoadingStateElement
+} from "./chunk.PFGVYROJ.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  watch
+} from "./chunk.6IH66JBY.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/table-container/table-container.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSATableContainer = class extends LoadingStateElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "toolbar");
+    this.showTableActions = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleTableSelection = this.handleTableSelection.bind(this);
+    this.handleTableActionsClose = this.handleTableActionsClose.bind(this);
+    this.addEventListener(
+      "dsa-table-row-all-selected",
+      this.handleTableSelection
+    );
+    this.addEventListener("dsa-table-row-selected", this.handleTableSelection);
+    this.addEventListener(
+      "dsa-table-actions-close",
+      this.handleTableActionsClose
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      "dsa-table-row-all-selected",
+      this.handleTableSelection
+    );
+    this.removeEventListener(
+      "dsa-table-row-selected",
+      this.handleTableSelection
+    );
+    this.removeEventListener(
+      "dsa-table-actions-close",
+      this.handleTableActionsClose
+    );
+  }
+  handleTableActionsClose() {
+    this.showTableActions = false;
+  }
+  handleTableSelection(event) {
+    if (event.detail.selectedRows.length > 0) {
+      this.showTableActions = true;
+    }
+  }
+  handleShowTableActions() {
+    const actionBar = this.querySelector("dsa-table-action");
+    const toolbar = this.querySelector("dsa-table-toolbar");
+    if (actionBar !== null) {
+      actionBar.show = this.showTableActions;
+    }
+    if (toolbar !== null) {
+      if (this.showTableActions) {
+        toolbar.setAttribute("tabindex", "-1");
+      } else {
+        toolbar.removeAttribute("tabindex");
+      }
+    }
+  }
+  handleLoading() {
+    const caption = this.querySelector("dsa-table-caption");
+    if (caption) {
+      caption.loading = this.loading;
+    }
+    const head = this.querySelector("dsa-table-head");
+    if (head) {
+      head.loading = this.loading;
+    }
+    const body = this.querySelector("dsa-table-body");
+    if (body) {
+      body.loading = this.loading;
+    }
+    const pagination = this.querySelector("dsa-pagination");
+    if (pagination) {
+      pagination.loading = this.loading;
+    }
+  }
+  handleSkeletonEffectChange() {
+    const caption = this.querySelector("dsa-table-caption");
+    if (caption) {
+      caption.skeletonEffect = this.skeletonEffect;
+    }
+    const head = this.querySelector("dsa-table-head");
+    if (head) {
+      head.skeletonEffect = this.skeletonEffect;
+    }
+    const body = this.querySelector("dsa-table-body");
+    if (body) {
+      body.skeletonEffect = this.skeletonEffect;
+    }
+    const pagination = this.querySelector("dsa-pagination");
+    if (pagination) {
+      pagination.skeletonEffect = this.skeletonEffect;
+    }
+  }
+  render() {
+    const hasToolbar = this.hasSlotController.test("toolbar");
+    return html`
+      <slot part="caption" name="caption"></slot>
+      <slot part="export" name="export"></slot>
+      <div
+        part="bar-container"
+        class=${classMap({
+      "bar-container--has-toolbar": hasToolbar
+    })}
+      >
+        <slot part="toolbar" name="toolbar"></slot>
+        <slot part="action" name="action"></slot>
+      </div>
+      <slot part="table" name="table"></slot>
+      <slot part="pagination" name="pagination"></slot>
+    `;
+  }
+};
+DSATableContainer.styles = table_container_styles_default;
+__decorateClass([
+  property({ attribute: "show-table-actions", reflect: true, type: Boolean })
+], DSATableContainer.prototype, "showTableActions", 2);
+__decorateClass([
+  watch("showTableActions")
+], DSATableContainer.prototype, "handleShowTableActions", 1);
+__decorateClass([
+  watch("loading")
+], DSATableContainer.prototype, "handleLoading", 1);
+__decorateClass([
+  watch("skeletonEffect")
+], DSATableContainer.prototype, "handleSkeletonEffectChange", 1);
+DSATableContainer = __decorateClass([
+  customElement("dsa-table-container")
+], DSATableContainer);
+
+export {
+  DSATableContainer
+};

package/dist/chunks/chunk.4BPTV7TY.js

@@ -0,0 +1,53 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table-container/table-container.styles.ts
+import { css } from "lit";
+var table_container_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: grid;
+    grid-template-areas:
+      'caption export'
+      'bar bar'
+      'table table'
+      'pagination pagination';
+    grid-gap: var(--dsa-spacing-12);
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  [part~='caption']::slotted(*) {
+    grid-area: caption;
+  }
+
+  [part~='export']::slotted(*) {
+    grid-area: export;
+  }
+
+  [part~='table']::slotted(*) {
+    grid-area: table;
+  }
+
+  [part~='bar-container'] {
+    grid-area: bar;
+    position: relative;
+  }
+
+  .bar-container--has-toolbar [part~='action']::slotted(*) {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+
+  [part~='pagination']::slotted(*) {
+    grid-area: pagination;
+    display: block;
+    padding: var(--dsa-spacing-12) var(--dsa-spacing-8);
+  }
+`;
+
+export {
+  table_container_styles_default
+};

package/dist/chunks/{chunk.B3VBH7AS.js → chunk.6LX2WW5F.js}

@@ -160,15 +160,17 @@ var DSARadioGroup = class extends ShoelaceElement {
     event.preventDefault();
   }
   handleLabelClick() {
-    const radios = this.getAllRadios();
-    const checked = radios.find((radio) => radio.checked);
-    const radioToFocus = checked || radios[0];
+    const availableRadios = this.getAllRadios().filter(
+      (radio) => !radio.disabled && !radio.readonly
+    );
+    const checked = availableRadios.find((radio) => radio.checked);
+    const radioToFocus = checked || availableRadios[0];
     if (radioToFocus) {
       radioToFocus.focus();
     }
   }
   handleSlotChange() {
-    var _a, _b, _c;
+    var _a;
     if (customElements.get("dsa-radio") || customElements.get("dsa-radio-button")) {
       const radios = this.getAllRadios();
       let hasAtLeastOneCheckedRadio = false;
@@ -186,29 +188,9 @@ var DSARadioGroup = class extends ShoelaceElement {
         hasAtLeastOneCheckedRadio = radio.checked || hasAtLeastOneCheckedRadio;
       });
       this.updateCheckedRadio();
-      if (!hasAtLeastOneCheckedRadio) {
-        if (this.hasRadioButtons) {
-          const buttonRadio = (_b = (_a = radios.find((radio) => {
-            if (radio.tagName.toLowerCase() === "dsa-radio-button" && radio.readonly) {
-              return false;
-            } else {
-              return !radio.disabled;
-            }
-          })) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("button");
-          if (buttonRadio) {
-            buttonRadio.tabIndex = 0;
-          }
-        } else {
-          const firstNonDisabledRadio = radios.find(
-            (radio) => !radio.disabled && !radio.readonly
-          );
-          if (firstNonDisabledRadio) {
-            firstNonDisabledRadio.tabIndex = 0;
-          }
-        }
-      }
+      this.updateTabIndexes();
       if (this.hasRadioButtons) {
-        const buttonGroup = (_c = this.shadowRoot) == null ? void 0 : _c.querySelector(
+        const buttonGroup = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
           "dsa-internal-button-group"
         );
         if (buttonGroup) {
@@ -226,26 +208,32 @@ var DSARadioGroup = class extends ShoelaceElement {
   }
   updateCheckedRadio() {
     const radios = this.getAllRadios();
-    radios.forEach((radio, index) => {
+    radios.forEach((radio) => {
       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 && !radio.readonly ? 0 : -1;
-        radioButton.disabled = (_a = this.readonlyRadioButtonValue.get(this.value)) != null ? _a : radioButton.disabled;
-        if (shouldFocus) {
-          radioButton.button.focus();
-        }
-      } else {
-        radio.tabIndex = shouldFocus || radio.checked && !radio.readonly ? 0 : -1;
-        if (shouldFocus) {
-          radio.focus();
-        }
+        radioButton.readonly = (_a = this.readonlyRadioButtonValue.get(this.value)) != null ? _a : radioButton.readonly;
       }
     });
+    this.updateTabIndexes();
     this.formControlController.setValidity(this.validity.valid);
   }
+  updateTabIndexes() {
+    const radios = this.getAllRadios();
+    const firstAvailableRadioIndex = radios.findIndex(
+      (radio) => !radio.disabled && !radio.readonly
+    );
+    radios.forEach((radio, index) => {
+      const shouldFocus = radio.checked && !radio.readonly || this.value === "" && index === firstAvailableRadioIndex;
+      if (this.hasRadioButtons) {
+        const radioButton = radio;
+        radioButton.button.tabIndex = shouldFocus ? 0 : -1;
+      } else {
+        radio.tabIndex = shouldFocus ? 0 : -1;
+      }
+    });
+  }
   handleValueChange() {
     if (this.hasUpdated) {
       this.updateCheckedRadio();
@@ -258,6 +246,16 @@ var DSARadioGroup = class extends ShoelaceElement {
       this.removeAttribute("aria-invalid");
     }
   }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.getAllRadios().forEach((radio) => radio.disabled = this.disabled);
+    }
+  }
+  handleReadonlyChange() {
+    if (this.readonly) {
+      this.getAllRadios().forEach((radio) => radio.readonly = this.readonly);
+    }
+  }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
     const isRequiredAndEmpty = this.required && !this.value;
@@ -318,6 +316,7 @@ var DSARadioGroup = class extends ShoelaceElement {
         role="radiogroup"
         aria-labelledby="label"
         aria-describedby=${this.error ? "error-text help-text" : "help-text"}
+        aria-invalid=${this.error}
       >
         <label
           part="form-control-label"
@@ -383,6 +382,7 @@ var DSARadioGroup = class extends ShoelaceElement {
         ${this.error ? html`<dsa-error-text
               id="error-text"
               class="form-control__error-text"
+              aria-live="assertive"
               >${this.customValidityError !== "" ? this.customValidityError : this.errorMessage}</dsa-error-text
             >` : ""}
       </fieldset>
@@ -447,6 +447,12 @@ __decorateClass([
 __decorateClass([
   watch("error")
 ], DSARadioGroup.prototype, "handleErrorChange", 1);
+__decorateClass([
+  watch("disabled")
+], DSARadioGroup.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("readonly")
+], DSARadioGroup.prototype, "handleReadonlyChange", 1);
 DSARadioGroup = __decorateClass([
   customElement("dsa-radio-group")
 ], DSARadioGroup);

package/dist/chunks/{chunk.YA5XTUZW.js → chunk.6M3PE7F4.js}

@@ -1,6 +1,6 @@
 import {
   table_caption_styles_default
-} from "./chunk.2CCVOCSE.js";
+} from "./chunk.7QLN4D3Q.js";
 import {
   LoadingStateElement
 } from "./chunk.PFGVYROJ.js";
@@ -42,7 +42,7 @@ var DSATableCaption = class extends LoadingStateElement {
       ${this.loading && hasSubtitle ? html`<dsa-skeleton
             class="subtitle-skeleton"
             effect=${this.skeletonEffect}
-          ></dsa-skeleton>` : html` <slot part="subtitle" name="subtitle"></slot> `}
+          ></dsa-skeleton>` : html`<slot part="subtitle" name="subtitle"></slot> `}
       ${this.loading && hasTotalItems ? html`<dsa-skeleton
             class="total-items-skeleton"
             effect=${this.skeletonEffect}

package/dist/chunks/{chunk.RB5YRDTE.js → chunk.7H7XQTS6.js}

@@ -1,6 +1,6 @@
 import {
   pagination_button_styles_default
-} from "./chunk.CHKVYEHB.js";
+} from "./chunk.AYEDSLZF.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";

package/dist/chunks/{chunk.UENLYHK4.js → chunk.7NKBEOVM.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.DXQY7NLW.js";
+} from "./chunk.DB67KVAS.js";
 
 // src/components/radio-button/radio-button.styles.ts
 import { css } from "lit";

package/dist/chunks/{chunk.2CCVOCSE.js → chunk.7QLN4D3Q.js}

@@ -17,10 +17,6 @@ var table_caption_styles_default = css`
     margin: 0;
   }
 
-  :host ::slotted(*:not(:first-child)) {
-    margin-top: var(--dsa-spacing-8);
-  }
-
   [part~='title']::slotted(*) {
     font: var(--dsa-font-large-bold);
     color: var(--dsa-color-text-on-base-primary);
@@ -29,11 +25,13 @@ var table_caption_styles_default = css`
   [part~='subtitle']::slotted(*) {
     font: var(--dsa-font-small-normal);
     color: var(--dsa-color-text-on-base-primary);
+    margin-top: var(--dsa-spacing-8);
   }
 
   [part~='total-items'] {
     display: none;
-    margin: 0px;
+    margin: 0;
+    margin-top: var(--dsa-spacing-8);
   }
 
   .has-total-items {

package/dist/chunks/chunk.AHXS6ATM.js

@@ -0,0 +1,11 @@
+// src/utilities/helpers.ts
+function normalizeStr(str) {
+  const withoutAccents = str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+  const lowerCaseString = withoutAccents.toLowerCase();
+  const trimmedString = lowerCaseString.replace(/\s+/g, " ").trim();
+  return trimmedString;
+}
+
+export {
+  normalizeStr
+};

package/dist/chunks/{chunk.CHKVYEHB.js → chunk.AYEDSLZF.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.DXQY7NLW.js";
+} from "./chunk.DB67KVAS.js";
 
 // src/components/pagination-button/pagination-button.styles.ts
 import { css } from "lit";

package/dist/chunks/chunk.BUJFK2VN.js

@@ -0,0 +1,47 @@
+import {
+  table_expanded_row_styles_default
+} from "./chunk.47IWI2IO.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/table/table-expanded-row/table-expanded-row.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DSATableExpandedRow = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.role = "row";
+    this.colSpan = 1;
+    this.expanded = false;
+  }
+  render() {
+    return html`
+      <td class="expanded-row" colspan=${this.colSpan}>
+        <div>
+          <slot></slot>
+        </div>
+      </td>
+    `;
+  }
+};
+DSATableExpandedRow.styles = table_expanded_row_styles_default;
+__decorateClass([
+  property({ reflect: true })
+], DSATableExpandedRow.prototype, "role", 2);
+__decorateClass([
+  property({ type: Number, attribute: "colspan" })
+], DSATableExpandedRow.prototype, "colSpan", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableExpandedRow.prototype, "expanded", 2);
+DSATableExpandedRow = __decorateClass([
+  customElement("dsa-table-expanded-row")
+], DSATableExpandedRow);
+
+export {
+  DSATableExpandedRow
+};