@ds-autonomie/web-components 2.5.1 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @ds-autonomie/web-components
 
+## 2.7.0
+
+### Minor Changes
+
+- c260f56: `dropdown` : ajout d'un attribut pour fermer le panneau au clic
+- 0d2fdc5: Ajout de classes permettant d'avoir le header ou les premières colonnes d'un tableau personnalisé en "sticky"
+- f133eab: `input` : ajout d'un état de succès
+- ba0c2cd: `input-date` : possibilité de sélectionner une plage de dates
+- f25ec84: `table-single-cell-row`: ajout du composant
+
+### Patch Changes
+
+- 259ae3d: `file-upload`: amélioration de l'intégration au sein des formulaires
+- 0597e4c: `input`: séparation interne des inputs type date, time et amount
+- c73d3c7: Mise à jour des dépendances
+- Updated dependencies [c73d3c7]
+  - @ds-autonomie/assets@1.4.7
+
+## 2.6.0
+
+### Minor Changes
+
+- 4546a33: `accordion`: modification des styles, ajout d'attributs de style (taille et contours)
+- 060c7ba: `input`, `filter-date` : ajout de la possibilité d'enlever le bouton calendrier
+- 0429d00: `accordion-group`: ajout du composant
+- ae97b35: `navbar-link` : ajout de l'attribut `current`
+
+### Patch Changes
+
+- 0ac1c89: `footer-sitemap`: ajout d'un attribut permettant de déterminer l'alignement des liens
+- 81063c2: `file-upload`: ajout d'un attribut permettant de personnaliser le libellé du bouton
+- 1889da6: `tab-group` : désactivation des boutons de navigation lorsque l'on est au début / à la fin du scroll
+- 36b9d6c: `table-container` : cacher automatiquement la barre d'actions multiples si aucune ligne n'est sélectionnée; `table` : initialisation des lignes sélectionnées au chargement
+- 7a7ceec: `card-content` : modification de l'ordre du html (titre puis tags) pour une meilleure accessibilité
+- Updated dependencies [fa05b7a]
+  - @ds-autonomie/assets@1.4.6
+
 ## 2.5.1
 
 ### Patch Changes

package/cdn/chunks/chunk.24LXKV44.js

