@proximus/lavender-light 1.4.13-beta.1 → 1.4.13-beta.2

package/dist/lavender-light.es.js

@@ -6344,13 +6344,168 @@ let ContentHeader = _ContentHeader;
 if (!customElements.get("px-content-header")) {
   customElements.define("px-content-header", ContentHeader);
 }
+const buttonIconCss = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media screen and (min-width: 48rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media screen and (min-width: 64.0625rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}";
+const buttonIconStyles = new CSSStyleSheet();
+buttonIconStyles.replaceSync(buttonIconCss);
+const buttonIconSizeValues = ["", "default", "small"];
+const buttonIconVariantValues = [
+  "",
+  "default",
+  "secondary",
+  "naked"
+];
+const _ButtonIcon = class _ButtonIcon extends PxElement {
+  constructor() {
+    super(buttonIconStyles);
+    this.template = () => `<slot></slot>`;
+    const $root = document.createElement(_ButtonIcon.nativeName);
+    $root.classList.add("btn-icon");
+    $root.innerHTML = this.template();
+    this.shadowRoot.appendChild($root);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      ...accessibilityAttributes,
+      "inverted",
+      "loading",
+      "size",
+      "variant",
+      "aria-expanded"
+    ];
+  }
+  connectedCallback() {
+    const icon = this.querySelector("px-icon");
+    if (icon) {
+      const iconSize = icon.getAttribute("size");
+      const iconColor = icon.getAttribute("color");
+      icon.addEventListener("click", () => {
+        this.$el.focus();
+      });
+      if (!iconSize) {
+        icon.setAttribute("size", "s");
+      }
+      if (this.size === "small") {
+        icon.setAttribute("size", "xs");
+      }
+      if (!iconColor) {
+        icon.setAttribute("color", "inherit");
+      }
+    }
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "loading":
+          this.updateLoading();
+          break;
+        case "size":
+          this.updateSize(oldValue, newValue);
+          break;
+        case "variant":
+          this.updateVariant(oldValue, newValue);
+          break;
+        case "aria-expanded":
+          if (newValue) {
+            this.$el.setAttribute("aria-expanded", newValue);
+            this.removeAttribute("aria-expanded");
+          }
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  _toggleClass(oldValue, newValue) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+      this.$el.classList.toggle(oldValue);
+    }
+    if (newValue !== null && newValue !== "" && newValue !== "default") {
+      this.$el.classList.toggle(newValue);
+    }
+  }
+  updateLoading() {
+    this.$el.classList.toggle(`btn-icon--state-loading`);
+  }
+  updateSize(oldValue, newValue) {
+    if (!this.checkName(buttonIconSizeValues, newValue)) {
+      log(
+        `"${newValue}" is not a valid size value for ${this.tagName.toLowerCase()}. Allowed values are: "${buttonIconSizeValues.join('", "')}".`
+      );
+    } else {
+      if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+        this.$el.classList.toggle(`btn-icon--size-${oldValue}`);
+      }
+      if (newValue !== null && newValue !== "" && newValue !== "default") {
+        this.$el.classList.toggle(`btn-icon--size-${newValue}`);
+      }
+    }
+  }
+  updateVariant(oldValue, newValue) {
+    if (!this.checkName(buttonIconVariantValues, newValue)) {
+      log(
+        `"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${buttonIconVariantValues.join('", "')}".`
+      );
+    } else {
+      if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+        this.$el.classList.toggle(`btn-icon--variant-${oldValue}`);
+      }
+      if (newValue !== null && newValue !== "" && newValue !== "default") {
+        this.$el.classList.toggle(`btn-icon--variant-${newValue}`);
+      }
+    }
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  get loading() {
+    return this.getAttribute("loading");
+  }
+  set loading(value) {
+    this.setAttribute("loading", value);
+  }
+  get size() {
+    return this.getAttribute("size");
+  }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get ariaExpanded() {
+    return this.getAttribute("aria-expanded");
+  }
+  set ariaExpanded(value) {
+    if (value) {
+      this.setAttribute("aria-expanded", value);
+    } else {
+      this.removeAttribute("aria-expanded");
+    }
+  }
+};
+_ButtonIcon.nativeName = "button";
+let ButtonIcon = _ButtonIcon;
+if (!customElements.get("px-button-icon")) {
+  customElements.define("px-button-icon", ButtonIcon);
+}
 export {
+  ButtonIcon,
   ContentHeader,
   Grid,
   Header,
   HeaderItem,
   Modal,
   Typography,
+  buttonIconSizeValues,
+  buttonIconVariantValues,
   contentAlignmentValues,
   gridColsValues,
   itemsAlignmentValues,