@ds-autonomie/web-components 2.9.0 → 2.10.0

package/dist/chunks/chunk.JIE46CQ6.js

@@ -0,0 +1,234 @@
+import {
+  copy_button_styles_default
+} from "./chunk.ZKUUTPFX.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.LRTTUCZP.js";
+import {
+  LocalizeController
+} from "./chunk.7BLYNLBH.js";
+import {
+  ShoelaceElement
+} from "./chunk.KPJCYT4S.js";
+import {
+  __decorateClass
+} from "./chunk.5GB6F3WA.js";
+
+// src/components/copy-button/copy-button.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSACopyButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isCopying = false;
+    this.status = "rest";
+    this.value = "";
+    this.from = "";
+    this.disabled = false;
+    this.copyLabel = "";
+    this.successLabel = "";
+    this.errorLabel = "";
+    this.feedbackDuration = 1e3;
+    this.tooltipPlacement = "top";
+    this.hoist = false;
+    this.size = "medium";
+  }
+  async handleCopy() {
+    if (this.disabled || this.isCopying) {
+      return;
+    }
+    this.isCopying = true;
+    let valueToCopy = this.value;
+    if (this.from) {
+      const root = this.getRootNode();
+      const isProperty = this.from.includes(".");
+      const isAttribute = this.from.includes("[") && this.from.includes("]");
+      let id = this.from;
+      let field = "";
+      if (isProperty) {
+        [id, field] = this.from.trim().split(".");
+      } else if (isAttribute) {
+        [id, field] = this.from.trim().replace(/\]$/, "").split("[");
+      }
+      const target = "getElementById" in root ? root.getElementById(id) : null;
+      if (target) {
+        if (isAttribute) {
+          valueToCopy = target.getAttribute(field) || "";
+        } else if (isProperty) {
+          valueToCopy = target[field] || "";
+        } else {
+          valueToCopy = target.textContent || "";
+        }
+      } else {
+        this.showStatus("error");
+        this.emit("dsa-error");
+      }
+    }
+    if (!valueToCopy) {
+      this.showStatus("error");
+      this.emit("dsa-error");
+    } else {
+      try {
+        await navigator.clipboard.writeText(valueToCopy);
+        this.showStatus("success");
+        this.emit("dsa-copy", {
+          detail: {
+            value: valueToCopy
+          }
+        });
+      } catch (error) {
+        this.showStatus("error");
+        this.emit("dsa-error");
+      }
+    }
+  }
+  async showStatus(status) {
+    const copyLabel = this.copyLabel || this.localize.term("copy");
+    const successLabel = this.successLabel || this.localize.term("copied");
+    const errorLabel = this.errorLabel || this.localize.term("copyError");
+    const iconToShow = status === "success" ? this.successIcon : this.errorIcon;
+    const showAnimation = getAnimation(this, "copy.in", { dir: "ltr" });
+    const hideAnimation = getAnimation(this, "copy.out", { dir: "ltr" });
+    this.tooltip.content = status === "success" ? successLabel : errorLabel;
+    await this.copyIcon.animate(hideAnimation.keyframes, hideAnimation.options).finished;
+    this.copyIcon.hidden = true;
+    this.status = status;
+    iconToShow.hidden = false;
+    await iconToShow.animate(showAnimation.keyframes, showAnimation.options).finished;
+    setTimeout(async () => {
+      await iconToShow.animate(hideAnimation.keyframes, hideAnimation.options).finished;
+      iconToShow.hidden = true;
+      this.status = "rest";
+      this.copyIcon.hidden = false;
+      await this.copyIcon.animate(
+        showAnimation.keyframes,
+        showAnimation.options
+      ).finished;
+      this.tooltip.content = copyLabel;
+      this.isCopying = false;
+    }, this.feedbackDuration);
+  }
+  render() {
+    const copyLabel = this.copyLabel || this.localize.term("copy");
+    return html`
+      <dsa-tooltip
+        class=${classMap({
+      "copy-button": true,
+      "copy-button--success": this.status === "success",
+      "copy-button--error": this.status === "error",
+      "copy-button--disabled": this.disabled,
+      "copy-button--small": this.size === "small",
+      "copy-button--medium": this.size === "medium",
+      "copy-button--large": this.size === "large"
+    })}
+        content=${copyLabel}
+        placement=${this.tooltipPlacement}
+        ?disabled=${this.disabled}
+        ?hoist=${this.hoist}
+      >
+        <button
+          class="copy-button__button"
+          part="button"
+          type="button"
+          ?disabled=${this.disabled}
+          @click=${this.handleCopy}
+          aria-label=${copyLabel}
+        >
+          <dsa-icon
+            library="system"
+            name="copy"
+            class="copy-button__icon copy-icon"
+          ></dsa-icon>
+          <dsa-icon
+            library="system"
+            name="check"
+            hidden
+            class="copy-button__icon success-icon"
+          ></dsa-icon>
+          <dsa-icon
+            library="system"
+            name="close"
+            hidden
+            class="copy-button__icon error-icon"
+          ></dsa-icon>
+        </button>
+      </dsa-tooltip>
+    `;
+  }
+};
+DSACopyButton.styles = copy_button_styles_default;
+__decorateClass([
+  query(".copy-icon")
+], DSACopyButton.prototype, "copyIcon", 2);
+__decorateClass([
+  query(".success-icon")
+], DSACopyButton.prototype, "successIcon", 2);
+__decorateClass([
+  query(".error-icon")
+], DSACopyButton.prototype, "errorIcon", 2);
+__decorateClass([
+  query("dsa-tooltip")
+], DSACopyButton.prototype, "tooltip", 2);
+__decorateClass([
+  query(".copy-button__button")
+], DSACopyButton.prototype, "button", 2);
+__decorateClass([
+  state()
+], DSACopyButton.prototype, "isCopying", 2);
+__decorateClass([
+  state()
+], DSACopyButton.prototype, "status", 2);
+__decorateClass([
+  property()
+], DSACopyButton.prototype, "value", 2);
+__decorateClass([
+  property()
+], DSACopyButton.prototype, "from", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSACopyButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ attribute: "copy-label" })
+], DSACopyButton.prototype, "copyLabel", 2);
+__decorateClass([
+  property({ attribute: "success-label" })
+], DSACopyButton.prototype, "successLabel", 2);
+__decorateClass([
+  property({ attribute: "error-label" })
+], DSACopyButton.prototype, "errorLabel", 2);
+__decorateClass([
+  property({ attribute: "feedback-duration", type: Number })
+], DSACopyButton.prototype, "feedbackDuration", 2);
+__decorateClass([
+  property({ attribute: "tooltip-placement" })
+], DSACopyButton.prototype, "tooltipPlacement", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSACopyButton.prototype, "hoist", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSACopyButton.prototype, "size", 2);
+DSACopyButton = __decorateClass([
+  customElement("dsa-copy-button")
+], DSACopyButton);
+setDefaultAnimation("copy.in", {
+  keyframes: [
+    { scale: ".25", opacity: ".25" },
+    { scale: "1", opacity: "1" }
+  ],
+  options: { duration: 100 }
+});
+setDefaultAnimation("copy.out", {
+  keyframes: [
+    { scale: "1", opacity: "1" },
+    { scale: ".25", opacity: "0" }
+  ],
+  options: { duration: 100 }
+});
+
+export {
+  DSACopyButton
+};

