@ds-autonomie/web-components 2.4.0 → 2.5.0

package/cdn/chunks/chunk.6CVNT3XU.js

@@ -0,0 +1,108 @@
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+
+// src/components/card-nav-accordion/card-nav-accordion.styles.ts
+var card_nav_accordion_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    --card-nav-item-border-width: 1px;
+    --card-nav-accordion-border-color: var(--dsa-wc-card-nav-border-color);
+    --card-nav-accordion-border-color-hover: var(
+      --dsa-wc-card-nav-border-color-hover
+    );
+    --card-nav-accordion-border-color-transition-delay: 0s;
+  }
+
+  .card-nav-accordion {
+    font: var(--dsa-font-medium-bold);
+    color: var(--dsa-wc-card-nav-color);
+    overflow-anchor: none;
+  }
+
+  .card-nav-accordion__header-button {
+    display: flex;
+    align-items: center;
+    border-radius: inherit;
+    padding: 0.75rem 0.5rem 0.75rem 1rem;
+    user-select: none;
+    cursor: pointer;
+    border-bottom: 1px solid var(--card-nav-accordion-border-color);
+    transition: border-color 0s ease-in-out
+      var(--card-nav-accordion-border-color-transition-delay);
+  }
+
+  .card-nav-accordion--open .card-nav-accordion__header-button {
+    border-color: var(--dsa-wc-card-nav-border-color);
+    transition: border-color 0s ease-in-out 0s;
+  }
+
+  .card-nav-accordion__header:focus-within :focus:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: -1px;
+  }
+  .card-nav-accordion__header-button:hover,
+  .card-nav-accordion__header-button:focus {
+    background-color: var(--dsa-wc-card-nav-background-color-hover);
+    border-color: var(--card-nav-accordion-border-color-hover);
+  }
+  .card-nav-accordion--open .card-nav-accordion__header-button:hover,
+  .card-nav-accordion--open .card-nav-accordion__header-button:focus {
+    border-color: var(--dsa-wc-card-nav-border-color-hover);
+  }
+
+  .card-nav-accordion__header-button:not(
+      .card-nav-accordion--open
+    ):focus-visible {
+    outline: none;
+  }
+
+  .card-nav-accordion__summary {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .card-nav-accordion__summary-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--dsa-wc-transition-medium) rotate ease;
+  }
+
+  .card-nav-accordion--open.card-nav-accordion--chevron
+    .card-nav-accordion__summary-icon {
+    rotate: 180deg;
+  }
+
+  .card-nav-accordion__expand-icon {
+    padding: 0.5rem;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .card-nav-accordion__body {
+    overflow: hidden;
+  }
+
+  .card-nav-accordion__content {
+    display: block;
+  }
+
+  ::slotted(dsa-card-nav-item:last-child) {
+    --card-nav-item-border-width: var(--card-nav-item-border-width);
+  }
+  ::slotted(dsa-card-nav-item) {
+    --card-nav-item-padding: 0.75rem 1.25rem 0.75rem 1.75rem;
+    --card-nav-item-font: var(--dsa-font-medium-normal);
+  }
+`;
+
+export {
+  card_nav_accordion_styles_default
+};

package/cdn/chunks/{chunk.WJDOTH54.js → chunk.6SV5RDDG.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk.WOGTGKIT.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.5VZE6TSA.js → chunk.6UY5XC7A.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.CUFMKSEN.js → chunk.7ZJHGFQH.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
@@ -184,6 +184,13 @@ var DSATooltip = class extends ShoelaceElement {
     this.open = false;
     return await waitForEvent(this, "dsa-after-hide");
   }
+  /** Automatically adds an accessible description to the trigger element */
+  handleDefaultSlotChange() {
+    const target = this.querySelector(
+      "dsa-button, dsa-icon-button"
+    );
+    target == null ? void 0 : target.setAttribute("description", this.content);
+  }
   render() {
     return x`
       <dsa-popup
@@ -205,7 +212,7 @@ var DSATooltip = class extends ShoelaceElement {
         arrow
         hover-bridge
       >
-        <slot slot="anchor" aria-describedby="tooltip"></slot>
+        <slot slot="anchor" @slotchange=${this.handleDefaultSlotChange}></slot>
 
         <slot
           name="content"

package/cdn/chunks/chunk.A747OEHH.js

@@ -0,0 +1,145 @@
+import {
+  tag_button_styles_default
+} from "./chunk.W6RA2ZKW.js";
+import {
+  i,
+  u
+} from "./chunk.VIVOXZF6.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.B6GVVW66.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  o
+} from "./chunk.YQLIIKLI.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  t
+} from "./chunk.DZB6XUZ7.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/tag-button/tag-button.ts
+var DSATagButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.variant = "neutral";
+    this.size = "medium";
+    this.accessibleName = "";
+    this.description = "";
+    this.href = "";
+    this.rel = "noreferrer noopener";
+    this.target = "_self";
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  /** Simulates a click on the tag button. */
+  click() {
+    this.tagButton.click();
+  }
+  /** Sets focus on the tag button. */
+  focus(options) {
+    this.tagButton.focus(options);
+  }
+  /** Removes focus from the tag button. */
+  blur() {
+    this.tagButton.blur();
+  }
+  render() {
+    if (!this.label && !this.accessibleName) {
+      a11yWarning(
+        "<dsa-tag-button> requires a label or an accessible-name attribute for accessibility"
+      );
+    }
+    const isLink = this.isLink();
+    const htmlTag = isLink ? i`a` : i`button`;
+    return u`
+      <${htmlTag}
+        part="base"
+        class=${e2({
+      "tag-button": true,
+      // Variant
+      [`tag-button--${this.variant}`]: true,
+      // Sizes
+      "tag-button--small": this.size === "small",
+      "tag-button--medium": this.size === "medium",
+      "tag-button--large": this.size === "large"
+    })}
+        type=${o(isLink ? void 0 : "button")}
+        href=${ifDefinedAndNotEmpty(isLink ? this.href : void 0)}
+        target=${ifDefinedAndNotEmpty(isLink ? this.target : void 0)}
+        download=${ifDefinedAndNotEmpty(isLink ? this.download : void 0)}
+        rel=${ifDefinedAndNotEmpty(isLink ? this.rel : void 0)}
+        aria-label=${ifDefinedAndNotEmpty(this.accessibleName)}
+        aria-describedby="description"
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+      >
+        <slot part="prefix" name="prefix" class="tag-button__prefix"></slot>
+
+        <span class="tag-button__content"> ${this.label} </span>
+
+        <slot part="suffix" name="suffix" class="tag-button__suffix"></slot>
+      </${htmlTag}>
+      ${this.description !== "" ? u`
+              <p id="description" class="tag-button__description">
+                ${this.description}
+              </p>
+            ` : ""}
+    `;
+  }
+};
+DSATagButton.styles = tag_button_styles_default;
+__decorateClass([
+  e(".tag-button")
+], DSATagButton.prototype, "tagButton", 2);
+__decorateClass([
+  n()
+], DSATagButton.prototype, "label", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSATagButton.prototype, "variant", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSATagButton.prototype, "size", 2);
+__decorateClass([
+  n({ attribute: "accessible-name" })
+], DSATagButton.prototype, "accessibleName", 2);
+__decorateClass([
+  n({ attribute: "description" })
+], DSATagButton.prototype, "description", 2);
+__decorateClass([
+  n()
+], DSATagButton.prototype, "href", 2);
+__decorateClass([
+  n()
+], DSATagButton.prototype, "rel", 2);
+__decorateClass([
+  n()
+], DSATagButton.prototype, "download", 2);
+__decorateClass([
+  n()
+], DSATagButton.prototype, "target", 2);
+DSATagButton = __decorateClass([
+  t("dsa-tag-button")
+], DSATagButton);
+
+export {
+  DSATagButton
+};

