@ds-autonomie/web-components 2.7.1 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @ds-autonomie/web-components
 
+## 2.8.0
+
+### Minor Changes
+
+- f90bad2: `search` : ajout du composant recherche
+- 941ea97: `sidenav` : ajout du composant ;
+  `menu-accordion` : ajout de l'attribut `size`, ajout des slots `prefix` et `badge` ;
+  `menu-label` : ajustement rendu ;
+- f2aa551: `page-header` : ajout de la propriété `reduced` pour l'affichage limité
+- 388c7ba: `card-content` : ajout/modification des tailles `medium`/`small`
+
+### Patch Changes
+
+- 674f38d: `input-date`, `input-time` : dans un drawer, empêcher l'appui sur Echap pour fermer la popup de fermer également le drawer
+- 263d113: `table-action` : mise à jour du style
+- fcf11b5: `table-container` : (a11y) Empecher d'atteindre la barre d'outil avec le lecteur d'écran si la barre d'action est affichée; `table-actions` : (a11y) empêcher d'atteindre la barre d'action au lecteur d'écran lorsqu'elle est cachée; `select`, `combobox`: désactivation des tags lorsque l'élément est désactivé
+- 8f68653: `fieldset` : modification pour permettre aux champs enfants d'être désactivé de manière individuelle
+- 6e512ce: `combobox`, `dialog`, `drawer`, `navbar-menu`, `select` : suppression d'attributs tabindex inutiles
+- feec186: `file-upload` : changement du style du bouton de `primary` à `secondary`
+- 99c1894: `tag` : ajout des variantes `neutral`, et ajustement des couleurs disponibles (100 à 400)
+- a59c265: `switch` : renommage des attributs pour les libéllés des états on et off
+- 180407a: `accordion` : résolution du problème de z-index dans le slot "actions"
+- 5a60230: `tree-item` : séparation des comportement d'ouverture et de sélection, ajout d'un icone check pour la sélection simple
+- Updated dependencies [263d113]
+- Updated dependencies [99c1894]
+- Updated dependencies [0ff990d]
+  - @ds-autonomie/assets@1.4.9
+
 ## 2.7.1
 
 ### Patch Changes

package/cdn/chunks/{chunk.X7VTIYF4.js → chunk.2AGKTM6V.js}

@@ -20,7 +20,7 @@ var menu_item_styles_default = i`
   .menu-item {
     position: relative;
     display: flex;
-    align-items: stretch;
+    align-items: center;
     color: var(--dsa-wc-menu-item-color);
     transition: var(--dsa-wc-transition-fast) fill;
     user-select: none;
@@ -33,6 +33,15 @@ var menu_item_styles_default = i`
       --dsa-wc-menu-navigation-item-current-background-color
     );
   }