@@ -0,0 +1,94 @@
+import {
+  component_styles_default
+} from "./chunk.B5IB4265.js";
+import {
+  i
+} from "./chunk.R7BJEFEU.js";
+
+// src/components/progress-ring/progress-ring.styles.ts
+var progress_ring_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: inline-flex;
+  }
+
+  .progress-ring.progress-ring--small {
+    --size: var(--dsa-wc-progress-bar-small-size);
+    --track-width: var(--dsa-wc-progress-bar-small-track-width);
+    gap: var(--dsa-wc-progress-bar-small-gap);
+    height: var(--size);
+  }
+
+  .progress-ring.progress-ring--medium {
+    --size: var(--dsa-wc-progress-bar-size);
+    --track-width: var(--dsa-wc-progress-bar-track-width);
+    position: relative;
+  }
+
+  .progress-ring {
+    --indicator-width: var(--track-width);
+    --indicator-transition-duration: 0.35s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font: var(--dsa-wc-progress-ring-font);
+  }
+
+  .progress-ring__image {
+    width: var(--size);
+    height: var(--size);
+    rotate: -90deg;
+    transform-origin: 50% 50%;
+    flex-shrink: 0;
+  }
+
+  .progress-ring__track,
+  .progress-ring__indicator {
+    --radius: calc(
+      var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5
+    );
+    --circumference: calc(var(--radius) * 2 * 3.141592654);
+    fill: none;
+    r: var(--radius);
+    cx: calc(var(--size) / 2);
+    cy: calc(var(--size) / 2);
+  }
+
+  .progress-ring__track {
+    stroke: var(--dsa-wc-progress-ring-track-color);
+    stroke-width: var(--track-width);
+  }
+
+  .progress-ring__indicator {
+    stroke: var(--dsa-wc-progress-ring-content-color);
+    stroke-width: var(--indicator-width);
+    stroke-linecap: round;
+    transition-property: stroke-dashoffset;
+    transition-duration: var(--indicator-transition-duration);
+    stroke-dasharray: var(--circumference) var(--circumference);
+    /* stylelint-disable-next-line */
+    stroke-dashoffset: calc(
+      var(--circumference) - var(--percentage) * var(--circumference)
+    );
+  }
+
+  .progress-ring__label {
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    user-select: none;
+  }
+  .progress-ring--medium .progress-ring__label {
+    top: 0;
+    left: 0;
+    display: flex;
+    position: absolute;
+  }
+`;
+
+export {
+  progress_ring_styles_default
+};

package/cdn/chunks/chunk.27MRR3O3.js

@@ -0,0 +1,195 @@
+import {
+  table_container_styles_default
+} from "./chunk.MH5FCQH2.js";
+import {
+  LoadingStateElement
+} from "./chunk.TVWWS46A.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.EM2CIX7W.js";
+import {
+  e2 as e
+} from "./chunk.A2REDF56.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  n,
+  t
+} from "./chunk.JIQUSHGZ.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/table-container/table-container.ts
+var DSATableContainer = class extends LoadingStateElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "toolbar");
+    this.localize = new LocalizeController(this);
+    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) {
+    this.showTableActions = event.detail.selectedRows.length > 0;
+  }
+  handleCaptionSlotChange() {
+    this.linkCaptionAndTable();
+  }
+  handleTableSlotChange() {
+    this.linkCaptionAndTable();
+  }
+  linkCaptionAndTable() {
+    const tableCaption = this.querySelector("dsa-table-caption");
+    const tableElement = this.querySelector("dsa-table");
+    if (!tableCaption || !tableElement || tableCaption.id || tableElement.getAttribute("aria-labelledby"))
+      return;
+    const randomId = Math.floor(Math.random() * 999999999).toString();
+    tableCaption.id = randomId;
+    tableElement.setAttribute("aria-labelledby", randomId);
+  }
+  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() {
+    var _a;
+    const hasToolbar = this.hasSlotController.test("toolbar");
+    const hasAction = this.hasSlotController.test("action");
+    return x`
+      <slot
+        part="caption"
+        name="caption"
+        @slotchange=${this.handleCaptionSlotChange}
+      ></slot>
+      <slot part="export" name="export"></slot>
+      <div
+        part="bar-container"
+        class=${e({
+      "bar-container--has-toolbar": hasToolbar,
+      "bar-container--has-action": hasAction
+    })}
+      >
+        <slot part="toolbar" name="toolbar"></slot>
+        <slot part="action" name="action"></slot>
+      </div>
+      <slot
+        part="table"
+        name="table"
+        @slotchange=${this.handleTableSlotChange}
+      ></slot>
+      <slot part="pagination" name="pagination"></slot>
+      <dsa-visually-hidden aria-live="polite" aria-atomic="true">
+        ${this.showTableActions ? x`<span
+              >${(_a = this.actionsAnnouncement) != null ? _a : this.localize.term("showTableActionsAnnouncement")}</span
+            >` : ""}
+      </dsa-visually-hidden>
+    `;
+  }
+};
+DSATableContainer.styles = table_container_styles_default;
+__decorateClass([
+  n({ attribute: "show-table-actions", reflect: true, type: Boolean })
+], DSATableContainer.prototype, "showTableActions", 2);
+__decorateClass([
+  n({ attribute: "actions-announcement", type: String })
+], DSATableContainer.prototype, "actionsAnnouncement", 2);
+__decorateClass([
+  watch("showTableActions")
+], DSATableContainer.prototype, "handleShowTableActions", 1);
+__decorateClass([
+  watch("loading")
+], DSATableContainer.prototype, "handleLoading", 1);
+__decorateClass([
+  watch("skeletonEffect")
+], DSATableContainer.prototype, "handleSkeletonEffectChange", 1);
+DSATableContainer = __decorateClass([
+  t("dsa-table-container")
+], DSATableContainer);
+
+export {
+  DSATableContainer
+};

package/cdn/chunks/chunk.2CLHC4KV.js

@@ -0,0 +1,51 @@
+import {
+  component_styles_default
+} from "./chunk.B5IB4265.js";
+import {
+  i
+} from "./chunk.R7BJEFEU.js";
+
+// src/components/callout/callout.styles.ts
+var callout_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
+  .callout {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    border-left: var(--dsa-wc-callout-border-left);
+    border-radius: var(--dsa-wc-callout-border-radius);
+    font: var(--dsa-wc-callout-message-font);
+    color: var(--dsa-wc-callout-message-color);
+    padding: var(--dsa-wc-callout-padding);
+    margin: inherit;
+    background-color: var(--dsa-wc-callout-default-background-color);
+  }
+
+  .callout__title {
+    font: var(--dsa-wc-callout-title-font);
+    word-wrap: break-word;
+    color: var(--dsa-wc-callout-title-color);
+  }
+
+  .callout__message {
+    word-wrap: break-word;
+  }
+
+  .callout__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-wc-callout-text-gap);
+  }
+`;
+
+export {
+  callout_styles_default
+};

package/cdn/chunks/chunk.2EJZRE2T.js

