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

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

@@ -3836,6 +3836,12 @@ class AuroDropdownBib extends i$2 {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3922,15 +3928,23 @@ class AuroDropdownBib extends i$2 {
         }
       }
     }
+
+    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
+      if (this.isFullscreen && this.isVisible) {
+        this.addEventListener('touchstart', this.preventBodyScroll);
+        this.addEventListener('touchend', this.preventBodyScroll);
+        this.addEventListener('touchmove', this.preventBodyScroll);
+      } else {
+        this.removeEventListener('touchstart', this.preventBodyScroll);
+        this.removeEventListener('touchend', this.preventBodyScroll);
+        this.removeEventListener('touchmove', this.preventBodyScroll);
+      }
+    }
   }
 
   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;
@@ -3950,6 +3964,8 @@ class AuroDropdownBib extends i$2 {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -3983,7 +3999,7 @@ class AuroDropdownBib extends i$2 {
         return false;
       }
 
-      if (target === parent || parent.contains(target)) {
+      if (parent.contains(target)) {
         return true;
       }
 
@@ -4005,11 +4021,12 @@ class AuroDropdownBib extends i$2 {
 
       return false;
     }
-    const isDecent = checkIfDecent(event.target, this);
-    if (isDecent && event.type === 'touchstart') {
+    const isDecent = checkIfDecent(event.target, this.bibTemplate);
+    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
       // if the target is on the bib, let it go for `click` event
       return;
     }
+
     event.preventDefault();
     event.stopImmediatePropagation();
   }

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

@@ -3694,6 +3694,12 @@ class AuroDropdownBib extends i$2 {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3780,15 +3786,23 @@ class AuroDropdownBib extends i$2 {
         }
       }
     }
+
+    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
+      if (this.isFullscreen && this.isVisible) {
+        this.addEventListener('touchstart', this.preventBodyScroll);
+        this.addEventListener('touchend', this.preventBodyScroll);
+        this.addEventListener('touchmove', this.preventBodyScroll);
+      } else {
+        this.removeEventListener('touchstart', this.preventBodyScroll);
+        this.removeEventListener('touchend', this.preventBodyScroll);
+        this.removeEventListener('touchmove', this.preventBodyScroll);
+      }
+    }
   }
 
   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;
@@ -3808,6 +3822,8 @@ class AuroDropdownBib extends i$2 {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -3841,7 +3857,7 @@ class AuroDropdownBib extends i$2 {
         return false;
       }
 
-      if (target === parent || parent.contains(target)) {
+      if (parent.contains(target)) {
         return true;
       }
 
@@ -3863,11 +3879,12 @@ class AuroDropdownBib extends i$2 {
 
       return false;
     }
-    const isDecent = checkIfDecent(event.target, this);
-    if (isDecent && event.type === 'touchstart') {
+    const isDecent = checkIfDecent(event.target, this.bibTemplate);
+    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
       // if the target is on the bib, let it go for `click` event
       return;
     }
+
     event.preventDefault();
     event.stopImmediatePropagation();
   }

package/components/combobox/dist/index.js

@@ -3625,6 +3625,12 @@ class AuroDropdownBib extends LitElement {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3711,15 +3717,23 @@ class AuroDropdownBib extends LitElement {
         }
       }
     }
+
+    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
+      if (this.isFullscreen && this.isVisible) {
+        this.addEventListener('touchstart', this.preventBodyScroll);
+        this.addEventListener('touchend', this.preventBodyScroll);
+        this.addEventListener('touchmove', this.preventBodyScroll);
+      } else {
+        this.removeEventListener('touchstart', this.preventBodyScroll);
+        this.removeEventListener('touchend', this.preventBodyScroll);
+        this.removeEventListener('touchmove', this.preventBodyScroll);
+      }
+    }
   }
 
   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;
@@ -3739,6 +3753,8 @@ class AuroDropdownBib extends LitElement {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -3772,7 +3788,7 @@ class AuroDropdownBib extends LitElement {
         return false;
       }
 
-      if (target === parent || parent.contains(target)) {
+      if (parent.contains(target)) {
         return true;
       }
 
@@ -3794,11 +3810,12 @@ class AuroDropdownBib extends LitElement {
 
       return false;
     }
-    const isDecent = checkIfDecent(event.target, this);
-    if (isDecent && event.type === 'touchstart') {
+    const isDecent = checkIfDecent(event.target, this.bibTemplate);
+    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
       // if the target is on the bib, let it go for `click` event
       return;
     }
+
     event.preventDefault();
     event.stopImmediatePropagation();
   }

package/components/combobox/dist/registered.js

@@ -3625,6 +3625,12 @@ class AuroDropdownBib extends LitElement {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3711,15 +3717,23 @@ class AuroDropdownBib extends LitElement {
         }
       }
     }
