@proximus/lavender 2.0.0-alpha.55 → 2.0.0-alpha.57

package/dist/lavender.es.js

@@ -2003,7 +2003,7 @@ class Icon extends WithExtraAttributes {
     __privateAdd(this, _src);
     __privateAdd(this, _internals);
     __privateAdd(this, _template, () => `<svg aria-hidden="true">
-      <use xlink:href=""></use>
+      <use></use>
     </svg>`);
     this.shadowRoot.innerHTML = __privateGet(this, _template).call(this);
     __privateSet(this, _internals, (_a = this.attachInternals) == null ? void 0 : _a.call(this));
@@ -2055,12 +2055,6 @@ class Icon extends WithExtraAttributes {
   }
   connectedCallback() {
     this.role = "img";
-    if (this.name) {
-      this.$el.firstElementChild.setAttribute(
-        "xlink:href",
-        `#icon-${this.name}`
-      );
-    }
     const iconSet = document.querySelectorAll("px-icon-set");
     if (!iconSet) {
       console.log("<px-icon-set> component not found");
@@ -2073,7 +2067,7 @@ class Icon extends WithExtraAttributes {
       if (icon.getAttribute("name") === this.from && icon.getAttribute("type") !== "font") {
         __privateSet(this, _src, icon.getAttribute("src"));
         this.$el.firstElementChild.setAttribute(
-          "xlink:href",
+          "href",
           `${__privateGet(this, _src)}#icon-${this.name}`
         );
       }
@@ -2107,7 +2101,7 @@ class Icon extends WithExtraAttributes {
   updateName(oldValue, newValue) {
     if (__privateGet(this, _src)) {
       this.$el.firstElementChild.setAttribute(
-        "xlink:href",
+        "href",
         `${__privateGet(this, _src)}#icon-${newValue}`
       );
     }
@@ -3740,6 +3734,14 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
     }
     this.createGridTemplateAreas();
     this.createGridding();
+    this.observer = new MutationObserver(() => {
+      this.createGridTemplateAreas();
+      this.createGridding();
+    });
+    this.observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -3792,6 +3794,9 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
       }
     }
   }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
   createGridTemplateAreas() {
     const grid = this.shadowRoot.querySelector(
       ".banner-content"
@@ -11757,24 +11762,53 @@ const _Input = class _Input extends AbstractInputElement {
   }
   connectedCallback() {
     super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "type"];
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      switch (attrName) {
+        case "type":
+          this.updateSearchBehavior();
+          this.$el.setAttribute("type", this.type ?? "text");
+          break;
+      }
+    }
+  }
+  updateSearchBehavior() {
     if (this.$el.type === "search") {
-      this.$el.setAttribute("list", "suggestions");
-      this.syncDataList();
+      this.enableSearchMode();
+      return;
+    }
+    this.disableSearchMode();
+  }
+  enableSearchMode() {
+    this.$el.setAttribute("list", "suggestions");
+    this.syncDataList();
+    if (!this.observer) {
       this.observer = new MutationObserver(() => {
         this.syncDataList();
       });
-      this.observer.observe(this, {
-        childList: true,
-        subtree: true
-      });
     }
-    if (this.type === "search") {
-      if (navigator.userAgent.includes("Chrome")) {
-        this.$el.style.setProperty("--search-icon-focus-width", "2.5rem");
-        this.$el.style.setProperty("--search-icon-datalist-width", "1rem");
-      }
+    this.observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
+    if (navigator.userAgent.includes("Chrome")) {
+      this.$el.style.setProperty("--search-icon-focus-width", "2.5rem");
+      this.$el.style.setProperty("--search-icon-datalist-width", "1rem");
     }
   }
+  disableSearchMode() {
+    var _a, _b;
+    (_a = this.observer) == null ? void 0 : _a.disconnect();
+    this.$el.removeAttribute("list");
+    (_b = this.$shadowSuggestions) == null ? void 0 : _b.remove();
+    this.$el.style.removeProperty("--search-icon-focus-width");
+    this.$el.style.removeProperty("--search-icon-datalist-width");
+  }
   syncDataList() {
     var _a, _b;
     const newSuggestions = (_a = this.$lightSuggestions) == null ? void 0 : _a.cloneNode(
@@ -11802,13 +11836,26 @@ const _Input = class _Input extends AbstractInputElement {
     return this.querySelector("datalist");
   }
   get $shadowSuggestions() {
-    return this.shadowRoot.querySelector("datalist");
+    var _a;
+    return ((_a = this.shadowRoot) == null ? void 0 : _a.querySelector("datalist")) ?? null;
   }
   get $container() {
-    return this.shadowRoot.querySelector("div");
+    var _a;
+    return ((_a = this.shadowRoot) == null ? void 0 : _a.querySelector("div")) ?? null;
+  }
+  get type() {
+    return this.getAttribute("type");
+  }
+  set type(value) {
+    if (value) {
+      this.setAttribute("type", value);
+    } else {
+      this.removeAttribute("type");
+    }
   }
 };
 _Input.nativeName = "input";
+_Input.accessorExclusions = ["type"];
 let Input = _Input;
 if (!customElements.get("px-input")) {
   customElements.define("px-input", Input);
@@ -13374,6 +13421,20 @@ class SelectableBox extends WithExtraAttributes {
 if (!customElements.get("px-selectable-box")) {
   customElements.define("px-selectable-box", SelectableBox);
 }
+const DEFAULT_IGNORED_TAGS = ["px-a", "px-button"];
+function shouldIgnoreSelectableBoxClick(event, host, ignoredTags = DEFAULT_IGNORED_TAGS) {
+  const ignored = new Set(ignoredTags);
+  const eventPath = event.composedPath();
+  for (const pathPart of eventPath) {
+    if (pathPart === host) {
+      break;
+    }
+    if (pathPart instanceof Element && ignored.has(pathPart.tagName.toLowerCase())) {
+      return true;
+    }
+  }
+  return false;
+}
 const styles$f = ':host{display:block;outline:none}:host *{box-sizing:border-box}.selectable-box-checkbox,.selectable-box-radio{box-sizing:border-box;height:100%;cursor:pointer;border-radius:var(--px-radius-main);overflow:hidden;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid var(--px-color-border-main-default);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}.selectable-box-checkbox px-selectable-box,.selectable-box-radio px-selectable-box{height:100%;background-color:var(--px-color-background-container-light-default)}:host([parent-has-anchor-full]) .selectable-box-checkbox,:host([parent-has-anchor-full]) .selectable-box-radio{border-radius:0 0 var(--px-radius-main) var(--px-radius-main)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-default)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-default )}:host(:not([disabled])):host(:focus-visible) .selectable-box-checkbox,:host(:not([disabled])):host(:focus-visible) .selectable-box-radio{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host([checked]) .selectable-box-checkbox,:host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-default)}:host([disabled]) .selectable-box-checkbox,:host([disabled]) .selectable-box-radio{cursor:default;pointer-events:none;border-color:transparent}:host([disabled]) .selectable-box-checkbox px-selectable-box,:host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) ::slotted([slot="title"]),:host([disabled]) ::slotted([slot="description"]),:host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-default)}@media only screen and (min-width: 48em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .selectable-box-checkbox,:host([inverted]) .selectable-box-radio{border-color:var(--px-color-border-main-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .selectable-box-checkbox px-selectable-box,:host([inverted]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-container-light-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([checked]) .selectable-box-checkbox,:host([inverted]):host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([disabled]) .selectable-box-checkbox,:host([inverted]):host([disabled]) .selectable-box-radio{border-color:transparent}:host([inverted]):host([disabled]) .selectable-box-checkbox px-selectable-box,:host([inverted]):host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]):host([disabled]) ::slotted([slot="title"]),:host([inverted]):host([disabled]) ::slotted([slot="description"]),:host([inverted]):host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-inverted)}';
 const styleSheet$g = new CSSStyleSheet();
 styleSheet$g.replaceSync(styles$f);
@@ -13492,6 +13553,9 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
     }
   }
   setClickEvent(event) {
+    if (shouldIgnoreSelectableBoxClick(event, this)) {
+      return;
+    }
     this.checked = !this.checked;
     event.stopPropagation();
     event.preventDefault();
@@ -13765,6 +13829,9 @@ class SelectableBoxRadio extends WithExtraAttributes {
     }
   }
   setClickEvent(event) {
+    if (shouldIgnoreSelectableBoxClick(event, this)) {
+      return;
+    }
     if (!this.checked) {
       this.checked = true;
     }