@ds-autonomie/web-components 1.6.0 → 1.8.0

package/dist/chunks/chunk.AFFFEIW7.js

@@ -0,0 +1,154 @@
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/internal/components/button-group/button-group.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+// src/internal/components/button-group/button-group.styles.ts
+import { css } from "lit";
+var button_group_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  .button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--dsa-spacing-8);
+  }
+
+  .button-group--squeezed {
+    gap: 0;
+  }
+
+  .button-group--vertical {
+    flex-direction: column;
+    min-width: 120px;
+    max-width: 400px;
+  }
+
+  .button-group--horizontal {
+    flex-direction: row;
+  }
+`;
+
+// src/internal/components/button-group/button-group.ts
+var DSAInternalButtonGroup = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+    this.squeezed = false;
+    this.horizontal = false;
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("dsa-button-group__button--focus");
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("dsa-button-group__button--focus");
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("dsa-button-group__button--hover");
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("dsa-button-group__button--hover");
+  }
+  handleSlotChange() {
+    const slottedElements = [
+      ...this.defaultSlot.assignedElements({ flatten: true })
+    ];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button !== null) {
+        button.classList.add("dsa-button-group__button");
+        if (this.squeezed) {
+          button.classList.toggle(
+            "dsa-button-group__button--first",
+            index === 0
+          );
+          button.classList.toggle(
+            "dsa-button-group__button--inner",
+            index > 0 && index < slottedElements.length - 1
+          );
+          button.classList.toggle(
+            "dsa-button-group__button--last",
+            index === slottedElements.length - 1
+          );
+        }
+        button.classList.toggle(
+          "dsa-button-group__button--radio",
+          button.tagName.toLowerCase() === "dsa-radio-button"
+        );
+        button.classList.toggle(
+          "dsa-button-group__button--checkbox",
+          button.tagName.toLowerCase() === "dsa-checkbox-button"
+        );
+        button.classList.toggle(
+          "dsa-button-group__button--vertical",
+          !this.horizontal
+        );
+      }
+    });
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "button-group": true,
+      "button-group--squeezed": this.squeezed,
+      "button-group--vertical": !this.horizontal,
+      "button-group--horizontal": this.horizontal
+    })}
+        role="${this.disableRole ? "presentation" : "group"}"
+        aria-label=${this.label}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+DSAInternalButtonGroup.styles = button_group_styles_default;
+__decorateClass([
+  query("slot")
+], DSAInternalButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], DSAInternalButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  property()
+], DSAInternalButtonGroup.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInternalButtonGroup.prototype, "squeezed", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInternalButtonGroup.prototype, "horizontal", 2);
+DSAInternalButtonGroup = __decorateClass([
+  customElement("dsa-internal-button-group")
+], DSAInternalButtonGroup);
+function findButton(el) {
+  var _a;
+  const selector = "dsa-button, dsa-radio-button, dsa-checkbox-button, dsa-pagination-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}

package/dist/chunks/chunk.AHPXKIVU.js

@@ -0,0 +1,24 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table/table-cell/table-cell.styles.ts
+import { css } from "lit";
+var table_cell_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    position: relative;
+    display: table-cell;
+    padding: var(--dsa-wc-table-cell-padding-y)
+      var(--dsa-wc-table-cell-padding-x);
+    border-block-end: var(--dsa-wc-table-cell-border-size) solid
+      var(--dsa-wc-table-cell-border-color);
+    vertical-align: middle;
+    text-align: start;
+  }
+`;
+
+export {
+  table_cell_styles_default
+};

package/dist/chunks/{chunk.5YABZV2L.js → chunk.AXJZDS4O.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.DXQY7NLW.js";
 import {
   LocalizeController
-} from "./chunk.CKDL37GT.js";
+} from "./chunk.KZIAHLAV.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -64,6 +64,7 @@ var DSAButton = class extends ShoelaceElement {
     this.value = "";
     this.href = "";
     this.rel = "noreferrer noopener";
