@ds-autonomie/web-components 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @ds-autonomie/web-components
 
+## 1.8.0
+
+### Minor Changes
+
+- 528b8e9: `button`: ajout de l'attribut `aria-label` au composant button
+- 30065d7: `table-caption`: implémentation du composant titre d'un tableau
+- 72bf5d4: `icon-button` : ajout d'un attribut `size`
+- 964b78a: `radio`, `checkbox`, `radio-group`, `checkbox-group` : ajout d'un attribut readonly
+- 2e3fbdb: `table`, `table-header-cell`: ajout de la fonctionnalité de tri sur les composants `table` et `table-header-cell`
+- d60a66a: `pagination` : ajout du composant pagination
+- f2db84c: `table-container`: implémentation du composant table-container
+- 5ceccb1: `table`, `table-row`, `table-cell`, `table-head`, `table-body`, `table-header-cell`, `table-header-row`: implémentation du composant `table` et de ses sous-composants
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/chunks/{chunk.ADVUEL4K.js → chunk.22WSILHD.js}

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

package/dist/chunks/{chunk.AQC66RY2.js → chunk.2AEUQXKH.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.AXG2LFB3.js";
+} from "./chunk.O3TGEE3I.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";
@@ -275,6 +275,23 @@ var input_styles_default = css`
   ::-ms-reveal {
     display: none;
   }
+
+  /* Pagination page number input */
+  :host(.pagination__input) input {
+    padding-inline: var(--dsa-spacing-4);
+    text-align: center;
+  }
+  /* Hide the browser's up and down arrow in input number for the pagination on mobile */
+  @media screen and (max-width: 420px) {
+    :host(.pagination__input) input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    input[type='number'] {
+      -moz-appearance: textfield;
+    }
+  }
 `;
 
 export {

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

@@ -0,0 +1,25 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table/table-header-row/table-header-row.styles.ts
+import { css } from "lit";
+var table_header_row_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: table-row;
+    outline: none;
+    font: var(--dsa-wc-table-header-row-font);
+    background: var(--dsa-wc-table-header-row-background);
+    color: var(--dsa-wc-table-header-row-color);
+  }
+
+  ::slotted(dsa-table-header-cell) {
+    block-size: var(--dsa-wc-table-header-row-height);
+  }
+`;
+
+export {
+  table_header_row_styles_default
+};

package/dist/chunks/{chunk.RBJL56T2.js → chunk.43PVVN7Q.js}

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

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

@@ -0,0 +1,17 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table/table-head/table-head.styles.ts
+import { css } from "lit";
+var table_head_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: table-header-group;
+  }
+`;
+
+export {
+  table_head_styles_default
+};

package/dist/chunks/chunk.65JZEQ4F.js

@@ -0,0 +1,33 @@
+import {
+  table_head_styles_default
+} from "./chunk.5L7UO75X.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/table/table-head/table-head.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DSATableHead = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.role = "rowgroup";
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+DSATableHead.styles = table_head_styles_default;
+__decorateClass([
+  property({ reflect: true })
+], DSATableHead.prototype, "role", 2);
+DSATableHead = __decorateClass([
+  customElement("dsa-table-head")
+], DSATableHead);
+
+export {
+  DSATableHead
+};

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

@@ -3,7 +3,10 @@ import {
 } from "./chunk.WFHOSUOX.js";
 import {
   LocalizeController
-} from "./chunk.Y5M7ZKHX.js";
+} from "./chunk.KZIAHLAV.js";
+import {
+  watch
+} from "./chunk.6IH66JBY.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
@@ -22,6 +25,7 @@ var DSATag = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
+    this.iconButtonSize = "small";
     this.disableRemovableFocus = false;
     this.variant = "purple-100";
     this.size = "medium";
