@ds-autonomie/web-components 2.13.0 → 2.14.1

package/cdn/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@ds-autonomie/web-components",
-  "version": "2.13.0",
+  "version": "2.14.1",
   "description-markup": "markdown",
   "framework-config": {
     "enable-when": {
@@ -358,6 +358,10 @@
                 "name": "getPrefixIconName",
                 "value": {}
               },
+              {
+                "name": "getIconLabel",
+                "value": {}
+              },
               {
                 "name": "handleOpenChange",
                 "value": {}
@@ -3327,6 +3331,10 @@
                 "name": "handleEnterKey",
                 "value": {}
               },
+              {
+                "name": "handleSpaceKey",
+                "value": {}
+              },
               {
                 "name": "handleArrowKeys",
                 "value": {}
@@ -6832,6 +6840,13 @@
           },
           "attributes": []
         },
+        {
+          "js": {
+            "properties": [],
+            "events": []
+          },
+          "attributes": []
+        },
         {
           "name": "dsa-header",
           "description": "",
@@ -6894,6 +6909,10 @@
                 "name": "handleSearchCollapseEvent",
                 "value": {}
               },
+              {
+                "name": "getFirtLogo",
+                "value": {}
+              },
               {
                 "name": "handleSearchExpanded",
                 "value": {}
@@ -6952,6 +6971,93 @@
           },
           "attributes": []
         },
+        {
+          "name": "dsa-header-modern",
+          "description": "",
+          "js": {
+            "properties": [
+              {
+                "name": "hasSlotController",
+                "value": {}
+              },
+              {
+                "name": "localize",
+                "value": {}
+              },
+              {
+                "name": "externalLinks",
+                "value": {
+                  "type": "HTMLSlotElement"
+                }
+              },
+              {
+                "name": "firstLogo",
+                "description": "Choice between public or pro for the first logo",
+                "value": {
+                  "type": "| 'public'\n    | 'pro'"
+                }
+              },
+              {
+                "name": "searchExpanded",
+                "description": "Expands the search",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "mobile",
+                "description": "Controls whether the header is rendered in its mobile version or in its desktop version",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "handleSearchExpandEvent",
+                "value": {}
+              },
+              {
+                "name": "handleSearchCollapseEvent",
+                "value": {}
+              },
+              {
+                "name": "getFirtLogo",
+                "value": {}
+              },
+              {
+                "name": "handleSearchExpanded",
+                "value": {}
+              },
+              {
+                "name": "handleMobile",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "first-logo",
+              "description": "Choice between public or pro for the first logo",
+              "value": {
+                "type": "| 'public'\n    | 'pro'"
+              }
+            },
+            {
+              "name": "search-expanded",
+              "description": "Expands the search",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "mobile",
+              "description": "Controls whether the header is rendered in its mobile version or in its desktop version",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ]
+        },
         {
           "name": "dsa-header-search",
           "description": "",
@@ -7162,6 +7268,10 @@
                 "name": "getIconSource",
                 "value": {}
               },
+              {
+                "name": "setSvgLabel",
+                "value": {}
+              },
               {
                 "name": "handleLabelChange",
                 "value": {}
@@ -12381,7 +12491,7 @@
               {
                 "name": "currentOption",
                 "value": {
-                  "type": "DSAOption"
+                  "type": "DSAOption | undefined"
                 }
               },
               {
@@ -12537,10 +12647,6 @@
                 "name": "getAllOptions",
                 "value": {}
               },
-              {
-                "name": "getFirstOption",
-                "value": {}
-              },
               {
                 "name": "setCurrentOption",
                 "value": {}
@@ -15036,6 +15142,10 @@
                 "name": "handleExpandedChange",
                 "value": {}
               },
+              {
+                "name": "handleSelectedChange",
+                "value": {}
+              },
               {
                 "name": "selectorExpandedRow",
                 "value": {}
@@ -15450,6 +15560,10 @@
                 "name": "handleExpandedChange",
                 "value": {}
               },
+              {
+                "name": "handleSelectedChange",
+                "value": {}
+              },
               {
                 "name": "selectorExpandedRow",
                 "value": {}
@@ -15623,6 +15737,18 @@
                   "type": "string"
                 }
               },
+              {
+                "name": "content",
+                "value": {
+                  "type": "HTMLElement"
+                }
+              },
+              {
+                "name": "removeButton",
+                "value": {
+                  "type": "HTMLElement"
+                }
+              },
               {
                 "name": "variant",
                 "description": "The tag's theme variant.",
@@ -15650,6 +15776,20 @@
                   "type": "string"
                 }
               },
+              {
+                "name": "accessibleName",
+                "description": "(Optional) An accessible name for the tag",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "tooltip",
+                "description": "Display the tag label in a tooltip",
+                "value": {
+                  "type": "boolean"
+                }
+              },
               {
                 "name": "handleRemoveClick",
                 "value": {}
@@ -15693,6 +15833,20 @@
               "value": {
                 "type": "string"
               }
+            },
+            {
+              "name": "accessible-name",
+              "description": "(Optional) An accessible name for the tag",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "tooltip",
+              "description": "Display the tag label in a tooltip",
+              "value": {
+                "type": "boolean"
+              }
             }
           ]
         },
