@proximus/lavender 1.4.5-alpha.9 → 1.4.5

package/dist/lavender.es.js

@@ -24,7 +24,7 @@ function getSupportedAttributeNames(htmlElementName) {
 }
 const commonStyleSheet$c = new CSSStyleSheet();
 commonStyleSheet$c.replaceSync(commonStyles);
-const PX_COMPONENT_DEBUG = typeof import.meta !== "undefined" && typeof __vite_import_meta_env__ !== "undefined" && true;
+const PX_COMPONENT_DEBUG = typeof import.meta !== "undefined" && typeof __vite_import_meta_env__ !== "undefined" && false;
 if (typeof window !== "undefined") {
   window.isComponentDebug = isComponentDebug;
 }
@@ -32,9 +32,6 @@ function isComponentDebug() {
   return PX_COMPONENT_DEBUG;
 }
 function log(message) {
-  if (isComponentDebug()) {
-    console.error(message);
-  }
 }
 if (typeof window !== "undefined") {
   window.isComponentDebug = isComponentDebug;
@@ -3012,7 +3009,6 @@ const _ActionLink = class _ActionLink extends PxElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if ((name === "icon-name" || name === "icon-from" || name === "label") && !newValue) {
-      log(`Action link needs a value from the attribute ${name}`);
       throw new Error(`Action link needs a value from the attribute ${name}`);
     }
     if (name === "icon-name") {
@@ -3183,7 +3179,6 @@ const _AgGridTableThButton = class _AgGridTableThButton extends PxElement {
   updateSorting(oldValue, newValue, attrValue) {
     var _a, _b;
     if (!checkName(attrValue, newValue)) {
-      log(`${newValue} is not an allowed sorting value.`);
       return;
     }
     if (oldValue !== null && oldValue !== "") {
@@ -3659,6 +3654,7 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
                 <slot name="title"></slot>
                 <slot name="description"></slot>
                 <slot name="content"></slot>
+                
               </div>
             </px-container>
           </px-grid>
@@ -3692,11 +3688,6 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
   connectedCallback() {
     var _a;
     (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
-    if (this.reduced) {
-      this.$container.setAttribute("padding", "m");
-    } else {
-      this.$container.setAttribute("padding", "l");
-    }
     this.createGridTemplateAreas();
     this.createGridding();
   }
@@ -3784,20 +3775,20 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
   }
   createGridding(value) {
     const breakpoints = [
-      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
+      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
       {
         prop: "hasGriddingMobile",
-        gridAttr: "grid-cols--mobile",
+        gridProp: "gridColsMobile",
         attr: "col-span--mobile"
       },
       {
         prop: "hasGriddingTablet",
-        gridAttr: "grid-cols--tablet",
+        gridProp: "gridColsTablet",
         attr: "col-span--tablet"
       },
       {
         prop: "hasGriddingLaptop",
-        gridAttr: "grid-cols--laptop",
+        gridProp: "gridColsLaptop",
         attr: "col-span--laptop"
       }
     ];
@@ -3805,16 +3796,16 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
       "px-grid > px-container"
     );
     if (value !== null) {
-      breakpoints.forEach(({ prop, gridAttr, attr }) => {
+      breakpoints.forEach(({ prop, gridProp, attr }) => {
         if (this[prop]) {
-          this.$grid.setAttribute(gridAttr, "3");
-          spanElement == null ? void 0 : spanElement.setAttribute(attr, "2");
+          this.$grid[gridProp] = "3";
+          spanElement.setAttribute(attr, "2");
         }
       });
     } else {
-      breakpoints.forEach(({ gridAttr, attr }) => {
-        this.$grid.setAttribute(gridAttr, "1");
-        spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
+      breakpoints.forEach(({ gridProp, attr }) => {
+        this.$grid[gridProp] = "1";
+        spanElement.removeAttribute(attr);
       });
     }
   }
@@ -5381,7 +5372,6 @@ function configureCellBackgroundColor(el) {
 }
 function updateVariant(element, oldValue, newValue) {
   if (!checkName(cellVariantValues, newValue)) {
-    log(`${newValue} is not an allowed variant value.`);
     return;
   }
   if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
@@ -6838,7 +6828,7 @@ class CellSwitch extends WithExtraAttributes {
     return `
     <div class="cell-switch">
       <px-cell hoverable>
-        <px-switch slot="action-indicator" inert></px-switch>
+        <px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -7638,11 +7628,7 @@ class Radiogroup extends WithExtraAttributes {
   setupErrorState() {
     var _a;
     const hasErrorText = ((_a = this.$slotError) == null ? void 0 : _a.assignedNodes().length) > 0;
-    if (this.state === "error" && !hasErrorText) {
-      log(
-        '<px-radiogroup> with state="error" requires a slot="error-text" containing the error description.'
-      );
-    }
+    if (this.state === "error" && !hasErrorText) ;
     if (this.state === "error" && hasErrorText) {
       this.$el.setAttribute("state", "error");
       this.$radioList.forEach((child) => {
@@ -7732,7 +7718,7 @@ class CellRadio extends WithExtraAttributes {
     return `
     <div class="cell-radio">
       <px-cell hoverable>
-        <px-radio slot="prefix" inert></px-radio>
+        <px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -9009,20 +8995,20 @@ const _ContentHeader = class _ContentHeader extends PxElement {
   }
   createGridding(value) {
     const breakpoints = [
-      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
+      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
       {
         prop: "hasGriddingMobile",
-        gridAttr: "grid-cols--mobile",
+        gridProp: "gridColsMobile",
         attr: "col-span--mobile"
       },
       {
         prop: "hasGriddingTablet",
-        gridAttr: "grid-cols--tablet",
+        gridProp: "gridColsTablet",
         attr: "col-span--tablet"
       },
       {
         prop: "hasGriddingLaptop",
-        gridAttr: "grid-cols--laptop",
+        gridProp: "gridColsLaptop",
         attr: "col-span--laptop"
       }
     ];
@@ -9030,16 +9016,16 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       "px-grid > px-container"
     );
     if (value !== null) {
-      breakpoints.forEach(({ prop, gridAttr, attr }) => {
+      breakpoints.forEach(({ prop, gridProp, attr }) => {
         if (this[prop]) {
-          this.$grid.setAttribute(gridAttr, "3");
-          spanElement == null ? void 0 : spanElement.setAttribute(attr, "2");
+          this.$grid[gridProp] = "3";
+          spanElement.setAttribute(attr, "2");
         }
       });
     } else {
-      breakpoints.forEach(({ gridAttr, attr }) => {
-        this.$grid.setAttribute(gridAttr, "1");
-        spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
+      breakpoints.forEach(({ gridProp, attr }) => {
+        this.$grid[gridProp] = "1";
+        spanElement.removeAttribute(attr);
       });
     }
   }
@@ -9774,9 +9760,6 @@ class Dropdown extends WithExtraAttributes {
     if (anchorAlignmentValues.includes(value)) {
       this.setAttribute("anchoralignment", value);
     } else {
-      log(
-        `Invalid anchor alignment value: ${value}. Using default ${defaultAnchorAlignment}.`
-      );
       this.setAttribute("anchoralignment", defaultAnchorAlignment);
     }
   }
@@ -9880,11 +9863,7 @@ const _Fieldset = class _Fieldset extends PxElement {
   setupErrorState() {
     var _a;
     const hasErrorText = ((_a = this.$slotError) == null ? void 0 : _a.assignedNodes().length) > 0;
-    if (this.state === "error" && !hasErrorText) {
-      log(
-        '<px-fieldset> with state="error" requires a slot="error-text" containing the error description.'
-      );
-    }
+    if (this.state === "error" && !hasErrorText) ;
     if (this.state === "error" && hasErrorText) {
       const id = Math.random().toString(36).substr(2, 9);
       this.$el.setAttribute("id", id);
@@ -12519,9 +12498,15 @@ const styles$j = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowr
 const styleSheet$j = new CSSStyleSheet();
 styleSheet$j.replaceSync(styles$j);
 const CLOSE_EVENT$1 = "px.lavender.modal.close";
+const statusValues = ["", "info", "success", "error", "warning"];
 class Modal extends HTMLElement {
   constructor() {
     super();
+    this.onOpenClick = () => this.show();
+    this.onCloseClick = () => this.close();
+    this.commandButtonCleanups = [];
+    this.openerElement = null;
+    this.closerElement = null;
     this.template = `<dialog>
     <div id="container">
       <div id="content-container">
@@ -12537,6 +12522,7 @@ class Modal extends HTMLElement {
             </px-vstack>
           </px-hstack>
           <div id="content">
+            <slot name="content"></slot>
             <slot></slot>
           </div>
           <px-separator size="m"></px-separator>
@@ -12563,18 +12549,14 @@ class Modal extends HTMLElement {
   }
   connectedCallback() {
     var _a, _b;
+    this.addEventListenersToCommandButtons();
     this.toggleDescriptionVisibility = this.toggleDescriptionVisibility.bind(this);
     this.toggleCloseButtonSafeArea = this.toggleCloseButtonSafeArea.bind(this);
     if (this.hasAttribute("open")) {
       this.show();
     }
     if (this.hasAttribute("closedby")) {
-      const $closer = document.querySelector(
-        `#${this.getAttribute("closedby")}`
-      );
-      $closer == null ? void 0 : $closer.addEventListener("click", () => {
-        this.close();
-      });
+      this.addCloseListener(this.getAttribute("closedby"));
     }
     if (this.hasAttribute("openedby")) {
       this.addOpenListener();
@@ -12594,7 +12576,7 @@ class Modal extends HTMLElement {
     );
   }
   static get observedAttributes() {
-    return ["open", "status", "media-src", "openedby"];
+    return ["open", "status", "media-src", "openedby", "closedby", "id"];
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     switch (attrName) {
@@ -12610,14 +12592,49 @@ class Modal extends HTMLElement {
       case "openedby":
         this.addOpenListener();
         break;
+      case "closedby":
+        this.addCloseListener(newValue);
+        break;
+      case "id":
+        this.addEventListenersToCommandButtons();
+        break;
     }
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     (_a = this.$slotDescription) == null ? void 0 : _a.removeEventListener(
       "slotchange",
       this.toggleDescriptionVisibility
     );
+    (_b = this.$slotCloseButton) == null ? void 0 : _b.removeEventListener(
+      "slotchange",
+      this.toggleCloseButtonSafeArea
+    );
+    this.removeCommandButtonListeners();
+    this.removeOpenListener();
+    this.removeCloseListener();
+  }
+  addEventListenersToCommandButtons() {
+    this.removeCommandButtonListeners();
+    if (this.id) {
+      document.querySelectorAll(`[commandfor="${this.id}"]`).forEach(($clickable) => {
+        if ($clickable.getAttribute("command") === "show-modal") {
+          $clickable.addEventListener("click", this.onOpenClick);
+          this.commandButtonCleanups.push(
+            () => $clickable.removeEventListener("click", this.onOpenClick)
+          );
+        } else if ($clickable.getAttribute("command") === "close") {
+          $clickable.addEventListener("click", this.onCloseClick);
+          this.commandButtonCleanups.push(
+            () => $clickable.removeEventListener("click", this.onCloseClick)
+          );
+        }
+      });
+    }
+  }
+  removeCommandButtonListeners() {
+    this.commandButtonCleanups.forEach((cleanup) => cleanup());
+    this.commandButtonCleanups = [];
   }
   handleOpenChange() {
     if (this.hasAttribute("open")) {
@@ -12628,6 +12645,13 @@ class Modal extends HTMLElement {
   }
   handleStatusChange(oldStatus, newStatus) {
     var _a, _b, _c;
+    if (statusValues.includes(newStatus)) {
+      this.$titleContainer.setAttribute("color", `neutral`);
+    } else {
+      if (this.$titleContainer.hasAttribute("color")) {
+        this.$titleContainer.removeAttribute("color");
+      }
+    }
     if (newStatus === "info") {
       this.$container.classList.add("info");
     } else {
@@ -12683,12 +12707,32 @@ class Modal extends HTMLElement {
     this.$mediaContainer.style.backgroundImage = `url(${src})`;
   }
   addOpenListener() {
-    var _a, _b, _c;
-    if (((_a = this.$opener) == null ? void 0 : _a.getAttribute("data-has-opener")) !== "true") {
-      (_b = this.$opener) == null ? void 0 : _b.setAttribute("data-has-opener", "true");
-      (_c = this.$opener) == null ? void 0 : _c.addEventListener("click", () => this.show());
+    var _a;
+    this.removeOpenListener();
+    this.openerElement = this.$opener;
+    (_a = this.openerElement) == null ? void 0 : _a.addEventListener("click", this.onOpenClick);
+  }
+  removeOpenListener() {
+    var _a;
+    (_a = this.openerElement) == null ? void 0 : _a.removeEventListener("click", this.onOpenClick);
+    this.openerElement = null;
+  }
+  addCloseListener(value) {
+    var _a, _b;
+    if (value === "none") {
+      (_a = this.$dialog) == null ? void 0 : _a.setAttribute("closedby", "none");
+    }
+    this.removeCloseListener();
+    if (value && value !== "none") {
+      this.closerElement = document.querySelector(`#${value}`);
+      (_b = this.closerElement) == null ? void 0 : _b.addEventListener("click", this.onCloseClick);
     }
   }
+  removeCloseListener() {
+    var _a;
+    (_a = this.closerElement) == null ? void 0 : _a.removeEventListener("click", this.onCloseClick);
+    this.closerElement = null;
+  }
   toggleDescriptionVisibility() {
     if (!this.$slottedDescription) {
       this.$descriptionContainer.style.display = "none";
@@ -12727,6 +12771,9 @@ class Modal extends HTMLElement {
       'px-p[font-weight="title"]'
     );
   }
+  get $titleContainer() {
+    return this.shadowRoot.querySelector("px-h1");
+  }
   get $opener() {
     return document.querySelector(
       `px-button#${this.getAttribute("openedby")}`
@@ -12744,6 +12791,12 @@ class Modal extends HTMLElement {
   set openedby(value) {
     this.setAttribute("openedby", value);
   }
+  get closedby() {
+    return this.getAttribute("closedby");
+  }
+  set closedby(value) {
+    this.setAttribute("closedby", value);
+  }
   get $closeButton() {
     return this.shadowRoot.querySelector("px-button-icon");
   }
@@ -15557,7 +15610,7 @@ class TileCheckbox extends WithExtraAttributes {
       <div class="tile-checkbox">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-checkbox slot="suffix" inert></px-checkbox>
+          <px-checkbox slot="suffix" aria-hidden="true" tabindex="-1"></px-checkbox>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -15837,7 +15890,7 @@ class TileRadio extends WithExtraAttributes {
       <div class="tile-radio">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-radio slot="suffix" inert></px-radio>
+          <px-radio slot="suffix" aria-hidden="true" tabindex="-1"></px-radio>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -16279,7 +16332,7 @@ class TileSwitch extends WithExtraAttributes {
       <div class="tile-switch">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-switch slot="suffix" inert></px-switch>
+          <px-switch slot="suffix" aria-hidden="true" tabindex="-1"></px-switch>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -16894,6 +16947,7 @@ export {
   stateValues,
   statusCardStateValues,
   statusStateValues,
+  statusValues,
   styleSheet$A as styleSheet,
   suffixButtonIconVariantValues,
   textalignValues,