+    this.ariaLabel = "";
   }
   /** Gets the validity state object */
   get validity() {
@@ -205,6 +206,7 @@ var DSAButton = class extends ShoelaceElement {
         download=${ifDefined(isLink ? this.download : void 0)}
         rel=${ifDefined(isLink ? this.rel : void 0)}
         role=${ifDefined(isLink ? void 0 : "button")}
+        aria-label=${ifDefinedAndNotEmpty(this.ariaLabel)}
         aria-disabled=${this.disabled ? "true" : "false"}
         tabindex=${this.disabled ? "-1" : "0"}
         @blur=${this.handleBlur}
@@ -299,6 +301,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "formtarget" })
 ], DSAButton.prototype, "formTarget", 2);
+__decorateClass([
+  property({ attribute: "aria-label" })
+], DSAButton.prototype, "ariaLabel", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], DSAButton.prototype, "handleDisabledChange", 1);

package/dist/chunks/{chunk.OUVQZNJQ.js → chunk.B3VBH7AS.js}

@@ -1,6 +1,6 @@
 import {
   radio_group_styles_default
-} from "./chunk.LSECPSSR.js";
+} from "./chunk.IDMVVAVX.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -16,164 +16,14 @@ import {
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
 import {
   __decorateClass
 } from "./chunk.6M63UXML.js";
 
 // src/components/radio-group/radio-group.ts
-import { html as html2 } from "lit";
-import { customElement as customElement2, property as property2, query as query2, state as state2 } from "lit/decorators.js";
-import { classMap as classMap2 } from "lit/directives/class-map.js";
-
-// src/internal/components/button-group/button-group.ts
 import { html } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-
-// src/internal/components/button-group/button-group.styles.ts
-import { css } from "lit";
-var button_group_styles_default = css`
-  ${component_styles_default}
-
-  :host {
-    display: inline-block;
-  }
-
-  .button-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--dsa-spacing-8);
-  }
-
-  .button-group--squeezed {
-    gap: 0;
-  }
-
-  .button-group--vertical {
-    flex-direction: column;
-    min-width: 120px;
-    max-width: 400px;
-  }
-
-  .button-group--horizontal {
-    flex-direction: row;
-  }
-`;
-
-// src/internal/components/button-group/button-group.ts
-var DSAInternalButtonGroup = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.disableRole = false;
-    this.label = "";
-    this.squeezed = false;
-    this.horizontal = false;
-  }
-  handleFocus(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("dsa-button-group__button--focus");
-  }
-  handleBlur(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("dsa-button-group__button--focus");
-  }
-  handleMouseOver(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("dsa-button-group__button--hover");
-  }
-  handleMouseOut(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("dsa-button-group__button--hover");
-  }
-  handleSlotChange() {
-    const slottedElements = [
-      ...this.defaultSlot.assignedElements({ flatten: true })
-    ];
-    slottedElements.forEach((el) => {
-      const index = slottedElements.indexOf(el);
-      const button = findButton(el);
-      if (button !== null) {
-        button.classList.add("dsa-button-group__button");
-        if (this.squeezed) {
-          button.classList.toggle(
-            "dsa-button-group__button--first",
-            index === 0
-          );
-          button.classList.toggle(
-            "dsa-button-group__button--inner",
-            index > 0 && index < slottedElements.length - 1
-          );
-          button.classList.toggle(
-            "dsa-button-group__button--last",
-            index === slottedElements.length - 1
-          );
-        }
-        button.classList.toggle(
-          "dsa-button-group__button--radio",
-          button.tagName.toLowerCase() === "dsa-radio-button"
-        );
-        button.classList.toggle(
-          "dsa-button-group__button--checkbox",
-          button.tagName.toLowerCase() === "dsa-checkbox-button"
-        );
-        button.classList.toggle(
-          "dsa-button-group__button--vertical",
-          !this.horizontal
-        );
-      }
-    });
-  }
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-      "button-group": true,
-      "button-group--squeezed": this.squeezed,
-      "button-group--vertical": !this.horizontal,
-      "button-group--horizontal": this.horizontal
-    })}
-        role="${this.disableRole ? "presentation" : "group"}"
-        aria-label=${this.label}
-        @focusout=${this.handleBlur}
-        @focusin=${this.handleFocus}
-        @mouseover=${this.handleMouseOver}
-        @mouseout=${this.handleMouseOut}
-      >
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
-  }
-};
-DSAInternalButtonGroup.styles = button_group_styles_default;
-__decorateClass([
-  query("slot")
-], DSAInternalButtonGroup.prototype, "defaultSlot", 2);
-__decorateClass([
-  state()
-], DSAInternalButtonGroup.prototype, "disableRole", 2);
-__decorateClass([
-  property()
-], DSAInternalButtonGroup.prototype, "label", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSAInternalButtonGroup.prototype, "squeezed", 2);
-__decorateClass([
-  property({ type: Boolean })
-], DSAInternalButtonGroup.prototype, "horizontal", 2);
-DSAInternalButtonGroup = __decorateClass([
-  customElement("dsa-internal-button-group")
-], DSAInternalButtonGroup);
-function findButton(el) {
-  var _a;
-  const selector = "dsa-button, dsa-radio-button, dsa-checkbox-button";
-  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
-}
-
-// src/components/radio-group/radio-group.ts
 var DSARadioGroup = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