package/cdn/chunks/{chunk.OJFCPMJA.js → chunk.BBWKTDH3.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/chunk.BDPH2MRN.js

@@ -0,0 +1,234 @@
+import {
+  card_nav_accordion_styles_default
+} from "./chunk.6CVNT3XU.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.UBKKXGSV.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.2WRFDMKN.js";
+import {
+  LocalizeController
+} from "./chunk.BMQ5WSY7.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  t
+} from "./chunk.DZB6XUZ7.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/card-nav-accordion/card-nav-accordion.ts
+var DSACardNavAccordion = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(this, "summary");
+    this.open = false;
+    this.role = "listitem";
+  }
+  firstUpdated() {
+    this.body.hidden = !this.open;
+    this.body.style.height = this.open ? "auto" : "0";
+  }
+  handleSummaryClick() {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+    this.headerButton.focus();
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      const slShow = this.emit("dsa-show", { cancelable: true });
+      if (slShow.defaultPrevented) {
+        this.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      this.body.hidden = false;
+      const { keyframes, options } = getAnimation(this, "accordion.show", {
+        dir: this.localize.dir()
+      });
+      await animateTo(
+        this.body,
+        shimKeyframesHeightAuto(keyframes, this.body.scrollHeight),
+        options
+      );
+      this.body.style.height = "auto";
+      this.emit("dsa-after-show");
+    } else {
+      const slHide = this.emit("dsa-hide", { cancelable: true });
+      if (slHide.defaultPrevented) {
+        this.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "accordion.hide", {
+        dir: this.localize.dir()
+      });
+      await animateTo(
+        this.body,
+        shimKeyframesHeightAuto(keyframes, this.body.scrollHeight),
+        options
+      );
+      this.body.hidden = true;
+      this.body.style.height = "auto";
+      this.emit("dsa-after-hide");
+    }
+  }
+  /** Shows the accordion. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return await waitForEvent(this, "dsa-after-show");
+  }
+  /** Hides the accordion */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return await waitForEvent(this, "dsa-after-hide");
+  }
+  render() {
+    if (!this.summary && !this.hasSlotController.test("summary")) {
+      a11yWarning(
+        "<dsa-card-nav-accordion> requires a summary attribute or a summary slot for accessibility"
+      );
+    }
+    return x`
+      <div
+        part="base"
+        class=${e2({
+      "card-nav-accordion": true,
+      "card-nav-accordion--open": this.open,
+      "card-nav-accordion--chevron": true
+    })}
+      >
+        <div part="header" id="header" class="card-nav-accordion__header">
+          <span
+            role="button"
+            aria-expanded=${this.open ? "true" : "false"}
+            aria-controls="content"
+            @click=${this.handleSummaryClick}
+            @keydown=${this.handleSummaryKeyDown}
+            class="card-nav-accordion__header-button"
+            tabindex="0"
+          >
+            <slot name="summary" class="card-nav-accordion__summary"
+              >${this.summary}</slot
+            >
+
+            <span part="summary-icon" class="card-nav-accordion__summary-icon">
+              <dsa-icon
+                class="card-nav-accordion__expand-icon"
+                name="expand_more"
+                library="system"
+              ></dsa-icon>
+            </span>
+          </span>
+        </div>
+
+        <div
+          class="card-nav-accordion__body"
+          role="list"
+          aria-labelledby="header"
+        >
+          <slot
+            part="content"
+            id="content"
+            class="card-nav-accordion__content"
+          ></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+DSACardNavAccordion.styles = card_nav_accordion_styles_default;
+__decorateClass([
+  e(".card-nav-accordion")
+], DSACardNavAccordion.prototype, "accordion", 2);
+__decorateClass([
+  e(".card-nav-accordion__header-button")
+], DSACardNavAccordion.prototype, "headerButton", 2);
+__decorateClass([
+  e(".card-nav-accordion__body")
+], DSACardNavAccordion.prototype, "body", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSACardNavAccordion.prototype, "open", 2);
+__decorateClass([
+  n()
+], DSACardNavAccordion.prototype, "summary", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSACardNavAccordion.prototype, "role", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSACardNavAccordion.prototype, "handleOpenChange", 1);
+DSACardNavAccordion = __decorateClass([
+  t("dsa-card-nav-accordion")
+], DSACardNavAccordion);
+setDefaultAnimation("accordion.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("accordion.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  DSACardNavAccordion
+};

package/cdn/chunks/{chunk.LBDB4OXT.js → chunk.BGP2ITQD.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.UULRRJ5I.js";
 import {
   FormControlLayout
-} from "./chunk.JZOEQBF7.js";
+} from "./chunk.E73QKLNL.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";

package/cdn/chunks/{chunk.JO52YCNJ.js → chunk.BKSVKEYX.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.DTSCRQ4P.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.LFBIXLMF.js → chunk.BKVL3A5I.js}

@@ -1,15 +1,15 @@
+import {
+  DSATreeItem
+} from "./chunk.MJMSFEEL.js";
 import {
   tree_styles_default
 } from "./chunk.YGUWRBBP.js";
-import {
-  DSATreeItem
-} from "./chunk.OFWHWMUH.js";
 import {
   clamp
 } from "./chunk.HF7GESMZ.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.VARBZAJP.js → chunk.BMQ5WSY7.js}

@@ -91,6 +91,7 @@ var translation = {
   minutes: (value) => `${value} Minute${Number(value) > 1 ? "s" : ""}`,
   seconds: (value) => `${value} Seconde${Number(value) > 1 ? "s" : ""}`,
   milliseconds: (value) => `${value} Milliseconde${Number(value) > 1 ? "s" : ""}`,
+  selectedTime: "Heure s\xE9lectionn\xE9e :",
   day: "Jour",
   month: "Mois",
   year: "Ann\xE9e",
@@ -253,6 +254,7 @@ var translation2 = {
   minutes: (value) => `${value} Minute${Number(value) > 1 ? "s" : ""}`,
   seconds: (value) => `${value} Second${Number(value) > 1 ? "s" : ""}`,
   milliseconds: (value) => `${value} Millisecond${Number(value) > 1 ? "s" : ""}`,
+  selectedTime: "Selected time :",
   day: "Day",
   month: "Month",
   year: "Year",

package/cdn/chunks/{chunk.MCSZ2F65.js → chunk.BQ3SI4TM.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.VIVOXZF6.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.NTOOFOWB.js → chunk.DBJLSCQP.js}

@@ -4,13 +4,13 @@ import {
 } from "./chunk.3BJMFOLF.js";
 import {
   header_styles_default
-} from "./chunk.VZJGVIXG.js";
+} from "./chunk.UJQUHHXT.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.SJM5UCFK.js → chunk.DRUKNJJ5.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   ShoelaceElement,
   n,

package/cdn/chunks/{chunk.JZOEQBF7.js → chunk.E73QKLNL.js}

@@ -117,7 +117,7 @@ var FormControlLayout = class extends ShoelaceElement {
           ${this.renderCounter()}
 
           ${this.description !== "" ? x`
-                  <p id="description" classname="form-control__description">
+                  <p id="description" class="form-control__description">
                     ${this.description}
                   </p>
                 ` : ""}

package/cdn/chunks/{chunk.ZDF27RIQ.js → chunk.EYKHHWR5.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.HE5SI4A5.js → chunk.F6BCRVNV.js}

@@ -407,7 +407,7 @@ var DSARadioGroup = class extends ShoelaceElement {
       this.customValidityError !== "" ? this.customValidityError : this.errorMessage
     ) : ""}
         ${this.description !== "" ? x`
-              <p id="description" classname="form-control__description">
+              <p id="description" class="form-control__description">
                 ${this.description}
               </p>
             ` : ""}

package/cdn/chunks/{chunk.GXQMOXKI.js → chunk.GVTFDL2C.js}

@@ -20,7 +20,6 @@ import {
 import {
   ShoelaceElement,
   n,
-  r,
   t
 } from "./chunk.DZB6XUZ7.js";
 import {
@@ -78,9 +77,6 @@ var DSACard = class extends ShoelaceElement {
   }
 };
 DSACard.styles = card_styles_default;
-__decorateClass([
-  r()
-], DSACard.prototype, "tag", 2);
 __decorateClass([
   n()
 ], DSACard.prototype, "href", 2);