@ds-autonomie/web-components 2.4.1 → 2.5.1

package/dist/chunks/{chunk.TKV7I7MM.js → chunk.2655IKKL.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -178,6 +178,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 html`
       <dsa-popup
@@ -199,7 +206,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/dist/chunks/chunk.2EO2NJQJ.js

@@ -0,0 +1,118 @@
+import {
+  fieldset_styles_default
+} from "./chunk.Q2BCYSPM.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  watch
+} from "./chunk.NOMN6DGD.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  ShoelaceElement
+} from "./chunk.XZ5FE34T.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/fieldset/fieldset.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSAFieldset = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "legend-title"
+    );
+    this.legendTitle = "";
+    this.variant = "base";
+    this.disabled = false;
+    this.horizontal = false;
+  }
+  updateChildrenDisabledState() {
+    var _a;
+    const children = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements();
+    children == null ? void 0 : children.forEach((child) => {
+      if ("disabled" in child) {
+        child.disabled = this.disabled;
+      }
+    });
+  }
+  handleSlotChange() {
+    this.updateChildrenDisabledState();
+  }
+  handleDisabledChange() {
+    this.updateChildrenDisabledState();
+  }
+  render() {
+    const hasLegendTitleSlot = this.hasSlotController.test("label");
+    const hasLegendTitle = this.legendTitle ? true : !!hasLegendTitleSlot;
+    if (!hasLegendTitle) {
+      a11yWarning(
+        "<dsa-fieldset> requires a legend-title attribute or a legend-title slot for accessibility"
+      );
+    }
+    return html`
+      <fieldset
+        role="group"
+        class=${classMap({
+      fieldset: true,
+      "fieldset--on-base": this.variant === "base",
+      "fieldset--on-layer": this.variant === "layer",
+      "fieldset--horizontal": this.horizontal,
+      "fieldset--vertical": !this.horizontal
+    })}
+        aria-labelledby="legend"
+      >
+        <div id="legend" class="fieldset__legend">
+          <div class="fieldset__first-line">
+            <slot name="legend-title" class="fieldset__legend-title"
+              >${this.legendTitle}</slot
+            >
+            <slot name="tooltip" class="fieldset__tooltip"></slot>
+          </div>
+          <slot name="legend-subtitle" class="fieldset__legend-subtitle">
+            ${this.legendSubtitle}
+          </slot>
+        </div>
+
+        <div class="fieldset__content">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </fieldset>
+    `;
+  }
+};
+DSAFieldset.styles = fieldset_styles_default;
+__decorateClass([
+  query("slot:not([name])")
+], DSAFieldset.prototype, "defaultSlot", 2);
+__decorateClass([
+  property({ attribute: "legend-title" })
+], DSAFieldset.prototype, "legendTitle", 2);
+__decorateClass([
+  property({ attribute: "legend-subtitle" })
+], DSAFieldset.prototype, "legendSubtitle", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAFieldset.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAFieldset.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAFieldset.prototype, "horizontal", 2);
+__decorateClass([
+  watch("disabled")
+], DSAFieldset.prototype, "handleDisabledChange", 1);
+DSAFieldset = __decorateClass([
+  customElement("dsa-fieldset")
+], DSAFieldset);
+
+export {
+  DSAFieldset
+};

package/dist/chunks/{chunk.QEZ5FSIU.js → chunk.2GAMN72N.js}

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

package/dist/chunks/{chunk.DNLOBVBE.js → chunk.2JRGVS6D.js}

@@ -24,7 +24,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.3CWUZQRT.js

@@ -0,0 +1,325 @@
+import {
+  getOverridenIconDetails,
+  isInvalidAmountKey,
+  isPrefixIconOverriden,
+  numberToFrAmount,
+  parseFrAmount,
+  roundToStep
+} from "./chunk.DXRDCCL4.js";
+import {
+  InputBase
+} from "./chunk.QFO2VDJ3.js";
+import {
+  input_native_styles_default
+} from "./chunk.ULPMZDTP.js";
+import {
+  LocalizeController
+} from "./chunk.QADAWCTI.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/input-native/input-native.ts
+import { html } from "lit";
+import { customElement, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import Big from "big.js";
+var DSAInputNative = class extends InputBase {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+  }
+  /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
+  get valueAsNumber() {
+    var _a;
+    if (this.type === "amount") {
+      return parseFloat(this.value.replace(",", "."));
+    } else {
+      return (_a = this.input.valueAsNumber) != null ? _a : parseFloat(this.value);
+    }
+  }
+  set valueAsNumber(newValue) {
+    super.valueAsNumber = newValue;
+  }
+  handleChange() {
+    if (this.type === "amount") {
+      this.handleAmountChange();
+      this.value = this.input.value.replace(",", ".");
+    } else {
+      this.value = this.input.value;
+    }
+    this.emit("dsa-change");
+  }
+  handleAmountChange() {
+    if (this.input.value === "" || this.input.value === "-") {
+      this.input.value = "";
+      return;
+    }
+    const parsedValue = parseFrAmount(this.input.value);
+    const parsedMin = parseFloat(`${this.min}`);
+    const parsedMax = parseFloat(`${this.max}`);
+    this.input.value = numberToFrAmount(
+      roundToStep(parsedValue, this.getSafeStep())
+    );
+    if (!isNaN(parsedMin) && parsedValue < parsedMin) {
+      this.input.value = numberToFrAmount(this.min);
+    }
+    if (!isNaN(parsedMax) && parsedValue > parsedMax) {
+      this.input.value = numberToFrAmount(this.max);
+    }
+  }
+  handleInput() {
+    if (this.type === "amount") {
+      this.value = this.input.value.replace(",", ".");
+    } else {
+      this.value = this.input.value;
+    }
+    this.formControlController.updateValidity();
+    this.emit("dsa-input");
+  }
+  handleKeyDown(event) {
+    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (this.type === "amount") {
+      this.handleAmountKeydown(event);
+    }
+    if (event.key === "Enter" && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented && !event.isComposing) {
+          this.formControlController.submit();
+        }
+      });
+    }
+  }
+  handleAmountKeydown(event) {
+    if (event.key === "Dead") {
+      this.input.blur();
+      setTimeout(() => this.input.focus());
+    }
+    if (isInvalidAmountKey(event) || event.key === "-" && this.input.selectionStart !== null && this.input.selectionStart > 0 || event.key === "," && this.input.value.includes(",")) {
+      event.preventDefault();
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      this.stepDown();
+    }
+    if (event.key === "ArrowUp") {
+      this.stepUp();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      const inputEvent = new Event("input", { bubbles: true });
+      const changeEvent = new Event("change", { bubbles: true });
+      this.input.dispatchEvent(inputEvent);
+      this.input.dispatchEvent(changeEvent);
+    }
+  }
+  getSafeStep() {
+    if (this.step === "any") {
+      return this.step;
+    }
+    const parsedStep = parseFloat(`${this.step}`);
+    if (isNaN(parsedStep) || parsedStep === 0) {
+      return 1;
+    } else {
+      return parsedStep;
+    }
+  }
+  handlePasswordToggle() {
+    this.passwordVisible = !this.passwordVisible;
+  }
+  adjustAmountValue(direction) {
+    const safeStep = this.getSafeStep();
+    const numberStep = new Big(safeStep === "any" ? 1 : safeStep);
+    const parsedValue = new Big(parseFrAmount(this.input.value));
+    const newValue = direction === "up" ? parsedValue.plus(numberStep).toNumber() : parsedValue.minus(numberStep).toNumber();
+    this.input.value = numberToFrAmount(newValue);
+    this.value = this.input.value.replace(",", ".");
+  }
+  /** 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 "amount":
+        this.adjustAmountValue("up");
+        return;
+      default:
+        this.input.stepUp(stepNumber);
+        if (this.value !== this.input.value) {
+          this.value = this.input.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 "amount":
+        this.adjustAmountValue("down");
+        return;
+      default:
+        this.input.stepDown(stepNumber);
+        if (this.value !== this.input.value) {
+          this.value = this.input.value;
+        }
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    if (this.type === "amount") {
+      return this.input.checkValidity() && this.checkAmountValidity();
+    }
+    return this.input.checkValidity();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (this.type === "amount") {
+      return this.input.reportValidity() && this.checkAmountValidity();
+    }
+    return this.input.reportValidity();
+  }
+  checkAmountValidity() {
+    if (this.value === "") {
+      return true;
+    }
+    const parsedValue = parseFloat(this.value);
+    const parsedMin = parseFloat(`${this.min}`);
+    const parsedMax = parseFloat(`${this.max}`);
+    const safeStep = this.getSafeStep();
+    return !isNaN(parsedValue) && (isNaN(parsedMin) || parsedValue >= parsedMin) && (isNaN(parsedMax) || parsedValue <= parsedMax) && (safeStep === "any" || roundToStep(parsedValue, safeStep) === parsedValue);
+  }
+  renderInput() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const overridenPrefixIcon = isPrefixIconOverriden(this.type) ? getOverridenIconDetails(this.type) : void 0;
+    const hasPrefixIcon = overridenPrefixIcon !== void 0 || this.hasSlotController.test("prefix");
+    const hasSuffixIcon = this.hasSlotController.test("suffix");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
+    const hasHideIcon = this.type === "password" && !this.disabled;
+    let nativeType;
+    if (this.type === "password" && this.passwordVisible || this.type === "amount") {
+      nativeType = "text";
+    } else {
+      nativeType = this.type;
+    }
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      input: true,
+      // Sizes
+      "input--small": this.size === "small",
+      "input--medium": this.size === "medium",
+      "input--large": this.size === "large",
+      // States
+      "input--error": this.error,
+      "input--on-layer": this.variant === "layer",
+      "input--on-base": this.variant === "base",
+      "input--disabled": this.disabled,
+      "input--readonly": this.readonly,
+      "input--focused": this.hasFocus,
+      "input--empty": !this.value,
+      "form-control--has-prefix-icon": hasPrefixIcon
+    })}
+      >
+        ${overridenPrefixIcon ? html`<dsa-icon
+              name=${overridenPrefixIcon.iconName}
+              class="input__prefix"
+              library="system"
+            ></dsa-icon>` : html` <slot
+              name="prefix"
+              part="prefix"
+              id="input__prefix"
+              class="input__prefix"
+            ></slot>`}
+
+        <input
+          part="input"
+          id="input"
+          class="input__control"
+          type=${nativeType}
+          title=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+          name=${ifDefinedAndNotEmpty(this.name)}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          placeholder=${ifDefined(this.placeholder)}
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          step=${ifDefined(this.step)}
+          .value=${live(
+      this.type === "amount" ? numberToFrAmount(this.value) : this.value
+    )}
+          autocapitalize=${ifDefined(this.autocapitalize)}
+          autocomplete=${ifDefined(this.autocomplete)}
+          autocorrect=${ifDefined(this.autocorrect)}
+          ?autofocus=${this.autofocus}
+          spellcheck=${this.spellcheck}
+          pattern=${ifDefined(this.pattern)}
+          enterkeyhint=${ifDefined(this.enterkeyhint)}
+          inputmode=${ifDefined(this.inputmode)}
+          aria-label=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+          aria-describedby=${this.getDescriptionIds()}
+          aria-invalid=${ifDefined(this.error ? "true" : void 0)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+
+        ${hasSuffixIcon ? html`<slot
+              name="suffix"
+              id="input__suffix"
+              class="input__suffix"
+            ></slot>` : ""}
+        ${hasClearIcon ? html`
+              <dsa-icon-button
+                part="clear-button"
+                class="input__action-button"
+                name="clear"
+                label=${this.localize.term("clearEntry")}
+                @click=${this.handleClearClick}
+                library="system"
+              ></dsa-icon-button>
+            ` : ""}
+        ${hasHideIcon ? html`<dsa-icon-button
+              part="password-toggle-button"
+              class="input__action-button"
+              label=${this.localize.term(
+      this.passwordVisible ? "hidePassword" : "showPassword"
+    )}
+              name=${this.passwordVisible ? "visibility_off" : "visibility"}
+              @click=${this.handlePasswordToggle}
+              library="system"
+            ></dsa-icon-button>` : ""}
+      </div>
+    `;
+  }
+  renderCounter() {
+    const counterText = this.maxlength && this.counter ? `${this.value.length}/${this.maxlength}` : void 0;
+    return counterText !== void 0 ? html`<span
+          id="counter"
+          class=${classMap({
+      "form-control__counter": true,
+      "form-control__counter--animated": this.value.length === this.maxlength
+    })}
+          >${counterText}</span
+        >` : html``;
+  }
+};
+DSAInputNative.styles = input_native_styles_default;
+__decorateClass([
+  query("input")
+], DSAInputNative.prototype, "input", 2);
+DSAInputNative = __decorateClass([
+  customElement("dsa-input-native")
+], DSAInputNative);
+
+export {
+  DSAInputNative
+};