@@ -195,6 +45,8 @@ var DSARadioGroup = class extends ShoelaceElement {
     this.deselectable = false;
     this.form = "";
     this.required = false;
+    this.disabled = false;
+    this.readonly = false;
     this.horizontal = false;
     this.error = false;
     this.errorMessage = "";
@@ -240,7 +92,7 @@ var DSARadioGroup = class extends ShoelaceElement {
     if (!target) {
       return;
     }
-    if (target.disabled) {
+    if (target.disabled || target.readonly) {
       return;
     }
     const radios = this.getAllRadios();
@@ -265,7 +117,9 @@ var DSARadioGroup = class extends ShoelaceElement {
     )) {
       return;
     }
-    const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+    const radios = this.getAllRadios().filter(
+      (radio) => !radio.disabled && !radio.readonly
+    );
     const focusedCheckboxIndex = radios.findIndex((t) => t.matches(":focus"));
     const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
     const oldValue = this.value;
@@ -319,6 +173,12 @@ var DSARadioGroup = class extends ShoelaceElement {
       const radios = this.getAllRadios();
       let hasAtLeastOneCheckedRadio = false;
       radios.forEach((radio) => {
+        if (this.readonly) {
+          radio.readonly = true;
+        }
+        if (this.disabled) {
+          radio.disabled = true;
+        }
         this.hasRadioButtons = radio.tagName.toLowerCase() === "dsa-radio-button";
         if (radio.tagName.toLowerCase() === "dsa-radio-button" && radio.readonly) {
           this.readonlyRadioButtonValue.set(radio.value, true);
@@ -339,7 +199,9 @@ var DSARadioGroup = class extends ShoelaceElement {
             buttonRadio.tabIndex = 0;
           }
         } else {
-          const firstNonDisabledRadio = radios.find((radio) => !radio.disabled);
+          const firstNonDisabledRadio = radios.find(
+            (radio) => !radio.disabled && !radio.readonly
+          );
           if (firstNonDisabledRadio) {
             firstNonDisabledRadio.tabIndex = 0;
           }
@@ -365,17 +227,18 @@ var DSARadioGroup = class extends ShoelaceElement {
   updateCheckedRadio() {
     const radios = this.getAllRadios();
     radios.forEach((radio, index) => {
+      var _a;
       radio.checked = radio.value === this.value;
       const shouldFocus = this.value === "" && index === 0;
       if (this.hasRadioButtons) {
         const radioButton = radio;
-        radioButton.button.tabIndex = shouldFocus || radio.checked ? 0 : -1;
-        radio.disabled = this.readonlyRadioButtonValue.get(this.value) || radioButton.readonly;
+        radioButton.button.tabIndex = shouldFocus || radio.checked && !radio.readonly ? 0 : -1;
+        radioButton.disabled = (_a = this.readonlyRadioButtonValue.get(this.value)) != null ? _a : radioButton.disabled;
         if (shouldFocus) {
           radioButton.button.focus();
         }
       } else {
-        radio.tabIndex = shouldFocus || radio.checked ? 0 : -1;
+        radio.tabIndex = shouldFocus || radio.checked && !radio.readonly ? 0 : -1;
         if (shouldFocus) {
           radio.focus();
         }
@@ -439,10 +302,10 @@ var DSARadioGroup = class extends ShoelaceElement {
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-    return html2`
+    return html`
       <fieldset
         part="form-control"
-        class=${classMap2({
+        class=${classMap({
       "form-control": true,
       "form-control--error": this.error,
       "form-control--medium": true,
@@ -463,7 +326,7 @@ var DSARadioGroup = class extends ShoelaceElement {
           aria-hidden=${hasLabel ? "false" : "true"}
           @click=${this.handleLabelClick}
         >
-          ${this.required ? html2`<span class="form-control__label-required">*</span>` : ""}
+          ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
           <slot name="label">${this.label}</slot>
         </label>
         <slot name="tooltip" class="form-control__tooltip"></slot>
@@ -485,7 +348,7 @@ var DSARadioGroup = class extends ShoelaceElement {
             </label>
           </div>
 
-          ${this.hasRadioButtons ? html2`
+          ${this.hasRadioButtons ? html`
                 <dsa-internal-button-group
                   part="button-group"
                   exportparts="base:button-group__base"
@@ -497,7 +360,7 @@ var DSARadioGroup = class extends ShoelaceElement {
                 >
                   <slot></slot>
                 </dsa-internal-button-group>
-              ` : html2`
+              ` : html`
                 <slot
                   @click=${this.handleRadioClick}
                   @keydown=${this.handleKeyDown}
@@ -517,7 +380,7 @@ var DSARadioGroup = class extends ShoelaceElement {
           ${this.helpText}
         </slot>
 
-        ${this.error ? html2`<dsa-error-text
+        ${this.error ? html`<dsa-error-text
               id="error-text"
               class="form-control__error-text"
               >${this.customValidityError !== "" ? this.customValidityError : this.errorMessage}</dsa-error-text
@@ -528,49 +391,55 @@ var DSARadioGroup = class extends ShoelaceElement {
 };
 DSARadioGroup.styles = radio_group_styles_default;
 __decorateClass([
-  query2("slot:not([name])")
+  query("slot:not([name])")
 ], DSARadioGroup.prototype, "defaultSlot", 2);
 __decorateClass([
-  query2(".radio-group__validation-input")
+  query(".radio-group__validation-input")
 ], DSARadioGroup.prototype, "validationInput", 2);
 __decorateClass([
-  state2()
+  state()
 ], DSARadioGroup.prototype, "hasRadioButtons", 2);
 __decorateClass([
-  state2()
+  state()
 ], DSARadioGroup.prototype, "readonlyRadioButtonValue", 2);
 __decorateClass([
-  state2()
+  state()
 ], DSARadioGroup.prototype, "defaultValue", 2);
 __decorateClass([
-  property2()
+  property()
 ], DSARadioGroup.prototype, "label", 2);
 __decorateClass([
-  property2({ attribute: "help-text" })
+  property({ attribute: "help-text" })
 ], DSARadioGroup.prototype, "helpText", 2);
 __decorateClass([
-  property2()
+  property()
 ], DSARadioGroup.prototype, "name", 2);
 __decorateClass([
-  property2({ reflect: true })
+  property({ reflect: true })
 ], DSARadioGroup.prototype, "value", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], DSARadioGroup.prototype, "deselectable", 2);
 __decorateClass([
-  property2({ reflect: true })
+  property({ reflect: true })
 ], DSARadioGroup.prototype, "form", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property({ type: Boolean, reflect: true })
 ], DSARadioGroup.prototype, "required", 2);
 __decorateClass([
-  property2({ type: Boolean })
+  property({ type: Boolean, reflect: true })
+], DSARadioGroup.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSARadioGroup.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean })
 ], DSARadioGroup.prototype, "horizontal", 2);
 __decorateClass([
-  property2({ type: Boolean })
+  property({ type: Boolean })
 ], DSARadioGroup.prototype, "error", 2);
 __decorateClass([
-  property2({ attribute: "error-message" })
+  property({ attribute: "error-message" })
 ], DSARadioGroup.prototype, "errorMessage", 2);
 __decorateClass([
   watch("value")
@@ -579,7 +448,7 @@ __decorateClass([
   watch("error")
 ], DSARadioGroup.prototype, "handleErrorChange", 1);
 DSARadioGroup = __decorateClass([
-  customElement2("dsa-radio-group")
+  customElement("dsa-radio-group")
 ], DSARadioGroup);
 
 export {

package/dist/chunks/{chunk.K2ICEURU.js → chunk.B5DEC3ZW.js}

@@ -1,6 +1,6 @@
 import {
   icon_button_styles_default
-} from "./chunk.YDCBGMSA.js";
+} from "./chunk.BEGWFCAR.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
@@ -24,6 +24,7 @@ var DSAIconButton = class extends ShoelaceElement {
     this.label = "";
     this.disabled = false;
     this.variant = "default";
+    this.size = "medium";
   }
   handleBlur() {
     this.hasFocus = false;
@@ -84,7 +85,16 @@ var DSAIconButton = class extends ShoelaceElement {
         @click=${this.handleClick}
       >
         <dsa-icon
-          class="icon-button__icon"
+          class=${classMap({
+      "icon-button__icon": true,
+      "icon-button__icon--2xsmall": this.size === "2xsmall",
+      "icon-button__icon--xsmall": this.size === "xsmall",
+      "icon-button__icon--small": this.size === "small",
+      "icon-button__icon--medium": this.size === "medium",
+      "icon-button__icon--large": this.size === "large",
+      "icon-button__icon--xlarge": this.size === "xlarge",
+      "icon-button__icon--2xlarge": this.size === "2xlarge"
+    })}
           name=${ifDefined(this.name)}
           src=${ifDefined(this.src)}
           aria-hidden="true"
@@ -130,6 +140,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSAIconButton.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAIconButton.prototype, "size", 2);
 DSAIconButton = __decorateClass([
   customElement("dsa-icon-button")
 ], DSAIconButton);

package/dist/chunks/{chunk.YDCBGMSA.js → chunk.BEGWFCAR.js}

@@ -45,6 +45,34 @@ var icon_button_styles_default = css`
   .icon-button__icon {
     pointer-events: none;
   }
+  .icon-button__icon--2xsmall {
+    width: 10px;
+    height: 10px;
+  }
+  .icon-button__icon--xsmall {
+    width: 12px;
+    height: 12px;
+  }
+  .icon-button__icon--small {
+    width: 14px;
+    height: 14px;
+  }
+  .icon-button__icon--medium {
+    width: 16px;
+    height: 16px;
+  }
+  .icon-button__icon--large {
+    width: 20px;
+    height: 20px;
+  }
+  .icon-button__icon--xlarge {
+    width: 24px;
+    height: 24px;
+  }
+  .icon-button__icon--2xlarge {
+    width: 36px;
+    height: 36px;
+  }
 
   /*
   * Primary

package/dist/chunks/chunk.C33YMWL6.js

@@ -0,0 +1,33 @@
+import {
+  table_cell_styles_default
+} from "./chunk.AHPXKIVU.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/table/table-cell/table-cell.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DSATableCell = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.role = "cell";
+  }
+  render() {
+    return html`<slot></slot> `;
+  }
+};
+DSATableCell.styles = table_cell_styles_default;
+__decorateClass([
+  property({ reflect: true })
+], DSATableCell.prototype, "role", 2);
+DSATableCell = __decorateClass([
+  customElement("dsa-table-cell")
+], DSATableCell);
+
+export {
+  DSATableCell
+};