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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10840,7 +10840,7 @@ class CalendarUtilities {
10840
10840
 
10841
10841
  var colorCss$3$2 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
10842
10842
 
10843
- var styleCss$4$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;touch-action:none}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
10843
+ var styleCss$4$1 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
10844
10844
 
10845
10845
  var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
10846
10846
 
@@ -12675,30 +12675,6 @@ class AuroBibtemplate extends LitElement {
12675
12675
  AuroLibraryRuntimeUtils$3$1.prototype.registerComponent(name, AuroBibtemplate);
12676
12676
  }
12677
12677
 
12678
- /**
12679
- * Prevents scrolling of the body when touching empty areas of the component.
12680
- * @param {Event} event - The touchmove event.
12681
- * @returns {void}
12682
- */
12683
- preventBodyScroll(event) {
12684
- if (event.target === this) {
12685
- event.preventDefault();
12686
- }
12687
- }
12688
-
12689
- connectedCallback() {
12690
- super.connectedCallback();
12691
-
12692
- this.preventBodyScroll = this.preventBodyScroll.bind(this);
12693
- this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
12694
- }
12695
-
12696
- disconnectedCallback() {
12697
- super.disconnectedCallback();
12698
-
12699
- this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
12700
- }
12701
-
12702
12678
  onCloseButtonClick() {
12703
12679
  this.dispatchEvent(new Event("close-click", { bubbles: true,
12704
12680
  composed: true }));
@@ -16934,6 +16910,10 @@ class AuroDropdownBib extends LitElement {
16934
16910
  connectedCallback() {
16935
16911
  super.connectedCallback();
16936
16912
 
16913
+ this.addEventListener('touchstart', this.preventBodyScroll);
16914
+ this.addEventListener('touchmove', this.preventBodyScroll);
16915
+
16916
+
16937
16917
  // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
16938
16918
  this.addEventListener('auro-bibtemplate-connected', (event) => {
16939
16919
  const bibTemplate = event.detail.element;
@@ -16963,6 +16943,60 @@ class AuroDropdownBib extends LitElement {
16963
16943
  }));
16964
16944
  }
16965
16945
 
16946
+ /**
16947
+ * Prevents scrolling of the body when touching empty areas of the component.
16948
+ * @param {Event} event - The touchmove event.
16949
+ * @returns {void}
16950
+ */
16951
+ preventBodyScroll(event) {
16952
+ function checkIfDecent(target, parent) {
16953
+ if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
16954
+ return false;
16955
+ }
16956
+
16957
+ if (parent.tagName.toLowerCase() === 'slot') {
16958
+ const assignedElements = parent.assignedElements();
16959
+ if (assignedElements) {
16960
+ for (const child of assignedElements) {
16961
+ if (checkIfDecent(target, child)) {
16962
+ return true;
16963
+ }
16964
+ }
16965
+ }
16966
+ return false;
16967
+ }
16968
+
16969
+ if (target === parent || parent.contains(target)) {
16970
+ return true;
16971
+ }
16972
+
16973
+ if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
16974
+ return true;
16975
+ }
16976
+
16977
+ if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
16978
+ return true;
16979
+ }
16980
+
16981
+ if (parent.children) {
16982
+ for (const child of parent.children) {
16983
+ if (checkIfDecent(target, child)) {
16984
+ return true;
16985
+ }
16986
+ }
16987
+ }
16988
+
16989
+ return false;
16990
+ }
16991
+ const isDecent = checkIfDecent(event.target, this);
16992
+ if (isDecent && event.type === 'touchstart') {
16993
+ // if the target is on the bib, let it go for `click` event
16994
+ return;
16995
+ }
16996
+ event.preventDefault();
16997
+ event.stopImmediatePropagation();
16998
+ }
16999
+
16966
17000
  // function that renders the HTML and CSS into the scope of the component
