@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.
- package/components/bibtemplate/dist/auro-bibtemplate.d.ts +0 -6
- package/components/bibtemplate/dist/index.js +1 -25
- package/components/bibtemplate/dist/registered.js +1 -25
- package/components/combobox/demo/api.min.js +59 -25
- package/components/combobox/demo/index.min.js +59 -25
- package/components/combobox/dist/index.js +59 -25
- package/components/combobox/dist/registered.js +59 -25
- package/components/counter/demo/api.min.js +59 -25
- package/components/counter/demo/index.min.js +59 -25
- package/components/counter/dist/index.js +59 -25
- package/components/counter/dist/registered.js +59 -25
- package/components/datepicker/demo/api.min.js +59 -25
- package/components/datepicker/demo/index.min.js +59 -25
- package/components/datepicker/dist/index.js +59 -25
- package/components/datepicker/dist/registered.js +59 -25
- package/components/dropdown/demo/api.min.js +58 -0
- package/components/dropdown/demo/index.min.js +58 -0
- package/components/dropdown/dist/auro-dropdownBib.d.ts +6 -0
- package/components/dropdown/dist/index.js +58 -0
- package/components/dropdown/dist/registered.js +58 -0
- package/components/select/demo/api.min.js +59 -25
- package/components/select/demo/index.min.js +59 -25
- package/components/select/dist/index.js +59 -25
- package/components/select/dist/registered.js +59 -25
- package/package.json +1 -1
|
@@ -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%;
|
|
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%;
|
|
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%;
|
|
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 }));
|