package/dist/chunks/{chunk.APAY54SU.js → chunk.JM6QCEPE.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk.ZNBZAGXP.js";
 import {
   InputBase
-} from "./chunk.AZSX7X74.js";
+} from "./chunk.CIPCYGAB.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/input-otp/input-otp.ts
 import { html } from "lit";

package/dist/chunks/{chunk.XZ5FE34T.js → chunk.KPJCYT4S.js}

@@ -1,7 +1,7 @@
 import {
   __decorateClass,
   __spreadValues
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/internal/shoelace-element.ts
 import { LitElement } from "lit";

package/dist/chunks/{chunk.4CI6ML27.js → chunk.KR5EMEBO.js}

@@ -3,22 +3,22 @@ import {
 } from "./chunk.73T7TU6S.js";
 import {
   DSATreeItem
-} from "./chunk.M2KJCGCC.js";
+} from "./chunk.ULC7VUCJ.js";
 import {
   clamp
 } from "./chunk.HF7GESMZ.js";
 import {
   LocalizeController
-} from "./chunk.MSPKB4NC.js";
+} from "./chunk.7BLYNLBH.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   ShoelaceElement
-} from "./chunk.XZ5FE34T.js";
+} from "./chunk.KPJCYT4S.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/tree/tree.ts
 import { html } from "lit";

package/dist/chunks/{chunk.3UWRBJ4B.js → chunk.L3P6ICJE.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.TJOP7HQP.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   ShoelaceElement
-} from "./chunk.XZ5FE34T.js";
+} from "./chunk.KPJCYT4S.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/animation/animation.ts
 import { html } from "lit";

