@proximus/lavender 2.0.0-alpha.160 → 2.0.0-alpha.162

package/dist/lavender.es.js

@@ -15519,12 +15519,17 @@ const statusCardStateValues = [
   "error",
   "ongoing"
 ];
+const statusCardBackgroundColorValues = [
+  "",
+  "container-light",
+  "container-default"
+];
 const CLOSE_EVENT = "px.lavender.modal.close";
 const _StatusCard = class _StatusCard extends PxElement {
   constructor() {
     super(statusCardStyles);
     this.template = () => `<div class="status-card">
-  <px-container background-color="container-default" padding="s">
+  <px-container padding="s" background-color="container-default">
     <px-hstack gap="s" align-items="flex-start">
       <px-icon name="information_fill" from="lavender" size="l" color="brand"></px-icon>
       <px-vstack gap="s" grow="1">
@@ -15545,7 +15550,8 @@ const _StatusCard = class _StatusCard extends PxElement {
       ...super.observedAttributes,
       "state",
       "inverted",
-      "status-icon-aria-label"
+      "status-icon-aria-label",
+      "background-color"
     ];
   }
   connectedCallback() {
@@ -15580,12 +15586,34 @@ const _StatusCard = class _StatusCard extends PxElement {
             this.$statusIcon.removeAttribute("aria-label");
           }
           break;
+        case "background-color":
+          if (this.backgroundColor) {
+            this.updateBackgroundColor(
+              newValue,
+              statusCardBackgroundColorValues
+            );
+          }
+          break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
           break;
       }
     }
   }
+  updateBackgroundColor(newValue, allowedValues) {
+    if (!this.checkName(allowedValues, newValue)) {
+      log(
+        `"${newValue}" is not a valid background-color value for ${this.tagName.toLowerCase()}. 
+        Allowed values are: "${allowedValues.join('", "')}".`
+      );
+      return;
+    }
+    if (newValue === null || newValue === "") {
+      this.$container.setAttribute("background-color", "container-default");
+    } else {
+      this.$container.setAttribute("background-color", newValue);
+    }
+  }
   updateState(state) {
     if (!this.checkName(statusCardStateValues, state)) {
       log(
@@ -15653,6 +15681,16 @@ const _StatusCard = class _StatusCard extends PxElement {
       this.removeAttribute("status-icon-aria-label");
     }
   }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(value) {
+    if (value) {
+      this.setAttribute("background-color", value);
+    } else {
+      this.removeAttribute("background-color");
+    }
+  }
 };
 _StatusCard.nativeName = "div";
 let StatusCard = _StatusCard;
@@ -18769,6 +18807,7 @@ export {
   skeletonsVariantValues,
   sortingValues,
   stateValues,
+  statusCardBackgroundColorValues,
   statusCardStateValues,
   statusStateValues,
   statusValues,