@ds-autonomie/web-components 1.7.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @ds-autonomie/web-components
 
+## 1.9.0
+
+### Minor Changes
+
+- e92bccf: `table-row`, `table-header-row`, `table`: ajout de la sélection d'une ligne d'un tableau.
+  `checkbox`: ajout de l'attribut aria-label
+- 25b9f28: `table`, `table-row`, `table-header-row`, `table-expanded-row`: ajout des lignes extensibles au tableau avec l'implémentation du composant `table-expanded-row`.
+- e8b7577: `input-phone` : possibilité d'ajouter un préfix, ajout de codes pays manquant
+- e4a68f5: `badge`, `button`, `icon-button` : ajout d'un attribut `size` au composant badge, et possibilité d'ajouter un badge dans les composants `button` et `icon-button`
+- 26b01fe: `header`, `header-search`, `header-external-link` : ajout du composant en-tête
+- 1348674: `table-container`, `table-caption`, `table-head`, `table-body`, `pagination` : ajout d'un état de chargement pour les éléments du tableau
+- 16a8418: `table-row`, `table-header-row`: ajout d'un évènement au clique sur une ligne du tableau.
+
+### Patch Changes
+
+- fc4187a: `table-header-cell` : ajout du nom de la colonne à l'attribut aria-label du bouton de tri
+- b35d5fb: `skip-links` : support des `href` dynamiques
+
+## 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.Y5M7ZKHX.js → chunk.27JQOQHL.js}

@@ -51,12 +51,40 @@ var translation = {
   },
   clearFile: "Retirer le fichier",
   uploadFileProgressBar: "Barre de progression pour le t\xE9l\xE9chargement de fichiers",
-  // countries
+  pagination: "Pagination",
+  paginationResults: (from, to, total) => `${from}-${to} sur ${total} r\xE9sultats`,
+  paginationResultsAriaLabel: (from, to, total) => `Affichage de ${from} \xE0 ${to} sur ${total} r\xE9sultats`,
+  linesPerPage: "Lignes par page",
+  page: "page",
+  ofTotal: (total) => `sur ${total}`,
+  previousPage: "Page pr\xE9c\xE9dente",
+  nextPage: "Page suivante",
+  nextSortDirection: (direction, label) => {
+    switch (direction) {
+      case "ascending" /* ASCENDING */:
+        return `${label}, activer pour trier vers le haut`;
+      case "descending" /* DESCENDING */:
+        return `${label}, activer pour trier vers le bas`;
+      default:
+        return `${label}`;
+    }
+  },
+  results: "r\xE9sultats",
+  goToHomepage: "Aller \xE0 la page d'accueil",
+  search: "Rechercher",
+  cancel: "Annuler",
+  showExpandedTableRow: "Afficher d\xE9tails",
+  hideExpandedTableRow: "Masquer d\xE9tails",
+  // countries and regions
   fr_FR: "France",
-  fr_GP: "Guadeloupe",
+  fr_GP: "Guadeloupe, Saint-Barth\xE9lemy et Saint-Martin",
   fr_GF: "Guyane",
   fr_MQ: "Martinique",
-  fr_RE: "R\xE9union"
+  fr_NC: "Nouvelle-Cal\xE9donie",
+  fr_PF: "Polyn\xE9sie fran\xE7aise",
+  fr_PM: "Saint-Pierre-et-Miquelon",
+  fr_RE: "R\xE9union et Mayotte",
+  fr_WF: "Wallis-et-Futuna"
 };
 registerTranslation(translation);
 var fr_default = translation;
@@ -116,12 +144,40 @@ var translation2 = {
   },
   clearFile: "Remove file",
   uploadFileProgressBar: "Upload file progress bar",
-  // countries
+  pagination: "Pagination",
+  paginationResults: (from, to, total) => `${from}-${to} of ${total} results`,
+  paginationResultsAriaLabel: (from, to, total) => `Showing ${from} to ${to} of ${total} results`,
+  linesPerPage: "Lines per page",
+  page: "page",
+  ofTotal: (total) => `of ${total}`,
+  previousPage: "Previous page",
+  nextPage: "Next page",
+  nextSortDirection: (direction, label) => {
+    switch (direction) {
+      case "ascending" /* ASCENDING */:
+        return `${label}, activate to sort upwards`;
+      case "descending" /* DESCENDING */:
+        return `${label}, activate to sort downwards`;
+      default:
+        return `${label}`;
+    }
+  },
+  results: "results",
+  goToHomepage: "Go to Homepage",
+  search: "Search",
+  cancel: "Cancel",
+  showExpandedTableRow: "Show details",
+  hideExpandedTableRow: "Hide details",
+  // countries and regions
   fr_FR: "France",
   fr_GP: "Guadeloupe",
   fr_GF: "Guiana",
   fr_MQ: "Martinique",