@@ -0,0 +1,19 @@
+import {
+  component_styles_default
+} from "./chunk.B5IB4265.js";
+import {
+  i
+} from "./chunk.R7BJEFEU.js";
+
+// src/components/animation/animation.styles.ts
+var animation_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: contents;
+  }
+`;
+
+export {
+  animation_styles_default
+};

package/cdn/chunks/chunk.2JHL2DN5.js

@@ -0,0 +1,42 @@
+import {
+  error_text_styles_default
+} from "./chunk.6QWTSK3V.js";
+import {
+  e2 as e
+} from "./chunk.A2REDF56.js";
+import {
+  ShoelaceElement,
+  t
+} from "./chunk.JIQUSHGZ.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/error-text/error-text.ts
+var DSAErrorText = class extends ShoelaceElement {
+  render() {
+    return x`<div
+      class=${e({
+      "error-text": true
+    })}
+    >
+      <dsa-icon
+        name="error"
+        class="error-text__icon"
+        library="system"
+      ></dsa-icon>
+      <slot class="error-text__slot"></slot>
+    </div> `;
+  }
+};
+DSAErrorText.styles = error_text_styles_default;
+DSAErrorText = __decorateClass([
+  t("dsa-error-text")
+], DSAErrorText);
+
+export {
+  DSAErrorText
+};

package/cdn/chunks/chunk.2K2TU6XK.js

@@ -0,0 +1,148 @@
+import {
+  component_styles_default
+} from "./chunk.B5IB4265.js";
+import {
+  i
+} from "./chunk.R7BJEFEU.js";
+
+// src/components/page-header/page-header.styles.ts
+var page_header_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    --internal-page-header-padding-inline: var(
+      --page-header-padding-inline,
+      var(--dsa-wc-page-header-padding-x-mobile)
+    );
+  }
+
+  ::slotted(*) {
+    margin: 0;
+    padding: 0;
+    font-size: 100%;
+    font: inherit;
+  }
+
+  .page-header {
+    background-color: var(--dsa-wc-page-header-background);
+    color: var(--dsa-wc-page-header-color);
+    display: flex;
+    justify-content: center;
+    padding: var(--dsa-spacing-16) var(--internal-page-header-padding-inline)
+      var(--dsa-spacing-24);
+  }
+
+  .page-header__container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-24);
+    width: 100%;
+    max-width: var(--page-header-max-width);
+  }
+
+  .backlink {
+    display: block;
+  }
+
+  .title-and-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-16);
+  }
+
+  .title-icon::slotted(*) {
+    flex-shrink: 0;
+    width: var(--dsa-wc-page-header-title-icon-size-mobile);
+    height: var(--dsa-wc-page-header-title-icon-size-mobile);
+  }
+
+  .text-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-16);
+  }
+
+  .text-first-line {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-16);
+  }
+
+  .page-header--mobile .title {
+    font: var(--dsa-wc-page-header-title-font-mobile);
+  }
+  .page-header--desktop .title {
+    font: var(--dsa-wc-page-header-title-font-desktop);
+  }
+
+  .tags {
+    display: flex;
+    gap: var(--dsa-spacing-12);
+  }
+
+  .text-second-line {
+    display: flex;
+    align-items: baseline;
+  }
+  .page-header--mobile .text-second-line {
+    flex-direction: column;
+    gap: var(--dsa-spacing-8);
+  }
+  .page-header--desktop .text-second-line {
+    flex-direction: row;
+    gap: var(--dsa-spacing-16);
+  }
+  .subtitle {
+    font: var(--dsa-wc-page-header-subtitle-font);
+  }
+  .secondary-text {
+    font: var(--dsa-wc-page-header-secondary-text-font);
+    color: var(--dsa-wc-page-header-secondary-text-color);
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--dsa-spacing-16);
+  }
+
+  /* 
+  * Desktop-specific styles 
+  */
+
+  .page-header--desktop {
+    --internal-page-header-padding-inline: var(
+      --page-header-padding-inline,
+      var(--dsa-wc-page-header-padding-x-desktop)
+    );
+    padding: var(--dsa-spacing-32) var(--internal-page-header-padding-inline)
+      var(--dsa-spacing-24);
+  }
+
+  .page-header--desktop .title-and-actions {
+    flex-direction: row;
+    gap: var(--dsa-spacing-12);
+  }
+
+  .page-header--desktop .title-icon::slotted(*) {
+    width: var(--dsa-wc-page-header-title-icon-size-desktop);
+    height: var(--dsa-wc-page-header-title-icon-size-desktop);
+  }
+
+  .page-header--desktop .text-content {
+    gap: var(--dsa-spacing-8);
+  }
+
+  .page-header--desktop .text-first-line {
+    flex-direction: row;
+    gap: var(--dsa-spacing-24);
+  }
+
+  .page-header--desktop .actions {
+    margin-left: auto;
+  }
+`;
+
+export {
+  page_header_styles_default
+};