@@ -15959,10 +16113,16 @@
                 }
               },
               {
-                "name": "autocorrect",
+                "name": "_autocorrect",
                 "description": "Indicates whether the browser's autocorrect feature is on or off.",
                 "value": {
-                  "type": "string"
+                  "type": "'on' | 'off'"
+                }
+              },
+              {
+                "name": "autocorrect",
+                "value": {
+                  "type": "boolean"
                 }
               },
               {
@@ -16186,7 +16346,7 @@
               "name": "autocorrect",
               "description": "Indicates whether the browser's autocorrect feature is on or off.",
               "value": {
-                "type": "string"
+                "type": "'on' | 'off'"
               }
             },
             {

package/dist/chunks/chunk.2HARVX2F.js

@@ -0,0 +1,95 @@
+import {
+  download_link_styles_default
+} from "./chunk.6HSTAJNR.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/download-link/download-link.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSADownloadLink = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "base";
+    this.size = "medium";
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  render() {
+    if (this.variant === "contrasted") {
+      console.warn(
+        "The `contrasted` variant is deprecated, and will be removed in the next major release."
+      );
+    }
+    return html`
+      <a
+        part="link"
+        class=${classMap({
+      link: true,
+      "link--on-layer": this.variant === "layer",
+      "link--on-contrasted": this.variant === "contrasted",
+      "link--floating-menu": this.variant === "floating",
+      "document-link--x-large": this.size === "xlarge",
+      "document-link--large": this.size === "large",
+      "document-link--medium": this.size === "medium",
+      "document-link--small": this.size === "small",
+      "document-link--x-small": this.size === "xsmall",
+      "document-link--2x-small": this.size === "2xsmall"
+    })}
+        download=${this.filename}
+        href=${this.href}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <slot></slot>
+        <dsa-icon name="download" library="system"></dsa-icon>
+        <p
+          id="document-info"
+          class=${classMap({
+      "document-info": true,
+      "document-info--on-layer": this.variant === "layer",
+      "document-info--on-contrasted": this.variant === "contrasted",
+      "document-info--floating-menu": this.variant === "floating"
+    })}
+        >
+          ${this.format}${this.format && this.documentSize ? " - " : ""}${this.documentSize}
+        </p>
+      </a>
+    `;
+  }
+};
+DSADownloadLink.styles = download_link_styles_default;
+__decorateClass([
+  property()
+], DSADownloadLink.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSADownloadLink.prototype, "format", 2);
+__decorateClass([
+  property({ attribute: "documentsize" })
+], DSADownloadLink.prototype, "documentSize", 2);
+__decorateClass([
+  property()
+], DSADownloadLink.prototype, "variant", 2);
+__decorateClass([
+  property()
+], DSADownloadLink.prototype, "size", 2);
+__decorateClass([
+  property()
+], DSADownloadLink.prototype, "filename", 2);
+DSADownloadLink = __decorateClass([
+  customElement("dsa-download-link")
+], DSADownloadLink);
+
+export {
+  DSADownloadLink
+};

package/dist/chunks/chunk.34OZ43XB.js