+  .menu-item[aria-current]::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+    background-color: var(--dsa-wc-menu-navigation-item-current-color);
+  }
 
   .menu-item--button {
     background: none;
@@ -46,6 +55,7 @@ var menu_item_styles_default = i`
   .menu-item.menu-item--small {
     font: var(--dsa-wc-menu-item-small-font);
     padding: var(--dsa-wc-menu-item-small-padding);
+    min-height: var(--dsa-wc-menu-item-small-min-height);
   }
   .menu-item.menu-item--small[aria-current] {
     font: var(--dsa-wc-menu-item-small-font-current);
@@ -53,6 +63,7 @@ var menu_item_styles_default = i`
   .menu-item.menu-item--medium {
     font: var(--dsa-wc-menu-item-font);
     padding: var(--dsa-wc-menu-item-padding);
+    min-height: var(--dsa-wc-menu-item-min-height);
   }
   .menu-item.menu-item--medium[aria-current] {
     font: var(--dsa-wc-menu-item-font-current);
@@ -60,6 +71,7 @@ var menu_item_styles_default = i`
   .menu-item.menu-item--large {
     font: var(--dsa-wc-menu-item-large-font);
     padding: var(--dsa-wc-menu-item-large-padding);
+    min-height: var(--dsa-wc-menu-item-large-min-height);
   }
   .menu-item.menu-item--large[aria-current] {
     font: var(--dsa-wc-menu-item-large-font-current);
@@ -85,6 +97,8 @@ var menu_item_styles_default = i`
   .menu-item .menu-item__prefix::slotted(*) {
     margin-inline-end: var(--dsa-wc-menu-item-margin-inline-end);
     display: inherit;
+    height: 1.25em;
+    width: 1.25em;
   }
 
   .menu-item .menu-item__suffix {
@@ -115,6 +129,9 @@ var menu_item_styles_default = i`
     opacity: 1;
   }
 
+  :host(.level-1) .menu-item {
+    padding-inline-start: var(--dsa-wc-menu-item-padding-left-level-1);
+  }
   :host(.level-2) .menu-item {
     padding-inline-start: var(--dsa-wc-menu-item-padding-left-level-2);
   }
@@ -126,6 +143,13 @@ var menu_item_styles_default = i`
       outline-offset: var(--dsa-wc-menu-item-focus-ring-offset);
     }
   }
+
+  /*
+  * Collapsed
+  */
+  .menu-item--collapsed .menu-item__label {
+    display: none;
+  }
 `;
 
 export {

package/cdn/chunks/{chunk.H5LXYWU4.js → chunk.2MMASCIR.js}

@@ -1,6 +1,6 @@
 import {
   accordion_styles_default
-} from "./chunk.4NCJ5UUW.js";
+} from "./chunk.ZI6HZEZQ.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.QWF2EIS5.js → chunk.32DAUHJ6.js}

@@ -1,6 +1,6 @@
 import {
   tree_item_styles_default
-} from "./chunk.VQ6RNAGR.js";
+} from "./chunk.3VGPRUUT.js";
 import {
   l
 } from "./chunk.LDYYA5WE.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";
@@ -222,6 +222,15 @@ var DSATreeItem = class extends ShoelaceElement {
     )}
 
           <slot class="tree-item__label" part="label"></slot>
+
+          ${n2(
+      !this.selectable && this.selected,
+      () => x` <dsa-icon
+                class="tree-item__selected-icon"
+                name="check"
+                library="system"
+              ></dsa-icon>`
+    )}
         </div>
 
         <slot

package/cdn/chunks/{chunk.2Y5NYPC2.js → chunk.36Y6T57J.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.HWM7ESSG.js → chunk.3EJ54TS4.js}

@@ -1,6 +1,6 @@
 import {
   menu_accordion_styles_default
-} from "./chunk.BPTOLQO5.js";
+} from "./chunk.7LPJZYXA.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";
@@ -46,19 +46,23 @@ var DSAMenuAccordion = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
-    this.hasSlotController = new HasSlotController(this, "summary");
+    this.hasSlotController = new HasSlotController(
+      this,
+      "prefix",
+      "summary"
+    );
     this.open = false;
+    this.size = "medium";
     this.level = 1;
+    this.collapsed = false;
   }
   connectedCallback() {
     super.connectedCallback();
-    if (this.level === 2) {
-      const menuNavigation = this.querySelector(
-        "dsa-menu-navigation"
-      );
-      if (menuNavigation !== null) {
-        menuNavigation == null ? void 0 : menuNavigation.classList.add("level-2");
-      }
+    const menuNavigation = this.querySelector(
+      "dsa-menu-navigation"
+    );
+    if (menuNavigation !== null) {
+      menuNavigation == null ? void 0 : menuNavigation.classList.add(this.level === 2 ? "level-2" : "level-1");
     }
   }
   firstUpdated() {
@@ -91,6 +95,16 @@ var DSAMenuAccordion = class extends ShoelaceElement {
       this.show();
     }
   }
+  /** Returns a text label based on the contents of the summary slot. */
+  getTextSummary() {
+    var _a, _b;
+    const nodes = (_b = (_a = this.summarySlot) == null ? void 0 : _a.assignedNodes({ flatten: true })) != null ? _b : [];
+    let text = "";
+    [...nodes].forEach((node) => {
+      text += node.textContent;
+    });
+    return text;
+  }
   async handleOpenChange() {
     if (this.open) {
       const slShow = this.emit("dsa-show", { cancelable: true });
@@ -100,6 +114,7 @@ var DSAMenuAccordion = class extends ShoelaceElement {
       }
       await stopAnimations(this.body);
       this.body.hidden = false;
+      await this.updateComplete;
       const { keyframes, options } = getAnimation(this, "accordion.show", {
         dir: this.localize.dir()
       });
@@ -142,6 +157,10 @@ var DSAMenuAccordion = class extends ShoelaceElement {
       }
     }
   }
+  async handleExpandedChange() {
+    await this.updateComplete;
+    this.firstUpdated();
+  }
   /** Shows the accordion. */
   async show() {
     if (this.open) {
@@ -158,7 +177,17 @@ var DSAMenuAccordion = class extends ShoelaceElement {
     this.open = false;
     return await waitForEvent(this, "dsa-after-hide");
   }
+  focus(options) {
+    this.headerButton.focus(options);
+  }
+  blur() {
+    this.headerButton.blur();
+  }
+  click() {
+    this.headerButton.click();
+  }
   render() {
+    var _a;
     if (!this.summary && !this.hasSlotController.test("summary")) {
       a11yWarning(
         "<dsa-menu-accordion> requires a summary attribute or a summary slot for accessibility"
@@ -171,31 +200,47 @@ var DSAMenuAccordion = class extends ShoelaceElement {
       "menu-accordion": true,
       "menu-accordion--open": this.open,
       "menu-accordion--chevron": true,
-      "menu-accordion--level-2": this.level === 2
+      "menu-accordion--small": this.size === "small",
+      "menu-accordion--medium": this.size === "medium",
+      "menu-accordion--large": this.size === "large",
+      "menu-accordion--level-2": this.level === 2,
+      "menu-accordion--collapsed": this.collapsed
     })}
       >
         <div part="header" id="header" class="menu-accordion__header">
-          <span
-            role="button"
-            aria-expanded=${this.open ? "true" : "false"}
-            aria-controls="content"
-            @click=${this.handleSummaryClick}
-            @keydown=${this.handleSummaryKeyDown}
-            class="menu-accordion__header-button"
-            tabindex="0"
+          <dsa-tooltip
+            placement="right"
+            ?disabled=${!this.collapsed}
+            content=${(_a = this.getTextSummary()) != null ? _a : this.summary}
           >
-            <slot name="summary" class="menu-accordion__summary"
-              >${this.summary}</slot
+            <span
+              role="button"
+              aria-expanded=${this.open ? "true" : "false"}
+              aria-controls="content"
+              @click=${this.handleSummaryClick}
+              @keydown=${this.handleSummaryKeyDown}
+              class="menu-accordion__header-button"
+              tabindex="0"
             >
+              <slot
+                name="prefix"
+                part="prefix"
+                class="menu-accordion__prefix"
+              ></slot>
+              <slot name="summary" class="menu-accordion__summary"
+                >${this.summary}</slot
+              >
+              <slot name="badge" class="menu-accordion__badge"></slot>
 
-            <span part="summary-icon" class="menu-accordion__summary-icon">
-              <dsa-icon
-                class="menu-accordion__expand-icon"
-                name="expand_more"
-                library="system"
-              ></dsa-icon>
+              <span part="summary-icon" class="menu-accordion__summary-icon">
+                <dsa-icon
+                  class="menu-accordion__expand-icon"
+                  name="expand_more"
+                  library="system"
+                ></dsa-icon>
+              </span>
             </span>
-          </span>
+          </dsa-tooltip>
         </div>
 
         <div class="menu-accordion__body">
@@ -211,6 +256,9 @@ var DSAMenuAccordion = class extends ShoelaceElement {
   }
 };
 DSAMenuAccordion.styles = menu_accordion_styles_default;
+__decorateClass([
+  e("slot[name=summary]")
+], DSAMenuAccordion.prototype, "summarySlot", 2);
 __decorateClass([
   e(".menu-accordion")
 ], DSAMenuAccordion.prototype, "accordion", 2);
@@ -226,15 +274,24 @@ __decorateClass([
 __decorateClass([
   n()
 ], DSAMenuAccordion.prototype, "summary", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSAMenuAccordion.prototype, "size", 2);
 __decorateClass([
   n({ type: Number })
 ], DSAMenuAccordion.prototype, "level", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAMenuAccordion.prototype, "collapsed", 2);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], DSAMenuAccordion.prototype, "handleOpenChange", 1);
 __decorateClass([
   watch("level", { waitUntilFirstUpdate: true })
 ], DSAMenuAccordion.prototype, "handleLevelChange", 1);
+__decorateClass([
+  watch("expanded", { waitUntilFirstUpdate: true })
+], DSAMenuAccordion.prototype, "handleExpandedChange", 1);
 DSAMenuAccordion = __decorateClass([
   t("dsa-menu-accordion")
 ], DSAMenuAccordion);

package/cdn/chunks/{chunk.VQ6RNAGR.js → chunk.3VGPRUUT.js}

@@ -128,6 +128,13 @@ var tree_item_styles_default = i`
     transition: var(--dsa-wc-transition-fast) color;
   }
 