@@ -31,6 +35,19 @@ var DSATag = class extends ShoelaceElement {
   handleRemoveClick() {
     this.emit("dsa-remove");
   }
+  updateIconButtonSize() {
+    switch (this.size) {
+      case "small":
+        this.iconButtonSize = "xsmall";
+        break;
+      case "medium":
+        this.iconButtonSize = "small";
+        break;
+      case "large":
+        this.iconButtonSize = "medium";
+        break;
+    }
+  }
   render() {
     return html`
       <span
@@ -61,6 +78,7 @@ var DSATag = class extends ShoelaceElement {
                 name="close"
                 label=${`${this.localize.term("remove")} ${this.label}`}
                 class="tag__remove"
+                size=${this.iconButtonSize}
                 @click=${this.handleRemoveClick}
                 ?disable-tab-index=${this.disableRemovableFocus}
               ></dsa-icon-button>
@@ -85,6 +103,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSATag.prototype, "label", 2);
+__decorateClass([
+  watch("size")
+], DSATag.prototype, "updateIconButtonSize", 1);
 DSATag = __decorateClass([
   customElement("dsa-tag")
 ], DSATag);

package/dist/chunks/chunk.6OP6GCU4.js

@@ -0,0 +1,89 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table/table-header-cell/table-header-cell.styles.ts
+import { css } from "lit";
+var table_header_cell_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: table-cell;
+    padding: var(--dsa-wc-table-header-cell-padding-y)
+      var(--dsa-wc-table-header-cell-padding-x);
+    vertical-align: middle;
+    text-align: start;
+  }
+
+  :host(:hover) {
+    background: var(--dsa-wc-table-header-cell-background-hover);
+  }
+
+  :host([sortable]) {
+    padding: 0px;
+  }
+
+  :host([alignment='left']) {
+    text-align: start;
+  }
+
+  :host([alignment='right']) {
+    text-align: end;
+  }
+
+  [part~='sort-button'] {
+    appearance: none;
+    padding: var(--dsa-wc-table-header-cell-padding-y)
+      var(--dsa-wc-table-header-cell-padding-x);
+    cursor: pointer;
+    background: inherit;
+    font: inherit;
+    border: none;
+    display: flex;
+    align-items: center;
+    gap: var(--dsa-spacing-8);
+    min-block-size: 100%;
+    width: 100%;
+  }
+
+  [part~='sort-button']:active {
+    background: var(--dsa-wc-table-header-cell-background-active);
+  }
+
+  [part~='sort-button']:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-table-header-cell-sort-button-outline-offset);
+  }
+
+  .sort-button--align-right {
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+  }
+
+  .sort-button--align-left {
+    justify-content: flex-start;
+  }
+
+  .sort-button-icon {
+    height: var(--dsa-wc-table-header-cell-sort-icon-size);
+    width: var(--dsa-wc-table-header-cell-sort-icon-size);
+    color: transparent;
+  }
+
+  .sort-button--icon--ascending,
+  .sort-button--icon--descending {
+    color: inherit;
+  }
+
+  .sort-button--icon--ascending {
+    transform: rotate(0);
+  }
+
+  .sort-button--icon--descending {
+    transform: rotate(-180deg);
+  }
+`;
+
+export {
+  table_header_cell_styles_default
+};

package/dist/chunks/{chunk.HXH4JLAN.js → chunk.6RX5APL3.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.AXG2LFB3.js";
+} from "./chunk.O3TGEE3I.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.XVDH3KHQ.js → chunk.7KYHO6CO.js}

@@ -85,8 +85,10 @@ var radio_styles_default = css`
   }
 
   /* Hover */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover,
-  .radio:hover:not(.radio--checked):not(.radio--disabled) .radio__control {
+  .radio:not(.radio--checked):not(.radio--disabled):not(.radio--readonly)
+    .radio__control:hover,
+  .radio:hover:not(.radio--checked):not(.radio--disabled):not(.radio--readonly)
+    .radio__control {
     border-color: var(--dsa-wc-radio-color-hover);
   }
 

package/dist/chunks/{chunk.ZCKAXIC4.js → chunk.7UXBTLEE.js}

@@ -1,12 +1,12 @@
 import {
   DSATreeItem
-} from "./chunk.EBCLOXNV.js";
+} from "./chunk.SEH7BBNZ.js";
 import {
   tree_styles_default
 } from "./chunk.73T7TU6S.js";
 import {
   LocalizeController
-} from "./chunk.Y5M7ZKHX.js";
+} from "./chunk.KZIAHLAV.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.7FSWPNRP.js → chunk.7XNMTM6N.js}

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

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

@@ -1,6 +1,6 @@
 import {
   checkbox_group_styles_default
-} from "./chunk.HXH4JLAN.js";
+} from "./chunk.6RX5APL3.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -42,6 +42,8 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     this.value = [];
     this.form = "";
     this.required = false;
+    this.disabled = false;
+    this.readonly = false;
     this.horizontal = false;
     this.error = false;
     this.errorMessage = "";
@@ -89,7 +91,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     if (!target) {
       return;
     }
-    if (target.disabled || "readonly" in target && target.readonly) {
+    if (target.disabled || target.readonly) {
       return;
     }
     const oldValue = this.value;
@@ -111,7 +113,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     const target = event.target;
     if (event.key === " ") {
       event.preventDefault();
-      if (target.disabled || "readonly" in target && target.readonly) {
+      if (target.disabled || target.readonly) {
         return;
       }
       target.checked = !target.checked;
@@ -135,9 +137,15 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     var _a;
     if (customElements.get("dsa-checkbox") || customElements.get("dsa-checkbox-button")) {
       const checkboxes = this.getAllCheckboxes();
-      checkboxes.forEach(
-        (checkbox) => checkbox.checked = this.value.includes(checkbox.value)
-      );
+      checkboxes.forEach((checkbox) => {
+        if (this.disabled) {
+          checkbox.disabled = true;
+        }
+        if (this.readonly) {
+          checkbox.readonly = true;
+        }
+        checkbox.checked = this.value.includes(checkbox.value);
+      });
       this.hasCheckboxButtons = checkboxes.some(
         (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
       );
@@ -349,6 +357,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSACheckboxGroup.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSACheckboxGroup.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSACheckboxGroup.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean })
 ], DSACheckboxGroup.prototype, "horizontal", 2);

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

@@ -1,6 +1,6 @@
 import {
   select_styles_default
-} from "./chunk.Z2QW2HUR.js";
+} from "./chunk.ICD5HBUY.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.Y5M7ZKHX.js";
+} from "./chunk.KZIAHLAV.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/chunk.AFFFEIW7.js

@@ -0,0 +1,154 @@
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/internal/components/button-group/button-group.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+// src/internal/components/button-group/button-group.styles.ts
+import { css } from "lit";
+var button_group_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  .button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--dsa-spacing-8);
+  }
+
+  .button-group--squeezed {
+    gap: 0;
+  }
+
+  .button-group--vertical {
+    flex-direction: column;
+    min-width: 120px;
+    max-width: 400px;
+  }
+
+  .button-group--horizontal {
+    flex-direction: row;
+  }
+`;
+
+// src/internal/components/button-group/button-group.ts
+var DSAInternalButtonGroup = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+    this.squeezed = false;
+    this.horizontal = false;
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("dsa-button-group__button--focus");
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("dsa-button-group__button--focus");
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("dsa-button-group__button--hover");
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("dsa-button-group__button--hover");
+  }
+  handleSlotChange() {
+    const slottedElements = [
+      ...this.defaultSlot.assignedElements({ flatten: true })
+    ];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button !== null) {
+        button.classList.add("dsa-button-group__button");
+        if (this.squeezed) {
+          button.classList.toggle(
+            "dsa-button-group__button--first",
+            index === 0
+          );
+          button.classList.toggle(
+            "dsa-button-group__button--inner",
+            index > 0 && index < slottedElements.length - 1
+          );
+          button.classList.toggle(
+            "dsa-button-group__button--last",
+            index === slottedElements.length - 1
+          );
+        }
+        button.classList.toggle(
+          "dsa-button-group__button--radio",
+          button.tagName.toLowerCase() === "dsa-radio-button"
+        );
+        button.classList.toggle(
+          "dsa-button-group__button--checkbox",
+          button.tagName.toLowerCase() === "dsa-checkbox-button"
+        );
+        button.classList.toggle(
+          "dsa-button-group__button--vertical",
+          !this.horizontal
+        );
+      }
+    });
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "button-group": true,
+      "button-group--squeezed": this.squeezed,
+      "button-group--vertical": !this.horizontal,
+      "button-group--horizontal": this.horizontal
+    })}
+        role="${this.disableRole ? "presentation" : "group"}"
+        aria-label=${this.label}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+DSAInternalButtonGroup.styles = button_group_styles_default;
+__decorateClass([
+  query("slot")
+], DSAInternalButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], DSAInternalButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  property()
+], DSAInternalButtonGroup.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInternalButtonGroup.prototype, "squeezed", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInternalButtonGroup.prototype, "horizontal", 2);
+DSAInternalButtonGroup = __decorateClass([
+  customElement("dsa-internal-button-group")
+], DSAInternalButtonGroup);
+function findButton(el) {
+  var _a;
+  const selector = "dsa-button, dsa-radio-button, dsa-checkbox-button, dsa-pagination-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}

package/dist/chunks/chunk.AHPXKIVU.js

@@ -0,0 +1,24 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table/table-cell/table-cell.styles.ts
+import { css } from "lit";
+var table_cell_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    position: relative;
+    display: table-cell;
+    padding: var(--dsa-wc-table-cell-padding-y)
+      var(--dsa-wc-table-cell-padding-x);
+    border-block-end: var(--dsa-wc-table-cell-border-size) solid
+      var(--dsa-wc-table-cell-border-color);
+    vertical-align: middle;
+    text-align: start;
+  }
+`;
+
+export {
+  table_cell_styles_default
+};

package/dist/chunks/{chunk.MCMUWBT5.js → chunk.AXJZDS4O.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.DXQY7NLW.js";
 import {
   LocalizeController
-} from "./chunk.Y5M7ZKHX.js";
+} from "./chunk.KZIAHLAV.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -64,6 +64,7 @@ var DSAButton = class extends ShoelaceElement {
     this.value = "";
     this.href = "";
     this.rel = "noreferrer noopener";
+    this.ariaLabel = "";
   }
   /** Gets the validity state object */
   get validity() {
@@ -205,6 +206,7 @@ var DSAButton = class extends ShoelaceElement {
         download=${ifDefined(isLink ? this.download : void 0)}
         rel=${ifDefined(isLink ? this.rel : void 0)}
         role=${ifDefined(isLink ? void 0 : "button")}
+        aria-label=${ifDefinedAndNotEmpty(this.ariaLabel)}
         aria-disabled=${this.disabled ? "true" : "false"}
         tabindex=${this.disabled ? "-1" : "0"}
         @blur=${this.handleBlur}
@@ -299,6 +301,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "formtarget" })
 ], DSAButton.prototype, "formTarget", 2);
+__decorateClass([
+  property({ attribute: "aria-label" })
+], DSAButton.prototype, "ariaLabel", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], DSAButton.prototype, "handleDisabledChange", 1);