@ds-autonomie/web-components 1.6.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @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
+
+- d0ddca3: `footer`, `footer-sitemap`, `footer-sitemap-item`, `footer-inline-divider`, `footer-content-block`: implémentation du composant `footer` et de ses sous-composants.
+- e7669d9: `file-upload`, `file-upload-item`: implémentation des composants file-upload et file-upload-item
+- 4b8f839: `alert` : ajout d'un attribut `duration`
+- e53ca70: `radio-button`, `checkbox-button` : ajout d'un état d'erreur
+
+### Patch Changes
+
+- 62e792a: `radio-button`, `checkbox-button` : correction du bug sur l'attribut `readonly` et ajustement des styles
+
 ## 1.6.0
 
 ### Minor Changes

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

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.CKDL37GT.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.2PA4QKLT.js

@@ -0,0 +1,43 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/footer-sitemap-item/footer-sitemap-item.styles.ts
+import { css } from "lit";
+var footer_sitemap_item_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  :host ::slotted(*) {
+    font: inherit;
+    font-size: inherit;
+    color: var(--dsa-color-text-on-layer-primary);
+    text-decoration: none;
+  }
+
+  ::slotted(*:hover) {
+    border-bottom-style: solid;
+    border-bottom-width: var(--dsa-wc-link-underline-thickness);
+    color: var(--dsa-color-text-on-layer-primary);
+  }
+
+  ::slotted(*:visited) {
+    color: var(--dsa-wc-link-visited-on-base-color);
+  }
+
+  ::slotted(*:active) {
+    color: var(--dsa-wc-link-active-on-base-color);
+  }
+  
+  ::slotted(*:focus-visible) {
+    outline: var(--dsa-wc-focus-ring);
+    border-radius: var(--dsa-wc-focus-ring-radius);
+  })
+`;
+
+export {
+  footer_sitemap_item_styles_default
+};

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

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.CKDL37GT.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.2SUJL5O6.js → chunk.5MXBL3PY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.NHRDZGLI.js";
 import {
   DSAIcon
-} from "./chunk.M3FN3PFT.js";
+} from "./chunk.V7MYOBN4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

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.672XI6OQ.js

@@ -0,0 +1,108 @@
+import {
+  file_upload_item_styles_default
+} from "./chunk.ZOKFJBTV.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/file-upload-item/file-upload-item.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { LocalizeController } from "@shoelace-style/localize";
+var DSAFileUploadItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.size = "medium";
+    this.error = false;
+    this.errorMessage = "";
+  }
+  handleRemoveClick(event) {
+    event.stopPropagation();
+    this.emit("dsa-clear");
+  }
+  render() {
+    var _a;
+    const isUploadCompleted = (this.uploadProgress === void 0 || this.uploadProgress === 100) && !this.error;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "file-item-container": true,
+      "file-item-container--error": this.error,
+      "file-item-container--small": this.size === "small",
+      "file-item-container--medium": this.size === "medium",
+      "file-item-container--large": this.size === "large"
+    })}
+      >
+        <article part="file-item" aria-describedby="error-text">
+          <slot part="label"></slot>
+          <slot
+            part="upload-indicator"
+            name="upload-indicator"
+            class=${classMap({
+      "upload-indicator": true,
+      "upload-indicator--show": this.uploadProgress !== void 0 && !isUploadCompleted
+    })}
+            >${this.uploadProgress}%</slot
+          >
+          <button
+            part="clear-button"
+            type="button"
+            @click=${this.handleRemoveClick}
+            aria-label=${this.localize.term("clearFile")}
+          >
+            ${isUploadCompleted ? html`<dsa-icon name="delete"></dsa-icon>` : html`<dsa-icon name="close"></dsa-icon>`}
+          </button>
+          <div
+            part="progress-bar"
+            role="progressbar"
+            title=${this.localize.term("uploadFileProgressBar")}
+            class=${classMap({
+      "progress-bar": this.uploadProgress !== void 0 && !isUploadCompleted
+    })}
+            aria-label=${this.localize.term("uploadFileProgressBar")}
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow=${this.uploadProgress === void 0 ? 0 : this.uploadProgress}
+          >
+            <div
+              part="progress-bar-indicator"
+              style=${styleMap({ width: `${(_a = this.uploadProgress) != null ? _a : 0}%` })}
+            ></div>
+          </div>
+        </article>
+        ${this.error ? html`
+              <dsa-error-text id="error-text" part="error-text"
+                >${this.errorMessage}</dsa-error-text
+              >
+            ` : html``}
+      </div>
+    `;
+  }
+};
+DSAFileUploadItem.styles = file_upload_item_styles_default;
+__decorateClass([
+  property({ reflect: true })
+], DSAFileUploadItem.prototype, "size", 2);
+__decorateClass([
+  property({ type: Number, attribute: "upload-progress" })
+], DSAFileUploadItem.prototype, "uploadProgress", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAFileUploadItem.prototype, "error", 2);
+__decorateClass([
+  property({ attribute: "error-message" })
+], DSAFileUploadItem.prototype, "errorMessage", 2);
+DSAFileUploadItem = __decorateClass([
+  customElement("dsa-file-upload-item")
+], DSAFileUploadItem);
+
+export {
+  DSAFileUploadItem
+};

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

@@ -3,7 +3,10 @@ import {
 } from "./chunk.WFHOSUOX.js";
 import {
   LocalizeController
-} from "./chunk.CKDL37GT.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.7WQVFO44.js → chunk.6HEEXQ6Q.js}

@@ -22,9 +22,9 @@ var checkbox_button_styles_default = css`
     background-color: var(--dsa-wc-toggle-button-background-color);
     border-color: var(--dsa-wc-toggle-button-border-color);
     color: var(--dsa-wc-toggle-button-color);
-
     border-width: 1px;
     boder-style: solid;
+    font-weight: 400;
   }
 
   .button--toggle:hover {
@@ -60,21 +60,21 @@ var checkbox_button_styles_default = css`
     color: var(--dsa-wc-toggle-button-checked-active-color);
   }
 
-  .button--toggle.button--readonly.button--readonly {
+  .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);
     padding-left: var(--dsa-wc-toggle-button-icon-padding-x);
+    cursor: not-allowed;
   }
-  .button--toggle.button--checked.button--readonly.button--readonly {
+  .button--toggle.button--checked.button--readonly {
     background-color: var(
       --dsa-wc-toggle-button-read-only-checked-background-color
     );
     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--read-only.button--readonly
-    .button__icon-check {
+  .button--toggle.button--checked.button--readonly .button__icon-check {
     color: var(--dsa-wc-toggle-button-read-only-checked-icon-color);
   }
 
@@ -95,6 +95,12 @@ var checkbox_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.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.VFYKLPN2.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);
   }
 
@@ -137,6 +139,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.RV652CSU.js → chunk.7UXBTLEE.js}

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

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

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

package/dist/chunks/{chunk.TMG7TJJO.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) {
+    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) {
+      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.WLJH2IWB.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.CKDL37GT.js";
+} from "./chunk.KZIAHLAV.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";