@ds-autonomie/web-components 2.4.0 → 2.5.0

package/dist/chunks/{chunk.6674T4KX.js → chunk.JJT6FP7U.js}

@@ -1,6 +1,6 @@
 import {
   DSAInputTime
-} from "./chunk.TRQQN4AO.js";
+} from "./chunk.IICLN6L3.js";
 import {
   getOverridenIconDetails,
   isInvalidAmountKey,
@@ -11,13 +11,13 @@ import {
 } from "./chunk.Z2A5AEMU.js";
 import {
   DSAInputDate
-} from "./chunk.DR3IPTYE.js";
+} from "./chunk.EY2LRNGD.js";
 import {
   input_styles_default
 } from "./chunk.OHDR6G6J.js";
 import {
   FormControlLayout
-} from "./chunk.RVCSQIWF.js";
+} from "./chunk.MKTUAWNS.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk.JA7YFGLI.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -77,7 +77,11 @@ var DSAInput = class extends FormControlLayout {
   /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
   get valueAsNumber() {
     var _a, _b;
-    return (_b = (_a = this.standardInput) == null ? void 0 : _a.valueAsNumber) != null ? _b : parseFloat(this.value);
+    if (this.type === "amount") {
+      return parseFloat(this.value.replace(",", "."));
+    } else {
+      return (_b = (_a = this.standardInput) == null ? void 0 : _a.valueAsNumber) != null ? _b : parseFloat(this.value);
+    }
   }
   set valueAsNumber(newValue) {
     const input = document.createElement("input");
@@ -87,7 +91,8 @@ var DSAInput = class extends FormControlLayout {
   }
   /** Gets the validity state object */
   get validity() {
-    return this.input.validity;
+    var _a, _b;
+    return (_b = (_a = this.input) == null ? void 0 : _a.validity) != null ? _b : true;
   }
   /** Gets the validation message */
   get validationMessage() {
@@ -233,7 +238,9 @@ var DSAInput = class extends FormControlLayout {
     this.formControlController.setValidity(this.disabled);
   }
   handleStepChange() {
-    this.standardInput.step = String(this.step);
+    if (this.input instanceof DSAInputTime) {
+      this.input.step = typeof this.step === "number" ? this.step : 60;
+    } else this.standardInput.step = String(this.step);
     this.formControlController.updateValidity();
   }
   async handleValueChange() {
@@ -299,32 +306,44 @@ var DSAInput = class extends FormControlLayout {
     this.input.value = numberToFrAmount(newValue);
     this.value = this.input.value.replace(",", ".");
   }
-  /** Increments the value of a numeric input type by the value of the step attribute. */
-  stepUp() {
-    if (this.input instanceof DSAInputDate || this.input instanceof DSAInputTime) {
-      return;
-    }
-    if (this.type === "amount") {
-      this.adjustAmountValue("up");
-    } else {
-      this.standardInput.stepUp();
-      if (this.value !== this.standardInput.value) {
-        this.value = this.standardInput.value;
-      }
+  /** Increments the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter. */
+  stepUp(stepNumber) {
+    switch (this.type) {
+      case "date":
+        return;
+      case "time":
+        if (!(this.input instanceof DSAInputTime)) return;
+        this.input.stepUp(stepNumber);
+        this.value = this.input.value;
+        return;
+      case "amount":
+        this.adjustAmountValue("up");
+        return;
+      default:
+        this.standardInput.stepUp(stepNumber);
+        if (this.value !== this.standardInput.value) {
+          this.value = this.standardInput.value;
+        }
     }
   }
-  /** Decrements the value of a numeric input type by the value of the step attribute. */
-  stepDown() {
-    if (this.input instanceof DSAInputDate || this.input instanceof DSAInputTime) {
-      return;
-    }
-    if (this.type === "amount") {
-      this.adjustAmountValue("down");
-    } else {
-      this.standardInput.stepDown();
-      if (this.value !== this.standardInput.value) {
-        this.value = this.standardInput.value;
-      }
+  /** Decrements the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter.  */
+  stepDown(stepNumber) {
+    switch (this.type) {
+      case "date":
+        return;
+      case "time":
+        if (!(this.input instanceof DSAInputTime)) return;
+        this.input.stepDown(stepNumber);
+        this.value = this.input.value;
+        return;
+      case "amount":
+        this.adjustAmountValue("down");
+        return;
+      default:
+        this.standardInput.stepDown(stepNumber);
+        if (this.value !== this.standardInput.value) {
+          this.value = this.standardInput.value;
+        }
     }
   }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
@@ -580,9 +599,6 @@ __decorateClass([
 __decorateClass([
   query("dsa-input-time")
 ], DSAInput.prototype, "timeInput", 2);
-__decorateClass([
-  state()
-], DSAInput.prototype, "input", 2);
 __decorateClass([
   state()
 ], DSAInput.prototype, "hasFocus", 2);

package/dist/chunks/{chunk.O4ZSTSXZ.js → chunk.JQS5RPAK.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -36,7 +36,6 @@ var DSADropdown = class extends ShoelaceElement {
     this.open = false;
     this.placement = "bottom-start";
     this.disabled = false;
-    this.stayOpenOnSelect = false;
     this.skidding = 0;
     this.hoist = false;
   }
@@ -286,9 +285,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSADropdown.prototype, "disabled", 2);
-__decorateClass([
-  property({ attribute: "stay-open-on-select", type: Boolean, reflect: true })
-], DSADropdown.prototype, "stayOpenOnSelect", 2);
 __decorateClass([
   property({ attribute: false })
 ], DSADropdown.prototype, "containingElement", 2);

package/dist/chunks/{chunk.GNJX6QSO.js → chunk.K4XU6L7E.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.JDIBYGPL.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.DKTT254G.js → chunk.KFBHQJJP.js}

@@ -32,6 +32,12 @@ var DSAAnchorTag = class extends ShoelaceElement {
     this.target = "_self";
     this.size = "medium";
   }
+  connectedCallback() {
+    console.warn(
+      "The <dsa-anchor-tag> element is deprecated, and will be removed in the next major release. Please consider using the <dsa-tag-button> element instead."
+    );
+    super.connectedCallback();
+  }
   render() {
     if (!this.label) {
       a11yWarning(

package/dist/chunks/{chunk.GRNDTTXR.js → chunk.L7SZMI27.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/chunk.LGV7OXTA.js

@@ -0,0 +1,186 @@
+import {
+  card_content_styles_default
+} from "./chunk.NZEV2R75.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  watch
+} from "./chunk.NOMN6DGD.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  ShoelaceElement
+} from "./chunk.XZ5FE34T.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/card-content/card-content.ts
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { html, literal } from "lit/static-html.js";
+var DSACardContent = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "media",
+      "tags",
+      "title-icon",
+      "title",
+      "subtitle",
+      "footer"
+    );
+    this.href = "";
+    this.rel = "noreferrer noopener";
+    this.variant = "outlined";
+    this.layout = "vertical";
+    this.size = "large";
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  updateTagsSizes() {
+    const slottedTags = this.querySelectorAll("dsa-tag");
+    slottedTags.forEach(
+      (tag) => tag.size = this.size === "large" ? "medium" : "small"
+    );
+  }
+  handleTagsSlotChange() {
+    this.updateTagsSizes();
+  }
+  handleSizeChange() {
+    this.updateTagsSizes();
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? literal`a` : literal`div`;
+    const hasSideLinkIcon = isLink && !this.hasSlotController.test("footer") && this.layout === "left-align";
+    const hasBottomLinkIcon = isLink && !this.hasSlotController.test("footer") && this.layout !== "left-align";
+    if (isLink && !this.hasSlotController.test("title")) {
+      a11yWarning(
+        "<dsa-card-content> requires a title slot for accessibility when used as a link"
+      );
+    }
+    return html`
+      <article
+        part="base"
+        class=${classMap({
+      "card-content": true,
+      "card-content--link": isLink,
+      "card-content--small": this.size === "small",
+      "card-content--large": this.size === "large",
+      "card-content--left-align": this.layout === "left-align",
+      "card-content--right-align": this.layout === "right-align",
+      "card-content--filled": this.variant === "filled"
+    })}
+      >
+        <slot name="media" class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("media") ? "card-content__media" : void 0
+    )}></slot>
+        <div part="body" class="card-content__body">
+          <slot
+            name="tags"
+            @slotchange=${this.handleTagsSlotChange}
+            class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("tags") ? "card-content__tags" : void 0
+    )}
+          ></slot>
+          <div class="card-content__title_block">
+            <slot name="title-icon" class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("title-icon") ? "card-content__title-icon" : void 0
+    )}></slot>
+            <div class="card-content__title-block-text">
+              <${tag}
+                href=${ifDefined(isLink ? this.href : void 0)}
+                target=${ifDefined(isLink ? this.target : void 0)}
+                download=${ifDefined(isLink ? this.download : void 0)}
+                rel=${ifDefined(isLink ? this.rel : void 0)}
+              >
+                <slot 
+                  name="title" 
+                  class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("title") ? "card-content__title" : void 0
+    )}
+                ></slot>
+              </${tag}>
+              <slot 
+                name="subtitle" 
+                class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("subtitle") ? "card-content__subtitle" : void 0
+    )}>
+                </slot>
+            </div>
+          </div>
+          ${this.hasSlotController.test("[default]") ? html` <slot class="card-content__content"></slot> ` : ""}
+          <slot 
+            name="footer" 
+            part="footer" 
+            class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("footer") ? "card-content__footer" : void 0
+    )}
+            tabindex=${ifDefined(isLink ? "-1" : void 0)}
+          ></slot>
+          ${hasBottomLinkIcon ? html`
+                  <div class="card-content__link-bottom-icon-container">
+                    <dsa-icon
+                      class="card-content__link-icon"
+                      name="chevron_right"
+                      library="system"
+                      aria-hidden="true"
+                    ></dsa-icon>
+                  </div>
+                ` : ""}
+        </div>
+        ${hasSideLinkIcon ? html`
+                <div class="card-content__link-icon-container">
+                  <dsa-icon
+                    class="card-content__link-icon"
+                    name="chevron_right"
+                    library="system"
+                    aria-hidden="true"
+                  ></dsa-icon>
+                </div>
+              ` : ""}
+      </article>
+    `;
+  }
+};
+DSACardContent.styles = card_content_styles_default;
+__decorateClass([
+  property()
+], DSACardContent.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSACardContent.prototype, "target", 2);
+__decorateClass([
+  property()
+], DSACardContent.prototype, "rel", 2);
+__decorateClass([
+  property()
+], DSACardContent.prototype, "download", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSACardContent.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSACardContent.prototype, "layout", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSACardContent.prototype, "size", 2);
+__decorateClass([
+  watch("size")
+], DSACardContent.prototype, "handleSizeChange", 1);
+DSACardContent = __decorateClass([
+  customElement("dsa-card-content")
+], DSACardContent);
+
+export {
+  DSACardContent
+};

package/dist/chunks/{chunk.NASETPCZ.js → chunk.LXS4P57X.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.UCIFKWMI.js → chunk.MF7KW7MX.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.RVCSQIWF.js → chunk.MKTUAWNS.js}

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

package/dist/chunks/{chunk.P7SN3TMY.js → chunk.NJNQX6FX.js}

@@ -1,6 +1,6 @@
 import {
   DSATableRow
-} from "./chunk.2JCMUNW4.js";
+} from "./chunk.RURHQSLF.js";
 import {
   table_header_row_styles_default
 } from "./chunk.GI3JNOHH.js";

package/dist/chunks/chunk.NZEV2R75.js

@@ -0,0 +1,197 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/card-content/card-content.styles.ts
+import { css } from "lit";
+var card_content_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  /* Resetting slotted elements styles */
+  ::slotted(*) {
+    margin: 0;
+    padding: 0;
+    font-size: 100%;
+    font: inherit;
+  }
+
+  /* Main card container */
+  .card-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--dsa-wc-card-background);
+    border: var(--dsa-wc-card-border);
+    border-radius: var(--dsa-radius-8);
+    overflow: hidden;
+  }
+
+  /* Layout variants */
+  .card-content--left-align {
+    flex-direction: row;
+  }
+  .card-content--right-align {
+    flex-direction: row-reverse;
+  }
+
+  /* Style variant */
+  .card-content--filled {
+    background-color: var(--dsa-wc-card-content-filled-background-color);
+  }
+
+  /* Link styling */
+  .card-content--link {
+    transition: var(--dsa-wc-transition-x-fast) background-color,
+      var(--dsa-wc-transition-x-fast) border,
+      var(--dsa-wc-transition-x-fast) box-shadow;
+      var(--dsa-wc-transition-x-fast) transform;
+    text-decoration: none;
+    color: inherit;
+  }
+  .card-content--link:focus-within {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+  .card-content--link:hover, .card-content--link:focus-within {
+    background-color: var(--dsa-wc-card-link-background-active);
+    border-color: var(--dsa-wc-card-link-border-color-hover);
+  }
+  .card-content--link a {
+    text-decoration: none;
+  }
+  .card-content--link a:focus {
+    outline: none;
+  }
+  .card-content--link a::after{
+    position: absolute;
+    left: 0;
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    content: '';
+  }
+
+  /* Card media */
+  .card-content__media {
+    display: flex;
+  }
+  
+  /* Card body */
+  .card-content__body {
+    display: flex;
+    flex:1;
+    flex-direction: column;
+    padding: var(--dsa-wc-card-content-body-padding);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    font: var(--dsa-wc-card-body-font);
+  }
+  .card-content--small .card-content__body {
+  padding: var(--dsa-wc-card-small-content-body-padding);
+  }
+
+  /* Tags */
+  .card-content__tags {
+    display: flex;
+    gap: var(--dsa-spacing-8);
+    margin-bottom: var(--dsa-wc-card-content-tags-margin-bottom);
+  }
+
+  /* Title block */
+  .card-content__title_block {
+    display: flex;
+    gap: var(--dsa-spacing-12);
+  }
+
+  /* Title text block */
+  .card-content__title-block-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-wc-card-content-title-block-gap);
+    justify-content: center;
+  }
+
+  /* Title */
+  .card-content__title, .card-content__title-icon {
+    color: var(--dsa-wc-card-content-title-color);
+  }
+  .card-content__title-block-text .card-content__title {
+    font: var(--dsa-wc-card-content-large-title-font);
+  }
+
+  .card-content--small .card-content__title-block-text .card-content__title {
+    font: var(--dsa-wc-card-content-small-title-font);
+  }
+
+  /* Subtitle */
+  .card-content__title-block-text .card-content__subtitle {
+    font: var(--dsa-wc-card-content-subtitle-font);
+    color: var(--dsa-wc-card-content-subtitle-text-color);
+  }
+
+  /* Title icon */
+  .card-content__title-icon::slotted(*) {
+    flex-shrink: 0;
+    width: var(--dsa-wc-card-content-title-icon-size);
+    height: var(--dsa-wc-card-content-title-icon-size);
+  }
+  .card-content--small .card-content__title-icon::slotted(*) {
+    width: var(--dsa-wc-card-content-small-title-icon-size);
+    height: var(--dsa-wc-card-content-small-title-icon-size);
+  }
+
+  /* Main slotted content */
+  .card-content__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-32);
+    margin-top: var(--dsa-wc-card-content-margin-top);
+    color: var(--dsa-wc-card-content-content-color);
+    font: var(--dsa-wc-card-content-content-font)
+  }
+
+  /* Footer */
+  .card-content__footer {
+    display: flex;
+    gap: var(--dsa-spacing-16);
+    flex-direction: row;
+    justify-content: flex-end;
+    text-align: right;
+    margin-top: auto;
+    padding-top: var(--dsa-wc-card-content-footer-padding-top);
+  }
+  .card-content--link .card-content__footer {
+    pointer-events: none;
+  }
+
+  /* Link card chevron icon */
+  .card-content__link-icon {
+    width: var(--dsa-wc-card-content-link-large-icon-size);
+    height: var(--dsa-wc-card-content-link-large-icon-size);
+    padding: var(--dsa-wc-card-content-link-icon-padding);
+    color: var(--dsa-wc-card-content-chevron-color);
+  }
+  .card-content--small .card-content__link-icon {
+    width: var(--dsa-wc-card-content-link-small-icon-size);
+    height: var(--dsa-wc-card-content-link-small-icon-size);
+  }
+  .card-content__link-bottom-icon-container {
+    display: flex;
+    margin-left: auto;
+    margin-top: auto;
+    padding-top: var(--dsa-wc-card-content-footer-padding-top);
+  }
+  .card-content__link-icon-container {
+    display: flex;
+    align-items: center;
+    margin-inline-start: auto
+  }
+`;
+
+export {
+  card_content_styles_default
+};

package/dist/chunks/{chunk.HQJDKIMG.js → chunk.OKUA77L4.js}

@@ -309,7 +309,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
 
         ${this.error ? renderFormElementErrors(this.errorMessage) : ""}
         ${this.description ? html`
-              <p id="description" classname="form-control__description">
+              <p id="description" class="form-control__description">
                 ${this.description}
               </p>
             ` : ""}

package/dist/chunks/{chunk.AC4PBQVM.js → chunk.OMUELARQ.js}

@@ -1,6 +1,6 @@
 import {
   DSASelect
-} from "./chunk.A4R5LBIA.js";
+} from "./chunk.QGPBBIGJ.js";
 import {
   getPhoneConfig
 } from "./chunk.YKKP7YAT.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.7OLEA3GQ.js";
 import {
   FormControlLayout
-} from "./chunk.RVCSQIWF.js";
+} from "./chunk.MKTUAWNS.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";