package/dist/chunks/{chunk.YQAIHWUH.js → chunk.L4D5SWZ2.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.J6PZZR32.js";
 import {
   LoadingStateElement
-} from "./chunk.VCWTTC33.js";
+} from "./chunk.RMKMGX5K.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/table-cell/table-cell.ts
 import { html } from "lit";

package/dist/chunks/{chunk.KNTEOU6J.js → chunk.L6347ZP2.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.RMCOWJOW.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   ShoelaceElement
-} from "./chunk.XZ5FE34T.js";
+} from "./chunk.KPJCYT4S.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/resize-observer/resize-observer.ts
 import { html } from "lit";

package/dist/chunks/{chunk.635JP52V.js → chunk.L6QMUWXV.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.YZHDFJWJ.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   ShoelaceElement
-} from "./chunk.XZ5FE34T.js";
+} from "./chunk.KPJCYT4S.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/mutation-observer/mutation-observer.ts
 import { html } from "lit";

package/dist/chunks/{chunk.ZVW23DEE.js → chunk.L6UOW2AY.js}

@@ -3,19 +3,19 @@ import {
 } from "./chunk.5FNJFIAP.js";
 import {
   LoadingStateElement
-} from "./chunk.VCWTTC33.js";
+} from "./chunk.RMKMGX5K.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.MSPKB4NC.js";
+} from "./chunk.7BLYNLBH.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/table-container/table-container.ts
 import { html } from "lit";

package/dist/chunks/{chunk.3ZD3V2KP.js → chunk.LNGE6VFS.js}

@@ -1,6 +1,6 @@
 import {
   DSACheckboxGroup
-} from "./chunk.SHJWL34V.js";
+} from "./chunk.UF4PZMAF.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.5NAZU6VJ.js";
 import {
   FormControlController
-} from "./chunk.DQDLS6T7.js";
+} from "./chunk.APQFQQX5.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -24,13 +24,13 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   ShoelaceElement
-} from "./chunk.XZ5FE34T.js";
+} from "./chunk.KPJCYT4S.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/checkbox/checkbox.ts
 import { html } from "lit";

package/{cdn/chunks/chunk.2WRFDMKN.js → dist/chunks/chunk.LRTTUCZP.js}

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/utilities/animation-registry.ts
 var defaultAnimationRegistry = /* @__PURE__ */ new Map();

package/dist/chunks/{chunk.UGES4XMF.js → chunk.LXAPUOCB.js}

@@ -6,16 +6,16 @@ import {
 } from "./chunk.KZBMMXBH.js";
 import {
   LocalizeController
-} from "./chunk.MSPKB4NC.js";
+} from "./chunk.7BLYNLBH.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   ShoelaceElement
-} from "./chunk.XZ5FE34T.js";
+} from "./chunk.KPJCYT4S.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/tag/tag.ts
 import { html } from "lit";

package/dist/chunks/{chunk.J4QE6NJC.js → chunk.LYW7WENA.js}

@@ -63,6 +63,11 @@ var card_nav_styles_default = css`
       --dsa-wc-transition-medium
     );
   }
+
+  /** Contrasted **/
+  .card-nav.card-nav--contrasted-borders {
+    --dsa-wc-card-nav-border-color: var(--dsa-wc-card-border-color-contrasted);
+  }
 `;
 
 export {

package/dist/chunks/{chunk.KQ3DPRW2.js → chunk.M2FVFT7D.js}

@@ -1,41 +1,41 @@
 import {
   select_styles_default
 } from "./chunk.DRR77YKL.js";
-import {
-  FormControlLayout
-} from "./chunk.PFEA4LHL.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
+import {
+  FormControlLayout
+} from "./chunk.XUEOWZLQ.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
 import {
   FormControlController
-} from "./chunk.DQDLS6T7.js";
+} from "./chunk.APQFQQX5.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
 import {
   animateTo,
   stopAnimations
-} from "./chunk.SWIGWQYF.js";
+} from "./chunk.QBV4OLYE.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.HGR7A5FK.js";
+} from "./chunk.LRTTUCZP.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.MSPKB4NC.js";
+} from "./chunk.7BLYNLBH.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/select/select.ts
 import { html } from "lit";