package/dist/chunks/{chunk.7K5DG6KV.js → chunk.3RMSYRZA.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.3XTO3LV5.js

@@ -0,0 +1,62 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/card-nav-item/card-nav-item.styles.ts
+import { css } from "lit";
+var card_nav_item_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    --card-nav-item-border-width: 1px;
+    --card-nav-item-padding: 0.75rem 0.5rem 0.75rem 1rem;
+    --card-nav-item-font: var(--dsa-font-medium-bold);
+  }
+
+  .card-nav-item {
+    display: block;
+    background: var(--dsa-wc-card-nav-background-color);
+    width: 100%;
+    border: unset;
+    cursor: pointer;
+    padding: 0;
+    text-decoration: none;
+  }
+  .card-nav-item:hover,
+  .card-nav-item:focus {
+    background: var(--dsa-wc-card-nav-background-color-hover);
+  }
+  .card-nav-item:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: -1px;
+  }
+
+  .card-nav-item__body {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: var(--card-nav-item-border-width) solid
+      var(--dsa-wc-card-nav-border-color);
+    color: var(--dsa-wc-card-nav-color);
+    padding: var(--card-nav-item-padding);
+    font: var(--card-nav-item-font);
+    height: 3.75rem;
+    text-align: start;
+  }
+  .card-nav-item:hover .card-nav-item__body,
+  .card-nav-item:focus .card-nav-item__body {
+    border-color: var(--dsa-wc-card-nav-border-color-hover);
+  }
+
+  .card-nav-item__icon {
+    flex-shrink: 0;
+    padding: var(--dsa-spacing-8);
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+`;
+
+export {
+  card_nav_item_styles_default
+};

package/dist/chunks/chunk.3YZI5GBX.js

@@ -0,0 +1,72 @@
+import {
+  card_nav_styles_default
+} from "./chunk.J4QE6NJC.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  ShoelaceElement
+} from "./chunk.XZ5FE34T.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/card-nav/card-nav.ts
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+var DSACardNav = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "[default]",
+      "media",
+      "title-icon",
+      "title",
+      "subtitle"
+    );
+  }
+  render() {
+    return html`
+      <div part="base" class="card-nav">
+        <slot name="media" part="media" class="card-nav__media"></slot>
+        <div class="card-nav__title-block">
+          <slot
+            name="title-icon"
+            class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("title-icon") ? "card-nav__title_icon" : void 0
+    )}
+          ></slot>
+          <div class="title-block-text">
+            <slot
+              name="title"
+              class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("title") ? "title" : void 0
+    )}
+            ></slot>
+            <slot
+              name="subtitle"
+              class=${ifDefinedAndNotEmpty(
+      this.hasSlotController.test("subtitle") ? "subtitle" : void 0
+    )}
+            ></slot>
+          </div>
+        </div>
+        <div class="card-nav__content" role="list">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+DSACardNav.styles = card_nav_styles_default;
+DSACardNav = __decorateClass([
+  customElement("dsa-card-nav")
+], DSACardNav);
+
+export {
+  DSACardNav
+};