+  .tree-item__selected-icon {
+    margin-inline-start: auto;
+    margin-inline-end: var(--dsa-spacing-8);
+    font: var(--dsa-wc-tree-item-font);
+    color: var(--dsa-wc-tree-item-selected-border-color);
+  }
+
   .tree-item__children {
     display: block;
     font-size: calc(1em + var(--dsa-wc-tree-indent-size));

package/cdn/chunks/{chunk.YKUXDSKS.js → chunk.3VYO2UYA.js}

@@ -1,9 +1,12 @@
+import {
+  DEPRECATED_TAG_VARIANTS
+} from "./chunk.WFSNJLGP.js";
 import {
   tag_styles_default
-} from "./chunk.TY7XK6UL.js";
+} from "./chunk.FSMUXFAQ.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   e2 as e
 } from "./chunk.JY4LUWQC.js";
@@ -51,6 +54,13 @@ var DSATag = class extends ShoelaceElement {
     }
   }
   render() {
+    if (DEPRECATED_TAG_VARIANTS.includes(
+      this.variant
+    )) {
+      console.warn(
+        `The ${this.variant} variant of <dsa-tag> is deprecated, and will be removed in the next major release. Please consider using a variant from 100 to 500 instead.`
+      );
+    }
     return x`
       <span
         part="base"

package/cdn/chunks/{chunk.XQSTAOEF.js → chunk.3Z2GKRZW.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.Z67R2PEC.js";
+} from "./chunk.VCFEF4I5.js";
 import {
   component_styles_default
 } from "./chunk.MQAAYEM3.js";

package/cdn/chunks/{chunk.OA2FMS3O.js → chunk.46MVNLKZ.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   ShoelaceElement,
   n,

package/cdn/chunks/chunk.4DEEMH54.js

@@ -0,0 +1,229 @@
+import {
+  search_styles_default
+} from "./chunk.L43WS4PE.js";
+import {
+  l
+} from "./chunk.LDYYA5WE.js";
+import {
+  renderFormElementErrors
+} from "./chunk.PZK4ARTY.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.SUUV7E4I.js";
+import {
+  LocalizeController
+} from "./chunk.57JI3UNH.js";
+import {
+  o
+} from "./chunk.XED65RH5.js";
+import {
+  e2
+} from "./chunk.JY4LUWQC.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/search/search.ts
+var DSASearch = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "help-text"
+    );
+    this.hasFocus = false;
+    this.size = "medium";
+    this.variant = "base";
+    this.value = "";
+    this.helpText = "";
+    this.error = false;
+    this.errorMessage = "";
+  }
+  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");
+  }
+  getDescriptionIds() {
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    let ids = [];
+    if (this.error) ids = [...ids, "error-text"];
+    if (hasHelpText) ids = [...ids, "help-text"];
+    return ids.join(" ");
+  }
+  render() {
+    const iconButtonSize = (() => {
+      switch (this.size) {
+        case "small":
+          return "large";
+        case "large":
+          return "2xlarge";
+        default:
+          return "xlarge";
+      }
+    })();
+    return x`
+      <div
+        class=${e2({
+      "search-bar": true,
+      "search-bar--error": this.error,
+      "search-bar--small": this.size === "small",
+      "search-bar--medium": this.size === "medium",
+      "search-bar--large": this.size === "large",
+      "search-bar--on-layer": this.variant === "layer",
+      "search-bar--on-base": this.variant === "base",
+      "search-bar--on-floating": this.variant === "floating"
+    })}
+      >
+        <div class="search-bar__wrapper">
+          <div
+            class=${e2({ input: true, "input--focused": this.hasFocus })}
+          >
+            <input
+              class="input__control"
+              type="search"
+              placeholder=${this.localize.term("search")}
+              aria-label=${this.localize.term("search")}
+              aria-describedby=${ifDefinedAndNotEmpty(this.getDescriptionIds())}
+              aria-invalid=${o(this.error ? "true" : void 0)}
+              title=${this.localize.term("search")}
+              .value=${l(this.value)}
+              @change=${this.handleChange}
+              @input=${this.handleInput}
+              @focus=${this.handleInputFocus}
+              @blur=${this.handleInputBlur}
+              @keydown=${this.handleKeyDown}
+            />
+            ${this.value.length > 0 ? x`
+                  <dsa-icon-button
+                    id="clear-button"
+                    part="clear-button"
+                    name="clear"
+                    label=${this.localize.term("clearEntry")}
+                    @click=${this.handleClearClick}
+                    size=${this.size === "large" ? "large" : "medium"}
+                    library="system"
+                  ></dsa-icon-button>
+                ` : ""}
+          </div>
+
+          <dsa-icon-button
+            id="submit-button"
+            name="search"
+            library="system"
+            label=${this.localize.term("search")}
+            variant="primary"
+            ?floating=${this.variant === "floating"}
+            size=${iconButtonSize}
+            @click=${this.handleSubmitClick}
+          >
+          </dsa-icon-button>
+        </div>
+
+        <slot name="help-text" id="help-text" class="search-bar__help-text">
+          ${this.helpText}
+        </slot>
+
+        ${this.error && this.errorMessage !== "" ? renderFormElementErrors(this.errorMessage, this.variant) : ""}
+      </div>
+    `;
+  }
+};
+DSASearch.styles = search_styles_default;
+__decorateClass([
+  e(".input__control")
+], DSASearch.prototype, "input", 2);
+__decorateClass([
+  e("#submit-button")
+], DSASearch.prototype, "submitButton", 2);
+__decorateClass([
+  e("#clear-button")
+], DSASearch.prototype, "clearButton", 2);
+__decorateClass([
+  r()
+], DSASearch.prototype, "hasFocus", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSASearch.prototype, "size", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSASearch.prototype, "variant", 2);
+__decorateClass([
+  n()
+], DSASearch.prototype, "value", 2);
+__decorateClass([
+  n({ attribute: "help-text" })
+], DSASearch.prototype, "helpText", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSASearch.prototype, "error", 2);
+__decorateClass([
+  n({
+    attribute: "error-message",
+    converter: {
+      fromAttribute: (value) => value ? value.split("|") : "",
+      toAttribute: (value) => {
+        if (typeof value === "string") {
+          return value;
+        } else {
+          return value.join("|");
+        }
+      }
+    }
+  })
+], DSASearch.prototype, "errorMessage", 2);
+DSASearch = __decorateClass([
+  t("dsa-search")
+], DSASearch);
+
+export {
+  DSASearch
+};

package/cdn/chunks/{chunk.RIREJ6N6.js → chunk.4XTF2ZKZ.js}

@@ -30,7 +30,7 @@ import {
 } from "./chunk.SUUV7E4I.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   o
 } from "./chunk.XED65RH5.js";
@@ -275,7 +275,6 @@ var DSADrawer = class extends ShoelaceElement {
           part="overlay"
           class="drawer__overlay"
           @click=${() => this.requestClose("overlay")}
-          tabindex="-1"
         ></div>
 
         <div