+
+    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
+      if (this.isFullscreen && this.isVisible) {
+        this.addEventListener('touchstart', this.preventBodyScroll);
+        this.addEventListener('touchend', this.preventBodyScroll);
+        this.addEventListener('touchmove', this.preventBodyScroll);
+      } else {
+        this.removeEventListener('touchstart', this.preventBodyScroll);
+        this.removeEventListener('touchend', this.preventBodyScroll);
+        this.removeEventListener('touchmove', this.preventBodyScroll);
+      }
+    }
   }
 
   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;
@@ -3739,6 +3753,8 @@ class AuroDropdownBib extends LitElement {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -3772,7 +3788,7 @@ class AuroDropdownBib extends LitElement {
         return false;
       }
 
-      if (target === parent || parent.contains(target)) {
+      if (parent.contains(target)) {
         return true;
       }
 
@@ -3794,11 +3810,12 @@ class AuroDropdownBib extends LitElement {
 
       return false;
     }
-    const isDecent = checkIfDecent(event.target, this);
-    if (isDecent && event.type === 'touchstart') {
+    const isDecent = checkIfDecent(event.target, this.bibTemplate);
+    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
       // if the target is on the bib, let it go for `click` event
       return;
     }
+
     event.preventDefault();
     event.stopImmediatePropagation();
   }

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

@@ -5545,6 +5545,12 @@ class AuroDropdownBib extends i$2 {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -5631,15 +5637,23 @@ class AuroDropdownBib extends i$2 {
         }
       }
     }
+
+    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
+      if (this.isFullscreen && this.isVisible) {
+        this.addEventListener('touchstart', this.preventBodyScroll);
+        this.addEventListener('touchend', this.preventBodyScroll);
+        this.addEventListener('touchmove', this.preventBodyScroll);
+      } else {
+        this.removeEventListener('touchstart', this.preventBodyScroll);
+        this.removeEventListener('touchend', this.preventBodyScroll);
+        this.removeEventListener('touchmove', this.preventBodyScroll);
+      }
+    }
   }
 
   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;
@@ -5659,6 +5673,8 @@ class AuroDropdownBib extends i$2 {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -5692,7 +5708,7 @@ class AuroDropdownBib extends i$2 {
         return false;
       }
 
-      if (target === parent || parent.contains(target)) {
+      if (parent.contains(target)) {
         return true;
       }
 
@@ -5714,11 +5730,12 @@ class AuroDropdownBib extends i$2 {
 
       return false;
     }
-    const isDecent = checkIfDecent(event.target, this);
-    if (isDecent && event.type === 'touchstart') {
+    const isDecent = checkIfDecent(event.target, this.bibTemplate);
+    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
       // if the target is on the bib, let it go for `click` event
       return;
     }
+
     event.preventDefault();
     event.stopImmediatePropagation();
   }

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

@@ -5545,6 +5545,12 @@ class AuroDropdownBib extends i$2 {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -5631,15 +5637,23 @@ class AuroDropdownBib extends i$2 {
         }
       }
     }
+
+    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
+      if (this.isFullscreen && this.isVisible) {
+        this.addEventListener('touchstart', this.preventBodyScroll);
+        this.addEventListener('touchend', this.preventBodyScroll);
+        this.addEventListener('touchmove', this.preventBodyScroll);
+      } else {
+        this.removeEventListener('touchstart', this.preventBodyScroll);
+        this.removeEventListener('touchend', this.preventBodyScroll);
+        this.removeEventListener('touchmove', this.preventBodyScroll);
+      }
+    }
   }
 
   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;
@@ -5659,6 +5673,8 @@ class AuroDropdownBib extends i$2 {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -5692,7 +5708,7 @@ class AuroDropdownBib extends i$2 {
         return false;
       }
 
-      if (target === parent || parent.contains(target)) {
+      if (parent.contains(target)) {
         return true;
       }
 
@@ -5714,11 +5730,12 @@ class AuroDropdownBib extends i$2 {
 
       return false;
     }
-    const isDecent = checkIfDecent(event.target, this);
-    if (isDecent && event.type === 'touchstart') {
+    const isDecent = checkIfDecent(event.target, this.bibTemplate);
+    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
       // if the target is on the bib, let it go for `click` event
       return;
     }
+
     event.preventDefault();
     event.stopImmediatePropagation();
   }

package/components/counter/dist/index.js

@@ -5498,6 +5498,12 @@ class AuroDropdownBib extends LitElement {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -5584,15 +5590,23 @@ class AuroDropdownBib extends LitElement {
         }
       }
     }