16967
17001
  render() {
16968
17002
  const classes = {
@@ -2900,6 +2900,10 @@ class AuroDropdownBib extends i {
2900
2900
  connectedCallback() {
2901
2901
  super.connectedCallback();
2902
2902
 
2903
+ this.addEventListener('touchstart', this.preventBodyScroll);
2904
+ this.addEventListener('touchmove', this.preventBodyScroll);
2905
+
2906
+
2903
2907
  // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
2904
2908
  this.addEventListener('auro-bibtemplate-connected', (event) => {
2905
2909
  const bibTemplate = event.detail.element;
@@ -2929,6 +2933,60 @@ class AuroDropdownBib extends i {
2929
2933
  }));
2930
2934
  }
2931
2935
 
2936
+ /**
2937
+ * Prevents scrolling of the body when touching empty areas of the component.
2938
+ * @param {Event} event - The touchmove event.
2939
+ * @returns {void}
2940
+ */
2941
+ preventBodyScroll(event) {
2942
+ function checkIfDecent(target, parent) {
2943
+ if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
2944
+ return false;
2945
+ }
2946
+
2947
+ if (parent.tagName.toLowerCase() === 'slot') {
2948
+ const assignedElements = parent.assignedElements();
2949
+ if (assignedElements) {
2950
+ for (const child of assignedElements) {
2951
+ if (checkIfDecent(target, child)) {
2952
+ return true;
2953
+ }
2954
+ }
2955
+ }
2956
+ return false;
2957
+ }
2958
+
2959
+ if (target === parent || parent.contains(target)) {
2960
+ return true;
2961
+ }
2962
+
2963
+ if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
2964
+ return true;
2965
+ }
2966
+
2967
+ if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
2968
+ return true;
2969
+ }
2970
+
2971
+ if (parent.children) {
2972
+ for (const child of parent.children) {
2973
+ if (checkIfDecent(target, child)) {
2974
+ return true;
2975
+ }
2976
+ }
2977
+ }
2978
+
2979
+ return false;
2980
+ }
2981
+ const isDecent = checkIfDecent(event.target, this);
2982
+ if (isDecent && event.type === 'touchstart') {
2983
+ // if the target is on the bib, let it go for `click` event
2984
+ return;
2985
+ }
2986
+ event.preventDefault();
2987
+ event.stopImmediatePropagation();
2988
+ }
2989
+
2932
2990
  // function that renders the HTML and CSS into the scope of the component
2933
2991
  render() {
2934
2992
  const classes = {
@@ -2875,6 +2875,10 @@ class AuroDropdownBib extends i {
2875
2875
  connectedCallback() {
2876
2876
  super.connectedCallback();
2877
2877
 
2878
+ this.addEventListener('touchstart', this.preventBodyScroll);
2879
+ this.addEventListener('touchmove', this.preventBodyScroll);
2880
+
2881
+
2878
2882
  // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
2879
2883
  this.addEventListener('auro-bibtemplate-connected', (event) => {
2880
2884
  const bibTemplate = event.detail.element;
@@ -2904,6 +2908,60 @@ class AuroDropdownBib extends i {
2904
2908
  }));
2905
2909
  }
2906
2910
 
2911
+ /**
2912
+ * Prevents scrolling of the body when touching empty areas of the component.
2913
+ * @param {Event} event - The touchmove event.
2914
+ * @returns {void}
2915
+ */
2916
+ preventBodyScroll(event) {
2917
+ function checkIfDecent(target, parent) {
2918
+ if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
2919
+ return false;
2920
+ }
2921
+
2922
+ if (parent.tagName.toLowerCase() === 'slot') {
2923
+ const assignedElements = parent.assignedElements();
2924
+ if (assignedElements) {
2925
+ for (const child of assignedElements) {
2926
+ if (checkIfDecent(target, child)) {
2927
+ return true;
2928
+ }
2929
+ }
2930
+ }
2931
+ return false;
2932
+ }
2933
+
2934
+ if (target === parent || parent.contains(target)) {
2935
+ return true;
2936
+ }
2937
+
2938
+ if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
2939
+ return true;
2940
+ }
2941
+
2942
+ if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
2943
+ return true;
2944
+ }
2945
+
2946
+ if (parent.children) {
2947
+ for (const child of parent.children) {
2948
+ if (checkIfDecent(target, child)) {
2949
+ return true;
2950
+ }
2951
+ }
2952
+ }
2953
+
2954
+ return false;
2955
+ }
2956
+ const isDecent = checkIfDecent(event.target, this);
2957
+ if (isDecent && event.type === 'touchstart') {
2958
+ // if the target is on the bib, let it go for `click` event
2959
+ return;
2960
+ }
2961
+ event.preventDefault();
2962
+ event.stopImmediatePropagation();
2963
+ }
2964
+
2907
2965
  // function that renders the HTML and CSS into the scope of the component
