@aurodesignsystem-dev/auro-formkit 0.0.0-pr740.2 → 0.0.0-pr740.3

package/components/bibtemplate/dist/auro-bibtemplate.d.ts

@@ -32,12 +32,6 @@ export class AuroBibtemplate extends LitElement {
      * @private
      */
     private buttonTag;
-    /**
-     * Prevents scrolling of the body when touching empty areas of the component.
-     * @param {Event} event - The touchmove event.
-     * @returns {void}
-     */
-    preventBodyScroll(event: Event): void;
     onCloseButtonClick(): void;
     /**
      * Exposes CSS parts for styling from parent components.

package/components/bibtemplate/dist/index.js

@@ -1840,31 +1840,6 @@ class AuroBibtemplate extends LitElement {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));
@@ -1893,7 +1868,7 @@ class AuroBibtemplate extends LitElement {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html$1`
-      <div id="bibTemplate" part="bibtemplate" @touchstart="${this.preventBodyScroll}">
+      <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html$1`
         <div id="headerContainer">
           <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">

package/components/bibtemplate/dist/registered.js

@@ -1840,31 +1840,6 @@ class AuroBibtemplate extends LitElement {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));
@@ -1893,7 +1868,7 @@ class AuroBibtemplate extends LitElement {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html$1`
-      <div id="bibTemplate" part="bibtemplate" @touchstart="${this.preventBodyScroll}">
+      <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html$1`
         <div id="headerContainer">
           <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">

package/components/combobox/demo/api.min.js

@@ -3927,6 +3927,10 @@ class AuroDropdownBib extends i$2 {
   connectedCallback() {
     super.connectedCallback();
 
+    this.addEventListener('touchstart', this.preventBodyScroll);
+    this.addEventListener('touchmove', this.preventBodyScroll);
+
+
     // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
     this.addEventListener('auro-bibtemplate-connected', (event) => {
       const bibTemplate = event.detail.element;
@@ -3956,6 +3960,60 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    function checkIfDecent(target, parent) {
+      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
+        return false;
+      }
+
+      if (parent.tagName.toLowerCase() === 'slot') {
+        const assignedElements = parent.assignedElements();
+        if (assignedElements) {
+          for (const child of assignedElements) {
+            if (checkIfDecent(target, child)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (target === parent || parent.contains(target)) {
+        return true;
+      }
+
+      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
+        return true;
+      }
+
+      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
+        return true;
+      }
+
+      if (parent.children) {
+        for (const child of parent.children) {
+          if (checkIfDecent(target, child)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    const isDecent = checkIfDecent(event.target, this);
+    if (isDecent && event.type === 'touchstart') {
+      // if the target is on the bib, let it go for `click` event
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -15277,31 +15335,6 @@ class AuroBibtemplate extends i$2 {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));
@@ -15330,7 +15363,7 @@ class AuroBibtemplate extends i$2 {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return u$2`
-      <div id="bibTemplate" part="bibtemplate" @touchstart="${this.preventBodyScroll}">
+      <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? u$2`
         <div id="headerContainer">
           <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">

package/components/combobox/demo/index.min.js

@@ -3785,6 +3785,10 @@ class AuroDropdownBib extends i$2 {
   connectedCallback() {
     super.connectedCallback();
 
+    this.addEventListener('touchstart', this.preventBodyScroll);
+    this.addEventListener('touchmove', this.preventBodyScroll);
+
+
     // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
     this.addEventListener('auro-bibtemplate-connected', (event) => {
       const bibTemplate = event.detail.element;
@@ -3814,6 +3818,60 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    function checkIfDecent(target, parent) {
+      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
+        return false;
+      }
+
+      if (parent.tagName.toLowerCase() === 'slot') {
+        const assignedElements = parent.assignedElements();
+        if (assignedElements) {
+          for (const child of assignedElements) {
+            if (checkIfDecent(target, child)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (target === parent || parent.contains(target)) {
+        return true;
+      }
+
+      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
+        return true;
+      }
+
+      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
+        return true;
+      }
+
+      if (parent.children) {
+        for (const child of parent.children) {
+          if (checkIfDecent(target, child)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    const isDecent = checkIfDecent(event.target, this);
+    if (isDecent && event.type === 'touchstart') {
+      // if the target is on the bib, let it go for `click` event
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -15135,31 +15193,6 @@ class AuroBibtemplate extends i$2 {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));
@@ -15188,7 +15221,7 @@ class AuroBibtemplate extends i$2 {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return u$2`
-      <div id="bibTemplate" part="bibtemplate" @touchstart="${this.preventBodyScroll}">
+      <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? u$2`
         <div id="headerContainer">
           <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">

package/components/combobox/dist/index.js

@@ -3716,6 +3716,10 @@ class AuroDropdownBib extends LitElement {
   connectedCallback() {
     super.connectedCallback();
 
+    this.addEventListener('touchstart', this.preventBodyScroll);
+    this.addEventListener('touchmove', this.preventBodyScroll);
+
+
     // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
     this.addEventListener('auro-bibtemplate-connected', (event) => {
       const bibTemplate = event.detail.element;
@@ -3745,6 +3749,60 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    function checkIfDecent(target, parent) {
+      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
+        return false;
+      }
+
+      if (parent.tagName.toLowerCase() === 'slot') {
+        const assignedElements = parent.assignedElements();
+        if (assignedElements) {
+          for (const child of assignedElements) {
+            if (checkIfDecent(target, child)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (target === parent || parent.contains(target)) {
+        return true;
+      }
+
+      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
+        return true;
+      }
+
+      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
+        return true;
+      }
+
+      if (parent.children) {
+        for (const child of parent.children) {
+          if (checkIfDecent(target, child)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    const isDecent = checkIfDecent(event.target, this);
+    if (isDecent && event.type === 'touchstart') {
+      // if the target is on the bib, let it go for `click` event
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -15053,31 +15111,6 @@ class AuroBibtemplate extends LitElement {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));
@@ -15106,7 +15139,7 @@ class AuroBibtemplate extends LitElement {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html`
-      <div id="bibTemplate" part="bibtemplate" @touchstart="${this.preventBodyScroll}">
+      <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html`
         <div id="headerContainer">
           <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">

package/components/combobox/dist/registered.js

@@ -3716,6 +3716,10 @@ class AuroDropdownBib extends LitElement {
   connectedCallback() {
     super.connectedCallback();
 
+    this.addEventListener('touchstart', this.preventBodyScroll);
+    this.addEventListener('touchmove', this.preventBodyScroll);
+
+
     // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
     this.addEventListener('auro-bibtemplate-connected', (event) => {
       const bibTemplate = event.detail.element;
@@ -3745,6 +3749,60 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    function checkIfDecent(target, parent) {
+      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
+        return false;
+      }
+
+      if (parent.tagName.toLowerCase() === 'slot') {
+        const assignedElements = parent.assignedElements();
+        if (assignedElements) {
+          for (const child of assignedElements) {
+            if (checkIfDecent(target, child)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (target === parent || parent.contains(target)) {
+        return true;
+      }
+
+      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
+        return true;
+      }
+
+      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
+        return true;
+      }
+
+      if (parent.children) {
+        for (const child of parent.children) {
+          if (checkIfDecent(target, child)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    const isDecent = checkIfDecent(event.target, this);
+    if (isDecent && event.type === 'touchstart') {
+      // if the target is on the bib, let it go for `click` event
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -15053,31 +15111,6 @@ class AuroBibtemplate extends LitElement {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));
@@ -15106,7 +15139,7 @@ class AuroBibtemplate extends LitElement {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html`
-      <div id="bibTemplate" part="bibtemplate" @touchstart="${this.preventBodyScroll}">
+      <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html`
         <div id="headerContainer">
           <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">

package/components/counter/demo/api.min.js

@@ -5636,6 +5636,10 @@ class AuroDropdownBib extends i$2 {
   connectedCallback() {
     super.connectedCallback();
 
+    this.addEventListener('touchstart', this.preventBodyScroll);
+    this.addEventListener('touchmove', this.preventBodyScroll);
+
+
     // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
     this.addEventListener('auro-bibtemplate-connected', (event) => {
       const bibTemplate = event.detail.element;
@@ -5665,6 +5669,60 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    function checkIfDecent(target, parent) {
+      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
+        return false;
+      }
+
+      if (parent.tagName.toLowerCase() === 'slot') {
+        const assignedElements = parent.assignedElements();
+        if (assignedElements) {
+          for (const child of assignedElements) {
+            if (checkIfDecent(target, child)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      if (target === parent || parent.contains(target)) {
+        return true;
+      }
+
+      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
+        return true;
+      }
+
+      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
+        return true;
+      }
+
+      if (parent.children) {
+        for (const child of parent.children) {
+          if (checkIfDecent(target, child)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    }
+    const isDecent = checkIfDecent(event.target, this);
+    if (isDecent && event.type === 'touchstart') {
+      // if the target is on the bib, let it go for `click` event
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -8764,31 +8822,6 @@ class AuroBibtemplate extends i$2 {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    if (event.target === this) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
-  }
-
   onCloseButtonClick() {
     this.dispatchEvent(new Event("close-click", { bubbles: true,
       composed: true }));
@@ -8817,7 +8850,7 @@ class AuroBibtemplate extends i$2 {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return u`
-      <div id="bibTemplate" part="bibtemplate" @touchstart="${this.preventBodyScroll}">
+      <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? u`
         <div id="headerContainer">
           <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">