@ds-autonomie/web-components 2.4.1 → 2.5.1

package/cdn/chunks/chunk.PT3QFRYN.js

@@ -0,0 +1,336 @@
+import {
+  big_default,
+  getOverridenIconDetails,
+  isInvalidAmountKey,
+  isPrefixIconOverriden,
+  numberToFrAmount,
+  parseFrAmount,
+  roundToStep
+} from "./chunk.LYIECKOK.js";
+import {
+  InputBase
+} from "./chunk.YGJ3KERC.js";
+import {
+  input_native_styles_default
+} from "./chunk.NON7TU3E.js";
+import {
+  l
+} from "./chunk.7PPSHHT2.js";
+import {
+  LocalizeController
+} from "./chunk.BMQ5WSY7.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.B6GVVW66.js";
+import {
+  o
+} from "./chunk.YQLIIKLI.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
+import {
+  e,
+  t
+} from "./chunk.DZB6XUZ7.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/input-native/input-native.ts
+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_default(safeStep === "any" ? 1 : safeStep);
+    const parsedValue = new big_default(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 x`
+      <div
+        part="base"
+        class=${e2({
+      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 ? x`<dsa-icon
+              name=${overridenPrefixIcon.iconName}
+              class="input__prefix"
+              library="system"
+            ></dsa-icon>` : x` <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=${o(this.placeholder)}
+          minlength=${o(this.minlength)}
+          maxlength=${o(this.maxlength)}
+          min=${o(this.min)}
+          max=${o(this.max)}
+          step=${o(this.step)}
+          .value=${l(
+      this.type === "amount" ? numberToFrAmount(this.value) : this.value
+    )}
+          autocapitalize=${o(this.autocapitalize)}
+          autocomplete=${o(this.autocomplete)}
+          autocorrect=${o(this.autocorrect)}
+          ?autofocus=${this.autofocus}
+          spellcheck=${this.spellcheck}
+          pattern=${o(this.pattern)}
+          enterkeyhint=${o(this.enterkeyhint)}
+          inputmode=${o(this.inputmode)}
+          aria-label=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+          aria-describedby=${this.getDescriptionIds()}
+          aria-invalid=${o(this.error ? "true" : void 0)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+
+        ${hasSuffixIcon ? x`<slot
+              name="suffix"
+              id="input__suffix"
+              class="input__suffix"
+            ></slot>` : ""}
+        ${hasClearIcon ? x`
+              <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 ? x`<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 ? x`<span
+          id="counter"
+          class=${e2({
+      "form-control__counter": true,
+      "form-control__counter--animated": this.value.length === this.maxlength
+    })}
+          >${counterText}</span
+        >` : x``;
+  }
+};
+DSAInputNative.styles = input_native_styles_default;
+__decorateClass([
+  e("input")
+], DSAInputNative.prototype, "input", 2);
+DSAInputNative = __decorateClass([
+  t("dsa-input-native")
+], DSAInputNative);
+
+export {
+  DSAInputNative
+};

package/cdn/chunks/{chunk.KYZIL6TB.js → chunk.PZQUQ6DG.js}

@@ -1,6 +1,6 @@
 import {
   DSATableRow
-} from "./chunk.GBGDDTEL.js";
+} from "./chunk.HOIWGDVX.js";
 import {
   table_header_row_styles_default
 } from "./chunk.3AD4AURN.js";

package/cdn/chunks/chunk.QCPGBCQ3.js

@@ -0,0 +1,72 @@
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+
+// src/components/fieldset/fieldset.styles.ts
+var fieldset_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .fieldset {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-24);
+
+    background-color: var(--dsa-wc-fieldset-background);
+    padding: var(--dsa-spacing-24);
+    border-radius: var(--dsa-radius-8);
+    border-width: 1px;
+    border-style: solid;
+  }
+  .fieldset--on-base {
+    border-color: var(--dsa-wc-fieldset-border-color);
+  }
+  .fieldset--on-layer {
+    border-color: transparent;
+  }
+
+  .fieldset__legend {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-12);
+    color: var(--dsa-wc-fieldset-legend-color);
+    padding: 0;
+  }
+
+  .fieldset__first-line {
+    display: flex;
+    gap: var(--dsa-spacing-4);
+    align-items: center;
+  }
+  .fieldset__legend-title {
+    font: var(--dsa-wc-fieldset-title-font);
+  }
+  .fieldset__tooltip {
+    --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
+  }
+  .fieldset__legend-subtitle {
+    font: var(--dsa-font-small-normal);
+  }
+
+  .fieldset__content {
+    display: flex;
+    gap: var(--dsa-spacing-16);
+    flex-wrap: wrap;
+  }
+  .fieldset--vertical .fieldset__content {
+    flex-direction: column;
+  }
+  .fieldset--horizontal .fieldset__content {
+    flex-direction: row;
+  }
+`;
+
+export {
+  fieldset_styles_default
+};

package/cdn/chunks/{chunk.AJFNFADL.js → chunk.QUA6RD7E.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.ER6BIHKN.js";
 import {
   DSATable
-} from "./chunk.A5QRPK4Q.js";
+} from "./chunk.3XJTVFZ2.js";
 import {
   LoadingStateElement
 } from "./chunk.A4FPLOFR.js";

package/cdn/chunks/{chunk.4XTAL3PC.js → chunk.QYS7Y562.js}

@@ -1,9 +1,9 @@
-import {
-  FilterBase
-} from "./chunk.4ZEHBLJR.js";
 import {
   filter_counter_styles_default
 } from "./chunk.BLJRNU3Y.js";
+import {
+  FilterBase
+} from "./chunk.KNKNPTGU.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.QKLRW3JL.js → chunk.RHJUPBW2.js}

@@ -7,16 +7,16 @@ import {
 } from "./chunk.DQI2JTKU.js";
 import {
   FilterBase
-} from "./chunk.4ZEHBLJR.js";
+} from "./chunk.KNKNPTGU.js";
+import {
+  l
+} from "./chunk.7PPSHHT2.js";
 import {
   getDateFromISO,
   getISOFormattedDate,
   getLocaleDateFromISO,
   isValidDate
 } from "./chunk.YBWQADCH.js";
-import {
-  l
-} from "./chunk.7PPSHHT2.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/chunk.RNF5H43X.js

@@ -0,0 +1,199 @@
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+
+// src/components/card-content/card-content.styles.ts
+var card_content_styles_default = i`
+  ${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/cdn/chunks/{chunk.P6NF7VUG.js → chunk.RRVYERI6.js}

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

package/cdn/chunks/{chunk.6XVWAOAW.js → chunk.SDRL7END.js}

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

package/cdn/chunks/{chunk.FAPQZI57.js → chunk.SMJWBG6U.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.LBT6FNPI.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   ShoelaceElement,
   t

package/cdn/chunks/{chunk.E36IR3BP.js → chunk.SPK4CXKV.js}

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