2908
2966
  render() {
2909
2967
  const classes = {
@@ -63,6 +63,12 @@ export class AuroDropdownBib extends LitElement {
63
63
  updated(changedProperties: any): void;
64
64
  bibTemplate: any;
65
65
  firstUpdated(changedProperties: any): void;
66
+ /**
67
+ * Prevents scrolling of the body when touching empty areas of the component.
68
+ * @param {Event} event - The touchmove event.
69
+ * @returns {void}
70
+ */
71
+ preventBodyScroll(event: Event): void;
66
72
  render(): import("lit-html").TemplateResult;
67
73
  }
68
74
  import { LitElement } from "lit";
@@ -2828,6 +2828,10 @@ class AuroDropdownBib extends LitElement {
2828
2828
  connectedCallback() {
2829
2829
  super.connectedCallback();
2830
2830
 
2831
+ this.addEventListener('touchstart', this.preventBodyScroll);
2832
+ this.addEventListener('touchmove', this.preventBodyScroll);
2833
+
2834
+
2831
2835
  // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
2832
2836
  this.addEventListener('auro-bibtemplate-connected', (event) => {
2833
2837
  const bibTemplate = event.detail.element;
@@ -2857,6 +2861,60 @@ class AuroDropdownBib extends LitElement {
2857
2861
  }));
2858
2862
  }
2859
2863
 
2864
+ /**
2865
+ * Prevents scrolling of the body when touching empty areas of the component.
2866
+ * @param {Event} event - The touchmove event.
2867
+ * @returns {void}
2868
+ */
2869
+ preventBodyScroll(event) {
2870
+ function checkIfDecent(target, parent) {
2871
+ if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
2872
+ return false;
2873
+ }
2874
+
2875
+ if (parent.tagName.toLowerCase() === 'slot') {
2876
+ const assignedElements = parent.assignedElements();
2877
+ if (assignedElements) {
2878
+ for (const child of assignedElements) {
2879
+ if (checkIfDecent(target, child)) {
2880
+ return true;
2881
+ }
2882
+ }
2883
+ }
2884
+ return false;
2885
+ }
2886
+
2887
+ if (target === parent || parent.contains(target)) {
2888
+ return true;
2889
+ }
2890
+
2891
+ if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
2892
+ return true;
2893
+ }
2894
+
2895
+ if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
2896
+ return true;
2897
+ }
2898
+
2899
+ if (parent.children) {
2900
+ for (const child of parent.children) {
2901
+ if (checkIfDecent(target, child)) {
2902
+ return true;
2903
+ }
2904
+ }
2905
+ }
2906
+
2907
+ return false;
2908
+ }
2909
+ const isDecent = checkIfDecent(event.target, this);
2910
+ if (isDecent && event.type === 'touchstart') {
2911
+ // if the target is on the bib, let it go for `click` event
2912
+ return;
2913
+ }
2914
+ event.preventDefault();
2915
+ event.stopImmediatePropagation();
2916
+ }
2917
+
2860
2918
  // function that renders the HTML and CSS into the scope of the component
2861
2919
  render() {
2862
2920
  const classes = {
@@ -2828,6 +2828,10 @@ class AuroDropdownBib extends LitElement {
2828
2828
  connectedCallback() {
2829
2829
  super.connectedCallback();
2830
2830
 
2831
+ this.addEventListener('touchstart', this.preventBodyScroll);
2832
+ this.addEventListener('touchmove', this.preventBodyScroll);
2833
+
2834
+
2831
2835
  // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
2832
2836
  this.addEventListener('auro-bibtemplate-connected', (event) => {
2833
2837
  const bibTemplate = event.detail.element;
@@ -2857,6 +2861,60 @@ class AuroDropdownBib extends LitElement {
2857
2861
  }));
2858
2862
  }
2859
2863
 
2864
+ /**
2865
+ * Prevents scrolling of the body when touching empty areas of the component.
2866
+ * @param {Event} event - The touchmove event.
2867
+ * @returns {void}
2868
+ */
2869
+ preventBodyScroll(event) {
2870
+ function checkIfDecent(target, parent) {
2871
+ if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
2872
+ return false;
2873
+ }
2874
+
2875
+ if (parent.tagName.toLowerCase() === 'slot') {
2876
+ const assignedElements = parent.assignedElements();
2877
+ if (assignedElements) {
2878
+ for (const child of assignedElements) {
2879
+ if (checkIfDecent(target, child)) {
2880
+ return true;
2881
+ }
2882
+ }
2883
+ }
2884
+ return false;
2885
+ }
2886
+
2887
+ if (target === parent || parent.contains(target)) {
2888
+ return true;
2889
+ }
2890
+
2891
+ if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
2892
+ return true;
2893
+ }
2894
+
2895
+ if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
2896
+ return true;
2897
+ }
2898
+
2899
+ if (parent.children) {
2900
+ for (const child of parent.children) {
2901
+ if (checkIfDecent(target, child)) {
2902
+ return true;
2903
+ }
2904
+ }
2905
+ }
2906
+
2907
+ return false;
2908
+ }
2909
+ const isDecent = checkIfDecent(event.target, this);
2910
+ if (isDecent && event.type === 'touchstart') {
2911
+ // if the target is on the bib, let it go for `click` event
2912
+ return;
2913
+ }
2914
+ event.preventDefault();
2915
+ event.stopImmediatePropagation();
2916
+ }
2917
+
2860
2918
  // function that renders the HTML and CSS into the scope of the component