@@ -0,0 +1,174 @@
+import {
+  input_native_styles_default
+} from "./chunk.6WYYBTGI.js";
+import {
+  getOverridenIconDetails,
+  isPrefixIconOverriden
+} from "./chunk.I6S6TC3T.js";
+import {
+  InputBase
+} from "./chunk.ZKUGZ55W.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  LocalizeController
+} from "./chunk.QY3AIGLE.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.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";
+var DSAInputNative = class extends InputBase {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+  }
+  handlePasswordToggle() {
+    this.passwordVisible = !this.passwordVisible;
+  }
+  renderInput() {
+    var _a, _b;
+    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) {
+      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--success": this.success && !this.error,
+      "input--on-layer": this.variant === "layer",
+      "input--on-base": this.variant === "base",
+      "input--on-floating-menu": this.variant === "floating",
+      "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 : (_a = this.accessibleName) != null ? _a : 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.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 : (_b = this.accessibleName) != null ? _b : 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() {
+    var _a, _b, _c;
+    const counterText = this.maxlength && this.counter ? `${(_b = (_a = this.value) == null ? void 0 : _a.length) != null ? _b : 0}/${this.maxlength}` : void 0;
+    return counterText !== void 0 ? html`<span
+          id="counter"
+          class=${classMap({
+      "form-control__counter": true,
+      "form-control__counter--animated": ((_c = this.value) == null ? void 0 : _c.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.364OCK6Y.js

@@ -0,0 +1,58 @@
+import {
+  LocalizeController
+} from "./chunk.QY3AIGLE.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/format-bytes/format-bytes.ts
+import { customElement, property } from "lit/decorators.js";
+var DSAFormatBytes = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.unit = "byte";
+    this.display = "short";
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return "";
+    }
+    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"];
+    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
+    const prefix = this.unit === "bit" ? bitPrefixes : bytePrefixes;
+    const index = Math.max(
+      0,
+      Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1)
+    );
+    const unit = prefix[index] + this.unit;
+    const valueToFormat = parseFloat(
+      (this.value / Math.pow(1e3, index)).toPrecision(3)
+    );
+    return this.localize.number(valueToFormat, {
+      style: "unit",
+      unit,
+      unitDisplay: this.display
+    });
+  }
+};
+__decorateClass([
+  property({ type: Number })
+], DSAFormatBytes.prototype, "value", 2);
+__decorateClass([
+  property()
+], DSAFormatBytes.prototype, "unit", 2);
+__decorateClass([
+  property()
+], DSAFormatBytes.prototype, "display", 2);
+DSAFormatBytes = __decorateClass([
+  customElement("dsa-format-bytes")
+], DSAFormatBytes);
+
+export {
+  DSAFormatBytes
+};

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

@@ -0,0 +1,60 @@
+import {
+  breadcrumb_styles_default
+} from "./chunk.M362UNDB.js";
+import {
+  LocalizeController
+} from "./chunk.QY3AIGLE.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/breadcrumb/breadcrumb.ts
+import { html } from "lit";
+import { customElement, query } from "lit/decorators.js";
+var DSABreadcrumb = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+  }
+  handleSlotChange() {
+    const items = [
+      ...this.defaultSlot.assignedElements({ flatten: true })
+    ].filter(
+      (item) => item.tagName.toLowerCase() === "dsa-breadcrumb-item"
+    );
+    items.forEach((item, index) => {
+      if (index === items.length - 1) {
+        item.setAttribute("aria-current", "page");
+      } else {
+        item.removeAttribute("aria-current");
+      }
+    });
+  }
+  render() {
+    return html`
+      <nav
+        part="base"
+        aria-label=${this.localize.term("youAreHere")}
+        role="navigation"
+      >
+        <div role="list" class="breadcrumb__list">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </nav>
+    `;
+  }
+};
+DSABreadcrumb.styles = breadcrumb_styles_default;
+__decorateClass([
+  query("slot")
+], DSABreadcrumb.prototype, "defaultSlot", 2);
+DSABreadcrumb = __decorateClass([
+  customElement("dsa-breadcrumb")
+], DSABreadcrumb);
+
+export {
+  DSABreadcrumb
+};