package/dist/chunks/{chunk.KDEA34PP.js → chunk.4JZFGBJP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.3SMOVUNI.js";
 import {
   FilterBase
-} from "./chunk.MWWI3AU2.js";
+} from "./chunk.4VHQEXSY.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.OKUA77L4.js → chunk.4S7APMGY.js}

@@ -147,18 +147,24 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     }
   }
   handleSlotChange() {
-    const allCheckboxes = this.getAllCheckboxes();
-    allCheckboxes.forEach((checkbox) => {
-      checkbox.checked = this.value.includes(checkbox.value);
-      checkbox.parentDisabled = this.disabled;
-      checkbox.parentReadonly = this.readonly;
-    });
-    this.hasCheckboxButtons = allCheckboxes.some(
-      (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
-    );
-    this.hasCheckboxCards = allCheckboxes.some(
-      (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-card"
-    );
+    if (customElements.get("dsa-checkbox") || customElements.get("dsa-checkbox-button") || customElements.get("dsa-checkbox-card")) {
+      const allCheckboxes = this.getAllCheckboxes();
+      allCheckboxes.forEach((checkbox) => {
+        checkbox.checked = this.value.includes(checkbox.value);
+        checkbox.parentDisabled = this.disabled;
+        checkbox.parentReadonly = this.readonly;
+      });
+      this.hasCheckboxButtons = allCheckboxes.some(
+        (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
+      );
+      this.hasCheckboxCards = allCheckboxes.some(
+        (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-card"
+      );
+    } else {
+      customElements.whenDefined("dsa-checkbox").then(() => this.handleSlotChange());
+      customElements.whenDefined("dsa-checkbox-button").then(() => this.handleSlotChange());
+      customElements.whenDefined("dsa-checkbox-card").then(() => this.handleSlotChange());
+    }
   }
   handleInvalid(event) {
     this.formControlController.setValidity(false);