@@ -459,6 +459,7 @@ var DSASelect = class extends FormControlLayout {
     return ids.join(" ");
   }
   renderInput() {
+    var _a, _b;
     const isValueDefined = this.value.length > 0;
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasLabel = this.label ? true : !!hasLabelSlot;
@@ -524,11 +525,14 @@ var DSASelect = class extends FormControlLayout {
             aria-controls="listbox"
             aria-expanded=${this.open ? "true" : "false"}
             aria-haspopup="listbox"
-            aria-disabled=${isDisabledOrReadonly ? "true" : "false"}
-            aria-describedby=${this.getDescriptionIds()}
             aria-label=${ifDefinedAndNotEmpty(
       hasLabel ? void 0 : this.title
     )}
+            aria-disabled=${isDisabledOrReadonly ? "true" : "false"}
+            aria-describedby=${this.getDescriptionIds()}
+            aria-activedescendant=${(_b = (_a = this.currentOption) == null ? void 0 : _a.id) != null ? _b : ""}
+            aria-invalid=${ifDefined(this.error ? "true" : void 0)}
+            aria-required=${ifDefined(this.required ? "true" : void 0)}
             role="combobox"
             @focus=${this.handleFocus}
             @blur=${this.handleBlur}

package/dist/chunks/{chunk.MAGZFXIQ.js → chunk.M5BZYGOO.js}

@@ -1,25 +1,25 @@
-import {
-  header_styles_default
-} from "./chunk.NHMU76XR.js";
 import {
   cnsaLogoSvg,
   dsaLogoSvg
 } from "./chunk.JSNVYESF.js";
+import {
+  header_styles_default
+} from "./chunk.NHMU76XR.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.MSPKB4NC.js";
+} from "./chunk.7BLYNLBH.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   ShoelaceElement
-} from "./chunk.XZ5FE34T.js";
+} from "./chunk.KPJCYT4S.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/header/header.ts
 import { html } from "lit";

package/dist/chunks/{chunk.4EZO7D3U.js → chunk.MFAEBC56.js}

@@ -1,26 +1,26 @@
-import {
-  input_mask_styles_default
-} from "./chunk.OHHVC2MR.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
   stripSpecialChars
 } from "./chunk.7OLEA3GQ.js";
+import {
+  input_mask_styles_default
+} from "./chunk.OHHVC2MR.js";
 import {
   InputBase
-} from "./chunk.AZSX7X74.js";
+} from "./chunk.CIPCYGAB.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.MSPKB4NC.js";
+} from "./chunk.7BLYNLBH.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/input-mask/input-mask.ts
 import { html } from "lit";

package/dist/chunks/{chunk.Q2BCYSPM.js → chunk.MSDVGZFG.js}

@@ -63,6 +63,11 @@ var fieldset_styles_default = css`
   .fieldset--horizontal .fieldset__content {
     flex-direction: row;
   }
+
+  /** Contrasted **/
+  .fieldset--contrasted-borders {
+    border-color: var(--dsa-wc-fieldset-border-color-contrasted);
+  }
 `;
 
 export {

package/dist/chunks/{chunk.AZEQFWC6.js → chunk.NSAJTBR4.js}

@@ -8,23 +8,23 @@ import {
   animateTo,
   parseDuration,
   stopAnimations
-} from "./chunk.SWIGWQYF.js";
+} from "./chunk.QBV4OLYE.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.HGR7A5FK.js";
+} from "./chunk.LRTTUCZP.js";
 import {
   LocalizeController
-} from "./chunk.MSPKB4NC.js";
+} from "./chunk.7BLYNLBH.js";
 import {
   watch
-} from "./chunk.NOMN6DGD.js";
+} from "./chunk.7627FYPL.js";
 import {
   ShoelaceElement
-} from "./chunk.XZ5FE34T.js";
+} from "./chunk.KPJCYT4S.js";
 import {
   __decorateClass
-} from "./chunk.S3NI7NKU.js";
+} from "./chunk.5GB6F3WA.js";
 
 // src/components/tooltip/tooltip.ts
 import { html } from "lit";
@@ -208,16 +208,11 @@ var DSATooltip = class extends ShoelaceElement {
       >
         <slot slot="anchor" @slotchange=${this.handleDefaultSlotChange}></slot>
 
-        <slot
-          name="content"
-          part="body"
-          id="tooltip"
-          class="tooltip__body"
-          role="tooltip"
-          aria-live=${this.open ? "polite" : "off"}
-        >
-          ${this.content}
-        </slot>
+        <div part="body" id="tooltip" class="tooltip__body" role="tooltip">
+          <slot name="content" aria-live=${this.open ? "polite" : "off"}
+            >${this.content}</slot
+          >
+        </div>
       </dsa-popup>
     `;
   }