2861
2919
  render() {
2862
2920
  const classes = {
@@ -3964,6 +3964,10 @@ class AuroDropdownBib extends i$2 {
3964
3964
  connectedCallback() {
3965
3965
  super.connectedCallback();
3966
3966
 
3967
+ this.addEventListener('touchstart', this.preventBodyScroll);
3968
+ this.addEventListener('touchmove', this.preventBodyScroll);
3969
+
3970
+
3967
3971
  // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
3968
3972
  this.addEventListener('auro-bibtemplate-connected', (event) => {
3969
3973
  const bibTemplate = event.detail.element;
@@ -3993,6 +3997,60 @@ class AuroDropdownBib extends i$2 {
3993
3997
  }));
3994
3998
  }
3995
3999
 
4000
+ /**
4001
+ * Prevents scrolling of the body when touching empty areas of the component.
4002
+ * @param {Event} event - The touchmove event.
4003
+ * @returns {void}
4004
+ */
4005
+ preventBodyScroll(event) {
4006
+ function checkIfDecent(target, parent) {
4007
+ if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
4008
+ return false;
4009
+ }
4010
+
4011
+ if (parent.tagName.toLowerCase() === 'slot') {
4012
+ const assignedElements = parent.assignedElements();
4013
+ if (assignedElements) {
4014
+ for (const child of assignedElements) {
4015
+ if (checkIfDecent(target, child)) {
4016
+ return true;
4017
+ }
4018
+ }
4019
+ }
4020
+ return false;
4021
+ }
4022
+
4023
+ if (target === parent || parent.contains(target)) {
4024
+ return true;
4025
+ }
4026
+
4027
+ if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
4028
+ return true;
4029
+ }
4030
+
4031
+ if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
4032
+ return true;
4033
+ }
4034
+
4035
+ if (parent.children) {
4036
+ for (const child of parent.children) {
4037
+ if (checkIfDecent(target, child)) {
4038
+ return true;
4039
+ }
4040
+ }
4041
+ }
4042
+
4043
+ return false;
4044
+ }
4045
+ const isDecent = checkIfDecent(event.target, this);
4046
+ if (isDecent && event.type === 'touchstart') {
4047
+ // if the target is on the bib, let it go for `click` event
4048
+ return;
4049
+ }
4050
+ event.preventDefault();
4051
+ event.stopImmediatePropagation();
4052
+ }
4053
+
3996
4054
  // function that renders the HTML and CSS into the scope of the component