+
+    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
+      if (this.isFullscreen && this.isVisible) {
+        this.addEventListener('touchstart', this.preventBodyScroll);
+        this.addEventListener('touchend', this.preventBodyScroll);
+        this.addEventListener('touchmove', this.preventBodyScroll);
+      } else {
+        this.removeEventListener('touchstart', this.preventBodyScroll);
+        this.removeEventListener('touchend', this.preventBodyScroll);
+        this.removeEventListener('touchmove', this.preventBodyScroll);
+      }
+    }
   }
 
   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;
@@ -5612,6 +5626,8 @@ class AuroDropdownBib extends LitElement {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -5645,7 +5661,7 @@ class AuroDropdownBib extends LitElement {
         return false;
       }
 
-      if (target === parent || parent.contains(target)) {
+      if (parent.contains(target)) {
         return true;
       }
 
@@ -5667,11 +5683,12 @@ class AuroDropdownBib extends LitElement {
 
       return false;
     }
-    const isDecent = checkIfDecent(event.target, this);
-    if (isDecent && event.type === 'touchstart') {
+    const isDecent = checkIfDecent(event.target, this.bibTemplate);
+    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
       // if the target is on the bib, let it go for `click` event
       return;
     }
+
     event.preventDefault();
     event.stopImmediatePropagation();
   }

package/components/counter/dist/registered.js

@@ -5498,6 +5498,12 @@ class AuroDropdownBib extends LitElement {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -5584,15 +5590,23 @@ class AuroDropdownBib extends LitElement {
         }
       }
     }
+
+    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
+      if (this.isFullscreen && this.isVisible) {
+        this.addEventListener('touchstart', this.preventBodyScroll);
+        this.addEventListener('touchend', this.preventBodyScroll);
+        this.addEventListener('touchmove', this.preventBodyScroll);
+      } else {
+        this.removeEventListener('touchstart', this.preventBodyScroll);
+        this.removeEventListener('touchend', this.preventBodyScroll);
+        this.removeEventListener('touchmove', this.preventBodyScroll);
+      }
+    }
   }
 
   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;
@@ -5612,6 +5626,8 @@ class AuroDropdownBib extends LitElement {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -5645,7 +5661,7 @@ class AuroDropdownBib extends LitElement {
         return false;
       }
 
-      if (target === parent || parent.contains(target)) {
+      if (parent.contains(target)) {
         return true;
       }
 
@@ -5667,11 +5683,12 @@ class AuroDropdownBib extends LitElement {
 
       return false;
     }
-    const isDecent = checkIfDecent(event.target, this);
-    if (isDecent && event.type === 'touchstart') {
+    const isDecent = checkIfDecent(event.target, this.bibTemplate);
+    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
       // if the target is on the bib, let it go for `click` event
       return;
     }
+
     event.preventDefault();
     event.stopImmediatePropagation();
   }

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

@@ -17129,6 +17129,12 @@ class AuroDropdownBib extends i {
         reflect: true
       },
 
+      isVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-show'
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -17215,15 +17221,23 @@ class AuroDropdownBib extends i {
         }
       }
     }
+
+    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
+      if (this.isFullscreen && this.isVisible) {
+        this.addEventListener('touchstart', this.preventBodyScroll);
+        this.addEventListener('touchend', this.preventBodyScroll);
+        this.addEventListener('touchmove', this.preventBodyScroll);
+      } else {
+        this.removeEventListener('touchstart', this.preventBodyScroll);
+        this.removeEventListener('touchend', this.preventBodyScroll);
+        this.removeEventListener('touchmove', this.preventBodyScroll);
+      }
+    }
   }
 
   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;
@@ -17243,6 +17257,8 @@ class AuroDropdownBib extends i {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -17276,7 +17292,7 @@ class AuroDropdownBib extends i {
         return false;
       }
 
-      if (target === parent || parent.contains(target)) {
+      if (parent.contains(target)) {
         return true;
       }
 
@@ -17298,11 +17314,12 @@ class AuroDropdownBib extends i {
 
       return false;
     }
-    const isDecent = checkIfDecent(event.target, this);
-    if (isDecent && event.type === 'touchstart') {
+    const isDecent = checkIfDecent(event.target, this.bibTemplate);
+    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
       // if the target is on the bib, let it go for `click` event
       return;
     }
+
     event.preventDefault();
     event.stopImmediatePropagation();
   }