@design.estate/dees-catalog 7.0.0 → 7.0.1

package/dist_bundle/bundle.js

@@ -94903,6 +94903,7 @@ var init_dees_icon = __esm({
       }
     })], _icon_dec = [n5({
       type: String,
+      reflect: true,
       converter: {
         fromAttribute: /* @__PURE__ */ __name((value2) => value2, "fromAttribute"),
         toAttribute: /* @__PURE__ */ __name((value2) => value2, "toAttribute")
@@ -155107,7 +155108,7 @@ var demoFunc31 = /* @__PURE__ */ __name(() => b2`
 init_dist_ts26();
 init_dist_ts25();
 init_theme();
-var _iconPosition_dec2, _icon_dec3, _fullWidth_dec2, _insideForm_dec, _shape_dec, _status_dec2, _size_dec3, _type_dec4, _isHidden_dec, _disabled_dec4, _eventDetailData_dec, _text_dec2, _a44, _DeesButton_decorators, _init41, _text2, _eventDetailData, _disabled4, _isHidden, _type4, _size3, _status2, _shape, _insideForm, _fullWidth2, _icon3, _iconPosition2;
+var _adoptedIconPosition_dec, _adoptedIcon_dec, _adoptedText_dec, _iconPosition_dec2, _icon_dec3, _fullWidth_dec2, _insideForm_dec, _shape_dec, _status_dec2, _size_dec3, _type_dec4, _isHidden_dec, _disabled_dec4, _eventDetailData_dec, _text_dec2, _a44, _DeesButton_decorators, _init41, _text2, _eventDetailData, _disabled4, _isHidden, _type4, _size3, _status2, _shape, _insideForm, _fullWidth2, _icon3, _iconPosition2, _adoptedText, _adoptedIcon, _adoptedIconPosition;
 _DeesButton_decorators = [customElement("dees-button")];
 var _DeesButton = class _DeesButton extends (_a44 = DeesElement, _text_dec2 = [n5({
   reflect: true,
@@ -155130,7 +155131,7 @@ var _DeesButton = class _DeesButton extends (_a44 = DeesElement, _text_dec2 = [n
 })], _insideForm_dec = [n5({
   type: Boolean,
   reflect: true
-})], _fullWidth_dec2 = [n5({ type: Boolean, reflect: true, attribute: "full-width" })], _icon_dec3 = [n5({ type: String, reflect: true })], _iconPosition_dec2 = [n5({ type: String, reflect: true })], _a44) {
+})], _fullWidth_dec2 = [n5({ type: Boolean, reflect: true, attribute: "full-width" })], _icon_dec3 = [n5({ type: String, reflect: true })], _iconPosition_dec2 = [n5({ type: String, reflect: true })], _adoptedText_dec = [r5()], _adoptedIcon_dec = [r5()], _adoptedIconPosition_dec = [r5()], _a44) {
   constructor() {
     super();
     __privateAdd(this, _text2, __runInitializers(_init41, 8, this, "")), __runInitializers(_init41, 11, this);
@@ -155145,6 +155146,10 @@ var _DeesButton = class _DeesButton extends (_a44 = DeesElement, _text_dec2 = [n
     __privateAdd(this, _fullWidth2, __runInitializers(_init41, 44, this, false)), __runInitializers(_init41, 47, this);
     __privateAdd(this, _icon3, __runInitializers(_init41, 48, this)), __runInitializers(_init41, 51, this);
     __privateAdd(this, _iconPosition2, __runInitializers(_init41, 52, this, "left")), __runInitializers(_init41, 55, this);
+    __privateAdd(this, _adoptedText, __runInitializers(_init41, 56, this, "")), __runInitializers(_init41, 59, this);
+    __privateAdd(this, _adoptedIcon, __runInitializers(_init41, 60, this, "")), __runInitializers(_init41, 63, this);
+    __privateAdd(this, _adoptedIconPosition, __runInitializers(_init41, 64, this, "left")), __runInitializers(_init41, 67, this);
+    __publicField(this, "lightDomObserver");
     __publicField(this, "handleKeydown", /* @__PURE__ */ __name((eventArg) => {
       if (eventArg.key === " " || eventArg.key === "Spacebar") {
         eventArg.preventDefault();
@@ -155163,37 +155168,69 @@ var _DeesButton = class _DeesButton extends (_a44 = DeesElement, _text_dec2 = [n
     }, "handleKeyup"));
   }
   async connectedCallback() {
-    await super.connectedCallback();
+    const superConnected = super.connectedCallback();
+    this.observeLightDom();
+    await superConnected;
     if (!this.insideForm && this.closest("dees-form")) {
       this.insideForm = true;
     }
   }
-  /**
-   * Extracts icon and text from light DOM and sets properties
-   */
-  extractLightDom() {
-    const iconElement = this.querySelector("dees-icon");
-    const textContent = Array.from(this.childNodes).filter((node2) => node2.nodeType === Node.TEXT_NODE).map((node2) => node2.textContent?.trim()).filter(Boolean).join(" ");
-    if (textContent && !this.text) {
-      this.text = textContent;
-    }
-    if (iconElement) {
-      const iconValue = iconElement.icon || iconElement.getAttribute("icon") || null;
-      if (iconValue) {
-        const children2 = Array.from(this.childNodes);
-        const iconIndex = children2.indexOf(iconElement);
-        const textNodes = children2.filter(
-          (node2) => node2.nodeType === Node.TEXT_NODE && node2.textContent?.trim()
-        );
-        if (textNodes.length > 0) {
-          const firstTextIndex = children2.indexOf(textNodes[0]);
-          this.iconPosition = iconIndex < firstTextIndex ? "left" : "right";
+  async disconnectedCallback() {
+    this.lightDomObserver?.disconnect();
+    await super.disconnectedCallback();
+  }
+  observeLightDom() {
+    this.lightDomObserver ??= new MutationObserver((mutationsArg) => {
+      const supportedContentChanged = mutationsArg.some((mutationArg) => {
+        if (mutationArg.type === "childList") {
+          return mutationArg.target === this;
+        }
+        if (mutationArg.type === "characterData") {
+          return mutationArg.target.parentNode === this;
         }
-        this.icon = iconValue;
+        return mutationArg.target.parentNode === this && mutationArg.target.localName === "dees-icon";
+      });
+      if (supportedContentChanged) {
+        this.adoptLightDom();
       }
-      iconElement.remove();
+    });
+    this.lightDomObserver.observe(this, {
+      attributes: true,
+      attributeFilter: ["icon"],
+      characterData: true,
+      childList: true,
+      subtree: true
+    });
+    this.adoptLightDom();
+  }
+  /** Mirrors supported direct light content without taking ownership of consumer nodes. */
+  adoptLightDom() {
+    const children2 = Array.from(this.childNodes);
+    const textNodes = children2.filter(
+      (nodeArg) => nodeArg.nodeType === Node.TEXT_NODE && nodeArg.textContent?.trim()
+    );
+    const iconElement = children2.find(
+      (nodeArg) => nodeArg instanceof HTMLElement && nodeArg.localName === "dees-icon"
+    );
+    const nextAdoptedText = textNodes.map((nodeArg) => nodeArg.textContent.trim()).join(" ");
+    const nextAdoptedIcon = iconElement?.icon || iconElement?.getAttribute("icon") || "";
+    const nextAdoptedIconPosition = iconElement && textNodes.length > 0 ? children2.indexOf(iconElement) < children2.indexOf(textNodes[0]) ? "left" : "right" : "left";
+    const textFollowsLightDom = this.text === this.adoptedText;
+    const iconFollowsLightDom = (this.icon || "") === this.adoptedIcon;
+    const iconPositionFollowsLightDom = this.iconPosition === this.adoptedIconPosition;
+    const previousAdoptedIcon = this.adoptedIcon;
+    this.adoptedText = nextAdoptedText;
+    this.adoptedIcon = nextAdoptedIcon;
+    this.adoptedIconPosition = nextAdoptedIconPosition;
+    if (textFollowsLightDom && this.text !== nextAdoptedText) {
+      this.text = nextAdoptedText;
+    }
+    if (iconFollowsLightDom && this.icon !== nextAdoptedIcon && Boolean(nextAdoptedIcon || previousAdoptedIcon)) {
+      this.icon = nextAdoptedIcon;
+    }
+    if (iconPositionFollowsLightDom && this.iconPosition !== nextAdoptedIconPosition) {
+      this.iconPosition = nextAdoptedIconPosition;
     }
-    this.innerHTML = "";
   }
   render() {
     const typeMap = {
@@ -155205,9 +155242,12 @@ var _DeesButton = class _DeesButton extends (_a44 = DeesElement, _text_dec2 = [n
     };
     const actualType = typeMap[this.type] || this.type;
     const actualSize = this.type === "big" ? "lg" : this.size;
-    const leftIcon = this.iconPosition === "left" && this.icon ? b2`<dees-icon .icon=${this.icon}></dees-icon>` : "";
-    const rightIcon = this.iconPosition === "right" && this.icon ? b2`<dees-icon .icon=${this.icon}></dees-icon>` : "";
-    const showText = Boolean(this.text) && !(actualSize === "icon" && this.icon);
+    const effectiveText = this.text;
+    const effectiveIcon = this.icon;
+    const effectiveIconPosition = this.iconPosition;
+    const leftIcon = effectiveIconPosition === "left" && effectiveIcon ? b2`<dees-icon .icon=${effectiveIcon}></dees-icon>` : "";
+    const rightIcon = effectiveIconPosition === "right" && effectiveIcon ? b2`<dees-icon .icon=${effectiveIcon}></dees-icon>` : "";
+    const showText = Boolean(effectiveText) && !(actualSize === "icon" && effectiveIcon);
     return b2`
       <div
         class="button ${this.isHidden ? "hidden" : ""} ${actualType} size-${actualSize} shape-${this.shape} ${this.status} ${this.disabled ? "disabled" : ""}"
@@ -155215,7 +155255,7 @@ var _DeesButton = class _DeesButton extends (_a44 = DeesElement, _text_dec2 = [n
         tabindex=${this.disabled ? -1 : 0}
         aria-disabled=${this.disabled ? "true" : "false"}
         aria-busy=${this.status === "pending" ? "true" : "false"}
-        .ariaLabel=${showText ? null : this.text || null}
+        .ariaLabel=${showText ? null : effectiveText || null}
         @click="${this.dispatchClick}"
         @keydown=${this.handleKeydown}
         @keyup=${this.handleKeyup}
@@ -155228,7 +155268,7 @@ var _DeesButton = class _DeesButton extends (_a44 = DeesElement, _text_dec2 = [n
           ></dees-spinner>
         `}
         ${leftIcon}
-        ${showText ? b2`<div class="textbox">${this.text}</div>` : ""}
+        ${showText ? b2`<div class="textbox">${effectiveText}</div>` : ""}
         ${rightIcon}
       </div>
     `;
@@ -155291,9 +155331,6 @@ var _DeesButton = class _DeesButton extends (_a44 = DeesElement, _text_dec2 = [n
     }
     this.faceElement?.click();
   }
-  async firstUpdated() {
-    this.extractLightDom();
-  }
 };
 _init41 = __decoratorStart(_a44);
 _text2 = new WeakMap();
@@ -155308,6 +155345,9 @@ _insideForm = new WeakMap();
 _fullWidth2 = new WeakMap();
 _icon3 = new WeakMap();
 _iconPosition2 = new WeakMap();
+_adoptedText = new WeakMap();
+_adoptedIcon = new WeakMap();
+_adoptedIconPosition = new WeakMap();
 __decorateElement(_init41, 4, "text", _text_dec2, _DeesButton, _text2);
 __decorateElement(_init41, 4, "eventDetailData", _eventDetailData_dec, _DeesButton, _eventDetailData);
 __decorateElement(_init41, 4, "disabled", _disabled_dec4, _DeesButton, _disabled4);
@@ -155320,6 +155360,9 @@ __decorateElement(_init41, 4, "insideForm", _insideForm_dec, _DeesButton, _insid
 __decorateElement(_init41, 4, "fullWidth", _fullWidth_dec2, _DeesButton, _fullWidth2);
 __decorateElement(_init41, 4, "icon", _icon_dec3, _DeesButton, _icon3);
 __decorateElement(_init41, 4, "iconPosition", _iconPosition_dec2, _DeesButton, _iconPosition2);
+__decorateElement(_init41, 4, "adoptedText", _adoptedText_dec, _DeesButton, _adoptedText);
+__decorateElement(_init41, 4, "adoptedIcon", _adoptedIcon_dec, _DeesButton, _adoptedIcon);
+__decorateElement(_init41, 4, "adoptedIconPosition", _adoptedIconPosition_dec, _DeesButton, _adoptedIconPosition);
 _DeesButton = __decorateElement(_init41, 0, "DeesButton", _DeesButton_decorators, _DeesButton);
 __name(_DeesButton, "DeesButton");
 __publicField(_DeesButton, "demo", demoFunc31);
@@ -231013,7 +231056,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "7.0.0",
+  version: "7.0.1",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };