@ds-autonomie/web-components 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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

package/dist/chunks/{chunk.KZIAHLAV.js → chunk.27JQOQHL.js}

@@ -59,23 +59,32 @@ var translation = {
   ofTotal: (total) => `sur ${total}`,
   previousPage: "Page pr\xE9c\xE9dente",
   nextPage: "Page suivante",
-  nextSortDirection: (direction) => {
+  nextSortDirection: (direction, label) => {
     switch (direction) {
       case "ascending" /* ASCENDING */:
-        return "Au prochain clic, trier vers le haut";
+        return `${label}, activer pour trier vers le haut`;
       case "descending" /* DESCENDING */:
-        return "Au prochain clic, trier vers le bas";
+        return `${label}, activer pour trier vers le bas`;
       default:
-        return "";
+        return `${label}`;
     }
   },
   results: "r\xE9sultats",
-  // countries
+  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;
@@ -143,23 +152,32 @@ var translation2 = {
   ofTotal: (total) => `of ${total}`,
   previousPage: "Previous page",
   nextPage: "Next page",
-  nextSortDirection: (direction) => {
+  nextSortDirection: (direction, label) => {
     switch (direction) {
       case "ascending" /* ASCENDING */:
-        return "Next click, sort upwards";
+        return `${label}, activate to sort upwards`;
       case "descending" /* DESCENDING */:
-        return "Next click, sort downwards";
+        return `${label}, activate to sort downwards`;
       default:
-        return "";
+        return `${label}`;
     }
   },
   results: "results",
-  // countries
+  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.K55HKFUM.js → chunk.2CCVOCSE.js}

@@ -48,6 +48,17 @@ var table_caption_styles_default = css`
     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 {

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.WMEXYRBL.js → chunk.3EDVQPST.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.KZIAHLAV.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
+};

package/dist/chunks/{chunk.BEGWFCAR.js → chunk.4Z3LVWYW.js}

@@ -13,6 +13,7 @@ var icon_button_styles_default = css`
       var(--dsa-wc-icon-button-padding)
     );
     display: inline-block;
+    position: relative;
   }
 
   .icon-button {
@@ -167,21 +168,40 @@ var icon_button_styles_default = css`
     border-color: transparent;
     color: var(--dsa-wc-button-navigation-on-base-font-color);
   }
-  .icon-button--default:hover:not(.button--disabled) {
+  .icon-button--default:hover:not(.icon-button--disabled) {
     background-color: var(--dsa-wc-button-navigation-on-base-hover-color);
     border-color: transparent;
     color: var(--dsa-wc-button-navigation-on-base-hover-font-color);
   }
-  .icon-button--default:active:not(.button--disabled) {
+  .icon-button--default:active:not(.icon-button--disabled) {
     background-color: var(--dsa-wc-button-navigation-on-base-active-color);
     border-color: transparent;
     color: var(--dsa-wc-button-navigation-on-base-active-font-color);
   }
-  .icon-button--default.button--disabled {
+  .icon-button--default.icon-button--disabled {
     background-color: var(--dsa-wc-button-navigation-on-base-disabled-color);
     border-color: transparent;
     color: var(--dsa-wc-button-navigation-on-base-disabled-font-color);
   }
+
+  /*
+   * Badges
+   */
+
+  .icon-button ::slotted(dsa-badge) {
+    position: absolute;
+    translate: 50% -50%;
+    pointer-events: none;
+  }
+  :not(.icon-button--tertiary):not(.icon-button--default) ::slotted(dsa-badge) {
+    top: 0;
+    right: 0;
+  }
+  .icon-button--tertiary ::slotted(dsa-badge),
+  .icon-button--default ::slotted(dsa-badge) {
+    top: var(--padding);
+    right: var(--padding);
+  }
 `;
 
 export {

package/dist/chunks/{chunk.5MXBL3PY.js → chunk.5QYMKLPJ.js}

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

package/dist/chunks/{chunk.TRMEXXU2.js → chunk.5X3ZLYWR.js}

@@ -1,10 +1,10 @@
+import {
+  input_styles_default
+} from "./chunk.2AEUQXKH.js";
 import {
   getOverridenIconDetails,
   isPrefixIconOverriden
 } from "./chunk.KBT2EKLF.js";
-import {
-  input_styles_default
-} from "./chunk.2AEUQXKH.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -16,7 +16,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.KZIAHLAV.js";
+} from "./chunk.27JQOQHL.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

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

@@ -0,0 +1,31 @@
+// src/components/input-phone/input-phone.configs.ts
+var NationalFrenchPhoneConfig = {
+  placeholder: "_ __ __ __ __",
+  mask: "# ## ## ## ##",
+  pattern: "^((\\+)33|(\\+)262|(\\+)590|(\\+)594|(\\+)596)[1-9](\\d{2}){4}$"
+};
+var SixNumbersPhoneConfig = {
+  placeholder: "__ __ __",
+  mask: "## ## ##",
+  pattern: "^((\\+)508|(\\+)681|(\\+)687|(\\+)689)(\\d{2}){3}$"
+};
+function getPhoneConfig(phonePrefix) {
+  switch (phonePrefix) {
+    case "+508":
+    case "+681":
+    case "+687":
+    case "+689":
+      return SixNumbersPhoneConfig;
+    case "+33":
+    case "+262":
+    case "+590":
+    case "+594":
+    case "+596":
+    default:
+      return NationalFrenchPhoneConfig;
+  }
+}
+
+export {
+  getPhoneConfig
+};