-  fr_RE: "R\xE9union"
+  fr_NC: "New Caledonia",
+  fr_PF: "French Polynesia",
+  fr_PM: "Saint-Pierre-et-Miquelon",
+  fr_RE: "R\xE9union and Mayotte",
+  fr_WF: "Wallis and Futuna"
 };
 registerTranslation(translation2);
 var en_default = translation2;

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.2CCVOCSE.js

@@ -0,0 +1,66 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table/table-caption/table-caption.styles.ts
+import { css } from "lit";
+var table_caption_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    text-align: left;
+    padding: var(--dsa-spacing-8);
+  }
+
+  :host ::slotted(*) {
+    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);
+  }
+
+  [part~='subtitle']::slotted(*) {
+    font: var(--dsa-font-small-normal);
+    color: var(--dsa-color-text-on-base-primary);
+  }
+
+  [part~='total-items'] {
+    display: none;
+    margin: 0px;
+  }
+
+  .has-total-items {
+    display: flex;
+    align-items: baseline;
+    gap: var(--dsa-spacing-4);
+    font: var(--dsa-font-small-bold);
+    color: var(--dsa-color-primitives-neutral-650);
+  }
+
+  [part~='total-item--indicator'] {
+    font: var(--dsa-font-x-small-normal);
+    color: var(--dsa-color-text-on-base-secondary);
+  }
+
+  /* Skeletons */
+  dsa-skeleton {
+    margin-top: var(--dsa-spacing-8);
+  }
+  .subtitle-skeleton {
+    max-width: 140px;
+  }
+  .total-items-skeleton {
+    max-width: 76px;
+  }
+`;
+
+export {
+  table_caption_styles_default
+};

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

@@ -0,0 +1,187 @@
+import {
+  table_row_styles_default
+} from "./chunk.N7H2OIPT.js";
+import {
+  LocalizeController
+} from "./chunk.27JQOQHL.js";
+import {
+  watch
+} from "./chunk.6IH66JBY.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/table/table-row/table-row.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSATableRow = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.showExpandButton = false;
+    this.role = "row";
+    this.size = "medium";
+    this.selected = false;
+    this.expandable = false;
+    this.expanded = false;
+    this.showExpandedLabel = "";
+    this.hideExpandedLabel = "";
+    this.selectionLabel = "";
+    this.selectionName = "";
+    this.selectionValue = "";
+    this.loading = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleRowClick = this.handleRowClick.bind(this);
+    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
+    this.addEventListener("click", this.handleRowClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleRowClick);
+  }
+  handleRowClick() {
+    this.emit("dsa-table-row-click");
+  }
+  handleCheckboxChange(e) {
+    e.stopPropagation();
+    this.selected = this.checkbox.checked;
+    this.emit("dsa-table-row-change-selection");
+  }
+  renderFirstCell() {
+    return this.selectionName ? html`
+          <div role="cell" part="column-checkbox" aria-hidden=${this.loading}>
+            <div class="column-checkbox--content">
+              <dsa-checkbox
+                class="checkbox"
+                size="small"
+                name=${this.selectionName}
+                aria-label=${this.selectionLabel}
+                value=${this.selectionValue}
+                ?checked=${this.selected}
+                @click=${(e) => e.stopPropagation()}
+                @dsa-change=${this.handleCheckboxChange}
+                ?disabled=${this.loading}
+              ></dsa-checkbox>
+            </div>
+          </div>
+        ` : html``;
+  }
+  handleExpandClick(e) {
+    e.stopPropagation();
+    this.expanded = !this.expanded;
+    this.emit("dsa-table-row-expand-change");
+  }
+  renderExpandButton() {
+    const showExpandedLabel = this.showExpandedLabel !== "" ? this.showExpandedLabel : this.localize.term("showExpandedTableRow");
+    const hideExpandedLabel = this.hideExpandedLabel !== "" ? this.hideExpandedLabel : this.localize.term("hideExpandedTableRow");
+    return html`
+      <div
+        role="cell"
+        class=${classMap({
+      "column-expand-button": true,
+      "column-expand-button--has-icon": this.showExpandButton
+    })}
+        aria-hidden=${this.loading}
+      >
+        <dsa-icon-button
+          variant="default"
+          name="expand_more"
+          size="xlarge"
+          class=${classMap({
+      "expand-button": true,
+      "expand-button--expand-less": this.expanded
+    })}
+          label=${this.expanded ? hideExpandedLabel : showExpandedLabel}
+          @click=${this.handleExpandClick}
+          ?disabled=${this.loading}
+        ></dsa-icon-button>
+      </div>
+    `;
+  }
+  handleExpandableChange() {
+    var _a;
+    if (this.expandable && ((_a = this.nextElementSibling) == null ? void 0 : _a.matches(this.selectorExpandedRow))) {
+      this.showExpandButton = true;
+    } else {
+      this.showExpandButton = false;
+    }
+  }
+  handleExpandedChange() {
+    var _a;
+    if ((_a = this.nextElementSibling) == null ? void 0 : _a.matches(this.selectorExpandedRow)) {
+      this.nextElementSibling.expanded = this.expanded;
+    }
+  }
+  render() {
+    return html`
+      ${this.renderFirstCell()}
+      <slot></slot>
+      ${this.expandable ? this.renderExpandButton() : html``}
+    `;
+  }
+  get selectorExpandedRow() {
+    return "dsa-table-expanded-row";
+  }
+};
+DSATableRow.styles = table_row_styles_default;
+__decorateClass([
+  query(".checkbox")
+], DSATableRow.prototype, "checkbox", 2);
+__decorateClass([
+  query(".expand-button")
+], DSATableRow.prototype, "expandedButton", 2);
+__decorateClass([
+  state()
+], DSATableRow.prototype, "showExpandButton", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSATableRow.prototype, "role", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSATableRow.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableRow.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableRow.prototype, "expandable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableRow.prototype, "expanded", 2);
+__decorateClass([
+  property({ attribute: "show-expanded-label" })
+], DSATableRow.prototype, "showExpandedLabel", 2);
+__decorateClass([
+  property({ attribute: "hide-expanded-label" })
+], DSATableRow.prototype, "hideExpandedLabel", 2);
+__decorateClass([
+  property({ attribute: "selection-label" })
+], DSATableRow.prototype, "selectionLabel", 2);
+__decorateClass([
+  property({ attribute: "selection-name", reflect: true })
+], DSATableRow.prototype, "selectionName", 2);
+__decorateClass([
+  property({ attribute: "selection-value" })
+], DSATableRow.prototype, "selectionValue", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableRow.prototype, "loading", 2);
+__decorateClass([
+  watch("expandable")
+], DSATableRow.prototype, "handleExpandableChange", 1);
+__decorateClass([
+  watch("expanded")
+], DSATableRow.prototype, "handleExpandedChange", 1);
+DSATableRow = __decorateClass([
+  customElement("dsa-table-row")
+], DSATableRow);
+
+export {
+  DSATableRow
+};

package/dist/chunks/chunk.3BOLT7UM.js

@@ -0,0 +1,168 @@
+import {
+  header_search_styles_default
+} from "./chunk.N5UMZAXE.js";
+import {
+  LocalizeController
+} from "./chunk.27JQOQHL.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/header-search/header-search.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { live } from "lit/directives/live.js";
+var DSAHeaderSearch = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.value = "";
+    this.expanded = false;
+  }
+  async handleExpandClick() {
+    this.emit("dsa-expand");
+    this.expanded = true;
+    await this.updateComplete;
+    this.input.focus();
+  }
+  handleChange() {
+    this.value = this.input.value;
+    this.emit("dsa-change");
+  }
+  handleInput() {
+    this.value = this.input.value;
+    this.emit("dsa-input");
+  }
+  handleInputFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleInputBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleClearClick(event) {
+    this.value = "";
+    this.emit("dsa-clear");
+    this.emit("dsa-input");
+    this.emit("dsa-change");
+    this.input.focus();
+    event.stopPropagation();
+  }
+  handleKeyDown(event) {
+    event.stopPropagation();
+    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (event.key === "Enter" && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented && !event.isComposing) {
+          this.handleSubmitClick();
+        }
+      });
+    }
+  }
+  handleSubmitClick() {
+    this.emit("dsa-submit");
+  }
+  async handleCancelClick() {
+    this.emit("dsa-collapse");
+    this.expanded = false;
+    await this.updateComplete;
+    this.expandButton.focus();
+  }
+  render() {
+    if (!this.expanded) {
+      return html`
+        <button
+          aria-label=${this.localize.term("search")}
+          id="expand-button"
+          class="button button--navigation"
+          @click=${this.handleExpandClick}
+        >
+          <dsa-icon name="search"></dsa-icon>
+          <span class="expand-button__label"
+            >${this.localize.term("search")}</span
+          >
+        </button>
+      `;
+    }
+    return html`
+      <div class=${classMap({ input: true, "input--focused": this.hasFocus })}>
+        <input
+          class="input__control"
+          type="search"
+          placeholder=${this.localize.term("search")}
+          aria-label=${this.localize.term("search")}
+          .value=${live(this.value)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @focus=${this.handleInputFocus}
+          @blur=${this.handleInputBlur}
+          @keydown=${this.handleKeyDown}
+        />
+        ${this.value.length > 0 ? html`
+              <dsa-icon-button
+                id="clear-button"
+                part="clear-button"
+                name="cancel"
+                label=${this.localize.term("clearEntry")}
+                @click=${this.handleClearClick}
+              ></dsa-icon-button>
+            ` : ""}
+      </div>
+
+      <button
+        class="icon-button icon-button--primary"
+        id="submit-button"
+        @click=${this.handleSubmitClick}
+        aria-label=${this.localize.term("search")}
+      >
+        <dsa-icon name="search"></dsa-icon>
+      </button>
+
+      <button
+        class="button button--tertiary"
+        id="cancel-button"
+        @click=${this.handleCancelClick}
+      >
+        ${this.localize.term("cancel")}
+      </button>
+    `;
+  }
+};
+DSAHeaderSearch.styles = header_search_styles_default;
+__decorateClass([
+  query(".input__control")
+], DSAHeaderSearch.prototype, "input", 2);
+__decorateClass([
+  query("#expand-button")
+], DSAHeaderSearch.prototype, "expandButton", 2);
+__decorateClass([
+  query("#submit-button")
+], DSAHeaderSearch.prototype, "submitButton", 2);
+__decorateClass([
+  query("#cancel-button")
+], DSAHeaderSearch.prototype, "cancelButton", 2);
+__decorateClass([
+  query("#clear-button")
+], DSAHeaderSearch.prototype, "clearButton", 2);
+__decorateClass([
+  state()
+], DSAHeaderSearch.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], DSAHeaderSearch.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], DSAHeaderSearch.prototype, "expanded", 2);
+DSAHeaderSearch = __decorateClass([
+  customElement("dsa-header-search")
+], DSAHeaderSearch);
+
+export {
+  DSAHeaderSearch
+};

package/dist/chunks/{chunk.NIYQMA5Y.js → chunk.3EDVQPST.js}

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

package/dist/chunks/chunk.47IWI2IO.js

@@ -0,0 +1,51 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table/table-expanded-row/table-expanded-row.styles.ts
+import { css } from "lit";
+var table_expanded_row_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: table-row;
+    background: var(--dsa-wc-table-expanded-row-background);
+    block-size: 0px;
+    transition: var(--dsa-wc-table-expanded-row-transition);
+  }
+
+  :host([expanded]) {
+    block-size: var(--dsa-wc-table-expanded-row-height);
+  }
+
+  .expanded-row {
+    font: var(--dsa-wc-table-row-font);
+    color: var(--dsa-wc-table-row-color);
+    padding: 0px var(--dsa-wc-table-expanded-row-padding-x);
+
+    box-shadow: var(--dsa-wc-table-expanded-row-top-shadow),
+      var(--dsa-wc-table-expanded-row-bottom-shadow);
+    transition: var(--dsa-wc-table-expanded-row-transition);
+    inline-size: 100%;
+  }
+
+  :host([expanded]) .expanded-row {
+    padding: var(--dsa-wc-table-expanded-row-padding-y)
+      var(--dsa-wc-table-expanded-row-padding-x);
+  }
+
+  .expanded-row div {
+    display: none;
+    overflow: hidden;
+    block-size: 0px;
+  }
+
+  :host([expanded]) .expanded-row div {
+    display: block;
+    block-size: auto;
+  }
+`;
+
+export {
+  table_expanded_row_styles_default
+};