3997
4055
  render() {
3998
4056
  const classes = {
@@ -5257,7 +5315,7 @@ var dropdownVersion = '3.0.0';
5257
5315
 
5258
5316
  var colorCss$3$1 = i$5`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
5259
5317
 
5260
- var styleCss$4$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;touch-action:none}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
5318
+ var styleCss$4$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
5261
5319
 
5262
5320
  var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
5263
5321
 
@@ -7092,30 +7150,6 @@ class AuroBibtemplate extends i$2 {
7092
7150
  AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
7093
7151
  }
7094
7152
 
7095
- /**
7096
- * Prevents scrolling of the body when touching empty areas of the component.
7097
- * @param {Event} event - The touchmove event.
7098
- * @returns {void}
7099
- */
7100
- preventBodyScroll(event) {
7101
- if (event.target === this) {
7102
- event.preventDefault();
7103
- }
7104
- }
7105
-
7106
- connectedCallback() {
7107
- super.connectedCallback();
7108
-
7109
- this.preventBodyScroll = this.preventBodyScroll.bind(this);
7110
- this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
7111
- }
7112
-
7113
- disconnectedCallback() {
7114
- super.disconnectedCallback();
7115
-
7116
- this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
7117
- }
7118
-
7119
7153
  onCloseButtonClick() {
7120
7154
  this.dispatchEvent(new Event("close-click", { bubbles: true,
7121
7155
  composed: true }));
@@ -3861,6 +3861,10 @@ class AuroDropdownBib extends i$2 {
3861
3861
  connectedCallback() {
3862
3862
  super.connectedCallback();
3863
3863
 
3864
+ this.addEventListener('touchstart', this.preventBodyScroll);
3865
+ this.addEventListener('touchmove', this.preventBodyScroll);
3866
+
3867
+
3864
3868
  // Listen for the auro-bibtemplate-connected event to set the fullscreen attribute
3865
3869
  this.addEventListener('auro-bibtemplate-connected', (event) => {
3866
3870
  const bibTemplate = event.detail.element;
@@ -3890,6 +3894,60 @@ class AuroDropdownBib extends i$2 {
3890
3894
  }));
3891
3895
  }
3892
3896
 
3897
+ /**
3898
+ * Prevents scrolling of the body when touching empty areas of the component.
3899
+ * @param {Event} event - The touchmove event.
3900
+ * @returns {void}
3901
+ */
3902
+ preventBodyScroll(event) {
3903
+ function checkIfDecent(target, parent) {
3904
+ if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
3905
+ return false;
3906
+ }
3907
+
3908
+ if (parent.tagName.toLowerCase() === 'slot') {
3909
+ const assignedElements = parent.assignedElements();
3910
+ if (assignedElements) {
3911
+ for (const child of assignedElements) {
3912
+ if (checkIfDecent(target, child)) {
3913
+ return true;
3914
+ }
3915
+ }
3916
+ }
3917
+ return false;
3918
+ }
3919
+
3920
+ if (target === parent || parent.contains(target)) {
3921
+ return true;
3922
+ }
3923
+
3924
+ if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
3925
+ return true;
3926
+ }
3927
+
3928
+ if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
3929
+ return true;
3930
+ }
3931
+
3932
+ if (parent.children) {
3933
+ for (const child of parent.children) {
3934
+ if (checkIfDecent(target, child)) {
3935
+ return true;
3936
+ }
3937
+ }
3938
+ }
3939
+
3940
+ return false;
3941
+ }
3942
+ const isDecent = checkIfDecent(event.target, this);
3943
+ if (isDecent && event.type === 'touchstart') {
3944
+ // if the target is on the bib, let it go for `click` event
3945
+ return;
3946
+ }
3947
+ event.preventDefault();
3948
+ event.stopImmediatePropagation();
3949
+ }
3950
+
3893
3951
  // function that renders the HTML and CSS into the scope of the component
3894
3952
  render() {
3895
3953
  const classes = {
@@ -5154,7 +5212,7 @@ var dropdownVersion = '3.0.0';
5154
5212
 
5155
5213
  var colorCss$3$1 = i$5`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
5156
5214
 
5157
- var styleCss$4$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;touch-action:none}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
5215
+ var styleCss$4$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
5158
5216
 
5159
5217
  var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
5160
5218
 
@@ -6989,30 +7047,6 @@ class AuroBibtemplate extends i$2 {
6989
7047
  AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
6990
7048
  }
6991
7049
 
6992
- /**
6993
- * Prevents scrolling of the body when touching empty areas of the component.
6994
- * @param {Event} event - The touchmove event.
6995
- * @returns {void}
6996
- */
6997
- preventBodyScroll(event) {
6998
- if (event.target === this) {
6999
- event.preventDefault();
7000
- }
7001
- }
7002
-
7003
- connectedCallback() {
7004
- super.connectedCallback();
7005
-
7006
- this.preventBodyScroll = this.preventBodyScroll.bind(this);
7007
- this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
7008
- }
7009
-
7010
- disconnectedCallback() {
7011
- super.disconnectedCallback();
7012
-
7013
- this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
7014
- }
7015
-
7016
7050
  onCloseButtonClick() {
7017
7051
  this.dispatchEvent(new Event("close-click", { bubbles: true,
7018
7052
  composed: true }));