From 2882ce162e53e145f249a5e4374373c3bae678b9 Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Fri, 22 Nov 2024 16:57:13 -0500 Subject: [PATCH 01/16] feat: open bib fullscreen on mobile view #55 --- components/dropdown/demo/api.min.js | 32 +++++++++++++++---- components/dropdown/demo/index.min.js | 32 +++++++++++++++---- components/dropdown/src/auro-dropdown.js | 7 ++-- components/dropdown/src/auro-dropdownBib.js | 4 +++ components/dropdown/src/floatingUI.mjs | 19 ++++++++++- components/dropdown/src/styles/bibStyles.scss | 13 ++++++++ 6 files changed, 90 insertions(+), 17 deletions(-) diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index 8c5eb1c7..d006c58f 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -1622,6 +1622,21 @@ class AuroFloatingUI { } position() { + // mobileView + if (this.element.bib.mobileBreakpoint) { + const mobileQuery = window.matchMedia(`(max-width: ${this.element.bib.mobileBreakpoint})`); + + if (mobileQuery.matches) { + // no need to calc the position in mobile view + this.element.bib.setAttribute('fullscreen', true); + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + return; + } else { + this.element.bib.removeAttribute('fullscreen'); + } + } + // Define the middlware for the floater configuration const middleware = [ offset(this.element.floaterConfig.offset || 0), @@ -1875,8 +1890,10 @@ class AuroFloatingUI { configure(elem) { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); - this.element.bib = this.element.shadowRoot.querySelector('#bib'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); + this.element.bib = this.element.shadowRoot.querySelector('#bib'); + + document.body.append(this.element.bib); this.handleTriggerTabIndex(); @@ -2315,7 +2332,7 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss = i$3`.container{display:inline-block;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var styleCss = i$3`.container{display:inline-block;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([fullscreen]){position:fixed;top:0;left:0;width:100vw;height:100vh}:host([fullscreen]) .container{width:100%;height:100%}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2353,6 +2370,10 @@ class AuroDropdownBib extends r { rounded: { type: Boolean, reflect: true + }, + mobileBreakpoint: { + type: String, + reflect: false } }; } @@ -2582,14 +2603,13 @@ class AuroDropdown extends r { firstUpdated() { this.floater.configure(this); + this.bibContent = this.floater.element.bib; + // var(--ds-grid-breakpoint-sm) + this.bibContent.mobileBreakpoint = '576px'; // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); - this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); - - document.body.append(this.bibContent); - this.notifyReady(); } diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index 76a67c21..c954522e 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -1604,6 +1604,21 @@ class AuroFloatingUI { } position() { + // mobileView + if (this.element.bib.mobileBreakpoint) { + const mobileQuery = window.matchMedia(`(max-width: ${this.element.bib.mobileBreakpoint})`); + + if (mobileQuery.matches) { + // no need to calc the position in mobile view + this.element.bib.setAttribute('fullscreen', true); + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + return; + } else { + this.element.bib.removeAttribute('fullscreen'); + } + } + // Define the middlware for the floater configuration const middleware = [ offset(this.element.floaterConfig.offset || 0), @@ -1857,8 +1872,10 @@ class AuroFloatingUI { configure(elem) { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); - this.element.bib = this.element.shadowRoot.querySelector('#bib'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); + this.element.bib = this.element.shadowRoot.querySelector('#bib'); + + document.body.append(this.element.bib); this.handleTriggerTabIndex(); @@ -2297,7 +2314,7 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss = i$3`.container{display:inline-block;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var styleCss = i$3`.container{display:inline-block;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([fullscreen]){position:fixed;top:0;left:0;width:100vw;height:100vh}:host([fullscreen]) .container{width:100%;height:100%}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2335,6 +2352,10 @@ class AuroDropdownBib extends r { rounded: { type: Boolean, reflect: true + }, + mobileBreakpoint: { + type: String, + reflect: false } }; } @@ -2564,14 +2585,13 @@ class AuroDropdown extends r { firstUpdated() { this.floater.configure(this); + this.bibContent = this.floater.element.bib; + // var(--ds-grid-breakpoint-sm) + this.bibContent.mobileBreakpoint = '576px'; // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); - this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); - - document.body.append(this.bibContent); - this.notifyReady(); } diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js index c77ddf18..2f32a57b 100644 --- a/components/dropdown/src/auro-dropdown.js +++ b/components/dropdown/src/auro-dropdown.js @@ -229,14 +229,13 @@ export class AuroDropdown extends LitElement { firstUpdated() { this.floater.configure(this); + this.bibContent = this.floater.element.bib; + // var(--ds-grid-breakpoint-sm) + this.bibContent.mobileBreakpoint = '576px'; // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); - this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); - - document.body.append(this.bibContent); - this.notifyReady(); } diff --git a/components/dropdown/src/auro-dropdownBib.js b/components/dropdown/src/auro-dropdownBib.js index 412ad957..a0521391 100644 --- a/components/dropdown/src/auro-dropdownBib.js +++ b/components/dropdown/src/auro-dropdownBib.js @@ -40,6 +40,10 @@ export class AuroDropdownBib extends LitElement { rounded: { type: Boolean, reflect: true + }, + mobileBreakpoint: { + type: String, + reflect: false } }; } diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs index b520f381..aa2fabfd 100644 --- a/components/dropdown/src/floatingUI.mjs +++ b/components/dropdown/src/floatingUI.mjs @@ -11,6 +11,21 @@ export default class AuroFloatingUI { } position() { + // mobileView + if (this.element.bib.mobileBreakpoint) { + const mobileQuery = window.matchMedia(`(max-width: ${this.element.bib.mobileBreakpoint})`); + + if (mobileQuery.matches) { + // no need to calc the position in mobile view + this.element.bib.setAttribute('fullscreen', true); + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + return; + } else { + this.element.bib.removeAttribute('fullscreen'); + } + } + // Define the middlware for the floater configuration const middleware = [ offset(this.element.floaterConfig.offset || 0), @@ -265,8 +280,10 @@ export default class AuroFloatingUI { configure(elem) { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); - this.element.bib = this.element.shadowRoot.querySelector('#bib'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); + this.element.bib = this.element.shadowRoot.querySelector('#bib'); + + document.body.append(this.element.bib); this.handleTriggerTabIndex(); diff --git a/components/dropdown/src/styles/bibStyles.scss b/components/dropdown/src/styles/bibStyles.scss index 935e6065..d763aa66 100644 --- a/components/dropdown/src/styles/bibStyles.scss +++ b/components/dropdown/src/styles/bibStyles.scss @@ -22,6 +22,19 @@ display: none; } +:host([fullscreen]) { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + + .container { + width: 100%; + height: 100%; + } +} + :host([data-show]) { display: block; } From 31543fd5cd35b1849ebe19d85c9041f9156737b2 Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Mon, 25 Nov 2024 15:58:17 -0500 Subject: [PATCH 02/16] feat: add `noFullscreenOnMobile` attribute --- components/dropdown/demo/api.md | 4 ++-- components/dropdown/demo/api.min.js | 9 +++++++-- components/dropdown/demo/index.min.js | 9 +++++++-- components/dropdown/src/auro-dropdown.js | 5 +++++ components/dropdown/src/floatingUI.mjs | 4 ++-- 5 files changed, 23 insertions(+), 8 deletions(-) diff --git a/components/dropdown/demo/api.md b/components/dropdown/demo/api.md index 74bee0de..098e94ea 100644 --- a/components/dropdown/demo/api.md +++ b/components/dropdown/demo/api.md @@ -938,7 +938,7 @@ If the dropdown's content size should not exceed a certain height, you can contr
- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. @@ -964,7 +964,7 @@ If the dropdown's content size should not exceed a certain height, you can contr ```html

- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index d006c58f..6818a1d7 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -1622,8 +1622,8 @@ class AuroFloatingUI { } position() { - // mobileView - if (this.element.bib.mobileBreakpoint) { + // fullscreen on mobileView + if (!this.element.noFullscreenOnMobile && this.element.bib.mobileBreakpoint) { const mobileQuery = window.matchMedia(`(max-width: ${this.element.bib.mobileBreakpoint})`); if (mobileQuery.matches) { @@ -2450,6 +2450,7 @@ class AuroDropdown extends r { this.ready = false; this.tabIndex = 0; this.noToggle = false; + this.noFullscreenOnMobile = false; /** * @private @@ -2551,6 +2552,10 @@ class AuroDropdown extends r { type: Function, reflect: false }, + noFullscreenOnMobile: { + type: Boolean, + reflect: true, + }, /** * @private diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index c954522e..cc8ce43b 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -1604,8 +1604,8 @@ class AuroFloatingUI { } position() { - // mobileView - if (this.element.bib.mobileBreakpoint) { + // fullscreen on mobileView + if (!this.element.noFullscreenOnMobile && this.element.bib.mobileBreakpoint) { const mobileQuery = window.matchMedia(`(max-width: ${this.element.bib.mobileBreakpoint})`); if (mobileQuery.matches) { @@ -2432,6 +2432,7 @@ class AuroDropdown extends r { this.ready = false; this.tabIndex = 0; this.noToggle = false; + this.noFullscreenOnMobile = false; /** * @private @@ -2533,6 +2534,10 @@ class AuroDropdown extends r { type: Function, reflect: false }, + noFullscreenOnMobile: { + type: Boolean, + reflect: true, + }, /** * @private diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js index 2f32a57b..f27a6992 100644 --- a/components/dropdown/src/auro-dropdown.js +++ b/components/dropdown/src/auro-dropdown.js @@ -76,6 +76,7 @@ export class AuroDropdown extends LitElement { this.ready = false; this.tabIndex = 0; this.noToggle = false; + this.noFullscreenOnMobile = false; /** * @private @@ -177,6 +178,10 @@ export class AuroDropdown extends LitElement { type: Function, reflect: false }, + noFullscreenOnMobile: { + type: Boolean, + reflect: true, + }, /** * @private diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs index aa2fabfd..2c1f5fe1 100644 --- a/components/dropdown/src/floatingUI.mjs +++ b/components/dropdown/src/floatingUI.mjs @@ -11,8 +11,8 @@ export default class AuroFloatingUI { } position() { - // mobileView - if (this.element.bib.mobileBreakpoint) { + // fullscreen on mobileView + if (!this.element.noFullscreenOnMobile && this.element.bib.mobileBreakpoint) { const mobileQuery = window.matchMedia(`(max-width: ${this.element.bib.mobileBreakpoint})`); if (mobileQuery.matches) { From 77abbb79436247558a166a4cc765e7c5c743d11a Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Mon, 25 Nov 2024 17:05:54 -0500 Subject: [PATCH 03/16] feat: add `bibSizer` to help sizing `bibContainer` with css style --- .../apiExamples/customDimensions100.html | 6 ++ .../apiExamples/customDimensions300.html | 6 ++ components/dropdown/demo/api.md | 62 +++++++++++++++---- components/dropdown/demo/api.min.js | 12 +++- components/dropdown/demo/index.min.js | 12 +++- components/dropdown/docs/partials/api.md | 24 +++++-- components/dropdown/src/auro-dropdown.js | 1 + components/dropdown/src/floatingUI.mjs | 9 +++ components/dropdown/src/styles/bibStyles.scss | 1 + 9 files changed, 114 insertions(+), 19 deletions(-) diff --git a/components/dropdown/apiExamples/customDimensions100.html b/components/dropdown/apiExamples/customDimensions100.html index 735bcea8..5207c01b 100644 --- a/components/dropdown/apiExamples/customDimensions100.html +++ b/components/dropdown/apiExamples/customDimensions100.html @@ -1,3 +1,9 @@ +

diff --git a/components/dropdown/apiExamples/customDimensions300.html b/components/dropdown/apiExamples/customDimensions300.html index 96613821..f6a269a2 100644 --- a/components/dropdown/apiExamples/customDimensions300.html +++ b/components/dropdown/apiExamples/customDimensions300.html @@ -1,3 +1,9 @@ +
diff --git a/components/dropdown/demo/api.md b/components/dropdown/demo/api.md index 098e94ea..53990ee0 100644 --- a/components/dropdown/demo/api.md +++ b/components/dropdown/demo/api.md @@ -876,19 +876,29 @@ This example demonstrations collapsing the dropdown by clicking a button within #### Width and Sizing Behavior -##### Width -`auro-dropdown` will consume all available width of the parent container. `auro-dropdown` can be made narrower by wrapping it in a container of the desired width. +- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `bibSizer` part. -##### Dropdown Content Sizing -If the dropdown's content size should not exceed a certain height, you can control it using CSS. Add a `max-height` property and set `overflow: scroll` to enable scrollability for content that exceeds the specified height. +- **Styling Options:** Only the following styles can be applied to the `bibSizer` part: + - `width` + - `height` + - `maxWidth` + - `maxHeight` + +- **Scroll Behavior:** When the content exceeds the specified size, the browser will provide a scroll for the overflow.
+
- -
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -912,9 +922,15 @@ If the dropdown's content size should not exceed a certain height, you can contr ```html +
- -
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -934,12 +950,28 @@ If the dropdown's content size should not exceed a certain height, you can contr +### No Fullscreen Effect on Mobile View + +On mobile view, adding the `noFullscreenOnMobile` attribute will prevent the dropdown from switching to fullscreen mode. + +This is useful in scenarios where: +- Fullscreen mode does not provide significant benefits to the user. +- The dropdown needs to maintain a custom size and stay within its defined dimensions. + +
+ +
- -
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -963,9 +995,15 @@ If the dropdown's content size should not exceed a certain height, you can contr ```html +
- -
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index 6818a1d7..0ff4f14e 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -1622,6 +1622,14 @@ class AuroFloatingUI { } position() { + // mirror the boxsize from bibSizer + const sizerStyle = window.getComputedStyle(this.element.bibSizer); + const bibContent = this.element.bib.shadowRoot.querySelector(".container"); + if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width; + if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height; + bibContent.style.maxWidth = sizerStyle.maxWidth; + bibContent.style.maxHeight = sizerStyle.maxHeight; + // fullscreen on mobileView if (!this.element.noFullscreenOnMobile && this.element.bib.mobileBreakpoint) { const mobileQuery = window.matchMedia(`(max-width: ${this.element.bib.mobileBreakpoint})`); @@ -1892,6 +1900,7 @@ class AuroFloatingUI { this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); this.element.bib = this.element.shadowRoot.querySelector('#bib'); + this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); document.body.append(this.element.bib); @@ -2332,7 +2341,7 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss = i$3`.container{display:inline-block;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([fullscreen]){position:fixed;top:0;left:0;width:100vw;height:100vh}:host([fullscreen]) .container{width:100%;height:100%}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var styleCss = i$3`.container{display:inline-block;box-sizing:border-box;overflow:auto}:host{position:absolute;z-index:1;display:none}:host([fullscreen]){position:fixed;top:0;left:0;width:100vw;height:100vh}:host([fullscreen]) .container{width:100%;height:100%}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2737,6 +2746,7 @@ class AuroDropdown extends r {
+
+
### Other Examples - #### Width and Sizing Behavior -##### Width -`auro-dropdown` will consume all available width of the parent container. `auro-dropdown` can be made narrower by wrapping it in a container of the desired width. +- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `bibSizer` part. + +- **Styling Options:** Only the following styles can be applied to the `bibSizer` part: + - `width` + - `height` + - `maxWidth` + - `maxHeight` -##### Dropdown Content Sizing -If the dropdown's content size should not exceed a certain height, you can control it using CSS. Add a `max-height` property and set `overflow: scroll` to enable scrollability for content that exceeds the specified height. +- **Scroll Behavior:** When the content exceeds the specified size, the browser will provide a scroll for the overflow.
@@ -379,6 +382,17 @@ If the dropdown's content size should not exceed a certain height, you can contr + + +### No Fullscreen Effect on Mobile View + +On mobile view, adding the `noFullscreenOnMobile` attribute will prevent the dropdown from switching to fullscreen mode. + +This is useful in scenarios where: +- Fullscreen mode does not provide significant benefits to the user. +- The dropdown needs to maintain a custom size and stay within its defined dimensions. + +
diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js index f27a6992..bf1e7c94 100644 --- a/components/dropdown/src/auro-dropdown.js +++ b/components/dropdown/src/auro-dropdown.js @@ -365,6 +365,7 @@ export class AuroDropdown extends LitElement {
+
Date: Tue, 26 Nov 2024 19:18:44 -0500 Subject: [PATCH 04/16] feat: add `mobileFullscreenBreakpoint` instead of `noFullscreenOnMobile` --- .../apiExamples/customDimensions300.html | 2 +- components/dropdown/demo/api.md | 8 +- components/dropdown/demo/api.min.js | 815 +++++++++++++++++- components/dropdown/demo/index.min.js | 815 +++++++++++++++++- components/dropdown/docs/partials/api.md | 2 +- components/dropdown/src/auro-dropdown.js | 13 +- components/dropdown/src/floatingUI.mjs | 46 +- components/dropdown/src/styles/bibStyles.scss | 9 +- .../dropdown/test/auro-dropdown.test.js | 2 +- 9 files changed, 1635 insertions(+), 77 deletions(-) diff --git a/components/dropdown/apiExamples/customDimensions300.html b/components/dropdown/apiExamples/customDimensions300.html index f6a269a2..4689df18 100644 --- a/components/dropdown/apiExamples/customDimensions300.html +++ b/components/dropdown/apiExamples/customDimensions300.html @@ -5,7 +5,7 @@ }
- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/components/dropdown/demo/api.md b/components/dropdown/demo/api.md index 53990ee0..da2570e2 100644 --- a/components/dropdown/demo/api.md +++ b/components/dropdown/demo/api.md @@ -950,9 +950,9 @@ This example demonstrations collapsing the dropdown by clicking a button within -### No Fullscreen Effect on Mobile View +### Fullscreen Effect on Mobile View -On mobile view, adding the `noFullscreenOnMobile` attribute will prevent the dropdown from switching to fullscreen mode. +On mobile view, adding the `mobileFullscreenBreakpoint="{breakpoint-token}"` will prevent the dropdown from switching to fullscreen mode. This is useful in scenarios where: - Fullscreen mode does not provide significant benefits to the user. @@ -970,7 +970,7 @@ This is useful in scenarios where: }

- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. @@ -1002,7 +1002,7 @@ This is useful in scenarios where: }

- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index 0ff4f14e..fab92027 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -1621,29 +1621,34 @@ class AuroFloatingUI { this.keyDownHandler = null; } - position() { + mirrorSize(fullscreen) { // mirror the boxsize from bibSizer const sizerStyle = window.getComputedStyle(this.element.bibSizer); const bibContent = this.element.bib.shadowRoot.querySelector(".container"); - if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width; - if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height; - bibContent.style.maxWidth = sizerStyle.maxWidth; - bibContent.style.maxHeight = sizerStyle.maxHeight; + if (fullscreen) { + bibContent.style.width = '100dvw'; + bibContent.style.height = '100dvh'; + bibContent.style.maxWidth = 'none'; + bibContent.style.maxHeight = 'none'; + } else { + if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width; + if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height; + bibContent.style.maxWidth = sizerStyle.maxWidth; + bibContent.style.maxHeight = sizerStyle.maxHeight; + } + } + position() { // fullscreen on mobileView - if (!this.element.noFullscreenOnMobile && this.element.bib.mobileBreakpoint) { - const mobileQuery = window.matchMedia(`(max-width: ${this.element.bib.mobileBreakpoint})`); - - if (mobileQuery.matches) { - // no need to calc the position in mobile view - this.element.bib.setAttribute('fullscreen', true); - this.element.bib.style.top = "0px"; - this.element.bib.style.left = "0px"; + if (this.element.bib.mobileFullscreenBreakpoint) { + const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; + this.handleMobileFullscreen(isMobile); + if (isMobile) { + this.mirrorSize(true); return; - } else { - this.element.bib.removeAttribute('fullscreen'); } } + this.mirrorSize(false); // Define the middlware for the floater configuration const middleware = [ @@ -1672,6 +1677,17 @@ class AuroFloatingUI { }); } + handleMobileFullscreen(isMobile) { + if (isMobile) { + this.element.bib.setAttribute('isFullscreen', "true"); + // reset the prev position + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + } else { + this.element.bib.removeAttribute('fullscreen'); + } + } + updateState() { const isVisible = this.element.isPopoverVisible; this.element.trigger.setAttribute('aria-expanded', isVisible); @@ -2341,7 +2357,763 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss = i$3`.container{display:inline-block;box-sizing:border-box;overflow:auto}:host{position:absolute;z-index:1;display:none}:host([fullscreen]){position:fixed;top:0;left:0;width:100vw;height:100vh}:host([fullscreen]) .container{width:100%;height:100%}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var dsVariableFlat = { + "ds-asset-font-circular-family-name": "AS Circular", + "ds-asset-font-circular-filename": "ASCircularWeb", + "ds-asset-font-circular-weight-light": "-Light", + "ds-asset-font-circular-weight-medium": "-Medium", + "ds-asset-font-circular-weight-book": "-Book", + "ds-border-radius": "0.375rem", + "ds-size-25": "0.125rem", + "ds-size-50": "0.25rem", + "ds-size-75": "0.375rem", + "ds-size-100": "0.5rem", + "ds-size-150": "0.75rem", + "ds-size-200": "1rem", + "ds-size-300": "1.5rem", + "ds-size-400": "2rem", + "ds-size-500": "2.5rem", + "ds-size-600": "3rem", + "ds-size-700": "3.5rem", + "ds-size-800": "4rem", + "ds-size-900": "4.5rem", + "ds-size-1000": "5rem", + "ds-unitless-scale-20": 0.25, + "ds-unitless-scale-50": 0.5, + "ds-unitless-scale-100": 1, + "ds-unitless-scale-140": 1.4, + "ds-unitless-scale-150": 1.5, + "ds-unitless-scale-200": 2, + "ds-unitless-scale-300": 3, + "ds-unitless-scale-350": 3.5, + "ds-animation-default-property": "all", + "ds-animation-default-duration": "0.3s", + "ds-animation-default-timing": "ease-out", + "ds-depth-overlay": "200", + "ds-depth-modal": "400", + "ds-depth-tooltip": "300", + "ds-elevation-100": "0px 0px 5px rgba(0, 0, 0, 0.15)", + "ds-elevation-200": "0px 0px 10px rgba(0, 0, 0, 0.15)", + "ds-elevation-300": "0px 0px 15px rgba(0, 0, 0, 0.2)", + "ds-grid-breakpoint-xs": "320px", + "ds-grid-breakpoint-sm": "576px", + "ds-grid-breakpoint-md": "768px", + "ds-grid-breakpoint-lg": "1024px", + "ds-grid-breakpoint-xl": "1232px", + "ds-grid-column-xs": "6", + "ds-grid-column-sm": "12", + "ds-grid-column-md": "12", + "ds-grid-column-lg": "12", + "ds-grid-column-xl": "12", + "ds-grid-gutter-xs": "0.5rem", + "ds-grid-gutter-sm": "1rem", + "ds-grid-gutter-md": "1.5rem", + "ds-grid-gutter-lg": "1.5rem", + "ds-grid-gutter-xl": "2rem", + "ds-grid-margin-xs": "1rem", + "ds-grid-margin-sm": "1rem", + "ds-grid-margin-md": "1.5rem", + "ds-grid-margin-lg": "2rem", + "ds-grid-margin-xl": "2rem", + "ds-font-family-default": "'AS Circular', Helvetica Neue, Arial, sans-serif", + "ds-font-family-mono": "Menlo, Monaco, Consolas, 'Courier New', monospace", + "ds-text-heading-300-weight": "300", + "ds-text-heading-300-px": "18px", + "ds-text-heading-300-size": "1.125rem", + "ds-text-heading-300-height": "1.625rem", + "ds-text-heading-300-height-px": "26px", + "ds-text-heading-400-weight": "300", + "ds-text-heading-400-px": "20px", + "ds-text-heading-400-size": "1.25rem", + "ds-text-heading-400-height": "1.625rem", + "ds-text-heading-400-height-px": "26px", + "ds-text-heading-500-weight": "300", + "ds-text-heading-500-px-breakpoint-sm": "22px", + "ds-text-heading-500-px-breakpoint-md": "24px", + "ds-text-heading-500-px-breakpoint-lg": "24px", + "ds-text-heading-500-size-breakpoint-sm": "1.375rem", + "ds-text-heading-500-size-breakpoint-md": "1.5rem", + "ds-text-heading-500-size-breakpoint-lg": "1.5rem", + "ds-text-heading-500-height-breakpoint-sm": "1.625rem", + "ds-text-heading-500-height-breakpoint-px-sm": "26px", + "ds-text-heading-500-height-breakpoint-md": "1.875rem", + "ds-text-heading-500-height-breakpoint-px-md": "30px", + "ds-text-heading-500-height-breakpoint-lg": "2rem", + "ds-text-heading-500-height-breakpoint-px-lg": "32px", + "ds-text-heading-600-weight": "300", + "ds-text-heading-600-px-breakpoint-sm": "26px", + "ds-text-heading-600-px-breakpoint-md": "28px", + "ds-text-heading-600-px-breakpoint-lg": "28px", + "ds-text-heading-600-size-breakpoint-sm": "1.625rem", + "ds-text-heading-600-size-breakpoint-md": "1.75rem", + "ds-text-heading-600-size-breakpoint-lg": "1.75rem", + "ds-text-heading-600-height-breakpoint-sm": "1.875rem", + "ds-text-heading-600-height-breakpoint-px-sm": "30px", + "ds-text-heading-600-height-breakpoint-md": "2.125rem", + "ds-text-heading-600-height-breakpoint-px-md": "34px", + "ds-text-heading-600-height-breakpoint-lg": "2.25rem", + "ds-text-heading-600-height-breakpoint-px-lg": "36px", + "ds-text-heading-700-weight": "500", + "ds-text-heading-700-px-breakpoint-sm": "28px", + "ds-text-heading-700-px-breakpoint-md": "32px", + "ds-text-heading-700-px-breakpoint-lg": "36px", + "ds-text-heading-700-size-breakpoint-sm": "1.75rem", + "ds-text-heading-700-size-breakpoint-md": "2rem", + "ds-text-heading-700-size-breakpoint-lg": "2.25rem", + "ds-text-heading-700-height-breakpoint-sm": "2.125rem", + "ds-text-heading-700-height-breakpoint-px-sm": "34px", + "ds-text-heading-700-height-breakpoint-md": "2.375rem", + "ds-text-heading-700-height-breakpoint-px-md": "38px", + "ds-text-heading-700-height-breakpoint-lg": "2.75rem", + "ds-text-heading-700-height-breakpoint-px-lg": "44px", + "ds-text-heading-800-weight": "500", + "ds-text-heading-800-px-breakpoint-sm": "32px", + "ds-text-heading-800-px-breakpoint-md": "36px", + "ds-text-heading-800-px-breakpoint-lg": "40px", + "ds-text-heading-800-size-breakpoint-sm": "2rem", + "ds-text-heading-800-size-breakpoint-md": "2.25rem", + "ds-text-heading-800-size-breakpoint-lg": "2.5rem", + "ds-text-heading-800-height-breakpoint-sm": "2.375rem", + "ds-text-heading-800-height-breakpoint-px-sm": "38px", + "ds-text-heading-800-height-breakpoint-md": "2.625rem", + "ds-text-heading-800-height-breakpoint-px-md": "42px", + "ds-text-heading-800-height-breakpoint-lg": "3rem", + "ds-text-heading-800-height-breakpoint-px-lg": "48px", + "ds-text-heading-default-weight": "500", + "ds-text-heading-default-margin": "0", + "ds-text-heading-default-spacing": "-0.2px", + "ds-text-heading-medium-weight": "300", + "ds-text-heading-display-weight": "100", + "ds-text-heading-display-px-breakpoint-sm": "44px", + "ds-text-heading-display-px-breakpoint-md": "48px", + "ds-text-heading-display-px-breakpoint-lg": "56px", + "ds-text-heading-display-size-breakpoint-sm": "2.75rem", + "ds-text-heading-display-size-breakpoint-md": "3rem", + "ds-text-heading-display-size-breakpoint-lg": "3.5rem", + "ds-text-heading-display-height-breakpoint-sm": "3.375rem", + "ds-text-heading-display-height-breakpoint-px-sm": "54px", + "ds-text-heading-display-height-breakpoint-md": "3.75rem", + "ds-text-heading-display-height-breakpoint-px-md": "60px", + "ds-text-heading-display-height-breakpoint-lg": "4.25rem", + "ds-text-heading-display-height-breakpoint-px-lg": "68px", + "ds-text-body-default-weight": "500", + "ds-text-body-size-xxs": "0.625rem", + "ds-text-body-size-xs": "0.75rem", + "ds-text-body-size-sm": "0.875rem", + "ds-text-body-size-default": "1rem", + "ds-text-body-size-lg": "1.125rem", + "ds-text-body-height-xs": "1rem", + "ds-text-body-height-sm": "1.25rem", + "ds-text-body-height-default": "1.5rem", + "ds-text-body-height-lg": "1.625rem", + "ds-color-alert-notification-default": "#0074c8", + "ds-color-alert-warning-default": "#de750c", + "ds-color-alert-error-default": "#df0b37", + "ds-color-alert-success-default": "#00805d", + "ds-color-alert-advisory-default": "#fff0cd", + "ds-color-alert-bkg-success-default": "#ddf6e8", + "ds-color-alert-bkg-error-default": "#ffedf1", + "ds-color-background-primary-100-default": "#ffffff", + "ds-color-background-primary-100-inverse": "#0e2b4f", + "ds-color-background-primary-200-default": "#f7f7f7", + "ds-color-background-primary-200-inverse": "#194069", + "ds-color-background-primary-300-default": "#e4e8ec", + "ds-color-background-primary-300-inverse": "#265688", + "ds-color-background-primary-400-default": "#dddddd", + "ds-color-background-primary-400-inverse": "#326aa5", + "ds-color-background-success-default": "#eef8f5", + "ds-color-background-success-inverse": "#173c30", + "ds-color-background-error-default": "#fff4f4", + "ds-color-background-error-inverse": "#74110e", + "ds-color-background-warning-default": "#fef8e9", + "ds-color-background-warning-inverse": "#5d4514", + "ds-color-background-info-default": "#f0f7fd", + "ds-color-background-info-inverse": "#193d73", + "ds-color-background-subtle-default": "#f7f8fa", + "ds-color-background-subtle-inverse": "#2a2a2a", + "ds-color-background-accent-default": "#ebfafd", + "ds-color-background-accent-inverse": "#275b72", + "ds-color-background-emphasis-default": "#c9e0f7", + "ds-color-background-emphasis-inverse": "#225296", + "ds-color-background-scrimmed-default": "rgba(0, 0, 0, 0.5)", + "ds-color-background-lightest": "#ffffff", + "ds-color-background-lighter": "#f7f7f7", + "ds-color-background-darker": "#01426a", + "ds-color-background-darkest": "#00274a", + "ds-color-background-gradient-default": "linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5))", + "ds-color-base-white": "#ffffff", + "ds-color-base-white-100": "rgba(255, 255, 255, 0.03)", + "ds-color-base-white-200": "rgba(255, 255, 255, 0.06)", + "ds-color-base-white-300": "rgba(255, 255, 255, 0.12)", + "ds-color-base-white-400": "rgba(255, 255, 255, 0.25)", + "ds-color-base-white-500": "rgba(255, 255, 255, 0.5)", + "ds-color-base-white-opacity-50": "rgba(255, 255, 255, 0.5)", + "ds-color-base-white-opacity-40": "rgba(255, 255, 255, 0.4)", + "ds-color-base-white-opacity-0": "rgba(255, 255, 255, 0)", + "ds-color-base-black": "#000000", + "ds-color-base-black-100": "rgba(0, 0, 0, 0.03)", + "ds-color-base-black-200": "rgba(0, 0, 0, 0.06)", + "ds-color-base-black-300": "rgba(0, 0, 0, 0.12)", + "ds-color-base-black-400": "rgba(0, 0, 0, 0.25)", + "ds-color-base-black-500": "rgba(0, 0, 0, 0.5)", + "ds-color-base-black-opacity-15": "rgba(0, 0, 0, 0.15)", + "ds-color-base-blue-100": "#f0f7fd", + "ds-color-base-blue-200": "#c9e0f7", + "ds-color-base-blue-300": "#a0c9f1", + "ds-color-base-blue-400": "#79b2ec", + "ds-color-base-blue-500": "#5398e6", + "ds-color-base-blue-600": "#3b7fd2", + "ds-color-base-blue-700": "#2c67b5", + "ds-color-base-blue-800": "#225296", + "ds-color-base-blue-900": "#193d73", + "ds-color-base-blue-1000": "#102a51", + "ds-color-base-cyan-100": "#ebfafd", + "ds-color-base-cyan-200": "#a8e9f7", + "ds-color-base-cyan-300": "#6ad5ef", + "ds-color-base-cyan-400": "#56bbde", + "ds-color-base-cyan-500": "#4aa2c7", + "ds-color-base-cyan-600": "#3e89aa", + "ds-color-base-cyan-700": "#32718e", + "ds-color-base-cyan-800": "#275b72", + "ds-color-base-cyan-900": "#1d4658", + "ds-color-base-cyan-1000": "#12303d", + "ds-color-base-error-100": "#fff4f4", + "ds-color-base-error-200": "#f9aca6", + "ds-color-base-error-300": "#f16359", + "ds-color-base-error-400": "#cc1816", + "ds-color-base-error-500": "#74110e", + "ds-color-base-gray-100": "#f7f7f7", + "ds-color-base-gray-200": "#d4ece4", + "ds-color-base-gray-300": "#c5c5c5", + "ds-color-base-gray-400": "#adadad", + "ds-color-base-gray-500": "#959595", + "ds-color-base-gray-600": "#7e7e7e", + "ds-color-base-gray-700": "#676767", + "ds-color-base-gray-800": "#525252", + "ds-color-base-gray-900": "#3d3d3d", + "ds-color-base-gray-1000": "#2a2a2a", + "ds-color-base-green-100": "#f3faf7", + "ds-color-base-green-200": "#000000", + "ds-color-base-green-300": "#addbca", + "ds-color-base-green-400": "#7ec6ac", + "ds-color-base-green-500": "#51ae8c", + "ds-color-base-green-600": "#459578", + "ds-color-base-green-700": "#3a7d64", + "ds-color-base-green-800": "#306854", + "ds-color-base-green-900": "#285545", + "ds-color-base-green-1000": "#1f4436", + "ds-color-base-lime-100": "#f5fbeb", + "ds-color-base-lime-200": "#d8efb4", + "ds-color-base-lime-300": "#badd81", + "ds-color-base-lime-400": "#a2c270", + "ds-color-base-lime-500": "#8ca761", + "ds-color-base-lime-600": "#778f53", + "ds-color-base-lime-700": "#647845", + "ds-color-base-lime-800": "#53643a", + "ds-color-base-lime-900": "#44522f", + "ds-color-base-lime-1000": "#364126", + "ds-color-base-navy-100": "#f2f7fb", + "ds-color-base-navy-200": "#cfe0ef", + "ds-color-base-navy-300": "#acc9e2", + "ds-color-base-navy-400": "#89b2d4", + "ds-color-base-navy-500": "#6899c6", + "ds-color-base-navy-600": "#4a82b7", + "ds-color-base-navy-700": "#326aa5", + "ds-color-base-navy-800": "#265688", + "ds-color-base-navy-900": "#194069", + "ds-color-base-navy-1000": "#0e2b4f", + "ds-color-base-neutral-100": "#f7f8fa", + "ds-color-base-neutral-200": "#e4e8ec", + "ds-color-base-neutral-300": "#ccd2db", + "ds-color-base-neutral-400": "#afb9c6", + "ds-color-base-neutral-500": "#939fad", + "ds-color-base-neutral-600": "#7e8894", + "ds-color-base-neutral-700": "#6a717c", + "ds-color-base-neutral-800": "#585e67", + "ds-color-base-neutral-900": "#484d55", + "ds-color-base-neutral-1000": "#393d43", + "ds-color-base-pink-100": "#fff7f8", + "ds-color-base-pink-200": "#fde0e6", + "ds-color-base-pink-300": "#fcc2ce", + "ds-color-base-pink-400": "#fa9db0", + "ds-color-base-pink-500": "#f7738e", + "ds-color-base-pink-600": "#e45472", + "ds-color-base-pink-700": "#bf475f", + "ds-color-base-pink-800": "#a03b50", + "ds-color-base-pink-900": "#833142", + "ds-color-base-pink-1000": "#692734", + "ds-color-base-purple-100": "#fbf8fe", + "ds-color-base-purple-200": "#ede3fd", + "ds-color-base-purple-300": "#ddc9fb", + "ds-color-base-purple-400": "#c9a9f8", + "ds-color-base-purple-500": "#b588f5", + "ds-color-base-purple-600": "#a268f3", + "ds-color-base-purple-700": "#8d47f0", + "ds-color-base-purple-800": "#7633d7", + "ds-color-base-purple-900": "#622ab2", + "ds-color-base-purple-1000": "#4e228d", + "ds-color-base-red-100": "#fef7f5", + "ds-color-base-red-200": "#fae2da", + "ds-color-base-red-300": "#f5c7b8", + "ds-color-base-red-400": "#f0a68d", + "ds-color-base-red-500": "#e9815e", + "ds-color-base-red-600": "#e35c2f", + "ds-color-base-red-700": "#d03a08", + "ds-color-base-red-800": "#ae3007", + "ds-color-base-red-900": "#902806", + "ds-color-base-red-1000": "#732005", + "ds-color-base-success-100": "#eef8f5", + "ds-color-base-success-200": "#8eceb9", + "ds-color-base-success-300": "#40a080", + "ds-color-base-success-400": "#0b6f4d", + "ds-color-base-success-500": "#173c30", + "ds-color-base-turquoise-100": "#f7fafa", + "ds-color-base-turquoise-200": "#dfe9ea", + "ds-color-base-turquoise-300": "#c2d5d6", + "ds-color-base-turquoise-400": "#9fbdbe", + "ds-color-base-turquoise-500": "#7ba5a6", + "ds-color-base-turquoise-600": "#5c8f91", + "ds-color-base-turquoise-700": "#3d7a7d", + "ds-color-base-turquoise-800": "#21686a", + "ds-color-base-turquoise-900": "#085659", + "ds-color-base-turquoise-1000": "#004447", + "ds-color-base-yellow-100": "#fff9df", + "ds-color-base-yellow-200": "#ffe87e", + "ds-color-base-yellow-300": "#f9ce06", + "ds-color-base-yellow-400": "#d6b622", + "ds-color-base-yellow-500": "#b49d35", + "ds-color-base-yellow-600": "#96873e", + "ds-color-base-yellow-700": "#7c7140", + "ds-color-base-yellow-800": "#665e3d", + "ds-color-base-yellow-900": "#524e38", + "ds-color-base-yellow-1000": "#403d30", + "ds-color-base-warning-100": "#fef8e9", + "ds-color-base-warning-200": "#f2c153", + "ds-color-base-warning-300": "#c49432", + "ds-color-base-warning-400": "#8e6b22", + "ds-color-base-warning-500": "#5d4514", + "ds-color-state-error-100": "#ff999b", + "ds-color-state-error-500": "#df0b37", + "ds-color-state-success-100": "#69cf96", + "ds-color-state-success-500": "#00805d", + "ds-color-state-warning-500": "#de750c", + "ds-color-border-primary-default": "#585e67", + "ds-color-border-primary-inverse": "#afb9c6", + "ds-color-border-secondary-default": "#939fad", + "ds-color-border-secondary-inverse": "#7e8894", + "ds-color-border-tertiary-default": "#dddddd", + "ds-color-border-tertiary-inverse": "#676767", + "ds-color-border-error-default": "#cc1816", + "ds-color-border-error-inverse": "#f9aca6", + "ds-color-border-divider-default": "rgba(0, 0, 0, 0.12)", + "ds-color-border-divider-inverse": "rgba(255, 255, 255, 0.25)", + "ds-color-border-subtle-default": "#f0f7fd", + "ds-color-border-subtle-inverse": "#326aa5", + "ds-color-border-emphasis-default": "#194069", + "ds-color-border-emphasis-inverse": "#f2f7fb", + "ds-color-border-accent-default": "#badd81", + "ds-color-border-accent-inverse": "#a2c270", + "ds-color-border-success-default": "#0b6f4d", + "ds-color-border-success-inverse": "#8eceb9", + "ds-color-border-warning-default": "#c49432", + "ds-color-border-warning-inverse": "#f2c153", + "ds-color-border-info-default": "#326aa5", + "ds-color-border-info-inverse": "#89b2d4", + "ds-color-border-ui-default-default": "#2c67b5", + "ds-color-border-ui-default-inverse": "#56bbde", + "ds-color-border-ui-hover-default": "#193d73", + "ds-color-border-ui-hover-inverse": "#a8e9f7", + "ds-color-border-ui-active-default": "#225296", + "ds-color-border-ui-active-inverse": "#6ad5ef", + "ds-color-border-ui-focus-default": "#2c67b5", + "ds-color-border-ui-focus-inverse": "#56bbde", + "ds-color-border-ui-disabled-default": "#adadad", + "ds-color-border-ui-disabled-inverse": "#7e7e7e", + "ds-color-border-active-default": "#0074c8", + "ds-color-border-active-inverse": "#00cff0", + "ds-color-border-disabled-default": "#d4ece4", + "ds-color-border-focus-default": "#959595", + "ds-color-brand-neutral-100": "#f7f8fa", + "ds-color-brand-neutral-200": "#e4e8ec", + "ds-color-brand-neutral-300": "#ccd2db", + "ds-color-brand-neutral-400": "#afb9c6", + "ds-color-brand-neutral-500": "#939fad", + "ds-color-brand-neutral-600": "#7e8894", + "ds-color-brand-neutral-700": "#6a717c", + "ds-color-brand-neutral-800": "#585e67", + "ds-color-brand-neutral-900": "#484d55", + "ds-color-brand-neutral-1000": "#393d43", + "ds-color-brand-gray-100": "#f7f7f7", + "ds-color-brand-gray-200": "#dddddd", + "ds-color-brand-gray-300": "#c5c5c5", + "ds-color-brand-gray-400": "#adadad", + "ds-color-brand-gray-500": "#959595", + "ds-color-brand-gray-600": "#7e7e7e", + "ds-color-brand-gray-700": "#676767", + "ds-color-brand-gray-800": "#525252", + "ds-color-brand-gray-900": "#3d3d3d", + "ds-color-brand-gray-1000": "#2a2a2a", + "ds-color-brand-red-100": "#fef7f5", + "ds-color-brand-red-200": "#fae2da", + "ds-color-brand-red-300": "#f5c7b8", + "ds-color-brand-red-400": "#f0a68d", + "ds-color-brand-red-500": "#e9815e", + "ds-color-brand-red-600": "#e35c2f", + "ds-color-brand-red-700": "#d03a08", + "ds-color-brand-red-800": "#ae3007", + "ds-color-brand-red-900": "#902806", + "ds-color-brand-red-1000": "#732005", + "ds-color-brand-yellow-100": "#fff9df", + "ds-color-brand-yellow-200": "#ffe87e", + "ds-color-brand-yellow-300": "#f9ce06", + "ds-color-brand-yellow-400": "#d6b622", + "ds-color-brand-yellow-500": "#b49d35", + "ds-color-brand-yellow-600": "#96873e", + "ds-color-brand-yellow-700": "#7c7140", + "ds-color-brand-yellow-800": "#665e3d", + "ds-color-brand-yellow-900": "#524e38", + "ds-color-brand-yellow-1000": "#403d30", + "ds-color-brand-lime-100": "#f5fbeb", + "ds-color-brand-lime-200": "#d8efb4", + "ds-color-brand-lime-300": "#badd81", + "ds-color-brand-lime-400": "#a2c270", + "ds-color-brand-lime-500": "#8ca761", + "ds-color-brand-lime-600": "#778f53", + "ds-color-brand-lime-700": "#647845", + "ds-color-brand-lime-800": "#53643a", + "ds-color-brand-lime-900": "#44522f", + "ds-color-brand-lime-1000": "#364126", + "ds-color-brand-green-100": "#f3faf7", + "ds-color-brand-green-200": "#d4ece4", + "ds-color-brand-green-300": "#addbca", + "ds-color-brand-green-400": "#7ec6ac", + "ds-color-brand-green-500": "#51ae8c", + "ds-color-brand-green-600": "#459578", + "ds-color-brand-green-700": "#3a7d64", + "ds-color-brand-green-800": "#306854", + "ds-color-brand-green-900": "#285545", + "ds-color-brand-green-1000": "#1f4436", + "ds-color-brand-turquoise-100": "#f7fafa", + "ds-color-brand-turquoise-200": "#dfe9ea", + "ds-color-brand-turquoise-300": "#c2d5d6", + "ds-color-brand-turquoise-400": "#9fbdbe", + "ds-color-brand-turquoise-500": "#7ba5a6", + "ds-color-brand-turquoise-600": "#5c8f91", + "ds-color-brand-turquoise-700": "#3d7a7d", + "ds-color-brand-turquoise-800": "#21686a", + "ds-color-brand-turquoise-900": "#085659", + "ds-color-brand-turquoise-1000": "#004447", + "ds-color-brand-cyan-100": "#ebfafd", + "ds-color-brand-cyan-200": "#a8e9f7", + "ds-color-brand-cyan-300": "#6ad5ef", + "ds-color-brand-cyan-400": "#56bbde", + "ds-color-brand-cyan-500": "#4aa2c7", + "ds-color-brand-cyan-600": "#3e89aa", + "ds-color-brand-cyan-700": "#32718e", + "ds-color-brand-cyan-800": "#275b72", + "ds-color-brand-cyan-900": "#1d4658", + "ds-color-brand-cyan-1000": "#12303d", + "ds-color-brand-blue-100": "#f0f7fd", + "ds-color-brand-blue-200": "#c9e0f7", + "ds-color-brand-blue-300": "#a0c9f1", + "ds-color-brand-blue-400": "#79b2ec", + "ds-color-brand-blue-500": "#5398e6", + "ds-color-brand-blue-600": "#3b7fd2", + "ds-color-brand-blue-700": "#2c67b5", + "ds-color-brand-blue-800": "#225296", + "ds-color-brand-blue-900": "#193d73", + "ds-color-brand-blue-1000": "#102a51", + "ds-color-brand-navy-100": "#f2f7fb", + "ds-color-brand-navy-200": "#cfe0ef", + "ds-color-brand-navy-300": "#acc9e2", + "ds-color-brand-navy-400": "#89b2d4", + "ds-color-brand-navy-500": "#6899c6", + "ds-color-brand-navy-600": "#4a82b7", + "ds-color-brand-navy-700": "#326aa5", + "ds-color-brand-navy-800": "#265688", + "ds-color-brand-navy-900": "#194069", + "ds-color-brand-navy-1000": "#0e2b4f", + "ds-color-brand-purple-100": "#fbf8fe", + "ds-color-brand-purple-200": "#ede3fd", + "ds-color-brand-purple-300": "#ddc9fb", + "ds-color-brand-purple-400": "#c9a9f8", + "ds-color-brand-purple-500": "#b588f5", + "ds-color-brand-purple-600": "#a268f3", + "ds-color-brand-purple-700": "#8d47f0", + "ds-color-brand-purple-800": "#7633d7", + "ds-color-brand-purple-900": "#622ab2", + "ds-color-brand-purple-1000": "#4e228d", + "ds-color-brand-pink-100": "#fff7f8", + "ds-color-brand-pink-200": "#fde0e6", + "ds-color-brand-pink-300": "#fcc2ce", + "ds-color-brand-pink-400": "#fa9db0", + "ds-color-brand-pink-500": "#f7738e", + "ds-color-brand-pink-600": "#e45472", + "ds-color-brand-pink-700": "#bf475f", + "ds-color-brand-pink-800": "#a03b50", + "ds-color-brand-pink-900": "#833142", + "ds-color-brand-pink-1000": "#692734", + "ds-color-brand-midnight-100": "#c1daf0", + "ds-color-brand-midnight-200": "#569ed7", + "ds-color-brand-midnight-300": "#156fad", + "ds-color-brand-midnight-400": "#01426a", + "ds-color-brand-midnight-500": "#00274a", + "ds-color-brand-atlas-100": "#cde6ff", + "ds-color-brand-atlas-200": "#6bb7fb", + "ds-color-brand-atlas-300": "#2492eb", + "ds-color-brand-atlas-400": "#0074c8", + "ds-color-brand-atlas-500": "#054687", + "ds-color-brand-atlas-400-opacity-20": "rgba(0, 116, 200, 0.2)", + "ds-color-brand-breeze-100": "#c0f7ff", + "ds-color-brand-breeze-200": "#5de3f7", + "ds-color-brand-breeze-300": "#00cff0", + "ds-color-brand-breeze-400": "#099dc5", + "ds-color-brand-breeze-500": "#0b5575", + "ds-color-brand-breeze-300-opacity-30": "rgba(0, 207, 240, 0.3)", + "ds-color-brand-tropical-100": "#e2ffcd", + "ds-color-brand-tropical-200": "#d0fba6", + "ds-color-brand-tropical-300": "#c0e585", + "ds-color-brand-tropical-400": "#91be62", + "ds-color-brand-tropical-500": "#5e8741", + "ds-color-brand-alpine-100": "#bcaae6", + "ds-color-brand-alpine-200": "#9e73ea", + "ds-color-brand-alpine-300": "#8439ef", + "ds-color-brand-alpine-400": "#631db8", + "ds-color-brand-alpine-500": "#39115c", + "ds-color-brand-flamingo-100": "#ffebee", + "ds-color-brand-flamingo-200": "#ffc0ca", + "ds-color-brand-flamingo-300": "#ff94a7", + "ds-color-brand-flamingo-400": "#f65b7b", + "ds-color-brand-flamingo-500": "#b82b47", + "ds-color-brand-canyon-100": "#ffcab6", + "ds-color-brand-canyon-200": "#f99574", + "ds-color-brand-canyon-300": "#f26135", + "ds-color-brand-canyon-400": "#de3e09", + "ds-color-brand-canyon-500": "#b83302", + "ds-color-brand-goldcoast-100": "#fff0cd", + "ds-color-brand-goldcoast-200": "#ffdb67", + "ds-color-brand-goldcoast-300": "#ffd200", + "ds-color-brand-goldcoast-400": "#e5ad07", + "ds-color-brand-goldcoast-500": "#b88624", + "ds-color-brand-goldgray-100": "#c5c1bf", + "ds-color-brand-goldgray-200": "#726e6c", + "ds-color-brand-gold-100": "#ccbc94", + "ds-color-brand-gold-200": "#7f682e", + "ds-color-brand-emerald": "#139142", + "ds-color-brand-sapphire": "#015daa", + "ds-color-brand-ruby": "#a41d4a", + "ds-color-brand-lounge": "#01426a", + "ds-color-brand-loungeplus": "#53b390", + "ds-color-container-accent-default": "#f5fbeb", + "ds-color-container-accent-inverse": "#badd81", + "ds-color-container-emphasis-default": "#ebfafd", + "ds-color-container-emphasis-inverse": "#6ad5ef", + "ds-color-container-error-default": "#fff4f4", + "ds-color-container-error-inverse": "#74110e", + "ds-color-container-info-default": "#f0f7fd", + "ds-color-container-info-inverse": "#193d73", + "ds-color-container-primary-default": "#ffffff", + "ds-color-container-primary-inverse": "#0e2b4f", + "ds-color-container-secondary-default": "#f7f7f7", + "ds-color-container-secondary-inverse": "#194069", + "ds-color-container-subtle-default": "#f7f8fa", + "ds-color-container-subtle-inverse": "#393d43", + "ds-color-container-success-default": "#eef8f5", + "ds-color-container-success-inverse": "#173c30", + "ds-color-container-tertiary-default": "rgba(0, 0, 0, 0.03)", + "ds-color-container-tertiary-inverse": "rgba(255, 255, 255, 0.06)", + "ds-color-container-warning-default": "#fef8e9", + "ds-color-container-warning-inverse": "#5d4514", + "ds-color-container-ui-primary-active-default": "#225296", + "ds-color-container-ui-primary-active-inverse": "#6ad5ef", + "ds-color-container-ui-primary-default-default": "#2c67b5", + "ds-color-container-ui-primary-default-inverse": "#56bbde", + "ds-color-container-ui-primary-disabled-default": "#a0c9f1", + "ds-color-container-ui-primary-disabled-inverse": "#275b72", + "ds-color-container-ui-primary-focus-default": "#2c67b5", + "ds-color-container-ui-primary-focus-inverse": "#56bbde", + "ds-color-container-ui-primary-hover-default": "#193d73", + "ds-color-container-ui-primary-hover-inverse": "#a8e9f7", + "ds-color-container-ui-secondary-active-default": "#f0f7fd", + "ds-color-container-ui-secondary-active-inverse": "rgba(255, 255, 255, 0.06)", + "ds-color-container-ui-secondary-default-default": "#ffffff", + "ds-color-container-ui-secondary-default-inverse": "rgba(255, 255, 255, 0.03)", + "ds-color-container-ui-secondary-disabled-default": "#f7f7f7", + "ds-color-container-ui-secondary-disabled-inverse": "rgba(255, 255, 255, 0.12)", + "ds-color-container-ui-secondary-focus-default": "#ffffff", + "ds-color-container-ui-secondary-focus-inverse": "rgba(255, 255, 255, 0.03)", + "ds-color-container-ui-secondary-hover-default": "rgba(0, 0, 0, 0.03)", + "ds-color-container-ui-secondary-hover-inverse": "rgba(255, 255, 255, 0.12)", + "ds-color-container-ui-tertiary-active-default": "rgba(0, 0, 0, 0.06)", + "ds-color-container-ui-tertiary-active-inverse": "rgba(255, 255, 255, 0.06)", + "ds-color-container-ui-tertiary-default-default": "rgba(0, 0, 0, 0.03)", + "ds-color-container-ui-tertiary-default-inverse": "rgba(255, 255, 255, 0.12)", + "ds-color-container-ui-tertiary-disabled-default": "rgba(0, 0, 0, 0.03)", + "ds-color-container-ui-tertiary-disabled-inverse": "rgba(255, 255, 255, 0.25)", + "ds-color-container-ui-tertiary-focus-default": "rgba(0, 0, 0, 0.03)", + "ds-color-container-ui-tertiary-focus-inverse": "rgba(255, 255, 255, 0.12)", + "ds-color-container-ui-tertiary-hover-default": "rgba(0, 0, 0, 0.12)", + "ds-color-container-ui-tertiary-hover-inverse": "rgba(255, 255, 255, 0.25)", + "ds-color-icon-primary-default": "#676767", + "ds-color-icon-primary-inverse": "#f7f7f7", + "ds-color-icon-secondary-default": "#7e8894", + "ds-color-icon-secondary-inverse": "#ccd2db", + "ds-color-icon-tertiary-default": "#afb9c6", + "ds-color-icon-tertiary-inverse": "#939fad", + "ds-color-icon-emphasis-default": "#2a2a2a", + "ds-color-icon-emphasis-inverse": "#ffffff", + "ds-color-icon-accent-default": "#a2c270", + "ds-color-icon-accent-inverse": "#badd81", + "ds-color-icon-info-default": "#326aa5", + "ds-color-icon-info-inverse": "#89b2d4", + "ds-color-icon-error-default": "#cc1816", + "ds-color-icon-error-inverse": "#f9aca6", + "ds-color-icon-warning-default": "#c49432", + "ds-color-icon-warning-inverse": "#f2c153", + "ds-color-icon-success-default": "#40a080", + "ds-color-icon-success-inverse": "#8eceb9", + "ds-color-icon-subtle-default": "#a0c9f1", + "ds-color-icon-subtle-inverse": "#326aa5", + "ds-color-icon-ui-primary-default-default": "#2c67b5", + "ds-color-icon-ui-primary-default-inverse": "#56bbde", + "ds-color-icon-ui-primary-hover-default": "#193d73", + "ds-color-icon-ui-primary-hover-inverse": "#a8e9f7", + "ds-color-icon-ui-primary-active-default": "#225296", + "ds-color-icon-ui-primary-active-inverse": "#6ad5ef", + "ds-color-icon-ui-primary-disabled-default": "#adadad", + "ds-color-icon-ui-primary-disabled-inverse": "#7e7e7e", + "ds-color-icon-ui-primary-focus-default": "#2c67b5", + "ds-color-icon-ui-primary-focus-inverse": "#56bbde", + "ds-color-icon-ui-secondary-active-default": "#676767", + "ds-color-icon-ui-secondary-active-inverse": "#c5c5c5", + "ds-color-icon-ui-secondary-default-default": "#7e7e7e", + "ds-color-icon-ui-secondary-default-inverse": "#adadad", + "ds-color-icon-ui-secondary-disabled-default": "#adadad", + "ds-color-icon-ui-secondary-disabled-inverse": "#7e7e7e", + "ds-color-icon-ui-secondary-focus-default": "#7e7e7e", + "ds-color-icon-ui-secondary-focus-inverse": "#adadad", + "ds-color-icon-ui-secondary-hover-default": "#525252", + "ds-color-icon-ui-secondary-hover-inverse": "#dddddd", + "ds-color-icon-brand-red-default": "#d03a08", + "ds-color-icon-brand-red-inverse": "#e9815e", + "ds-color-icon-brand-yellow-default": "#7c7140", + "ds-color-icon-brand-yellow-inverse": "#f9ce06", + "ds-color-icon-brand-pink-default": "#bf475f", + "ds-color-icon-brand-pink-inverse": "#f7738e", + "ds-color-icon-brand-purple-default": "#8d47f0", + "ds-color-icon-brand-purple-inverse": "#b588f5", + "ds-color-icon-brand-lime-default": "#647845", + "ds-color-icon-brand-lime-inverse": "#badd81", + "ds-color-icon-brand-green-default": "#3a7d64", + "ds-color-icon-brand-green-inverse": "#51ae8c", + "ds-color-icon-brand-turquoise-default": "#3d7a7d", + "ds-color-icon-brand-turquoise-inverse": "#7ba5a6", + "ds-color-icon-brand-navy-default": "#265688", + "ds-color-icon-brand-navy-inverse": "#6899c6", + "ds-color-icon-brand-blue-default": "#2c67b5", + "ds-color-icon-brand-blue-inverse": "#5398e6", + "ds-color-icon-brand-cyan-default": "#32718e", + "ds-color-icon-brand-cyan-inverse": "#6ad5ef", + "ds-color-icon-brand-gray-default": "#676767", + "ds-color-icon-brand-gray-inverse": "#c5c5c5", + "ds-color-icon-brand-neutral-default": "#6a717c", + "ds-color-icon-brand-neutral-inverse": "#afb9c6", + "ds-color-icon-disabled-default": "rgba(0, 0, 0, 0.15)", + "ds-color-text-primary-default": "#2a2a2a", + "ds-color-text-primary-inverse": "#ffffff", + "ds-color-text-secondary-default": "#525252", + "ds-color-text-secondary-inverse": "#dddddd", + "ds-color-text-tertiary-default": "#6a717c", + "ds-color-text-tertiary-inverse": "#adadad", + "ds-color-text-error-default": "#cc1816", + "ds-color-text-error-inverse": "#f9aca6", + "ds-color-text-emphasis-default": "#265688", + "ds-color-text-emphasis-inverse": "#cfe0ef", + "ds-color-text-accent-default": "#647845", + "ds-color-text-accent-inverse": "#badd81", + "ds-color-text-info-default": "#326aa5", + "ds-color-text-info-inverse": "#acc9e2", + "ds-color-text-subtle-default": "#32718e", + "ds-color-text-subtle-inverse": "#56bbde", + "ds-color-text-success-default": "#0b6f4d", + "ds-color-text-success-inverse": "#8eceb9", + "ds-color-text-ui-active-default": "#225296", + "ds-color-text-ui-active-inverse": "#6ad5ef", + "ds-color-text-ui-default-default": "#2c67b5", + "ds-color-text-ui-default-inverse": "#56bbde", + "ds-color-text-ui-disabled-default": "#adadad", + "ds-color-text-ui-disabled-inverse": "#7e7e7e", + "ds-color-text-ui-focus-default": "#2c67b5", + "ds-color-text-ui-focus-inverse": "#56bbde", + "ds-color-text-ui-hover-default": "#193d73", + "ds-color-text-ui-hover-inverse": "#a8e9f7", + "ds-color-text-link-default": "#0074c8", + "ds-color-text-link-inverse": "#00cff0", + "ds-color-tier-alaska-mvp-default": "#726e6c", + "ds-color-tier-alaska-mvp-inverse": "#c5c1bf", + "ds-color-tier-alaska-mvpgold-default": "#7f682e", + "ds-color-tier-alaska-mvpgold-inverse": "#c5c1bf", + "ds-color-tier-alaska-mvpgold75k-default": "#7f682e", + "ds-color-tier-alaska-mvpgold75k-inverse": "#c5c1bf", + "ds-color-tier-alaska-mvpgold100k-default": "#7f682e", + "ds-color-tier-alaska-mvpgold100k-inverse": "#c5c1bf", + "ds-color-tier-alaska-lounge": "#01426a", + "ds-color-tier-alaska-loungeplus": "#53b390", + "ds-color-tier-fare-business-default": "#005154", + "ds-color-tier-fare-business-inverse": "#9fbdbe", + "ds-color-tier-fare-economy-default": "#2c67b5", + "ds-color-tier-fare-economy-inverse": "#a0c9f1", + "ds-color-tier-fare-first-class-default": "#002c4e", + "ds-color-tier-fare-first-class-inverse": "#89b2d4", + "ds-color-tier-fare-saver-default": "#4aa2c7", + "ds-color-tier-fare-saver-inverse": "#a8e9f7", + "ds-color-tier-oneworld-emerald": "#139142", + "ds-color-tier-oneworld-sapphire": "#015daa", + "ds-color-tier-oneworld-ruby": "#a41d4a", + "ds-color-ui-default-default": "#0074c8", + "ds-color-ui-default-inverse": "#00cff0", + "ds-color-ui-hover-default": "#054687", + "ds-color-ui-hover-inverse": "#5de3f7", + "ds-color-ui-active-default": "#054687", + "ds-color-ui-active-inverse": "#5de3f7", + "ds-color-ui-disabled-default": "rgba(0, 116, 200, 0.2)", + "ds-color-ui-bkg-default-default": "rgba(0, 0, 0, 0.03)", + "ds-color-ui-bkg-default-inverse": "rgba(255, 255, 255, 0.03)", + "ds-color-ui-bkg-hover-default": "rgba(0, 0, 0, 0.06)", + "ds-color-ui-bkg-hover-inverse": "rgba(255, 255, 255, 0.06)", + "ds-color-utility-blue-default": "#79b2ec", + "ds-color-utility-blue-inverse": "#c9e0f7", + "ds-color-utility-cyan-default": "#6ad5ef", + "ds-color-utility-cyan-inverse": "#a8e9f7", + "ds-color-utility-green-default": "#7ec6ac", + "ds-color-utility-green-inverse": "#addbca", + "ds-color-utility-gray-default": "#adadad", + "ds-color-utility-gray-inverse": "#dddddd", + "ds-color-utility-lime-default": "#badd81", + "ds-color-utility-lime-inverse": "#d8efb4", + "ds-color-utility-navy-default": "#265688", + "ds-color-utility-navy-inverse": "#acc9e2", + "ds-color-utility-neutral-default": "#7e8894", + "ds-color-utility-neutral-inverse": "#ccd2db", + "ds-color-utility-pink-default": "#f7738e", + "ds-color-utility-pink-inverse": "#fcc2ce", + "ds-color-utility-purple-default": "#8d47f0", + "ds-color-utility-purple-inverse": "#ddc9fb", + "ds-color-utility-red-default": "#e35c2f", + "ds-color-utility-red-inverse": "#f0a68d", + "ds-color-utility-turquoise-default": "#5c8f91", + "ds-color-utility-turquoise-inverse": "#9fbdbe", + "ds-color-utility-yellow-default": "#f9ce06", + "ds-color-utility-yellow-inverse": "#ffe87e", + "ds-color-utility-error-default": "#cc1816", + "ds-color-utility-error-inverse": "#f9aca6", + "ds-color-utility-warning-default": "#f2c153", + "ds-color-utility-warning-inverse": "#f2c153", + "ds-color-utility-success-default": "#0b6f4d", + "ds-color-utility-success-inverse": "#8eceb9" +}; + +var styleCss = i$3`.container{display:inline-block;overflow:auto;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([isfullscreen]){position:fixed;top:0;left:0}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2459,7 +3231,6 @@ class AuroDropdown extends r { this.ready = false; this.tabIndex = 0; this.noToggle = false; - this.noFullscreenOnMobile = false; /** * @private @@ -2561,8 +3332,8 @@ class AuroDropdown extends r { type: Function, reflect: false }, - noFullscreenOnMobile: { - type: Boolean, + mobileFullscreenBreakpoint: { + type: String, reflect: true, }, @@ -2618,8 +3389,10 @@ class AuroDropdown extends r { firstUpdated() { this.floater.configure(this); this.bibContent = this.floater.element.bib; - // var(--ds-grid-breakpoint-sm) - this.bibContent.mobileBreakpoint = '576px'; + if (this.mobileFullscreenBreakpoint) { + const breakpointValue = dsVariableFlat[this.mobileFullscreenBreakpoint.replace(/^\-\-/, "")]; + this.bibContent.mobileFullscreenBreakpoint = breakpointValue; + } // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index 89d9d9f7..bb1a7659 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -1603,29 +1603,34 @@ class AuroFloatingUI { this.keyDownHandler = null; } - position() { + mirrorSize(fullscreen) { // mirror the boxsize from bibSizer const sizerStyle = window.getComputedStyle(this.element.bibSizer); const bibContent = this.element.bib.shadowRoot.querySelector(".container"); - if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width; - if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height; - bibContent.style.maxWidth = sizerStyle.maxWidth; - bibContent.style.maxHeight = sizerStyle.maxHeight; + if (fullscreen) { + bibContent.style.width = '100dvw'; + bibContent.style.height = '100dvh'; + bibContent.style.maxWidth = 'none'; + bibContent.style.maxHeight = 'none'; + } else { + if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width; + if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height; + bibContent.style.maxWidth = sizerStyle.maxWidth; + bibContent.style.maxHeight = sizerStyle.maxHeight; + } + } + position() { // fullscreen on mobileView - if (!this.element.noFullscreenOnMobile && this.element.bib.mobileBreakpoint) { - const mobileQuery = window.matchMedia(`(max-width: ${this.element.bib.mobileBreakpoint})`); - - if (mobileQuery.matches) { - // no need to calc the position in mobile view - this.element.bib.setAttribute('fullscreen', true); - this.element.bib.style.top = "0px"; - this.element.bib.style.left = "0px"; + if (this.element.bib.mobileFullscreenBreakpoint) { + const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; + this.handleMobileFullscreen(isMobile); + if (isMobile) { + this.mirrorSize(true); return; - } else { - this.element.bib.removeAttribute('fullscreen'); } } + this.mirrorSize(false); // Define the middlware for the floater configuration const middleware = [ @@ -1654,6 +1659,17 @@ class AuroFloatingUI { }); } + handleMobileFullscreen(isMobile) { + if (isMobile) { + this.element.bib.setAttribute('isFullscreen', "true"); + // reset the prev position + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + } else { + this.element.bib.removeAttribute('fullscreen'); + } + } + updateState() { const isVisible = this.element.isPopoverVisible; this.element.trigger.setAttribute('aria-expanded', isVisible); @@ -2323,7 +2339,763 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss = i$3`.container{display:inline-block;box-sizing:border-box;overflow:auto}:host{position:absolute;z-index:1;display:none}:host([fullscreen]){position:fixed;top:0;left:0;width:100vw;height:100vh}:host([fullscreen]) .container{width:100%;height:100%}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var dsVariableFlat = { + "ds-asset-font-circular-family-name": "AS Circular", + "ds-asset-font-circular-filename": "ASCircularWeb", + "ds-asset-font-circular-weight-light": "-Light", + "ds-asset-font-circular-weight-medium": "-Medium", + "ds-asset-font-circular-weight-book": "-Book", + "ds-border-radius": "0.375rem", + "ds-size-25": "0.125rem", + "ds-size-50": "0.25rem", + "ds-size-75": "0.375rem", + "ds-size-100": "0.5rem", + "ds-size-150": "0.75rem", + "ds-size-200": "1rem", + "ds-size-300": "1.5rem", + "ds-size-400": "2rem", + "ds-size-500": "2.5rem", + "ds-size-600": "3rem", + "ds-size-700": "3.5rem", + "ds-size-800": "4rem", + "ds-size-900": "4.5rem", + "ds-size-1000": "5rem", + "ds-unitless-scale-20": 0.25, + "ds-unitless-scale-50": 0.5, + "ds-unitless-scale-100": 1, + "ds-unitless-scale-140": 1.4, + "ds-unitless-scale-150": 1.5, + "ds-unitless-scale-200": 2, + "ds-unitless-scale-300": 3, + "ds-unitless-scale-350": 3.5, + "ds-animation-default-property": "all", + "ds-animation-default-duration": "0.3s", + "ds-animation-default-timing": "ease-out", + "ds-depth-overlay": "200", + "ds-depth-modal": "400", + "ds-depth-tooltip": "300", + "ds-elevation-100": "0px 0px 5px rgba(0, 0, 0, 0.15)", + "ds-elevation-200": "0px 0px 10px rgba(0, 0, 0, 0.15)", + "ds-elevation-300": "0px 0px 15px rgba(0, 0, 0, 0.2)", + "ds-grid-breakpoint-xs": "320px", + "ds-grid-breakpoint-sm": "576px", + "ds-grid-breakpoint-md": "768px", + "ds-grid-breakpoint-lg": "1024px", + "ds-grid-breakpoint-xl": "1232px", + "ds-grid-column-xs": "6", + "ds-grid-column-sm": "12", + "ds-grid-column-md": "12", + "ds-grid-column-lg": "12", + "ds-grid-column-xl": "12", + "ds-grid-gutter-xs": "0.5rem", + "ds-grid-gutter-sm": "1rem", + "ds-grid-gutter-md": "1.5rem", + "ds-grid-gutter-lg": "1.5rem", + "ds-grid-gutter-xl": "2rem", + "ds-grid-margin-xs": "1rem", + "ds-grid-margin-sm": "1rem", + "ds-grid-margin-md": "1.5rem", + "ds-grid-margin-lg": "2rem", + "ds-grid-margin-xl": "2rem", + "ds-font-family-default": "'AS Circular', Helvetica Neue, Arial, sans-serif", + "ds-font-family-mono": "Menlo, Monaco, Consolas, 'Courier New', monospace", + "ds-text-heading-300-weight": "300", + "ds-text-heading-300-px": "18px", + "ds-text-heading-300-size": "1.125rem", + "ds-text-heading-300-height": "1.625rem", + "ds-text-heading-300-height-px": "26px", + "ds-text-heading-400-weight": "300", + "ds-text-heading-400-px": "20px", + "ds-text-heading-400-size": "1.25rem", + "ds-text-heading-400-height": "1.625rem", + "ds-text-heading-400-height-px": "26px", + "ds-text-heading-500-weight": "300", + "ds-text-heading-500-px-breakpoint-sm": "22px", + "ds-text-heading-500-px-breakpoint-md": "24px", + "ds-text-heading-500-px-breakpoint-lg": "24px", + "ds-text-heading-500-size-breakpoint-sm": "1.375rem", + "ds-text-heading-500-size-breakpoint-md": "1.5rem", + "ds-text-heading-500-size-breakpoint-lg": "1.5rem", + "ds-text-heading-500-height-breakpoint-sm": "1.625rem", + "ds-text-heading-500-height-breakpoint-px-sm": "26px", + "ds-text-heading-500-height-breakpoint-md": "1.875rem", + "ds-text-heading-500-height-breakpoint-px-md": "30px", + "ds-text-heading-500-height-breakpoint-lg": "2rem", + "ds-text-heading-500-height-breakpoint-px-lg": "32px", + "ds-text-heading-600-weight": "300", + "ds-text-heading-600-px-breakpoint-sm": "26px", + "ds-text-heading-600-px-breakpoint-md": "28px", + "ds-text-heading-600-px-breakpoint-lg": "28px", + "ds-text-heading-600-size-breakpoint-sm": "1.625rem", + "ds-text-heading-600-size-breakpoint-md": "1.75rem", + "ds-text-heading-600-size-breakpoint-lg": "1.75rem", + "ds-text-heading-600-height-breakpoint-sm": "1.875rem", + "ds-text-heading-600-height-breakpoint-px-sm": "30px", + "ds-text-heading-600-height-breakpoint-md": "2.125rem", + "ds-text-heading-600-height-breakpoint-px-md": "34px", + "ds-text-heading-600-height-breakpoint-lg": "2.25rem", + "ds-text-heading-600-height-breakpoint-px-lg": "36px", + "ds-text-heading-700-weight": "500", + "ds-text-heading-700-px-breakpoint-sm": "28px", + "ds-text-heading-700-px-breakpoint-md": "32px", + "ds-text-heading-700-px-breakpoint-lg": "36px", + "ds-text-heading-700-size-breakpoint-sm": "1.75rem", + "ds-text-heading-700-size-breakpoint-md": "2rem", + "ds-text-heading-700-size-breakpoint-lg": "2.25rem", + "ds-text-heading-700-height-breakpoint-sm": "2.125rem", + "ds-text-heading-700-height-breakpoint-px-sm": "34px", + "ds-text-heading-700-height-breakpoint-md": "2.375rem", + "ds-text-heading-700-height-breakpoint-px-md": "38px", + "ds-text-heading-700-height-breakpoint-lg": "2.75rem", + "ds-text-heading-700-height-breakpoint-px-lg": "44px", + "ds-text-heading-800-weight": "500", + "ds-text-heading-800-px-breakpoint-sm": "32px", + "ds-text-heading-800-px-breakpoint-md": "36px", + "ds-text-heading-800-px-breakpoint-lg": "40px", + "ds-text-heading-800-size-breakpoint-sm": "2rem", + "ds-text-heading-800-size-breakpoint-md": "2.25rem", + "ds-text-heading-800-size-breakpoint-lg": "2.5rem", + "ds-text-heading-800-height-breakpoint-sm": "2.375rem", + "ds-text-heading-800-height-breakpoint-px-sm": "38px", + "ds-text-heading-800-height-breakpoint-md": "2.625rem", + "ds-text-heading-800-height-breakpoint-px-md": "42px", + "ds-text-heading-800-height-breakpoint-lg": "3rem", + "ds-text-heading-800-height-breakpoint-px-lg": "48px", + "ds-text-heading-default-weight": "500", + "ds-text-heading-default-margin": "0", + "ds-text-heading-default-spacing": "-0.2px", + "ds-text-heading-medium-weight": "300", + "ds-text-heading-display-weight": "100", + "ds-text-heading-display-px-breakpoint-sm": "44px", + "ds-text-heading-display-px-breakpoint-md": "48px", + "ds-text-heading-display-px-breakpoint-lg": "56px", + "ds-text-heading-display-size-breakpoint-sm": "2.75rem", + "ds-text-heading-display-size-breakpoint-md": "3rem", + "ds-text-heading-display-size-breakpoint-lg": "3.5rem", + "ds-text-heading-display-height-breakpoint-sm": "3.375rem", + "ds-text-heading-display-height-breakpoint-px-sm": "54px", + "ds-text-heading-display-height-breakpoint-md": "3.75rem", + "ds-text-heading-display-height-breakpoint-px-md": "60px", + "ds-text-heading-display-height-breakpoint-lg": "4.25rem", + "ds-text-heading-display-height-breakpoint-px-lg": "68px", + "ds-text-body-default-weight": "500", + "ds-text-body-size-xxs": "0.625rem", + "ds-text-body-size-xs": "0.75rem", + "ds-text-body-size-sm": "0.875rem", + "ds-text-body-size-default": "1rem", + "ds-text-body-size-lg": "1.125rem", + "ds-text-body-height-xs": "1rem", + "ds-text-body-height-sm": "1.25rem", + "ds-text-body-height-default": "1.5rem", + "ds-text-body-height-lg": "1.625rem", + "ds-color-alert-notification-default": "#0074c8", + "ds-color-alert-warning-default": "#de750c", + "ds-color-alert-error-default": "#df0b37", + "ds-color-alert-success-default": "#00805d", + "ds-color-alert-advisory-default": "#fff0cd", + "ds-color-alert-bkg-success-default": "#ddf6e8", + "ds-color-alert-bkg-error-default": "#ffedf1", + "ds-color-background-primary-100-default": "#ffffff", + "ds-color-background-primary-100-inverse": "#0e2b4f", + "ds-color-background-primary-200-default": "#f7f7f7", + "ds-color-background-primary-200-inverse": "#194069", + "ds-color-background-primary-300-default": "#e4e8ec", + "ds-color-background-primary-300-inverse": "#265688", + "ds-color-background-primary-400-default": "#dddddd", + "ds-color-background-primary-400-inverse": "#326aa5", + "ds-color-background-success-default": "#eef8f5", + "ds-color-background-success-inverse": "#173c30", + "ds-color-background-error-default": "#fff4f4", + "ds-color-background-error-inverse": "#74110e", + "ds-color-background-warning-default": "#fef8e9", + "ds-color-background-warning-inverse": "#5d4514", + "ds-color-background-info-default": "#f0f7fd", + "ds-color-background-info-inverse": "#193d73", + "ds-color-background-subtle-default": "#f7f8fa", + "ds-color-background-subtle-inverse": "#2a2a2a", + "ds-color-background-accent-default": "#ebfafd", + "ds-color-background-accent-inverse": "#275b72", + "ds-color-background-emphasis-default": "#c9e0f7", + "ds-color-background-emphasis-inverse": "#225296", + "ds-color-background-scrimmed-default": "rgba(0, 0, 0, 0.5)", + "ds-color-background-lightest": "#ffffff", + "ds-color-background-lighter": "#f7f7f7", + "ds-color-background-darker": "#01426a", + "ds-color-background-darkest": "#00274a", + "ds-color-background-gradient-default": "linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5))", + "ds-color-base-white": "#ffffff", + "ds-color-base-white-100": "rgba(255, 255, 255, 0.03)", + "ds-color-base-white-200": "rgba(255, 255, 255, 0.06)", + "ds-color-base-white-300": "rgba(255, 255, 255, 0.12)", + "ds-color-base-white-400": "rgba(255, 255, 255, 0.25)", + "ds-color-base-white-500": "rgba(255, 255, 255, 0.5)", + "ds-color-base-white-opacity-50": "rgba(255, 255, 255, 0.5)", + "ds-color-base-white-opacity-40": "rgba(255, 255, 255, 0.4)", + "ds-color-base-white-opacity-0": "rgba(255, 255, 255, 0)", + "ds-color-base-black": "#000000", + "ds-color-base-black-100": "rgba(0, 0, 0, 0.03)", + "ds-color-base-black-200": "rgba(0, 0, 0, 0.06)", + "ds-color-base-black-300": "rgba(0, 0, 0, 0.12)", + "ds-color-base-black-400": "rgba(0, 0, 0, 0.25)", + "ds-color-base-black-500": "rgba(0, 0, 0, 0.5)", + "ds-color-base-black-opacity-15": "rgba(0, 0, 0, 0.15)", + "ds-color-base-blue-100": "#f0f7fd", + "ds-color-base-blue-200": "#c9e0f7", + "ds-color-base-blue-300": "#a0c9f1", + "ds-color-base-blue-400": "#79b2ec", + "ds-color-base-blue-500": "#5398e6", + "ds-color-base-blue-600": "#3b7fd2", + "ds-color-base-blue-700": "#2c67b5", + "ds-color-base-blue-800": "#225296", + "ds-color-base-blue-900": "#193d73", + "ds-color-base-blue-1000": "#102a51", + "ds-color-base-cyan-100": "#ebfafd", + "ds-color-base-cyan-200": "#a8e9f7", + "ds-color-base-cyan-300": "#6ad5ef", + "ds-color-base-cyan-400": "#56bbde", + "ds-color-base-cyan-500": "#4aa2c7", + "ds-color-base-cyan-600": "#3e89aa", + "ds-color-base-cyan-700": "#32718e", + "ds-color-base-cyan-800": "#275b72", + "ds-color-base-cyan-900": "#1d4658", + "ds-color-base-cyan-1000": "#12303d", + "ds-color-base-error-100": "#fff4f4", + "ds-color-base-error-200": "#f9aca6", + "ds-color-base-error-300": "#f16359", + "ds-color-base-error-400": "#cc1816", + "ds-color-base-error-500": "#74110e", + "ds-color-base-gray-100": "#f7f7f7", + "ds-color-base-gray-200": "#d4ece4", + "ds-color-base-gray-300": "#c5c5c5", + "ds-color-base-gray-400": "#adadad", + "ds-color-base-gray-500": "#959595", + "ds-color-base-gray-600": "#7e7e7e", + "ds-color-base-gray-700": "#676767", + "ds-color-base-gray-800": "#525252", + "ds-color-base-gray-900": "#3d3d3d", + "ds-color-base-gray-1000": "#2a2a2a", + "ds-color-base-green-100": "#f3faf7", + "ds-color-base-green-200": "#000000", + "ds-color-base-green-300": "#addbca", + "ds-color-base-green-400": "#7ec6ac", + "ds-color-base-green-500": "#51ae8c", + "ds-color-base-green-600": "#459578", + "ds-color-base-green-700": "#3a7d64", + "ds-color-base-green-800": "#306854", + "ds-color-base-green-900": "#285545", + "ds-color-base-green-1000": "#1f4436", + "ds-color-base-lime-100": "#f5fbeb", + "ds-color-base-lime-200": "#d8efb4", + "ds-color-base-lime-300": "#badd81", + "ds-color-base-lime-400": "#a2c270", + "ds-color-base-lime-500": "#8ca761", + "ds-color-base-lime-600": "#778f53", + "ds-color-base-lime-700": "#647845", + "ds-color-base-lime-800": "#53643a", + "ds-color-base-lime-900": "#44522f", + "ds-color-base-lime-1000": "#364126", + "ds-color-base-navy-100": "#f2f7fb", + "ds-color-base-navy-200": "#cfe0ef", + "ds-color-base-navy-300": "#acc9e2", + "ds-color-base-navy-400": "#89b2d4", + "ds-color-base-navy-500": "#6899c6", + "ds-color-base-navy-600": "#4a82b7", + "ds-color-base-navy-700": "#326aa5", + "ds-color-base-navy-800": "#265688", + "ds-color-base-navy-900": "#194069", + "ds-color-base-navy-1000": "#0e2b4f", + "ds-color-base-neutral-100": "#f7f8fa", + "ds-color-base-neutral-200": "#e4e8ec", + "ds-color-base-neutral-300": "#ccd2db", + "ds-color-base-neutral-400": "#afb9c6", + "ds-color-base-neutral-500": "#939fad", + "ds-color-base-neutral-600": "#7e8894", + "ds-color-base-neutral-700": "#6a717c", + "ds-color-base-neutral-800": "#585e67", + "ds-color-base-neutral-900": "#484d55", + "ds-color-base-neutral-1000": "#393d43", + "ds-color-base-pink-100": "#fff7f8", + "ds-color-base-pink-200": "#fde0e6", + "ds-color-base-pink-300": "#fcc2ce", + "ds-color-base-pink-400": "#fa9db0", + "ds-color-base-pink-500": "#f7738e", + "ds-color-base-pink-600": "#e45472", + "ds-color-base-pink-700": "#bf475f", + "ds-color-base-pink-800": "#a03b50", + "ds-color-base-pink-900": "#833142", + "ds-color-base-pink-1000": "#692734", + "ds-color-base-purple-100": "#fbf8fe", + "ds-color-base-purple-200": "#ede3fd", + "ds-color-base-purple-300": "#ddc9fb", + "ds-color-base-purple-400": "#c9a9f8", + "ds-color-base-purple-500": "#b588f5", + "ds-color-base-purple-600": "#a268f3", + "ds-color-base-purple-700": "#8d47f0", + "ds-color-base-purple-800": "#7633d7", + "ds-color-base-purple-900": "#622ab2", + "ds-color-base-purple-1000": "#4e228d", + "ds-color-base-red-100": "#fef7f5", + "ds-color-base-red-200": "#fae2da", + "ds-color-base-red-300": "#f5c7b8", + "ds-color-base-red-400": "#f0a68d", + "ds-color-base-red-500": "#e9815e", + "ds-color-base-red-600": "#e35c2f", + "ds-color-base-red-700": "#d03a08", + "ds-color-base-red-800": "#ae3007", + "ds-color-base-red-900": "#902806", + "ds-color-base-red-1000": "#732005", + "ds-color-base-success-100": "#eef8f5", + "ds-color-base-success-200": "#8eceb9", + "ds-color-base-success-300": "#40a080", + "ds-color-base-success-400": "#0b6f4d", + "ds-color-base-success-500": "#173c30", + "ds-color-base-turquoise-100": "#f7fafa", + "ds-color-base-turquoise-200": "#dfe9ea", + "ds-color-base-turquoise-300": "#c2d5d6", + "ds-color-base-turquoise-400": "#9fbdbe", + "ds-color-base-turquoise-500": "#7ba5a6", + "ds-color-base-turquoise-600": "#5c8f91", + "ds-color-base-turquoise-700": "#3d7a7d", + "ds-color-base-turquoise-800": "#21686a", + "ds-color-base-turquoise-900": "#085659", + "ds-color-base-turquoise-1000": "#004447", + "ds-color-base-yellow-100": "#fff9df", + "ds-color-base-yellow-200": "#ffe87e", + "ds-color-base-yellow-300": "#f9ce06", + "ds-color-base-yellow-400": "#d6b622", + "ds-color-base-yellow-500": "#b49d35", + "ds-color-base-yellow-600": "#96873e", + "ds-color-base-yellow-700": "#7c7140", + "ds-color-base-yellow-800": "#665e3d", + "ds-color-base-yellow-900": "#524e38", + "ds-color-base-yellow-1000": "#403d30", + "ds-color-base-warning-100": "#fef8e9", + "ds-color-base-warning-200": "#f2c153", + "ds-color-base-warning-300": "#c49432", + "ds-color-base-warning-400": "#8e6b22", + "ds-color-base-warning-500": "#5d4514", + "ds-color-state-error-100": "#ff999b", + "ds-color-state-error-500": "#df0b37", + "ds-color-state-success-100": "#69cf96", + "ds-color-state-success-500": "#00805d", + "ds-color-state-warning-500": "#de750c", + "ds-color-border-primary-default": "#585e67", + "ds-color-border-primary-inverse": "#afb9c6", + "ds-color-border-secondary-default": "#939fad", + "ds-color-border-secondary-inverse": "#7e8894", + "ds-color-border-tertiary-default": "#dddddd", + "ds-color-border-tertiary-inverse": "#676767", + "ds-color-border-error-default": "#cc1816", + "ds-color-border-error-inverse": "#f9aca6", + "ds-color-border-divider-default": "rgba(0, 0, 0, 0.12)", + "ds-color-border-divider-inverse": "rgba(255, 255, 255, 0.25)", + "ds-color-border-subtle-default": "#f0f7fd", + "ds-color-border-subtle-inverse": "#326aa5", + "ds-color-border-emphasis-default": "#194069", + "ds-color-border-emphasis-inverse": "#f2f7fb", + "ds-color-border-accent-default": "#badd81", + "ds-color-border-accent-inverse": "#a2c270", + "ds-color-border-success-default": "#0b6f4d", + "ds-color-border-success-inverse": "#8eceb9", + "ds-color-border-warning-default": "#c49432", + "ds-color-border-warning-inverse": "#f2c153", + "ds-color-border-info-default": "#326aa5", + "ds-color-border-info-inverse": "#89b2d4", + "ds-color-border-ui-default-default": "#2c67b5", + "ds-color-border-ui-default-inverse": "#56bbde", + "ds-color-border-ui-hover-default": "#193d73", + "ds-color-border-ui-hover-inverse": "#a8e9f7", + "ds-color-border-ui-active-default": "#225296", + "ds-color-border-ui-active-inverse": "#6ad5ef", + "ds-color-border-ui-focus-default": "#2c67b5", + "ds-color-border-ui-focus-inverse": "#56bbde", + "ds-color-border-ui-disabled-default": "#adadad", + "ds-color-border-ui-disabled-inverse": "#7e7e7e", + "ds-color-border-active-default": "#0074c8", + "ds-color-border-active-inverse": "#00cff0", + "ds-color-border-disabled-default": "#d4ece4", + "ds-color-border-focus-default": "#959595", + "ds-color-brand-neutral-100": "#f7f8fa", + "ds-color-brand-neutral-200": "#e4e8ec", + "ds-color-brand-neutral-300": "#ccd2db", + "ds-color-brand-neutral-400": "#afb9c6", + "ds-color-brand-neutral-500": "#939fad", + "ds-color-brand-neutral-600": "#7e8894", + "ds-color-brand-neutral-700": "#6a717c", + "ds-color-brand-neutral-800": "#585e67", + "ds-color-brand-neutral-900": "#484d55", + "ds-color-brand-neutral-1000": "#393d43", + "ds-color-brand-gray-100": "#f7f7f7", + "ds-color-brand-gray-200": "#dddddd", + "ds-color-brand-gray-300": "#c5c5c5", + "ds-color-brand-gray-400": "#adadad", + "ds-color-brand-gray-500": "#959595", + "ds-color-brand-gray-600": "#7e7e7e", + "ds-color-brand-gray-700": "#676767", + "ds-color-brand-gray-800": "#525252", + "ds-color-brand-gray-900": "#3d3d3d", + "ds-color-brand-gray-1000": "#2a2a2a", + "ds-color-brand-red-100": "#fef7f5", + "ds-color-brand-red-200": "#fae2da", + "ds-color-brand-red-300": "#f5c7b8", + "ds-color-brand-red-400": "#f0a68d", + "ds-color-brand-red-500": "#e9815e", + "ds-color-brand-red-600": "#e35c2f", + "ds-color-brand-red-700": "#d03a08", + "ds-color-brand-red-800": "#ae3007", + "ds-color-brand-red-900": "#902806", + "ds-color-brand-red-1000": "#732005", + "ds-color-brand-yellow-100": "#fff9df", + "ds-color-brand-yellow-200": "#ffe87e", + "ds-color-brand-yellow-300": "#f9ce06", + "ds-color-brand-yellow-400": "#d6b622", + "ds-color-brand-yellow-500": "#b49d35", + "ds-color-brand-yellow-600": "#96873e", + "ds-color-brand-yellow-700": "#7c7140", + "ds-color-brand-yellow-800": "#665e3d", + "ds-color-brand-yellow-900": "#524e38", + "ds-color-brand-yellow-1000": "#403d30", + "ds-color-brand-lime-100": "#f5fbeb", + "ds-color-brand-lime-200": "#d8efb4", + "ds-color-brand-lime-300": "#badd81", + "ds-color-brand-lime-400": "#a2c270", + "ds-color-brand-lime-500": "#8ca761", + "ds-color-brand-lime-600": "#778f53", + "ds-color-brand-lime-700": "#647845", + "ds-color-brand-lime-800": "#53643a", + "ds-color-brand-lime-900": "#44522f", + "ds-color-brand-lime-1000": "#364126", + "ds-color-brand-green-100": "#f3faf7", + "ds-color-brand-green-200": "#d4ece4", + "ds-color-brand-green-300": "#addbca", + "ds-color-brand-green-400": "#7ec6ac", + "ds-color-brand-green-500": "#51ae8c", + "ds-color-brand-green-600": "#459578", + "ds-color-brand-green-700": "#3a7d64", + "ds-color-brand-green-800": "#306854", + "ds-color-brand-green-900": "#285545", + "ds-color-brand-green-1000": "#1f4436", + "ds-color-brand-turquoise-100": "#f7fafa", + "ds-color-brand-turquoise-200": "#dfe9ea", + "ds-color-brand-turquoise-300": "#c2d5d6", + "ds-color-brand-turquoise-400": "#9fbdbe", + "ds-color-brand-turquoise-500": "#7ba5a6", + "ds-color-brand-turquoise-600": "#5c8f91", + "ds-color-brand-turquoise-700": "#3d7a7d", + "ds-color-brand-turquoise-800": "#21686a", + "ds-color-brand-turquoise-900": "#085659", + "ds-color-brand-turquoise-1000": "#004447", + "ds-color-brand-cyan-100": "#ebfafd", + "ds-color-brand-cyan-200": "#a8e9f7", + "ds-color-brand-cyan-300": "#6ad5ef", + "ds-color-brand-cyan-400": "#56bbde", + "ds-color-brand-cyan-500": "#4aa2c7", + "ds-color-brand-cyan-600": "#3e89aa", + "ds-color-brand-cyan-700": "#32718e", + "ds-color-brand-cyan-800": "#275b72", + "ds-color-brand-cyan-900": "#1d4658", + "ds-color-brand-cyan-1000": "#12303d", + "ds-color-brand-blue-100": "#f0f7fd", + "ds-color-brand-blue-200": "#c9e0f7", + "ds-color-brand-blue-300": "#a0c9f1", + "ds-color-brand-blue-400": "#79b2ec", + "ds-color-brand-blue-500": "#5398e6", + "ds-color-brand-blue-600": "#3b7fd2", + "ds-color-brand-blue-700": "#2c67b5", + "ds-color-brand-blue-800": "#225296", + "ds-color-brand-blue-900": "#193d73", + "ds-color-brand-blue-1000": "#102a51", + "ds-color-brand-navy-100": "#f2f7fb", + "ds-color-brand-navy-200": "#cfe0ef", + "ds-color-brand-navy-300": "#acc9e2", + "ds-color-brand-navy-400": "#89b2d4", + "ds-color-brand-navy-500": "#6899c6", + "ds-color-brand-navy-600": "#4a82b7", + "ds-color-brand-navy-700": "#326aa5", + "ds-color-brand-navy-800": "#265688", + "ds-color-brand-navy-900": "#194069", + "ds-color-brand-navy-1000": "#0e2b4f", + "ds-color-brand-purple-100": "#fbf8fe", + "ds-color-brand-purple-200": "#ede3fd", + "ds-color-brand-purple-300": "#ddc9fb", + "ds-color-brand-purple-400": "#c9a9f8", + "ds-color-brand-purple-500": "#b588f5", + "ds-color-brand-purple-600": "#a268f3", + "ds-color-brand-purple-700": "#8d47f0", + "ds-color-brand-purple-800": "#7633d7", + "ds-color-brand-purple-900": "#622ab2", + "ds-color-brand-purple-1000": "#4e228d", + "ds-color-brand-pink-100": "#fff7f8", + "ds-color-brand-pink-200": "#fde0e6", + "ds-color-brand-pink-300": "#fcc2ce", + "ds-color-brand-pink-400": "#fa9db0", + "ds-color-brand-pink-500": "#f7738e", + "ds-color-brand-pink-600": "#e45472", + "ds-color-brand-pink-700": "#bf475f", + "ds-color-brand-pink-800": "#a03b50", + "ds-color-brand-pink-900": "#833142", + "ds-color-brand-pink-1000": "#692734", + "ds-color-brand-midnight-100": "#c1daf0", + "ds-color-brand-midnight-200": "#569ed7", + "ds-color-brand-midnight-300": "#156fad", + "ds-color-brand-midnight-400": "#01426a", + "ds-color-brand-midnight-500": "#00274a", + "ds-color-brand-atlas-100": "#cde6ff", + "ds-color-brand-atlas-200": "#6bb7fb", + "ds-color-brand-atlas-300": "#2492eb", + "ds-color-brand-atlas-400": "#0074c8", + "ds-color-brand-atlas-500": "#054687", + "ds-color-brand-atlas-400-opacity-20": "rgba(0, 116, 200, 0.2)", + "ds-color-brand-breeze-100": "#c0f7ff", + "ds-color-brand-breeze-200": "#5de3f7", + "ds-color-brand-breeze-300": "#00cff0", + "ds-color-brand-breeze-400": "#099dc5", + "ds-color-brand-breeze-500": "#0b5575", + "ds-color-brand-breeze-300-opacity-30": "rgba(0, 207, 240, 0.3)", + "ds-color-brand-tropical-100": "#e2ffcd", + "ds-color-brand-tropical-200": "#d0fba6", + "ds-color-brand-tropical-300": "#c0e585", + "ds-color-brand-tropical-400": "#91be62", + "ds-color-brand-tropical-500": "#5e8741", + "ds-color-brand-alpine-100": "#bcaae6", + "ds-color-brand-alpine-200": "#9e73ea", + "ds-color-brand-alpine-300": "#8439ef", + "ds-color-brand-alpine-400": "#631db8", + "ds-color-brand-alpine-500": "#39115c", + "ds-color-brand-flamingo-100": "#ffebee", + "ds-color-brand-flamingo-200": "#ffc0ca", + "ds-color-brand-flamingo-300": "#ff94a7", + "ds-color-brand-flamingo-400": "#f65b7b", + "ds-color-brand-flamingo-500": "#b82b47", + "ds-color-brand-canyon-100": "#ffcab6", + "ds-color-brand-canyon-200": "#f99574", + "ds-color-brand-canyon-300": "#f26135", + "ds-color-brand-canyon-400": "#de3e09", + "ds-color-brand-canyon-500": "#b83302", + "ds-color-brand-goldcoast-100": "#fff0cd", + "ds-color-brand-goldcoast-200": "#ffdb67", + "ds-color-brand-goldcoast-300": "#ffd200", + "ds-color-brand-goldcoast-400": "#e5ad07", + "ds-color-brand-goldcoast-500": "#b88624", + "ds-color-brand-goldgray-100": "#c5c1bf", + "ds-color-brand-goldgray-200": "#726e6c", + "ds-color-brand-gold-100": "#ccbc94", + "ds-color-brand-gold-200": "#7f682e", + "ds-color-brand-emerald": "#139142", + "ds-color-brand-sapphire": "#015daa", + "ds-color-brand-ruby": "#a41d4a", + "ds-color-brand-lounge": "#01426a", + "ds-color-brand-loungeplus": "#53b390", + "ds-color-container-accent-default": "#f5fbeb", + "ds-color-container-accent-inverse": "#badd81", + "ds-color-container-emphasis-default": "#ebfafd", + "ds-color-container-emphasis-inverse": "#6ad5ef", + "ds-color-container-error-default": "#fff4f4", + "ds-color-container-error-inverse": "#74110e", + "ds-color-container-info-default": "#f0f7fd", + "ds-color-container-info-inverse": "#193d73", + "ds-color-container-primary-default": "#ffffff", + "ds-color-container-primary-inverse": "#0e2b4f", + "ds-color-container-secondary-default": "#f7f7f7", + "ds-color-container-secondary-inverse": "#194069", + "ds-color-container-subtle-default": "#f7f8fa", + "ds-color-container-subtle-inverse": "#393d43", + "ds-color-container-success-default": "#eef8f5", + "ds-color-container-success-inverse": "#173c30", + "ds-color-container-tertiary-default": "rgba(0, 0, 0, 0.03)", + "ds-color-container-tertiary-inverse": "rgba(255, 255, 255, 0.06)", + "ds-color-container-warning-default": "#fef8e9", + "ds-color-container-warning-inverse": "#5d4514", + "ds-color-container-ui-primary-active-default": "#225296", + "ds-color-container-ui-primary-active-inverse": "#6ad5ef", + "ds-color-container-ui-primary-default-default": "#2c67b5", + "ds-color-container-ui-primary-default-inverse": "#56bbde", + "ds-color-container-ui-primary-disabled-default": "#a0c9f1", + "ds-color-container-ui-primary-disabled-inverse": "#275b72", + "ds-color-container-ui-primary-focus-default": "#2c67b5", + "ds-color-container-ui-primary-focus-inverse": "#56bbde", + "ds-color-container-ui-primary-hover-default": "#193d73", + "ds-color-container-ui-primary-hover-inverse": "#a8e9f7", + "ds-color-container-ui-secondary-active-default": "#f0f7fd", + "ds-color-container-ui-secondary-active-inverse": "rgba(255, 255, 255, 0.06)", + "ds-color-container-ui-secondary-default-default": "#ffffff", + "ds-color-container-ui-secondary-default-inverse": "rgba(255, 255, 255, 0.03)", + "ds-color-container-ui-secondary-disabled-default": "#f7f7f7", + "ds-color-container-ui-secondary-disabled-inverse": "rgba(255, 255, 255, 0.12)", + "ds-color-container-ui-secondary-focus-default": "#ffffff", + "ds-color-container-ui-secondary-focus-inverse": "rgba(255, 255, 255, 0.03)", + "ds-color-container-ui-secondary-hover-default": "rgba(0, 0, 0, 0.03)", + "ds-color-container-ui-secondary-hover-inverse": "rgba(255, 255, 255, 0.12)", + "ds-color-container-ui-tertiary-active-default": "rgba(0, 0, 0, 0.06)", + "ds-color-container-ui-tertiary-active-inverse": "rgba(255, 255, 255, 0.06)", + "ds-color-container-ui-tertiary-default-default": "rgba(0, 0, 0, 0.03)", + "ds-color-container-ui-tertiary-default-inverse": "rgba(255, 255, 255, 0.12)", + "ds-color-container-ui-tertiary-disabled-default": "rgba(0, 0, 0, 0.03)", + "ds-color-container-ui-tertiary-disabled-inverse": "rgba(255, 255, 255, 0.25)", + "ds-color-container-ui-tertiary-focus-default": "rgba(0, 0, 0, 0.03)", + "ds-color-container-ui-tertiary-focus-inverse": "rgba(255, 255, 255, 0.12)", + "ds-color-container-ui-tertiary-hover-default": "rgba(0, 0, 0, 0.12)", + "ds-color-container-ui-tertiary-hover-inverse": "rgba(255, 255, 255, 0.25)", + "ds-color-icon-primary-default": "#676767", + "ds-color-icon-primary-inverse": "#f7f7f7", + "ds-color-icon-secondary-default": "#7e8894", + "ds-color-icon-secondary-inverse": "#ccd2db", + "ds-color-icon-tertiary-default": "#afb9c6", + "ds-color-icon-tertiary-inverse": "#939fad", + "ds-color-icon-emphasis-default": "#2a2a2a", + "ds-color-icon-emphasis-inverse": "#ffffff", + "ds-color-icon-accent-default": "#a2c270", + "ds-color-icon-accent-inverse": "#badd81", + "ds-color-icon-info-default": "#326aa5", + "ds-color-icon-info-inverse": "#89b2d4", + "ds-color-icon-error-default": "#cc1816", + "ds-color-icon-error-inverse": "#f9aca6", + "ds-color-icon-warning-default": "#c49432", + "ds-color-icon-warning-inverse": "#f2c153", + "ds-color-icon-success-default": "#40a080", + "ds-color-icon-success-inverse": "#8eceb9", + "ds-color-icon-subtle-default": "#a0c9f1", + "ds-color-icon-subtle-inverse": "#326aa5", + "ds-color-icon-ui-primary-default-default": "#2c67b5", + "ds-color-icon-ui-primary-default-inverse": "#56bbde", + "ds-color-icon-ui-primary-hover-default": "#193d73", + "ds-color-icon-ui-primary-hover-inverse": "#a8e9f7", + "ds-color-icon-ui-primary-active-default": "#225296", + "ds-color-icon-ui-primary-active-inverse": "#6ad5ef", + "ds-color-icon-ui-primary-disabled-default": "#adadad", + "ds-color-icon-ui-primary-disabled-inverse": "#7e7e7e", + "ds-color-icon-ui-primary-focus-default": "#2c67b5", + "ds-color-icon-ui-primary-focus-inverse": "#56bbde", + "ds-color-icon-ui-secondary-active-default": "#676767", + "ds-color-icon-ui-secondary-active-inverse": "#c5c5c5", + "ds-color-icon-ui-secondary-default-default": "#7e7e7e", + "ds-color-icon-ui-secondary-default-inverse": "#adadad", + "ds-color-icon-ui-secondary-disabled-default": "#adadad", + "ds-color-icon-ui-secondary-disabled-inverse": "#7e7e7e", + "ds-color-icon-ui-secondary-focus-default": "#7e7e7e", + "ds-color-icon-ui-secondary-focus-inverse": "#adadad", + "ds-color-icon-ui-secondary-hover-default": "#525252", + "ds-color-icon-ui-secondary-hover-inverse": "#dddddd", + "ds-color-icon-brand-red-default": "#d03a08", + "ds-color-icon-brand-red-inverse": "#e9815e", + "ds-color-icon-brand-yellow-default": "#7c7140", + "ds-color-icon-brand-yellow-inverse": "#f9ce06", + "ds-color-icon-brand-pink-default": "#bf475f", + "ds-color-icon-brand-pink-inverse": "#f7738e", + "ds-color-icon-brand-purple-default": "#8d47f0", + "ds-color-icon-brand-purple-inverse": "#b588f5", + "ds-color-icon-brand-lime-default": "#647845", + "ds-color-icon-brand-lime-inverse": "#badd81", + "ds-color-icon-brand-green-default": "#3a7d64", + "ds-color-icon-brand-green-inverse": "#51ae8c", + "ds-color-icon-brand-turquoise-default": "#3d7a7d", + "ds-color-icon-brand-turquoise-inverse": "#7ba5a6", + "ds-color-icon-brand-navy-default": "#265688", + "ds-color-icon-brand-navy-inverse": "#6899c6", + "ds-color-icon-brand-blue-default": "#2c67b5", + "ds-color-icon-brand-blue-inverse": "#5398e6", + "ds-color-icon-brand-cyan-default": "#32718e", + "ds-color-icon-brand-cyan-inverse": "#6ad5ef", + "ds-color-icon-brand-gray-default": "#676767", + "ds-color-icon-brand-gray-inverse": "#c5c5c5", + "ds-color-icon-brand-neutral-default": "#6a717c", + "ds-color-icon-brand-neutral-inverse": "#afb9c6", + "ds-color-icon-disabled-default": "rgba(0, 0, 0, 0.15)", + "ds-color-text-primary-default": "#2a2a2a", + "ds-color-text-primary-inverse": "#ffffff", + "ds-color-text-secondary-default": "#525252", + "ds-color-text-secondary-inverse": "#dddddd", + "ds-color-text-tertiary-default": "#6a717c", + "ds-color-text-tertiary-inverse": "#adadad", + "ds-color-text-error-default": "#cc1816", + "ds-color-text-error-inverse": "#f9aca6", + "ds-color-text-emphasis-default": "#265688", + "ds-color-text-emphasis-inverse": "#cfe0ef", + "ds-color-text-accent-default": "#647845", + "ds-color-text-accent-inverse": "#badd81", + "ds-color-text-info-default": "#326aa5", + "ds-color-text-info-inverse": "#acc9e2", + "ds-color-text-subtle-default": "#32718e", + "ds-color-text-subtle-inverse": "#56bbde", + "ds-color-text-success-default": "#0b6f4d", + "ds-color-text-success-inverse": "#8eceb9", + "ds-color-text-ui-active-default": "#225296", + "ds-color-text-ui-active-inverse": "#6ad5ef", + "ds-color-text-ui-default-default": "#2c67b5", + "ds-color-text-ui-default-inverse": "#56bbde", + "ds-color-text-ui-disabled-default": "#adadad", + "ds-color-text-ui-disabled-inverse": "#7e7e7e", + "ds-color-text-ui-focus-default": "#2c67b5", + "ds-color-text-ui-focus-inverse": "#56bbde", + "ds-color-text-ui-hover-default": "#193d73", + "ds-color-text-ui-hover-inverse": "#a8e9f7", + "ds-color-text-link-default": "#0074c8", + "ds-color-text-link-inverse": "#00cff0", + "ds-color-tier-alaska-mvp-default": "#726e6c", + "ds-color-tier-alaska-mvp-inverse": "#c5c1bf", + "ds-color-tier-alaska-mvpgold-default": "#7f682e", + "ds-color-tier-alaska-mvpgold-inverse": "#c5c1bf", + "ds-color-tier-alaska-mvpgold75k-default": "#7f682e", + "ds-color-tier-alaska-mvpgold75k-inverse": "#c5c1bf", + "ds-color-tier-alaska-mvpgold100k-default": "#7f682e", + "ds-color-tier-alaska-mvpgold100k-inverse": "#c5c1bf", + "ds-color-tier-alaska-lounge": "#01426a", + "ds-color-tier-alaska-loungeplus": "#53b390", + "ds-color-tier-fare-business-default": "#005154", + "ds-color-tier-fare-business-inverse": "#9fbdbe", + "ds-color-tier-fare-economy-default": "#2c67b5", + "ds-color-tier-fare-economy-inverse": "#a0c9f1", + "ds-color-tier-fare-first-class-default": "#002c4e", + "ds-color-tier-fare-first-class-inverse": "#89b2d4", + "ds-color-tier-fare-saver-default": "#4aa2c7", + "ds-color-tier-fare-saver-inverse": "#a8e9f7", + "ds-color-tier-oneworld-emerald": "#139142", + "ds-color-tier-oneworld-sapphire": "#015daa", + "ds-color-tier-oneworld-ruby": "#a41d4a", + "ds-color-ui-default-default": "#0074c8", + "ds-color-ui-default-inverse": "#00cff0", + "ds-color-ui-hover-default": "#054687", + "ds-color-ui-hover-inverse": "#5de3f7", + "ds-color-ui-active-default": "#054687", + "ds-color-ui-active-inverse": "#5de3f7", + "ds-color-ui-disabled-default": "rgba(0, 116, 200, 0.2)", + "ds-color-ui-bkg-default-default": "rgba(0, 0, 0, 0.03)", + "ds-color-ui-bkg-default-inverse": "rgba(255, 255, 255, 0.03)", + "ds-color-ui-bkg-hover-default": "rgba(0, 0, 0, 0.06)", + "ds-color-ui-bkg-hover-inverse": "rgba(255, 255, 255, 0.06)", + "ds-color-utility-blue-default": "#79b2ec", + "ds-color-utility-blue-inverse": "#c9e0f7", + "ds-color-utility-cyan-default": "#6ad5ef", + "ds-color-utility-cyan-inverse": "#a8e9f7", + "ds-color-utility-green-default": "#7ec6ac", + "ds-color-utility-green-inverse": "#addbca", + "ds-color-utility-gray-default": "#adadad", + "ds-color-utility-gray-inverse": "#dddddd", + "ds-color-utility-lime-default": "#badd81", + "ds-color-utility-lime-inverse": "#d8efb4", + "ds-color-utility-navy-default": "#265688", + "ds-color-utility-navy-inverse": "#acc9e2", + "ds-color-utility-neutral-default": "#7e8894", + "ds-color-utility-neutral-inverse": "#ccd2db", + "ds-color-utility-pink-default": "#f7738e", + "ds-color-utility-pink-inverse": "#fcc2ce", + "ds-color-utility-purple-default": "#8d47f0", + "ds-color-utility-purple-inverse": "#ddc9fb", + "ds-color-utility-red-default": "#e35c2f", + "ds-color-utility-red-inverse": "#f0a68d", + "ds-color-utility-turquoise-default": "#5c8f91", + "ds-color-utility-turquoise-inverse": "#9fbdbe", + "ds-color-utility-yellow-default": "#f9ce06", + "ds-color-utility-yellow-inverse": "#ffe87e", + "ds-color-utility-error-default": "#cc1816", + "ds-color-utility-error-inverse": "#f9aca6", + "ds-color-utility-warning-default": "#f2c153", + "ds-color-utility-warning-inverse": "#f2c153", + "ds-color-utility-success-default": "#0b6f4d", + "ds-color-utility-success-inverse": "#8eceb9" +}; + +var styleCss = i$3`.container{display:inline-block;overflow:auto;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([isfullscreen]){position:fixed;top:0;left:0}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2441,7 +3213,6 @@ class AuroDropdown extends r { this.ready = false; this.tabIndex = 0; this.noToggle = false; - this.noFullscreenOnMobile = false; /** * @private @@ -2543,8 +3314,8 @@ class AuroDropdown extends r { type: Function, reflect: false }, - noFullscreenOnMobile: { - type: Boolean, + mobileFullscreenBreakpoint: { + type: String, reflect: true, }, @@ -2600,8 +3371,10 @@ class AuroDropdown extends r { firstUpdated() { this.floater.configure(this); this.bibContent = this.floater.element.bib; - // var(--ds-grid-breakpoint-sm) - this.bibContent.mobileBreakpoint = '576px'; + if (this.mobileFullscreenBreakpoint) { + const breakpointValue = dsVariableFlat[this.mobileFullscreenBreakpoint.replace(/^\-\-/, "")]; + this.bibContent.mobileFullscreenBreakpoint = breakpointValue; + } // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); diff --git a/components/dropdown/docs/partials/api.md b/components/dropdown/docs/partials/api.md index 7a33318f..d836683e 100644 --- a/components/dropdown/docs/partials/api.md +++ b/components/dropdown/docs/partials/api.md @@ -386,7 +386,7 @@ This example demonstrations collapsing the dropdown by clicking a button within ### No Fullscreen Effect on Mobile View -On mobile view, adding the `noFullscreenOnMobile` attribute will prevent the dropdown from switching to fullscreen mode. +On mobile view, adding the `fullscreenOnMobile="false"` attribute will prevent the dropdown from switching to fullscreen mode. This is useful in scenarios where: - Fullscreen mode does not provide significant benefits to the user. diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js index bf1e7c94..8ec326a8 100644 --- a/components/dropdown/src/auro-dropdown.js +++ b/components/dropdown/src/auro-dropdown.js @@ -21,6 +21,8 @@ import styleCss from "./styles/style-css.js"; import colorCss from "./styles/color-css.js"; import tokensCss from "./styles/tokens-css.js"; +import dsVariableFlat from "@aurodesignsystem/design-tokens/dist/tokens/JSONVariablesFlat.json"; + import './auro-dropdownBib.js'; /** @@ -76,7 +78,6 @@ export class AuroDropdown extends LitElement { this.ready = false; this.tabIndex = 0; this.noToggle = false; - this.noFullscreenOnMobile = false; /** * @private @@ -178,8 +179,8 @@ export class AuroDropdown extends LitElement { type: Function, reflect: false }, - noFullscreenOnMobile: { - type: Boolean, + mobileFullscreenBreakpoint: { + type: String, reflect: true, }, @@ -235,8 +236,10 @@ export class AuroDropdown extends LitElement { firstUpdated() { this.floater.configure(this); this.bibContent = this.floater.element.bib; - // var(--ds-grid-breakpoint-sm) - this.bibContent.mobileBreakpoint = '576px'; + if (this.mobileFullscreenBreakpoint) { + const breakpointValue = dsVariableFlat[this.mobileFullscreenBreakpoint.replace(/^\-\-/, "")]; + this.bibContent.mobileFullscreenBreakpoint = breakpointValue; + } // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs index 83bfdd40..cd2eaea1 100644 --- a/components/dropdown/src/floatingUI.mjs +++ b/components/dropdown/src/floatingUI.mjs @@ -10,29 +10,34 @@ export default class AuroFloatingUI { this.keyDownHandler = null; } - position() { + mirrorSize(fullscreen) { // mirror the boxsize from bibSizer const sizerStyle = window.getComputedStyle(this.element.bibSizer); const bibContent = this.element.bib.shadowRoot.querySelector(".container"); - if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width; - if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height; - bibContent.style.maxWidth = sizerStyle.maxWidth; - bibContent.style.maxHeight = sizerStyle.maxHeight; + if (fullscreen) { + bibContent.style.width = '100dvw'; + bibContent.style.height = '100dvh'; + bibContent.style.maxWidth = 'none'; + bibContent.style.maxHeight = 'none'; + } else { + if (sizerStyle.width !== '0px') bibContent.style.width = sizerStyle.width; + if (sizerStyle.height !== '0px') bibContent.style.height = sizerStyle.height; + bibContent.style.maxWidth = sizerStyle.maxWidth; + bibContent.style.maxHeight = sizerStyle.maxHeight; + } + } + position() { // fullscreen on mobileView - if (!this.element.noFullscreenOnMobile && this.element.bib.mobileBreakpoint) { - const mobileQuery = window.matchMedia(`(max-width: ${this.element.bib.mobileBreakpoint})`); - - if (mobileQuery.matches) { - // no need to calc the position in mobile view - this.element.bib.setAttribute('fullscreen', true); - this.element.bib.style.top = "0px"; - this.element.bib.style.left = "0px"; + if (this.element.bib.mobileFullscreenBreakpoint) { + const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; + this.handleMobileFullscreen(isMobile); + if (isMobile) { + this.mirrorSize(true); return; - } else { - this.element.bib.removeAttribute('fullscreen'); } } + this.mirrorSize(false); // Define the middlware for the floater configuration const middleware = [ @@ -61,6 +66,17 @@ export default class AuroFloatingUI { }); } + handleMobileFullscreen(isMobile) { + if (isMobile) { + this.element.bib.setAttribute('isFullscreen', "true"); + // reset the prev position + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + } else { + this.element.bib.removeAttribute('fullscreen'); + } + } + updateState() { const isVisible = this.element.isPopoverVisible; this.element.trigger.setAttribute('aria-expanded', isVisible); diff --git a/components/dropdown/src/styles/bibStyles.scss b/components/dropdown/src/styles/bibStyles.scss index f6ca1989..3af139fb 100644 --- a/components/dropdown/src/styles/bibStyles.scss +++ b/components/dropdown/src/styles/bibStyles.scss @@ -23,17 +23,10 @@ display: none; } -:host([fullscreen]) { +:host([isfullscreen]) { position: fixed; top: 0; left: 0; - width: 100vw; - height: 100vh; - - .container { - width: 100%; - height: 100%; - } } :host([data-show]) { diff --git a/components/dropdown/test/auro-dropdown.test.js b/components/dropdown/test/auro-dropdown.test.js index 3c7624b2..ca179df9 100644 --- a/components/dropdown/test/auro-dropdown.test.js +++ b/components/dropdown/test/auro-dropdown.test.js @@ -1,4 +1,4 @@ -import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing'; +import { fixture, html, expect, oneEvent } from '@open-wc/testing'; import '../src/index.js'; describe('auro-dropdown', () => { From a01e883f06358e413095c9bc739a6d98d7d7654b Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Wed, 27 Nov 2024 16:00:22 -0500 Subject: [PATCH 05/16] ci: add a script to extract breakpoint value in js --- .../apiExamples/customDimensions100.html | 2 +- .../apiExamples/customDimensions300.html | 4 +- components/dropdown/demo/api.md | 2 +- components/dropdown/demo/api.min.js | 759 +----------------- components/dropdown/demo/index.min.js | 759 +----------------- components/dropdown/src/auro-dropdown.js | 4 +- components/dropdown/src/ds-grid-breakpoint.js | 4 + .../src/scripts/extractBreakpointVariable.mjs | 25 + components/dropdown/src/styles/bibStyles.scss | 13 +- 9 files changed, 50 insertions(+), 1522 deletions(-) create mode 100644 components/dropdown/src/ds-grid-breakpoint.js create mode 100644 components/dropdown/src/scripts/extractBreakpointVariable.mjs diff --git a/components/dropdown/apiExamples/customDimensions100.html b/components/dropdown/apiExamples/customDimensions100.html index 5207c01b..b1a802ff 100644 --- a/components/dropdown/apiExamples/customDimensions100.html +++ b/components/dropdown/apiExamples/customDimensions100.html @@ -6,7 +6,7 @@

-
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

diff --git a/components/dropdown/apiExamples/customDimensions300.html b/components/dropdown/apiExamples/customDimensions300.html index 4689df18..2602a462 100644 --- a/components/dropdown/apiExamples/customDimensions300.html +++ b/components/dropdown/apiExamples/customDimensions300.html @@ -1,12 +1,12 @@
-
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

diff --git a/components/dropdown/demo/api.md b/components/dropdown/demo/api.md index da2570e2..c82c965a 100644 --- a/components/dropdown/demo/api.md +++ b/components/dropdown/demo/api.md @@ -923,7 +923,7 @@ This example demonstrations collapsing the dropdown by clicking a button within ```html
- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/components/dropdown/demo/api.md b/components/dropdown/demo/api.md index c6009a2f..38823d06 100644 --- a/components/dropdown/demo/api.md +++ b/components/dropdown/demo/api.md @@ -965,7 +965,7 @@ On mobile view, adding the `mobileFullscreenBreakpoint="{breakpoint-token}"` wil }

- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. @@ -997,7 +997,7 @@ On mobile view, adding the `mobileFullscreenBreakpoint="{breakpoint-token}"` wil }

- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index d6db48fe..83b74392 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -828,7 +828,7 @@ function isOverflowElement(element) { overflowX, overflowY, display - } = getComputedStyle(element); + } = getComputedStyle$1(element); return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display); } function isTableElement(element) { @@ -845,7 +845,7 @@ function isTopLayer(element) { } function isContainingBlock(elementOrCss) { const webkit = isWebKit(); - const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss; + const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value)); @@ -869,7 +869,7 @@ function isWebKit() { function isLastTraversableNode(node) { return ['html', 'body', '#document'].includes(getNodeName(node)); } -function getComputedStyle(element) { +function getComputedStyle$1(element) { return getWindow(element).getComputedStyle(element); } function getNodeScroll(element) { @@ -931,7 +931,7 @@ function getFrameElement(win) { } function getCssDimensions(element) { - const css = getComputedStyle(element); + const css = getComputedStyle$1(element); // In testing environments, the `width` and `height` properties are empty // strings for SVG elements, returning NaN. Fallback to `0` in this case. let width = parseFloat(css.width) || 0; @@ -1036,7 +1036,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar while (currentIFrame && offsetParent && offsetWin !== currentWin) { const iframeScale = getScale(currentIFrame); const iframeRect = currentIFrame.getBoundingClientRect(); - const css = getComputedStyle(currentIFrame); + const css = getComputedStyle$1(currentIFrame); const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x; const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y; x *= iframeScale.x; @@ -1136,7 +1136,7 @@ function getDocumentRect(element) { const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight); let x = -scroll.scrollLeft + getWindowScrollBarX(element); const y = -scroll.scrollTop; - if (getComputedStyle(body).direction === 'rtl') { + if (getComputedStyle$1(body).direction === 'rtl') { x += max(html.clientWidth, body.clientWidth) - width; } return { @@ -1213,7 +1213,7 @@ function hasFixedPositionAncestor(element, stopNode) { if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { return false; } - return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); + return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); } // A "clipping ancestor" is an `overflow` element with the characteristic of @@ -1226,12 +1226,12 @@ function getClippingElementAncestors(element, cache) { } let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body'); let currentContainingBlockComputedStyle = null; - const elementIsFixed = getComputedStyle(element).position === 'fixed'; + const elementIsFixed = getComputedStyle$1(element).position === 'fixed'; let currentNode = elementIsFixed ? getParentNode(element) : element; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block while (isElement(currentNode) && !isLastTraversableNode(currentNode)) { - const computedStyle = getComputedStyle(currentNode); + const computedStyle = getComputedStyle$1(currentNode); const currentNodeIsContaining = isContainingBlock(currentNode); if (!currentNodeIsContaining && computedStyle.position === 'fixed') { currentContainingBlockComputedStyle = null; @@ -1325,11 +1325,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) { } function isStaticPositioned(element) { - return getComputedStyle(element).position === 'static'; + return getComputedStyle$1(element).position === 'static'; } function getTrueOffsetParent(element, polyfill) { - if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') { + if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') { return null; } if (polyfill) { @@ -1390,7 +1390,7 @@ const getElementRects = async function (data) { }; function isRTL(element) { - return getComputedStyle(element).direction === 'rtl'; + return getComputedStyle$1(element).direction === 'rtl'; } const platform = { @@ -2361,11 +2361,6 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -/* eslint-disable */ -var dsVariableFlat = { -'ds-grid-breakpoint-xs': '320px','ds-grid-breakpoint-sm': '576px','ds-grid-breakpoint-md': '768px','ds-grid-breakpoint-lg': '1024px','ds-grid-breakpoint-xl': '1232px' -}; - var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{top:0;left:0;width:100dvw;max-width:none;height:100dvh;max-height:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2431,6 +2426,9 @@ if (!customElements.get("auro-dropdownbib")) { // See LICENSE in the project root for license information. + +const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; + /** * @attr { Boolean } bordered - If declared, applies a border around the trigger slot. * @attr { Boolean } common - If declared, the dropdown will be styled with the common theme. @@ -2445,6 +2443,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib. * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger. * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element. + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. The dropdown will automatically display in fullscreen mode when the screen size is equal to or smaller than the selected breakpoint. * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed. * @slot - Default slot for the popover content. * @slot label - Defines the content of the label. @@ -2643,7 +2642,11 @@ class AuroDropdown extends r { this.floater.configure(this); this.bibContent = this.floater.element.bib; if (this.mobileFullscreenBreakpoint) { - const breakpointValue = dsVariableFlat[this.mobileFullscreenBreakpoint.replace(/^[-][-]/u, "")]; + const docStyle = getComputedStyle(document.documentElement); + const breakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint); + // if (!breakpointValue) { + // console.warn('There is no breakpoint token called', DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint); + // } this.bibContent.mobileFullscreenBreakpoint = breakpointValue; } diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index 23012a43..e9b965ee 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -810,7 +810,7 @@ function isOverflowElement(element) { overflowX, overflowY, display - } = getComputedStyle(element); + } = getComputedStyle$1(element); return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display); } function isTableElement(element) { @@ -827,7 +827,7 @@ function isTopLayer(element) { } function isContainingBlock(elementOrCss) { const webkit = isWebKit(); - const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss; + const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value)); @@ -851,7 +851,7 @@ function isWebKit() { function isLastTraversableNode(node) { return ['html', 'body', '#document'].includes(getNodeName(node)); } -function getComputedStyle(element) { +function getComputedStyle$1(element) { return getWindow(element).getComputedStyle(element); } function getNodeScroll(element) { @@ -913,7 +913,7 @@ function getFrameElement(win) { } function getCssDimensions(element) { - const css = getComputedStyle(element); + const css = getComputedStyle$1(element); // In testing environments, the `width` and `height` properties are empty // strings for SVG elements, returning NaN. Fallback to `0` in this case. let width = parseFloat(css.width) || 0; @@ -1018,7 +1018,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar while (currentIFrame && offsetParent && offsetWin !== currentWin) { const iframeScale = getScale(currentIFrame); const iframeRect = currentIFrame.getBoundingClientRect(); - const css = getComputedStyle(currentIFrame); + const css = getComputedStyle$1(currentIFrame); const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x; const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y; x *= iframeScale.x; @@ -1118,7 +1118,7 @@ function getDocumentRect(element) { const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight); let x = -scroll.scrollLeft + getWindowScrollBarX(element); const y = -scroll.scrollTop; - if (getComputedStyle(body).direction === 'rtl') { + if (getComputedStyle$1(body).direction === 'rtl') { x += max(html.clientWidth, body.clientWidth) - width; } return { @@ -1195,7 +1195,7 @@ function hasFixedPositionAncestor(element, stopNode) { if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { return false; } - return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); + return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); } // A "clipping ancestor" is an `overflow` element with the characteristic of @@ -1208,12 +1208,12 @@ function getClippingElementAncestors(element, cache) { } let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body'); let currentContainingBlockComputedStyle = null; - const elementIsFixed = getComputedStyle(element).position === 'fixed'; + const elementIsFixed = getComputedStyle$1(element).position === 'fixed'; let currentNode = elementIsFixed ? getParentNode(element) : element; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block while (isElement(currentNode) && !isLastTraversableNode(currentNode)) { - const computedStyle = getComputedStyle(currentNode); + const computedStyle = getComputedStyle$1(currentNode); const currentNodeIsContaining = isContainingBlock(currentNode); if (!currentNodeIsContaining && computedStyle.position === 'fixed') { currentContainingBlockComputedStyle = null; @@ -1307,11 +1307,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) { } function isStaticPositioned(element) { - return getComputedStyle(element).position === 'static'; + return getComputedStyle$1(element).position === 'static'; } function getTrueOffsetParent(element, polyfill) { - if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') { + if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') { return null; } if (polyfill) { @@ -1372,7 +1372,7 @@ const getElementRects = async function (data) { }; function isRTL(element) { - return getComputedStyle(element).direction === 'rtl'; + return getComputedStyle$1(element).direction === 'rtl'; } const platform = { @@ -2343,11 +2343,6 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -/* eslint-disable */ -var dsVariableFlat = { -'ds-grid-breakpoint-xs': '320px','ds-grid-breakpoint-sm': '576px','ds-grid-breakpoint-md': '768px','ds-grid-breakpoint-lg': '1024px','ds-grid-breakpoint-xl': '1232px' -}; - var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{top:0;left:0;width:100dvw;max-width:none;height:100dvh;max-height:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2413,6 +2408,9 @@ if (!customElements.get("auro-dropdownbib")) { // See LICENSE in the project root for license information. + +const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; + /** * @attr { Boolean } bordered - If declared, applies a border around the trigger slot. * @attr { Boolean } common - If declared, the dropdown will be styled with the common theme. @@ -2427,6 +2425,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib. * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger. * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element. + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. The dropdown will automatically display in fullscreen mode when the screen size is equal to or smaller than the selected breakpoint. * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed. * @slot - Default slot for the popover content. * @slot label - Defines the content of the label. @@ -2625,7 +2624,11 @@ class AuroDropdown extends r { this.floater.configure(this); this.bibContent = this.floater.element.bib; if (this.mobileFullscreenBreakpoint) { - const breakpointValue = dsVariableFlat[this.mobileFullscreenBreakpoint.replace(/^[-][-]/u, "")]; + const docStyle = getComputedStyle(document.documentElement); + const breakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint); + // if (!breakpointValue) { + // console.warn('There is no breakpoint token called', DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint); + // } this.bibContent.mobileFullscreenBreakpoint = breakpointValue; } diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js index ba0e1baa..d4401309 100644 --- a/components/dropdown/src/auro-dropdown.js +++ b/components/dropdown/src/auro-dropdown.js @@ -21,7 +21,8 @@ import styleCss from "./styles/style-css.js"; import colorCss from "./styles/color-css.js"; import tokensCss from "./styles/tokens-css.js"; -import dsVariableFlat from "./ds-grid-breakpoint.js"; + +const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; import './auro-dropdownBib.js'; @@ -39,6 +40,7 @@ import './auro-dropdownBib.js'; * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib. * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger. * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element. + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. The dropdown will automatically display in fullscreen mode when the screen size is equal to or smaller than the selected breakpoint. * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed. * @slot - Default slot for the popover content. * @slot label - Defines the content of the label. @@ -237,7 +239,11 @@ export class AuroDropdown extends LitElement { this.floater.configure(this); this.bibContent = this.floater.element.bib; if (this.mobileFullscreenBreakpoint) { - const breakpointValue = dsVariableFlat[this.mobileFullscreenBreakpoint.replace(/^[-][-]/u, "")]; + const docStyle = getComputedStyle(document.documentElement); + const breakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint); + // if (!breakpointValue) { + // console.warn('There is no breakpoint token called', DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint); + // } this.bibContent.mobileFullscreenBreakpoint = breakpointValue; } diff --git a/components/dropdown/src/ds-grid-breakpoint.js b/components/dropdown/src/ds-grid-breakpoint.js deleted file mode 100644 index 651f06d1..00000000 --- a/components/dropdown/src/ds-grid-breakpoint.js +++ /dev/null @@ -1,4 +0,0 @@ -/* eslint-disable */ -export default { -'ds-grid-breakpoint-xs': '320px','ds-grid-breakpoint-sm': '576px','ds-grid-breakpoint-md': '768px','ds-grid-breakpoint-lg': '1024px','ds-grid-breakpoint-xl': '1232px' -}; \ No newline at end of file diff --git a/components/dropdown/src/scripts/extractBreakpointVariable.mjs b/components/dropdown/src/scripts/extractBreakpointVariable.mjs deleted file mode 100644 index 754568a0..00000000 --- a/components/dropdown/src/scripts/extractBreakpointVariable.mjs +++ /dev/null @@ -1,25 +0,0 @@ -import { createRequire } from 'module'; -import path from 'path'; -import { writeFile } from 'fs'; -import { fileURLToPath } from 'url'; -const require = createRequire(import.meta.url); - -const dsVariableFlat = require("@aurodesignsystem/design-tokens/dist/tokens/JSONVariablesFlat.json"); - -const breakpoints = Object.keys(dsVariableFlat).filter(v => v.includes('ds-grid-breakpoint')); - -const content = `/* eslint-disable */ -export default { -` + breakpoints.map(k => `'${k}': '${dsVariableFlat[k]}'`) + ` -};`; - -const thisFilePath = fileURLToPath(import.meta.url); -const filePath = path.resolve(path.dirname(thisFilePath), '../ds-grid-breakpoint.js'); -// Write the file -writeFile(filePath, content, (err) => { - if (err) { - console.error(`Error writing file: ${err.message}`); - throw err; - } - console.log(`Successfully wrote breakpoint vriable file to ${filePath}`); -}); From 1f95984c3c8d7e88124e6fb3268079aadf5cc80d Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Mon, 2 Dec 2024 13:53:21 -0500 Subject: [PATCH 10/16] refactor: extract positioning strategy logic into a separate method to improve code organization --- components/dropdown/demo/api.min.js | 21 ++++++++++++++------- components/dropdown/demo/index.min.js | 21 ++++++++++++++------- components/dropdown/docs/partials/api.md | 2 +- components/dropdown/src/floatingUI.mjs | 21 ++++++++++++++------- 4 files changed, 43 insertions(+), 22 deletions(-) diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index 83b74392..9175d3c9 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -1642,16 +1642,23 @@ class AuroFloatingUI { } } - position() { - // fullscreen on mobileView + getPositioningStrategy() { if (this.element.bib.mobileFullscreenBreakpoint) { const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; - this.handleMobileFullscreen(isMobile); - if (isMobile) { - this.mirrorSize(true); - return; - } + return isMobile ? 'fullscreen' : 'floating'; } + return 'floating'; + } + + position() { + const strategy = this.getPositioningStrategy(); + if (strategy === 'fullscreen') { + this.handleMobileFullscreen(true); + this.mirrorSize(true); + return; + } + + this.handleMobileFullscreen(false); this.mirrorSize(false); // Define the middlware for the floater configuration diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index e9b965ee..bc3318f0 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -1624,16 +1624,23 @@ class AuroFloatingUI { } } - position() { - // fullscreen on mobileView + getPositioningStrategy() { if (this.element.bib.mobileFullscreenBreakpoint) { const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; - this.handleMobileFullscreen(isMobile); - if (isMobile) { - this.mirrorSize(true); - return; - } + return isMobile ? 'fullscreen' : 'floating'; } + return 'floating'; + } + + position() { + const strategy = this.getPositioningStrategy(); + if (strategy === 'fullscreen') { + this.handleMobileFullscreen(true); + this.mirrorSize(true); + return; + } + + this.handleMobileFullscreen(false); this.mirrorSize(false); // Define the middlware for the floater configuration diff --git a/components/dropdown/docs/partials/api.md b/components/dropdown/docs/partials/api.md index d103dd70..927aa124 100644 --- a/components/dropdown/docs/partials/api.md +++ b/components/dropdown/docs/partials/api.md @@ -360,7 +360,7 @@ This example demonstrations collapsing the dropdown by clicking a button within ### Other Examples #### Width and Sizing Behavior -- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `bibSizer` part. +- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `bib` part. - **Styling Options:** Only the following styles can be applied to the `bib` part: - `width` diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs index 9c6eb5e8..48cb600f 100644 --- a/components/dropdown/src/floatingUI.mjs +++ b/components/dropdown/src/floatingUI.mjs @@ -31,16 +31,23 @@ export default class AuroFloatingUI { } } - position() { - // fullscreen on mobileView + getPositioningStrategy() { if (this.element.bib.mobileFullscreenBreakpoint) { const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; - this.handleMobileFullscreen(isMobile); - if (isMobile) { - this.mirrorSize(true); - return; - } + return isMobile ? 'fullscreen' : 'floating'; } + return 'floating'; + } + + position() { + const strategy = this.getPositioningStrategy(); + if (strategy === 'fullscreen') { + this.handleMobileFullscreen(true); + this.mirrorSize(true); + return; + } + + this.handleMobileFullscreen(false); this.mirrorSize(false); // Define the middlware for the floater configuration From 70deb790fef131cc0b9aa02176eddd9d5d925242 Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Mon, 2 Dec 2024 15:49:29 -0500 Subject: [PATCH 11/16] refactor: move validation of breakpoint into bib --- components/dropdown/demo/api.min.js | 42 +++++++++++++-------- components/dropdown/demo/index.min.js | 42 +++++++++++++-------- components/dropdown/src/auro-dropdown.js | 18 +++------ components/dropdown/src/auro-dropdownBib.js | 22 ++++++++++- components/dropdown/src/styles/style.scss | 7 ++++ 5 files changed, 84 insertions(+), 47 deletions(-) diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index 9175d3c9..cef531f7 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -2362,7 +2362,7 @@ if (!customElements.get("auro-icon")) { var iconVersion = '6.1.1'; -var styleCss$1 = i$3`:host{position:relative}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1 = i$3`:host{position:relative}:host #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; @@ -2376,10 +2376,20 @@ var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-contain // See LICENSE in the project root for license information. + +const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; +const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ + 'lg', + 'md', + 'sm', + 'xs', +]; + /** * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. + * @attr { String } mobileFullscreenBreakpoint - passed down from dropdown, which the dropdown switches to fullscreen mode on mobile * @csspart bibContainer - Apply css to the bib container. */ @@ -2407,9 +2417,17 @@ class AuroDropdownBib extends r { type: Boolean, reflect: true }, - mobileBreakpoint: { + mobileFullscreenBreakpoint: { type: String, - reflect: false + converter: (value) => { + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + return undefined; + } + const docStyle = getComputedStyle(document.documentElement); + return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + }, + reflect: false, } }; } @@ -2433,9 +2451,6 @@ if (!customElements.get("auro-dropdownbib")) { // See LICENSE in the project root for license information. - -const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; - /** * @attr { Boolean } bordered - If declared, applies a border around the trigger slot. * @attr { Boolean } common - If declared, the dropdown will be styled with the common theme. @@ -2450,7 +2465,7 @@ const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib. * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger. * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element. - * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. The dropdown will automatically display in fullscreen mode when the screen size is equal to or smaller than the selected breakpoint. + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed. * @slot - Default slot for the popover content. * @slot label - Defines the content of the label. @@ -2643,19 +2658,14 @@ class AuroDropdown extends r { updated(changedProperties) { this.floater.handleUpdate(changedProperties); + if (changedProperties.has('mobileFullscreenBreakpoint')) { + this.bibContent.setAttribute('mobileFullscreenBreakpoint', this.mobileFullscreenBreakpoint); + } } firstUpdated() { this.floater.configure(this); this.bibContent = this.floater.element.bib; - if (this.mobileFullscreenBreakpoint) { - const docStyle = getComputedStyle(document.documentElement); - const breakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint); - // if (!breakpointValue) { - // console.warn('There is no breakpoint token called', DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint); - // } - this.bibContent.mobileFullscreenBreakpoint = breakpointValue; - } // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); @@ -2782,7 +2792,7 @@ class AuroDropdown extends r {

-
+
{ + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + return undefined; + } + const docStyle = getComputedStyle(document.documentElement); + return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + }, + reflect: false, } }; } @@ -2415,9 +2433,6 @@ if (!customElements.get("auro-dropdownbib")) { // See LICENSE in the project root for license information. - -const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; - /** * @attr { Boolean } bordered - If declared, applies a border around the trigger slot. * @attr { Boolean } common - If declared, the dropdown will be styled with the common theme. @@ -2432,7 +2447,7 @@ const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib. * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger. * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element. - * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. The dropdown will automatically display in fullscreen mode when the screen size is equal to or smaller than the selected breakpoint. + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed. * @slot - Default slot for the popover content. * @slot label - Defines the content of the label. @@ -2625,19 +2640,14 @@ class AuroDropdown extends r { updated(changedProperties) { this.floater.handleUpdate(changedProperties); + if (changedProperties.has('mobileFullscreenBreakpoint')) { + this.bibContent.setAttribute('mobileFullscreenBreakpoint', this.mobileFullscreenBreakpoint); + } } firstUpdated() { this.floater.configure(this); this.bibContent = this.floater.element.bib; - if (this.mobileFullscreenBreakpoint) { - const docStyle = getComputedStyle(document.documentElement); - const breakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint); - // if (!breakpointValue) { - // console.warn('There is no breakpoint token called', DESIGN_TOKEN_BREAKPOINT_PREFIX + this.mobileFullscreenBreakpoint); - // } - this.bibContent.mobileFullscreenBreakpoint = breakpointValue; - } // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); @@ -2764,7 +2774,7 @@ class AuroDropdown extends r {
-
+
-
+
{ + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + return undefined; + } + const docStyle = getComputedStyle(document.documentElement); + return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + }, + reflect: false, } }; } diff --git a/components/dropdown/src/styles/style.scss b/components/dropdown/src/styles/style.scss index 44f7602c..56d372af 100644 --- a/components/dropdown/src/styles/style.scss +++ b/components/dropdown/src/styles/style.scss @@ -14,6 +14,13 @@ :host { position: relative; + + #bibSizer { + position: absolute; + z-index: -1; + opacity: 0; + pointer-events: none; + } } .label { From da99d01c4a5eb6eae0b0d027389d607f4f00b4a3 Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Mon, 2 Dec 2024 17:45:18 -0500 Subject: [PATCH 12/16] refactor: rename `bib` part to `size` part --- .../apiExamples/customDimensions100.html | 2 +- .../apiExamples/customDimensions300.html | 2 +- components/dropdown/demo/api.md | 144 +++++++++--------- components/dropdown/demo/api.min.js | 29 ++-- components/dropdown/demo/index.min.js | 29 ++-- components/dropdown/docs/partials/api.md | 37 +++-- components/dropdown/src/auro-dropdown.js | 8 +- components/dropdown/src/auro-dropdownBib.js | 5 +- components/dropdown/src/floatingUI.mjs | 12 +- components/dropdown/src/styles/bibStyles.scss | 16 +- components/dropdown/src/styles/style.scss | 12 +- 11 files changed, 141 insertions(+), 155 deletions(-) diff --git a/components/dropdown/apiExamples/customDimensions100.html b/components/dropdown/apiExamples/customDimensions100.html index 621f24a1..befb4568 100644 --- a/components/dropdown/apiExamples/customDimensions100.html +++ b/components/dropdown/apiExamples/customDimensions100.html @@ -1,5 +1,5 @@ +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ Trigger +
+ +
+ +
+ + See code + + + +```html + +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ Trigger +
+ +
+``` + + + ### Slot Examples #### trigger & default @@ -876,9 +944,9 @@ This example demonstrations collapsing the dropdown by clicking a button within #### Width and Sizing Behavior -- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `bib` part. +- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `size` part. -- **Styling Options:** Only the following styles can be applied to the `bib` part: +- **Styling Options:** Only the following styles can be applied to the `size` part: - `width` - `height` - `maxWidth` @@ -891,7 +959,7 @@ This example demonstrations collapsing the dropdown by clicking a button within -
- -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-
-
- Trigger -
- -
- -
- - See code - - - -```html - -
- -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-
-
- Trigger -
- -
-``` - - - #### Truncated trigger component with fixed width `auro-dropdown` trigger component will be truncated if the text is too long than its container width. diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index cef531f7..a2403eae 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -1664,18 +1664,10 @@ class AuroFloatingUI { // Define the middlware for the floater configuration const middleware = [ offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled ]; - // Add flip middleware if flip is enabled - if (this.element.floaterConfig.flip) { - middleware.push(flip()); - } - - // Add autoPlacement middleware if autoPlacement is enabled - if (this.element.floaterConfig.autoPlacement) { - middleware.push(autoPlacement()); - } - // Compute the position of the bib computePosition(this.element.trigger, this.element.bib, { placement: this.element.floaterConfig.placement || 'bottom', @@ -2362,13 +2354,13 @@ if (!customElements.get("auro-icon")) { var iconVersion = '6.1.1'; -var styleCss$1 = i$3`:host{position:relative}:host #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1 = i$3`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{top:0;left:0;width:100dvw;max-width:none;height:100dvh;max-height:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2389,7 +2381,7 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. - * @attr { String } mobileFullscreenBreakpoint - passed down from dropdown, which the dropdown switches to fullscreen mode on mobile + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ @@ -2420,10 +2412,13 @@ class AuroDropdownBib extends r { mobileFullscreenBreakpoint: { type: String, converter: (value) => { + // verify the defined breakpoint is valid and exit out if not const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; if (!validatedValue) { return undefined; } + + // get the pixel value for the defined breakpoint const docStyle = getComputedStyle(document.documentElement); return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); }, @@ -2658,9 +2653,6 @@ class AuroDropdown extends r { updated(changedProperties) { this.floater.handleUpdate(changedProperties); - if (changedProperties.has('mobileFullscreenBreakpoint')) { - this.bibContent.setAttribute('mobileFullscreenBreakpoint', this.mobileFullscreenBreakpoint); - } } firstUpdated() { @@ -2792,13 +2784,14 @@ class AuroDropdown extends r {
-
+
+ ?inset="${this.common || this.inset}" + mobileFullscreenBreakpoint="${this.mobileFullscreenBreakpoint}">
`; diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index 5f9350ac..18c8c7fb 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -1646,18 +1646,10 @@ class AuroFloatingUI { // Define the middlware for the floater configuration const middleware = [ offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled ]; - // Add flip middleware if flip is enabled - if (this.element.floaterConfig.flip) { - middleware.push(flip()); - } - - // Add autoPlacement middleware if autoPlacement is enabled - if (this.element.floaterConfig.autoPlacement) { - middleware.push(autoPlacement()); - } - // Compute the position of the bib computePosition(this.element.trigger, this.element.bib, { placement: this.element.floaterConfig.placement || 'bottom', @@ -2344,13 +2336,13 @@ if (!customElements.get("auro-icon")) { var iconVersion = '6.1.1'; -var styleCss$1 = i$3`:host{position:relative}:host #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1 = i$3`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{top:0;left:0;width:100dvw;max-width:none;height:100dvh;max-height:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2371,7 +2363,7 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. - * @attr { String } mobileFullscreenBreakpoint - passed down from dropdown, which the dropdown switches to fullscreen mode on mobile + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ @@ -2402,10 +2394,13 @@ class AuroDropdownBib extends r { mobileFullscreenBreakpoint: { type: String, converter: (value) => { + // verify the defined breakpoint is valid and exit out if not const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; if (!validatedValue) { return undefined; } + + // get the pixel value for the defined breakpoint const docStyle = getComputedStyle(document.documentElement); return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); }, @@ -2640,9 +2635,6 @@ class AuroDropdown extends r { updated(changedProperties) { this.floater.handleUpdate(changedProperties); - if (changedProperties.has('mobileFullscreenBreakpoint')) { - this.bibContent.setAttribute('mobileFullscreenBreakpoint', this.mobileFullscreenBreakpoint); - } } firstUpdated() { @@ -2774,13 +2766,14 @@ class AuroDropdown extends r {
-
+
+ ?inset="${this.common || this.inset}" + mobileFullscreenBreakpoint="${this.mobileFullscreenBreakpoint}">
`; diff --git a/components/dropdown/docs/partials/api.md b/components/dropdown/docs/partials/api.md index 927aa124..2df64437 100644 --- a/components/dropdown/docs/partials/api.md +++ b/components/dropdown/docs/partials/api.md @@ -257,6 +257,22 @@ In cases where it is desired behavior for `auro-dropdown` to only show, not togg +#### mobileFullscreenBreakpoint + +On mobile view, adding the `mobileFullscreenBreakpoint="{breakpoint-token}"` will switch the dropdown to fullscreen mode. + +
+ + +
+ + See code + + + + + + ### Slot Examples #### trigger & default @@ -360,9 +376,9 @@ This example demonstrations collapsing the dropdown by clicking a button within ### Other Examples #### Width and Sizing Behavior -- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `bib` part. +- **Width:** The `auro-dropdown` component will automatically consume the full width of its parent container. To make it narrower, you can style the `size` part. -- **Styling Options:** Only the following styles can be applied to the `bib` part: +- **Styling Options:** Only the following styles can be applied to the `size` part: - `width` - `height` - `maxWidth` @@ -383,23 +399,6 @@ This example demonstrations collapsing the dropdown by clicking a button within - -### Fullscreen Effect on Mobile View - -On mobile view, adding the `mobileFullscreenBreakpoint="{breakpoint-token}"` will switch the dropdown to fullscreen mode. - -
- - -
- - See code - - - - - - #### Truncated trigger component with fixed width `auro-dropdown` trigger component will be truncated if the text is too long than its container width. diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js index 60cf296d..5be17d07 100644 --- a/components/dropdown/src/auro-dropdown.js +++ b/components/dropdown/src/auro-dropdown.js @@ -230,9 +230,6 @@ export class AuroDropdown extends LitElement { updated(changedProperties) { this.floater.handleUpdate(changedProperties); - if (changedProperties.has('mobileFullscreenBreakpoint')) { - this.bibContent.setAttribute('mobileFullscreenBreakpoint', this.mobileFullscreenBreakpoint); - } } firstUpdated() { @@ -366,13 +363,14 @@ export class AuroDropdown extends LitElement {
-
+
+ ?inset="${this.common || this.inset}" + mobileFullscreenBreakpoint="${this.mobileFullscreenBreakpoint}">
`; diff --git a/components/dropdown/src/auro-dropdownBib.js b/components/dropdown/src/auro-dropdownBib.js index d2e4ff05..a9bf2675 100644 --- a/components/dropdown/src/auro-dropdownBib.js +++ b/components/dropdown/src/auro-dropdownBib.js @@ -23,7 +23,7 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. - * @attr { String } mobileFullscreenBreakpoint - passed down from dropdown, which the dropdown switches to fullscreen mode on mobile + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ @@ -54,10 +54,13 @@ export class AuroDropdownBib extends LitElement { mobileFullscreenBreakpoint: { type: String, converter: (value) => { + // verify the defined breakpoint is valid and exit out if not const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; if (!validatedValue) { return undefined; } + + // get the pixel value for the defined breakpoint const docStyle = getComputedStyle(document.documentElement); return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); }, diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs index 48cb600f..d34f0b31 100644 --- a/components/dropdown/src/floatingUI.mjs +++ b/components/dropdown/src/floatingUI.mjs @@ -53,18 +53,10 @@ export default class AuroFloatingUI { // Define the middlware for the floater configuration const middleware = [ offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled ]; - // Add flip middleware if flip is enabled - if (this.element.floaterConfig.flip) { - middleware.push(flip()); - } - - // Add autoPlacement middleware if autoPlacement is enabled - if (this.element.floaterConfig.autoPlacement) { - middleware.push(autoPlacement()); - } - // Compute the position of the bib computePosition(this.element.trigger, this.element.bib, { placement: this.element.floaterConfig.placement || 'bottom', diff --git a/components/dropdown/src/styles/bibStyles.scss b/components/dropdown/src/styles/bibStyles.scss index 1a21eccf..eec4d8e4 100644 --- a/components/dropdown/src/styles/bibStyles.scss +++ b/components/dropdown/src/styles/bibStyles.scss @@ -30,12 +30,12 @@ left: 0; .container { - top: 0; - left: 0; width: 100dvw; max-width: none; height: 100dvh; max-height: none; + border-radius: unset; + box-shadow: unset; } } @@ -43,8 +43,8 @@ display: block; } -:host([common]), -:host([rounded]) { +:host([common]:not([isfullscreen])), +:host([rounded]:not([isfullscreen])) { .container { border-radius: var(--ds-border-radius, $ds-border-radius); } @@ -56,3 +56,11 @@ padding: var(--ds-size-50, $ds-size-50) var(--ds-size-100, $ds-size-100); } } + +:host([common][isfullscreen]), +:host([rounded][isfullscreen]) { + .container { + border-radius: unset; + box-shadow: unset; + } +} diff --git a/components/dropdown/src/styles/style.scss b/components/dropdown/src/styles/style.scss index 56d372af..ee66c58b 100644 --- a/components/dropdown/src/styles/style.scss +++ b/components/dropdown/src/styles/style.scss @@ -14,13 +14,13 @@ :host { position: relative; +} - #bibSizer { - position: absolute; - z-index: -1; - opacity: 0; - pointer-events: none; - } +#bibSizer { + position: absolute; + z-index: -1; + opacity: 0; + pointer-events: none; } .label { From 5fc375a18df609bb7d25e137cd3e2e3a477f3491 Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Mon, 2 Dec 2024 17:48:49 -0500 Subject: [PATCH 13/16] perf: move `.container` our of `:host` --- components/dropdown/demo/api.min.js | 2 +- components/dropdown/demo/index.min.js | 2 +- components/dropdown/src/styles/bibStyles.scss | 11 +++++------ 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index a2403eae..b2a3ea9a 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -2360,7 +2360,7 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; +var styleCss = i$3`:host{position:absolute;z-index:1;display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index 18c8c7fb..2cbb159a 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -2342,7 +2342,7 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss = i$3`:host{position:absolute;z-index:1;display:none}:host .container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; +var styleCss = i$3`:host{position:absolute;z-index:1;display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; diff --git a/components/dropdown/src/styles/bibStyles.scss b/components/dropdown/src/styles/bibStyles.scss index eec4d8e4..1e18e86b 100644 --- a/components/dropdown/src/styles/bibStyles.scss +++ b/components/dropdown/src/styles/bibStyles.scss @@ -15,13 +15,12 @@ position: absolute; z-index: 1; display: none; +} - .container { - display: inline-block; - overflow: auto; - box-sizing: border-box; - } - +.container { + display: inline-block; + overflow: auto; + box-sizing: border-box; } :host([isfullscreen]) { From 2e7afedb11537fad300fed023f124f80d49f1a87 Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Mon, 2 Dec 2024 19:38:03 -0500 Subject: [PATCH 14/16] refactor: fix for better readability --- components/dropdown/demo/api.min.js | 76 +++++++++++++++------ components/dropdown/demo/index.min.js | 76 +++++++++++++++------ components/dropdown/src/auro-dropdown.js | 7 +- components/dropdown/src/auro-dropdownBib.js | 42 ++++++++---- components/dropdown/src/floatingUI.mjs | 29 +++++--- 5 files changed, 164 insertions(+), 66 deletions(-) diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index b2a3ea9a..e0a6797b 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -1621,6 +1621,18 @@ class AuroFloatingUI { this.keyDownHandler = null; } + /** + * @private + * Adjusts the size of the bib content based on the bibSizer dimensions. + * + * This method retrieves the computed styles of the bibSizer element and applies them to the bib content. + * If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it + * mirrors the width and height from the bibSizer, ensuring that they are not set to zero. + * + * @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode. + * If true, the bib content dimensions are cleared; if false, they are set + * based on the bibSizer's computed styles. + */ mirrorSize(fullscreen) { // mirror the boxsize from bibSizer const sizerStyle = window.getComputedStyle(this.element.bibSizer); @@ -1643,22 +1655,25 @@ class AuroFloatingUI { } getPositioningStrategy() { + let strategy = 'floating'; if (this.element.bib.mobileFullscreenBreakpoint) { const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; - return isMobile ? 'fullscreen' : 'floating'; + if (isMobile) { + strategy = 'fullscreen'; + } } - return 'floating'; + return strategy; } position() { const strategy = this.getPositioningStrategy(); if (strategy === 'fullscreen') { - this.handleMobileFullscreen(true); + this.configureBibFullscreen(true); this.mirrorSize(true); return; } - this.handleMobileFullscreen(false); + this.configureBibFullscreen(false); this.mirrorSize(false); // Define the middlware for the floater configuration @@ -1680,7 +1695,7 @@ class AuroFloatingUI { }); } - handleMobileFullscreen(isMobile) { + configureBibFullscreen(isMobile) { if (isMobile) { this.element.bib.setAttribute('isFullscreen', "true"); // reset the prev position @@ -1917,11 +1932,9 @@ class AuroFloatingUI { configure(elem) { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); - this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); this.element.bib = this.element.shadowRoot.querySelector('#bib'); this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); - - document.body.append(this.element.bib); + this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); this.handleTriggerTabIndex(); @@ -2381,12 +2394,21 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. - * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. + * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ class AuroDropdownBib extends r { + constructor() { + super(); + + /** + * @private + */ + this._mobileBreakpointValue = undefined; + } + static get styles() { return [ styleCss, @@ -2411,22 +2433,29 @@ class AuroDropdownBib extends r { }, mobileFullscreenBreakpoint: { type: String, - converter: (value) => { - // verify the defined breakpoint is valid and exit out if not - const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; - if (!validatedValue) { - return undefined; - } - - // get the pixel value for the defined breakpoint - const docStyle = getComputedStyle(document.documentElement); - return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); - }, + converter: AuroDropdownBib.getBreakpointValue, reflect: false, } }; } + set mobileFullscreenBreakpoint(value) { + // verify the defined breakpoint is valid and exit out if not + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + this._mobileBreakpointValue = undefined; + return; + } + + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + } + + get mobileFullscreenBreakpoint() { + return this._mobileBreakpointValue; + } + // function that renders the HTML and CSS into the scope of the component render() { return u$1` @@ -2653,6 +2682,10 @@ class AuroDropdown extends r { updated(changedProperties) { this.floater.handleUpdate(changedProperties); + + if (changedProperties.has('mobileFullscreenBreakpoint')) { + this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint; + } } firstUpdated() { @@ -2790,8 +2823,7 @@ class AuroDropdown extends r { role="tooltip" ?common="${this.common}" ?rounded="${this.common || this.rounded}" - ?inset="${this.common || this.inset}" - mobileFullscreenBreakpoint="${this.mobileFullscreenBreakpoint}"> + ?inset="${this.common || this.inset}">
`; diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index 2cbb159a..ffcc0220 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -1603,6 +1603,18 @@ class AuroFloatingUI { this.keyDownHandler = null; } + /** + * @private + * Adjusts the size of the bib content based on the bibSizer dimensions. + * + * This method retrieves the computed styles of the bibSizer element and applies them to the bib content. + * If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it + * mirrors the width and height from the bibSizer, ensuring that they are not set to zero. + * + * @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode. + * If true, the bib content dimensions are cleared; if false, they are set + * based on the bibSizer's computed styles. + */ mirrorSize(fullscreen) { // mirror the boxsize from bibSizer const sizerStyle = window.getComputedStyle(this.element.bibSizer); @@ -1625,22 +1637,25 @@ class AuroFloatingUI { } getPositioningStrategy() { + let strategy = 'floating'; if (this.element.bib.mobileFullscreenBreakpoint) { const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; - return isMobile ? 'fullscreen' : 'floating'; + if (isMobile) { + strategy = 'fullscreen'; + } } - return 'floating'; + return strategy; } position() { const strategy = this.getPositioningStrategy(); if (strategy === 'fullscreen') { - this.handleMobileFullscreen(true); + this.configureBibFullscreen(true); this.mirrorSize(true); return; } - this.handleMobileFullscreen(false); + this.configureBibFullscreen(false); this.mirrorSize(false); // Define the middlware for the floater configuration @@ -1662,7 +1677,7 @@ class AuroFloatingUI { }); } - handleMobileFullscreen(isMobile) { + configureBibFullscreen(isMobile) { if (isMobile) { this.element.bib.setAttribute('isFullscreen', "true"); // reset the prev position @@ -1899,11 +1914,9 @@ class AuroFloatingUI { configure(elem) { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); - this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); this.element.bib = this.element.shadowRoot.querySelector('#bib'); this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); - - document.body.append(this.element.bib); + this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); this.handleTriggerTabIndex(); @@ -2363,12 +2376,21 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. - * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. + * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ class AuroDropdownBib extends r { + constructor() { + super(); + + /** + * @private + */ + this._mobileBreakpointValue = undefined; + } + static get styles() { return [ styleCss, @@ -2393,22 +2415,29 @@ class AuroDropdownBib extends r { }, mobileFullscreenBreakpoint: { type: String, - converter: (value) => { - // verify the defined breakpoint is valid and exit out if not - const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; - if (!validatedValue) { - return undefined; - } - - // get the pixel value for the defined breakpoint - const docStyle = getComputedStyle(document.documentElement); - return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); - }, + converter: AuroDropdownBib.getBreakpointValue, reflect: false, } }; } + set mobileFullscreenBreakpoint(value) { + // verify the defined breakpoint is valid and exit out if not + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + this._mobileBreakpointValue = undefined; + return; + } + + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + } + + get mobileFullscreenBreakpoint() { + return this._mobileBreakpointValue; + } + // function that renders the HTML and CSS into the scope of the component render() { return u$1` @@ -2635,6 +2664,10 @@ class AuroDropdown extends r { updated(changedProperties) { this.floater.handleUpdate(changedProperties); + + if (changedProperties.has('mobileFullscreenBreakpoint')) { + this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint; + } } firstUpdated() { @@ -2772,8 +2805,7 @@ class AuroDropdown extends r { role="tooltip" ?common="${this.common}" ?rounded="${this.common || this.rounded}" - ?inset="${this.common || this.inset}" - mobileFullscreenBreakpoint="${this.mobileFullscreenBreakpoint}"> + ?inset="${this.common || this.inset}">
`; diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js index 5be17d07..68b70967 100644 --- a/components/dropdown/src/auro-dropdown.js +++ b/components/dropdown/src/auro-dropdown.js @@ -230,6 +230,10 @@ export class AuroDropdown extends LitElement { updated(changedProperties) { this.floater.handleUpdate(changedProperties); + + if (changedProperties.has('mobileFullscreenBreakpoint')) { + this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint; + } } firstUpdated() { @@ -369,8 +373,7 @@ export class AuroDropdown extends LitElement { role="tooltip" ?common="${this.common}" ?rounded="${this.common || this.rounded}" - ?inset="${this.common || this.inset}" - mobileFullscreenBreakpoint="${this.mobileFullscreenBreakpoint}"> + ?inset="${this.common || this.inset}">
`; diff --git a/components/dropdown/src/auro-dropdownBib.js b/components/dropdown/src/auro-dropdownBib.js index a9bf2675..594c2de1 100644 --- a/components/dropdown/src/auro-dropdownBib.js +++ b/components/dropdown/src/auro-dropdownBib.js @@ -3,6 +3,8 @@ // --------------------------------------------------------------------- +/* eslint-disable no-underscore-dangle */ + import { html } from "lit/static-html.js"; import { LitElement } from "lit"; @@ -23,12 +25,21 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. - * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. + * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ export class AuroDropdownBib extends LitElement { + constructor() { + super(); + + /** + * @private + */ + this._mobileBreakpointValue = undefined; + } + static get styles() { return [ styleCss, @@ -53,22 +64,29 @@ export class AuroDropdownBib extends LitElement { }, mobileFullscreenBreakpoint: { type: String, - converter: (value) => { - // verify the defined breakpoint is valid and exit out if not - const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; - if (!validatedValue) { - return undefined; - } - - // get the pixel value for the defined breakpoint - const docStyle = getComputedStyle(document.documentElement); - return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); - }, + converter: AuroDropdownBib.getBreakpointValue, reflect: false, } }; } + set mobileFullscreenBreakpoint(value) { + // verify the defined breakpoint is valid and exit out if not + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + this._mobileBreakpointValue = undefined; + return; + } + + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + } + + get mobileFullscreenBreakpoint() { + return this._mobileBreakpointValue; + } + // function that renders the HTML and CSS into the scope of the component render() { return html` diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs index d34f0b31..65c090cf 100644 --- a/components/dropdown/src/floatingUI.mjs +++ b/components/dropdown/src/floatingUI.mjs @@ -10,6 +10,18 @@ export default class AuroFloatingUI { this.keyDownHandler = null; } + /** + * @private + * Adjusts the size of the bib content based on the bibSizer dimensions. + * + * This method retrieves the computed styles of the bibSizer element and applies them to the bib content. + * If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it + * mirrors the width and height from the bibSizer, ensuring that they are not set to zero. + * + * @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode. + * If true, the bib content dimensions are cleared; if false, they are set + * based on the bibSizer's computed styles. + */ mirrorSize(fullscreen) { // mirror the boxsize from bibSizer const sizerStyle = window.getComputedStyle(this.element.bibSizer); @@ -32,22 +44,25 @@ export default class AuroFloatingUI { } getPositioningStrategy() { + let strategy = 'floating'; if (this.element.bib.mobileFullscreenBreakpoint) { const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; - return isMobile ? 'fullscreen' : 'floating'; + if (isMobile) { + strategy = 'fullscreen'; + } } - return 'floating'; + return strategy; } position() { const strategy = this.getPositioningStrategy(); if (strategy === 'fullscreen') { - this.handleMobileFullscreen(true); + this.configureBibFullscreen(true); this.mirrorSize(true); return; } - this.handleMobileFullscreen(false); + this.configureBibFullscreen(false); this.mirrorSize(false); // Define the middlware for the floater configuration @@ -69,7 +84,7 @@ export default class AuroFloatingUI { }); } - handleMobileFullscreen(isMobile) { + configureBibFullscreen(isMobile) { if (isMobile) { this.element.bib.setAttribute('isFullscreen', "true"); // reset the prev position @@ -307,11 +322,9 @@ export default class AuroFloatingUI { configure(elem) { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); - this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); this.element.bib = this.element.shadowRoot.querySelector('#bib'); this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); - - document.body.append(this.element.bib); + this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); this.handleTriggerTabIndex(); From 4f3807b6cf30b29406a8adfe5f6672257dc2c792 Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Mon, 2 Dec 2024 20:16:08 -0500 Subject: [PATCH 15/16] refactor: add some refactoring related to JSDoc --- components/dropdown/demo/api.min.js | 84 +++++++++++++-------- components/dropdown/demo/index.min.js | 84 +++++++++++++-------- components/dropdown/src/auro-dropdownBib.js | 14 +--- components/dropdown/src/floatingUI.mjs | 70 +++++++++++------ 4 files changed, 156 insertions(+), 96 deletions(-) diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index e0a6797b..10ea462f 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -1654,6 +1654,15 @@ class AuroFloatingUI { } } + /** + * @private + * Determines the positioning strategy based on the current viewport size and mobile breakpoint. + * + * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint + * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'. + * + * @returns {String} The positioning strategy, either 'fullscreen' or 'floating'. + */ getPositioningStrategy() { let strategy = 'floating'; if (this.element.bib.mobileFullscreenBreakpoint) { @@ -1665,36 +1674,53 @@ class AuroFloatingUI { return strategy; } + /** + * @private + * Positions the bib element based on the current configuration and positioning strategy. + * + * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly. + * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element, + * and applies the calculated position to the bib's style. + */ position() { const strategy = this.getPositioningStrategy(); if (strategy === 'fullscreen') { this.configureBibFullscreen(true); this.mirrorSize(true); - return; - } - - this.configureBibFullscreen(false); - this.mirrorSize(false); - - // Define the middlware for the floater configuration - const middleware = [ - offset(this.element.floaterConfig.offset || 0), - ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled - ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled - ]; - - // Compute the position of the bib - computePosition(this.element.trigger, this.element.bib, { - placement: this.element.floaterConfig.placement || 'bottom', - middleware: middleware || [] - }).then(({x, y}) => { // eslint-disable-line id-length - Object.assign(this.element.bib.style, { - left: `${x}px`, - top: `${y}px`, + } else { + this.configureBibFullscreen(false); + this.mirrorSize(false); + + // Define the middlware for the floater configuration + const middleware = [ + offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled + ]; + + // Compute the position of the bib + computePosition(this.element.trigger, this.element.bib, { + placement: this.element.floaterConfig.placement || 'bottom', + middleware: middleware || [] + }).then(({x, y}) => { // eslint-disable-line id-length + Object.assign(this.element.bib.style, { + left: `${x}px`, + top: `${y}px`, + }); }); - }); + } } + /** + * @private + * Configures the bib element for fullscreen mode based on the mobile status. + * + * This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true, + * and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the + * 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode. + * + * @param {boolean} isMobile - A flag indicating whether the current device is mobile. + */ configureBibFullscreen(isMobile) { if (isMobile) { this.element.bib.setAttribute('isFullscreen', "true"); @@ -2431,11 +2457,6 @@ class AuroDropdownBib extends r { type: Boolean, reflect: true }, - mobileFullscreenBreakpoint: { - type: String, - converter: AuroDropdownBib.getBreakpointValue, - reflect: false, - } }; } @@ -2444,12 +2465,11 @@ class AuroDropdownBib extends r { const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; if (!validatedValue) { this._mobileBreakpointValue = undefined; - return; + } else { + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); } - - // get the pixel value for the defined breakpoint - const docStyle = getComputedStyle(document.documentElement); - this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); } get mobileFullscreenBreakpoint() { diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index ffcc0220..78c79ad0 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -1636,6 +1636,15 @@ class AuroFloatingUI { } } + /** + * @private + * Determines the positioning strategy based on the current viewport size and mobile breakpoint. + * + * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint + * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'. + * + * @returns {String} The positioning strategy, either 'fullscreen' or 'floating'. + */ getPositioningStrategy() { let strategy = 'floating'; if (this.element.bib.mobileFullscreenBreakpoint) { @@ -1647,36 +1656,53 @@ class AuroFloatingUI { return strategy; } + /** + * @private + * Positions the bib element based on the current configuration and positioning strategy. + * + * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly. + * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element, + * and applies the calculated position to the bib's style. + */ position() { const strategy = this.getPositioningStrategy(); if (strategy === 'fullscreen') { this.configureBibFullscreen(true); this.mirrorSize(true); - return; - } - - this.configureBibFullscreen(false); - this.mirrorSize(false); - - // Define the middlware for the floater configuration - const middleware = [ - offset(this.element.floaterConfig.offset || 0), - ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled - ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled - ]; - - // Compute the position of the bib - computePosition(this.element.trigger, this.element.bib, { - placement: this.element.floaterConfig.placement || 'bottom', - middleware: middleware || [] - }).then(({x, y}) => { // eslint-disable-line id-length - Object.assign(this.element.bib.style, { - left: `${x}px`, - top: `${y}px`, + } else { + this.configureBibFullscreen(false); + this.mirrorSize(false); + + // Define the middlware for the floater configuration + const middleware = [ + offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled + ]; + + // Compute the position of the bib + computePosition(this.element.trigger, this.element.bib, { + placement: this.element.floaterConfig.placement || 'bottom', + middleware: middleware || [] + }).then(({x, y}) => { // eslint-disable-line id-length + Object.assign(this.element.bib.style, { + left: `${x}px`, + top: `${y}px`, + }); }); - }); + } } + /** + * @private + * Configures the bib element for fullscreen mode based on the mobile status. + * + * This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true, + * and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the + * 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode. + * + * @param {boolean} isMobile - A flag indicating whether the current device is mobile. + */ configureBibFullscreen(isMobile) { if (isMobile) { this.element.bib.setAttribute('isFullscreen', "true"); @@ -2413,11 +2439,6 @@ class AuroDropdownBib extends r { type: Boolean, reflect: true }, - mobileFullscreenBreakpoint: { - type: String, - converter: AuroDropdownBib.getBreakpointValue, - reflect: false, - } }; } @@ -2426,12 +2447,11 @@ class AuroDropdownBib extends r { const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; if (!validatedValue) { this._mobileBreakpointValue = undefined; - return; + } else { + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); } - - // get the pixel value for the defined breakpoint - const docStyle = getComputedStyle(document.documentElement); - this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); } get mobileFullscreenBreakpoint() { diff --git a/components/dropdown/src/auro-dropdownBib.js b/components/dropdown/src/auro-dropdownBib.js index 594c2de1..91724e78 100644 --- a/components/dropdown/src/auro-dropdownBib.js +++ b/components/dropdown/src/auro-dropdownBib.js @@ -62,11 +62,6 @@ export class AuroDropdownBib extends LitElement { type: Boolean, reflect: true }, - mobileFullscreenBreakpoint: { - type: String, - converter: AuroDropdownBib.getBreakpointValue, - reflect: false, - } }; } @@ -75,12 +70,11 @@ export class AuroDropdownBib extends LitElement { const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; if (!validatedValue) { this._mobileBreakpointValue = undefined; - return; + } else { + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); } - - // get the pixel value for the defined breakpoint - const docStyle = getComputedStyle(document.documentElement); - this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); } get mobileFullscreenBreakpoint() { diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs index 65c090cf..92e884a2 100644 --- a/components/dropdown/src/floatingUI.mjs +++ b/components/dropdown/src/floatingUI.mjs @@ -43,6 +43,15 @@ export default class AuroFloatingUI { } } + /** + * @private + * Determines the positioning strategy based on the current viewport size and mobile breakpoint. + * + * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint + * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'. + * + * @returns {String} The positioning strategy, either 'fullscreen' or 'floating'. + */ getPositioningStrategy() { let strategy = 'floating'; if (this.element.bib.mobileFullscreenBreakpoint) { @@ -54,36 +63,53 @@ export default class AuroFloatingUI { return strategy; } + /** + * @private + * Positions the bib element based on the current configuration and positioning strategy. + * + * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly. + * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element, + * and applies the calculated position to the bib's style. + */ position() { const strategy = this.getPositioningStrategy(); if (strategy === 'fullscreen') { this.configureBibFullscreen(true); this.mirrorSize(true); - return; - } - - this.configureBibFullscreen(false); - this.mirrorSize(false); - - // Define the middlware for the floater configuration - const middleware = [ - offset(this.element.floaterConfig.offset || 0), - ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled - ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled - ]; - - // Compute the position of the bib - computePosition(this.element.trigger, this.element.bib, { - placement: this.element.floaterConfig.placement || 'bottom', - middleware: middleware || [] - }).then(({x, y}) => { // eslint-disable-line id-length - Object.assign(this.element.bib.style, { - left: `${x}px`, - top: `${y}px`, + } else { + this.configureBibFullscreen(false); + this.mirrorSize(false); + + // Define the middlware for the floater configuration + const middleware = [ + offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled + ]; + + // Compute the position of the bib + computePosition(this.element.trigger, this.element.bib, { + placement: this.element.floaterConfig.placement || 'bottom', + middleware: middleware || [] + }).then(({x, y}) => { // eslint-disable-line id-length + Object.assign(this.element.bib.style, { + left: `${x}px`, + top: `${y}px`, + }); }); - }); + } } + /** + * @private + * Configures the bib element for fullscreen mode based on the mobile status. + * + * This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true, + * and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the + * 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode. + * + * @param {boolean} isMobile - A flag indicating whether the current device is mobile. + */ configureBibFullscreen(isMobile) { if (isMobile) { this.element.bib.setAttribute('isFullscreen', "true"); From faa600575688372c098d0069db51987928f6c862 Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Mon, 2 Dec 2024 20:24:29 -0500 Subject: [PATCH 16/16] fix: add back `document.body.append` for the floating bib --- components/combobox/demo/api.min.js | 208 ++++++++++++++++----- components/combobox/demo/index.min.js | 208 ++++++++++++++++----- components/datepicker/demo/api.min.js | 228 ++++++++++++++++++------ components/datepicker/demo/index.min.js | 228 ++++++++++++++++++------ components/dropdown/demo/api.min.js | 2 + components/dropdown/demo/index.min.js | 2 + components/dropdown/src/floatingUI.mjs | 2 + components/select/demo/api.min.js | 208 ++++++++++++++++----- components/select/demo/index.min.js | 208 ++++++++++++++++----- 9 files changed, 1034 insertions(+), 260 deletions(-) diff --git a/components/combobox/demo/api.min.js b/components/combobox/demo/api.min.js index 7c39d703..ab50c665 100644 --- a/components/combobox/demo/api.min.js +++ b/components/combobox/demo/api.min.js @@ -1370,7 +1370,7 @@ function isOverflowElement(element) { overflowX, overflowY, display - } = getComputedStyle(element); + } = getComputedStyle$1(element); return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display); } function isTableElement(element) { @@ -1387,7 +1387,7 @@ function isTopLayer(element) { } function isContainingBlock(elementOrCss) { const webkit = isWebKit(); - const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss; + const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value)); @@ -1411,7 +1411,7 @@ function isWebKit() { function isLastTraversableNode(node) { return ['html', 'body', '#document'].includes(getNodeName(node)); } -function getComputedStyle(element) { +function getComputedStyle$1(element) { return getWindow(element).getComputedStyle(element); } function getNodeScroll(element) { @@ -1473,7 +1473,7 @@ function getFrameElement(win) { } function getCssDimensions(element) { - const css = getComputedStyle(element); + const css = getComputedStyle$1(element); // In testing environments, the `width` and `height` properties are empty // strings for SVG elements, returning NaN. Fallback to `0` in this case. let width = parseFloat(css.width) || 0; @@ -1578,7 +1578,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar while (currentIFrame && offsetParent && offsetWin !== currentWin) { const iframeScale = getScale(currentIFrame); const iframeRect = currentIFrame.getBoundingClientRect(); - const css = getComputedStyle(currentIFrame); + const css = getComputedStyle$1(currentIFrame); const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x; const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y; x *= iframeScale.x; @@ -1678,7 +1678,7 @@ function getDocumentRect(element) { const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight); let x = -scroll.scrollLeft + getWindowScrollBarX(element); const y = -scroll.scrollTop; - if (getComputedStyle(body).direction === 'rtl') { + if (getComputedStyle$1(body).direction === 'rtl') { x += max(html.clientWidth, body.clientWidth) - width; } return { @@ -1755,7 +1755,7 @@ function hasFixedPositionAncestor(element, stopNode) { if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { return false; } - return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); + return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); } // A "clipping ancestor" is an `overflow` element with the characteristic of @@ -1768,12 +1768,12 @@ function getClippingElementAncestors(element, cache) { } let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body'); let currentContainingBlockComputedStyle = null; - const elementIsFixed = getComputedStyle(element).position === 'fixed'; + const elementIsFixed = getComputedStyle$1(element).position === 'fixed'; let currentNode = elementIsFixed ? getParentNode(element) : element; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block while (isElement(currentNode) && !isLastTraversableNode(currentNode)) { - const computedStyle = getComputedStyle(currentNode); + const computedStyle = getComputedStyle$1(currentNode); const currentNodeIsContaining = isContainingBlock(currentNode); if (!currentNodeIsContaining && computedStyle.position === 'fixed') { currentContainingBlockComputedStyle = null; @@ -1867,11 +1867,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) { } function isStaticPositioned(element) { - return getComputedStyle(element).position === 'static'; + return getComputedStyle$1(element).position === 'static'; } function getTrueOffsetParent(element, polyfill) { - if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') { + if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') { return null; } if (polyfill) { @@ -1932,7 +1932,7 @@ const getElementRects = async function (data) { }; function isRTL(element) { - return getComputedStyle(element).direction === 'rtl'; + return getComputedStyle$1(element).direction === 'rtl'; } const platform = { @@ -2163,32 +2163,115 @@ class AuroFloatingUI { this.keyDownHandler = null; } - position() { - // Define the middlware for the floater configuration - const middleware = [ - offset(this.element.floaterConfig.offset || 0), - ]; - - // Add flip middleware if flip is enabled - if (this.element.floaterConfig.flip) { - middleware.push(flip()); + /** + * @private + * Adjusts the size of the bib content based on the bibSizer dimensions. + * + * This method retrieves the computed styles of the bibSizer element and applies them to the bib content. + * If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it + * mirrors the width and height from the bibSizer, ensuring that they are not set to zero. + * + * @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode. + * If true, the bib content dimensions are cleared; if false, they are set + * based on the bibSizer's computed styles. + */ + mirrorSize(fullscreen) { + // mirror the boxsize from bibSizer + const sizerStyle = window.getComputedStyle(this.element.bibSizer); + const bibContent = this.element.bib.shadowRoot.querySelector(".container"); + if (fullscreen) { + bibContent.style.width = ''; + bibContent.style.height = ''; + bibContent.style.maxWidth = ''; + bibContent.style.maxHeight = ''; + } else { + if (sizerStyle.width !== '0px') { + bibContent.style.width = sizerStyle.width; + } + if (sizerStyle.height !== '0px') { + bibContent.style.height = sizerStyle.height; + } + bibContent.style.maxWidth = sizerStyle.maxWidth; + bibContent.style.maxHeight = sizerStyle.maxHeight; } + } - // Add autoPlacement middleware if autoPlacement is enabled - if (this.element.floaterConfig.autoPlacement) { - middleware.push(autoPlacement()); + /** + * @private + * Determines the positioning strategy based on the current viewport size and mobile breakpoint. + * + * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint + * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'. + * + * @returns {String} The positioning strategy, either 'fullscreen' or 'floating'. + */ + getPositioningStrategy() { + let strategy = 'floating'; + if (this.element.bib.mobileFullscreenBreakpoint) { + const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; + if (isMobile) { + strategy = 'fullscreen'; + } } + return strategy; + } - // Compute the position of the bib - computePosition(this.element.trigger, this.element.bib, { - placement: this.element.floaterConfig.placement || 'bottom', - middleware: middleware || [] - }).then(({x, y}) => { // eslint-disable-line id-length - Object.assign(this.element.bib.style, { - left: `${x}px`, - top: `${y}px`, + /** + * @private + * Positions the bib element based on the current configuration and positioning strategy. + * + * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly. + * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element, + * and applies the calculated position to the bib's style. + */ + position() { + const strategy = this.getPositioningStrategy(); + if (strategy === 'fullscreen') { + this.configureBibFullscreen(true); + this.mirrorSize(true); + } else { + this.configureBibFullscreen(false); + this.mirrorSize(false); + + // Define the middlware for the floater configuration + const middleware = [ + offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled + ]; + + // Compute the position of the bib + computePosition(this.element.trigger, this.element.bib, { + placement: this.element.floaterConfig.placement || 'bottom', + middleware: middleware || [] + }).then(({x, y}) => { // eslint-disable-line id-length + Object.assign(this.element.bib.style, { + left: `${x}px`, + top: `${y}px`, + }); }); - }); + } + } + + /** + * @private + * Configures the bib element for fullscreen mode based on the mobile status. + * + * This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true, + * and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the + * 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode. + * + * @param {boolean} isMobile - A flag indicating whether the current device is mobile. + */ + configureBibFullscreen(isMobile) { + if (isMobile) { + this.element.bib.setAttribute('isFullscreen', "true"); + // reset the prev position + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + } else { + this.element.bib.removeAttribute('isFullscreen'); + } } updateState() { @@ -2418,8 +2501,11 @@ class AuroFloatingUI { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); this.element.bib = this.element.shadowRoot.querySelector('#bib'); + this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); + document.body.append(this.element.bib); + this.handleTriggerTabIndex(); this.element.trigger.addEventListener('keydown', (event) => this.handleEvent(event)); @@ -2851,13 +2937,13 @@ if (!customElements.get("auro-icon")) { var iconVersion$2 = '6.1.1'; -var styleCss$1$2 = i$3$1`:host{position:relative}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$2 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$2 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; var tokensCss$5 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss$5 = i$3$1`.container{display:inline-block;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var styleCss$5 = i$3$1`:host{position:absolute;z-index:1;display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; var colorCss$5 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2865,15 +2951,34 @@ var colorCss$5 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-con // See LICENSE in the project root for license information. + +const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; +const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ + 'lg', + 'md', + 'sm', + 'xs', +]; + /** * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. + * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ class AuroDropdownBib extends r$5 { + constructor() { + super(); + + /** + * @private + */ + this._mobileBreakpointValue = undefined; + } + static get styles() { return [ styleCss$5, @@ -2895,10 +3000,26 @@ class AuroDropdownBib extends r$5 { rounded: { type: Boolean, reflect: true - } + }, }; } + set mobileFullscreenBreakpoint(value) { + // verify the defined breakpoint is valid and exit out if not + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + this._mobileBreakpointValue = undefined; + } else { + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + } + } + + get mobileFullscreenBreakpoint() { + return this._mobileBreakpointValue; + } + // function that renders the HTML and CSS into the scope of the component render() { return u$1$1` @@ -2932,6 +3053,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib. * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger. * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element. + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed. * @slot - Default slot for the popover content. * @slot label - Defines the content of the label. @@ -3072,6 +3194,10 @@ class AuroDropdown extends r$5 { type: Function, reflect: false }, + mobileFullscreenBreakpoint: { + type: String, + reflect: true, + }, /** * @private @@ -3120,18 +3246,19 @@ class AuroDropdown extends r$5 { updated(changedProperties) { this.floater.handleUpdate(changedProperties); + + if (changedProperties.has('mobileFullscreenBreakpoint')) { + this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint; + } } firstUpdated() { this.floater.configure(this); + this.bibContent = this.floater.element.bib; // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); - this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); - - document.body.append(this.bibContent); - this.notifyReady(); } @@ -3254,6 +3381,7 @@ class AuroDropdown extends r$5 {
+
(css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value)); @@ -1322,7 +1322,7 @@ function isWebKit() { function isLastTraversableNode(node) { return ['html', 'body', '#document'].includes(getNodeName(node)); } -function getComputedStyle(element) { +function getComputedStyle$1(element) { return getWindow(element).getComputedStyle(element); } function getNodeScroll(element) { @@ -1384,7 +1384,7 @@ function getFrameElement(win) { } function getCssDimensions(element) { - const css = getComputedStyle(element); + const css = getComputedStyle$1(element); // In testing environments, the `width` and `height` properties are empty // strings for SVG elements, returning NaN. Fallback to `0` in this case. let width = parseFloat(css.width) || 0; @@ -1489,7 +1489,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar while (currentIFrame && offsetParent && offsetWin !== currentWin) { const iframeScale = getScale(currentIFrame); const iframeRect = currentIFrame.getBoundingClientRect(); - const css = getComputedStyle(currentIFrame); + const css = getComputedStyle$1(currentIFrame); const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x; const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y; x *= iframeScale.x; @@ -1589,7 +1589,7 @@ function getDocumentRect(element) { const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight); let x = -scroll.scrollLeft + getWindowScrollBarX(element); const y = -scroll.scrollTop; - if (getComputedStyle(body).direction === 'rtl') { + if (getComputedStyle$1(body).direction === 'rtl') { x += max(html.clientWidth, body.clientWidth) - width; } return { @@ -1666,7 +1666,7 @@ function hasFixedPositionAncestor(element, stopNode) { if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { return false; } - return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); + return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); } // A "clipping ancestor" is an `overflow` element with the characteristic of @@ -1679,12 +1679,12 @@ function getClippingElementAncestors(element, cache) { } let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body'); let currentContainingBlockComputedStyle = null; - const elementIsFixed = getComputedStyle(element).position === 'fixed'; + const elementIsFixed = getComputedStyle$1(element).position === 'fixed'; let currentNode = elementIsFixed ? getParentNode(element) : element; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block while (isElement(currentNode) && !isLastTraversableNode(currentNode)) { - const computedStyle = getComputedStyle(currentNode); + const computedStyle = getComputedStyle$1(currentNode); const currentNodeIsContaining = isContainingBlock(currentNode); if (!currentNodeIsContaining && computedStyle.position === 'fixed') { currentContainingBlockComputedStyle = null; @@ -1778,11 +1778,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) { } function isStaticPositioned(element) { - return getComputedStyle(element).position === 'static'; + return getComputedStyle$1(element).position === 'static'; } function getTrueOffsetParent(element, polyfill) { - if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') { + if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') { return null; } if (polyfill) { @@ -1843,7 +1843,7 @@ const getElementRects = async function (data) { }; function isRTL(element) { - return getComputedStyle(element).direction === 'rtl'; + return getComputedStyle$1(element).direction === 'rtl'; } const platform = { @@ -2074,32 +2074,115 @@ class AuroFloatingUI { this.keyDownHandler = null; } - position() { - // Define the middlware for the floater configuration - const middleware = [ - offset(this.element.floaterConfig.offset || 0), - ]; - - // Add flip middleware if flip is enabled - if (this.element.floaterConfig.flip) { - middleware.push(flip()); + /** + * @private + * Adjusts the size of the bib content based on the bibSizer dimensions. + * + * This method retrieves the computed styles of the bibSizer element and applies them to the bib content. + * If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it + * mirrors the width and height from the bibSizer, ensuring that they are not set to zero. + * + * @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode. + * If true, the bib content dimensions are cleared; if false, they are set + * based on the bibSizer's computed styles. + */ + mirrorSize(fullscreen) { + // mirror the boxsize from bibSizer + const sizerStyle = window.getComputedStyle(this.element.bibSizer); + const bibContent = this.element.bib.shadowRoot.querySelector(".container"); + if (fullscreen) { + bibContent.style.width = ''; + bibContent.style.height = ''; + bibContent.style.maxWidth = ''; + bibContent.style.maxHeight = ''; + } else { + if (sizerStyle.width !== '0px') { + bibContent.style.width = sizerStyle.width; + } + if (sizerStyle.height !== '0px') { + bibContent.style.height = sizerStyle.height; + } + bibContent.style.maxWidth = sizerStyle.maxWidth; + bibContent.style.maxHeight = sizerStyle.maxHeight; } + } - // Add autoPlacement middleware if autoPlacement is enabled - if (this.element.floaterConfig.autoPlacement) { - middleware.push(autoPlacement()); + /** + * @private + * Determines the positioning strategy based on the current viewport size and mobile breakpoint. + * + * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint + * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'. + * + * @returns {String} The positioning strategy, either 'fullscreen' or 'floating'. + */ + getPositioningStrategy() { + let strategy = 'floating'; + if (this.element.bib.mobileFullscreenBreakpoint) { + const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; + if (isMobile) { + strategy = 'fullscreen'; + } } + return strategy; + } - // Compute the position of the bib - computePosition(this.element.trigger, this.element.bib, { - placement: this.element.floaterConfig.placement || 'bottom', - middleware: middleware || [] - }).then(({x, y}) => { // eslint-disable-line id-length - Object.assign(this.element.bib.style, { - left: `${x}px`, - top: `${y}px`, + /** + * @private + * Positions the bib element based on the current configuration and positioning strategy. + * + * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly. + * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element, + * and applies the calculated position to the bib's style. + */ + position() { + const strategy = this.getPositioningStrategy(); + if (strategy === 'fullscreen') { + this.configureBibFullscreen(true); + this.mirrorSize(true); + } else { + this.configureBibFullscreen(false); + this.mirrorSize(false); + + // Define the middlware for the floater configuration + const middleware = [ + offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled + ]; + + // Compute the position of the bib + computePosition(this.element.trigger, this.element.bib, { + placement: this.element.floaterConfig.placement || 'bottom', + middleware: middleware || [] + }).then(({x, y}) => { // eslint-disable-line id-length + Object.assign(this.element.bib.style, { + left: `${x}px`, + top: `${y}px`, + }); }); - }); + } + } + + /** + * @private + * Configures the bib element for fullscreen mode based on the mobile status. + * + * This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true, + * and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the + * 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode. + * + * @param {boolean} isMobile - A flag indicating whether the current device is mobile. + */ + configureBibFullscreen(isMobile) { + if (isMobile) { + this.element.bib.setAttribute('isFullscreen', "true"); + // reset the prev position + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + } else { + this.element.bib.removeAttribute('isFullscreen'); + } } updateState() { @@ -2329,8 +2412,11 @@ class AuroFloatingUI { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); this.element.bib = this.element.shadowRoot.querySelector('#bib'); + this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); + document.body.append(this.element.bib); + this.handleTriggerTabIndex(); this.element.trigger.addEventListener('keydown', (event) => this.handleEvent(event)); @@ -2762,13 +2848,13 @@ if (!customElements.get("auro-icon")) { var iconVersion$2 = '6.1.1'; -var styleCss$1$2 = i$3$1`:host{position:relative}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$2 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$2 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; var tokensCss$5 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss$5 = i$3$1`.container{display:inline-block;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var styleCss$5 = i$3$1`:host{position:absolute;z-index:1;display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; var colorCss$5 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2776,15 +2862,34 @@ var colorCss$5 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-con // See LICENSE in the project root for license information. + +const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; +const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ + 'lg', + 'md', + 'sm', + 'xs', +]; + /** * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. + * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ class AuroDropdownBib extends r$5 { + constructor() { + super(); + + /** + * @private + */ + this._mobileBreakpointValue = undefined; + } + static get styles() { return [ styleCss$5, @@ -2806,10 +2911,26 @@ class AuroDropdownBib extends r$5 { rounded: { type: Boolean, reflect: true - } + }, }; } + set mobileFullscreenBreakpoint(value) { + // verify the defined breakpoint is valid and exit out if not + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + this._mobileBreakpointValue = undefined; + } else { + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + } + } + + get mobileFullscreenBreakpoint() { + return this._mobileBreakpointValue; + } + // function that renders the HTML and CSS into the scope of the component render() { return u$1$1` @@ -2843,6 +2964,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib. * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger. * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element. + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed. * @slot - Default slot for the popover content. * @slot label - Defines the content of the label. @@ -2983,6 +3105,10 @@ class AuroDropdown extends r$5 { type: Function, reflect: false }, + mobileFullscreenBreakpoint: { + type: String, + reflect: true, + }, /** * @private @@ -3031,18 +3157,19 @@ class AuroDropdown extends r$5 { updated(changedProperties) { this.floater.handleUpdate(changedProperties); + + if (changedProperties.has('mobileFullscreenBreakpoint')) { + this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint; + } } firstUpdated() { this.floater.configure(this); + this.bibContent = this.floater.element.bib; // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); - this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); - - document.body.append(this.bibContent); - this.notifyReady(); } @@ -3165,6 +3292,7 @@ class AuroDropdown extends r$5 {
+
= 0; + var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle$2(element).position) >= 0; var clipperElement = canEscapeClipping && isHTMLElement$1(element) ? getOffsetParent$1(element) : element; if (!isElement$1(clipperElement)) { @@ -11536,7 +11536,7 @@ function isOverflowElement(element) { overflowX, overflowY, display - } = getComputedStyle(element); + } = getComputedStyle$1(element); return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display); } function isTableElement(element) { @@ -11553,7 +11553,7 @@ function isTopLayer(element) { } function isContainingBlock(elementOrCss) { const webkit = isWebKit(); - const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss; + const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value)); @@ -11577,7 +11577,7 @@ function isWebKit() { function isLastTraversableNode(node) { return ['html', 'body', '#document'].includes(getNodeName(node)); } -function getComputedStyle(element) { +function getComputedStyle$1(element) { return getWindow(element).getComputedStyle(element); } function getNodeScroll(element) { @@ -11639,7 +11639,7 @@ function getFrameElement(win) { } function getCssDimensions(element) { - const css = getComputedStyle(element); + const css = getComputedStyle$1(element); // In testing environments, the `width` and `height` properties are empty // strings for SVG elements, returning NaN. Fallback to `0` in this case. let width = parseFloat(css.width) || 0; @@ -11744,7 +11744,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar while (currentIFrame && offsetParent && offsetWin !== currentWin) { const iframeScale = getScale(currentIFrame); const iframeRect = currentIFrame.getBoundingClientRect(); - const css = getComputedStyle(currentIFrame); + const css = getComputedStyle$1(currentIFrame); const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x; const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y; x *= iframeScale.x; @@ -11844,7 +11844,7 @@ function getDocumentRect(element) { const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight); let x = -scroll.scrollLeft + getWindowScrollBarX(element); const y = -scroll.scrollTop; - if (getComputedStyle(body).direction === 'rtl') { + if (getComputedStyle$1(body).direction === 'rtl') { x += max(html.clientWidth, body.clientWidth) - width; } return { @@ -11921,7 +11921,7 @@ function hasFixedPositionAncestor(element, stopNode) { if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { return false; } - return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); + return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); } // A "clipping ancestor" is an `overflow` element with the characteristic of @@ -11934,12 +11934,12 @@ function getClippingElementAncestors(element, cache) { } let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body'); let currentContainingBlockComputedStyle = null; - const elementIsFixed = getComputedStyle(element).position === 'fixed'; + const elementIsFixed = getComputedStyle$1(element).position === 'fixed'; let currentNode = elementIsFixed ? getParentNode(element) : element; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block while (isElement(currentNode) && !isLastTraversableNode(currentNode)) { - const computedStyle = getComputedStyle(currentNode); + const computedStyle = getComputedStyle$1(currentNode); const currentNodeIsContaining = isContainingBlock(currentNode); if (!currentNodeIsContaining && computedStyle.position === 'fixed') { currentContainingBlockComputedStyle = null; @@ -12033,11 +12033,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) { } function isStaticPositioned(element) { - return getComputedStyle(element).position === 'static'; + return getComputedStyle$1(element).position === 'static'; } function getTrueOffsetParent(element, polyfill) { - if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') { + if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') { return null; } if (polyfill) { @@ -12098,7 +12098,7 @@ const getElementRects = async function (data) { }; function isRTL(element) { - return getComputedStyle(element).direction === 'rtl'; + return getComputedStyle$1(element).direction === 'rtl'; } const platform = { @@ -12329,32 +12329,115 @@ class AuroFloatingUI { this.keyDownHandler = null; } - position() { - // Define the middlware for the floater configuration - const middleware = [ - offset(this.element.floaterConfig.offset || 0), - ]; - - // Add flip middleware if flip is enabled - if (this.element.floaterConfig.flip) { - middleware.push(flip()); + /** + * @private + * Adjusts the size of the bib content based on the bibSizer dimensions. + * + * This method retrieves the computed styles of the bibSizer element and applies them to the bib content. + * If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it + * mirrors the width and height from the bibSizer, ensuring that they are not set to zero. + * + * @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode. + * If true, the bib content dimensions are cleared; if false, they are set + * based on the bibSizer's computed styles. + */ + mirrorSize(fullscreen) { + // mirror the boxsize from bibSizer + const sizerStyle = window.getComputedStyle(this.element.bibSizer); + const bibContent = this.element.bib.shadowRoot.querySelector(".container"); + if (fullscreen) { + bibContent.style.width = ''; + bibContent.style.height = ''; + bibContent.style.maxWidth = ''; + bibContent.style.maxHeight = ''; + } else { + if (sizerStyle.width !== '0px') { + bibContent.style.width = sizerStyle.width; + } + if (sizerStyle.height !== '0px') { + bibContent.style.height = sizerStyle.height; + } + bibContent.style.maxWidth = sizerStyle.maxWidth; + bibContent.style.maxHeight = sizerStyle.maxHeight; } + } - // Add autoPlacement middleware if autoPlacement is enabled - if (this.element.floaterConfig.autoPlacement) { - middleware.push(autoPlacement()); + /** + * @private + * Determines the positioning strategy based on the current viewport size and mobile breakpoint. + * + * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint + * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'. + * + * @returns {String} The positioning strategy, either 'fullscreen' or 'floating'. + */ + getPositioningStrategy() { + let strategy = 'floating'; + if (this.element.bib.mobileFullscreenBreakpoint) { + const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; + if (isMobile) { + strategy = 'fullscreen'; + } } + return strategy; + } - // Compute the position of the bib - computePosition(this.element.trigger, this.element.bib, { - placement: this.element.floaterConfig.placement || 'bottom', - middleware: middleware || [] - }).then(({x, y}) => { // eslint-disable-line id-length - Object.assign(this.element.bib.style, { - left: `${x}px`, - top: `${y}px`, + /** + * @private + * Positions the bib element based on the current configuration and positioning strategy. + * + * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly. + * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element, + * and applies the calculated position to the bib's style. + */ + position() { + const strategy = this.getPositioningStrategy(); + if (strategy === 'fullscreen') { + this.configureBibFullscreen(true); + this.mirrorSize(true); + } else { + this.configureBibFullscreen(false); + this.mirrorSize(false); + + // Define the middlware for the floater configuration + const middleware = [ + offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled + ]; + + // Compute the position of the bib + computePosition(this.element.trigger, this.element.bib, { + placement: this.element.floaterConfig.placement || 'bottom', + middleware: middleware || [] + }).then(({x, y}) => { // eslint-disable-line id-length + Object.assign(this.element.bib.style, { + left: `${x}px`, + top: `${y}px`, + }); }); - }); + } + } + + /** + * @private + * Configures the bib element for fullscreen mode based on the mobile status. + * + * This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true, + * and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the + * 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode. + * + * @param {boolean} isMobile - A flag indicating whether the current device is mobile. + */ + configureBibFullscreen(isMobile) { + if (isMobile) { + this.element.bib.setAttribute('isFullscreen', "true"); + // reset the prev position + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + } else { + this.element.bib.removeAttribute('isFullscreen'); + } } updateState() { @@ -12584,8 +12667,11 @@ class AuroFloatingUI { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); this.element.bib = this.element.shadowRoot.querySelector('#bib'); + this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); + document.body.append(this.element.bib); + this.handleTriggerTabIndex(); this.element.trigger.addEventListener('keydown', (event) => this.handleEvent(event)); @@ -13017,13 +13103,13 @@ if (!customElements.get("auro-icon")) { var iconVersion$1 = '6.1.1'; -var styleCss$1$1 = i$3$1`:host{position:relative}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$1 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$1 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; var tokensCss$4 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss$4 = i$3$1`.container{display:inline-block;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var styleCss$4 = i$3$1`:host{position:absolute;z-index:1;display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; var colorCss$4 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -13031,15 +13117,34 @@ var colorCss$4 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-con // See LICENSE in the project root for license information. + +const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; +const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ + 'lg', + 'md', + 'sm', + 'xs', +]; + /** * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. + * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ class AuroDropdownBib extends r$5 { + constructor() { + super(); + + /** + * @private + */ + this._mobileBreakpointValue = undefined; + } + static get styles() { return [ styleCss$4, @@ -13061,10 +13166,26 @@ class AuroDropdownBib extends r$5 { rounded: { type: Boolean, reflect: true - } + }, }; } + set mobileFullscreenBreakpoint(value) { + // verify the defined breakpoint is valid and exit out if not + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + this._mobileBreakpointValue = undefined; + } else { + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + } + } + + get mobileFullscreenBreakpoint() { + return this._mobileBreakpointValue; + } + // function that renders the HTML and CSS into the scope of the component render() { return u$1$1` @@ -13098,6 +13219,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib. * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger. * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element. + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed. * @slot - Default slot for the popover content. * @slot label - Defines the content of the label. @@ -13238,6 +13360,10 @@ class AuroDropdown extends r$5 { type: Function, reflect: false }, + mobileFullscreenBreakpoint: { + type: String, + reflect: true, + }, /** * @private @@ -13286,18 +13412,19 @@ class AuroDropdown extends r$5 { updated(changedProperties) { this.floater.handleUpdate(changedProperties); + + if (changedProperties.has('mobileFullscreenBreakpoint')) { + this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint; + } } firstUpdated() { this.floater.configure(this); + this.bibContent = this.floater.element.bib; // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); - this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); - - document.body.append(this.bibContent); - this.notifyReady(); } @@ -13420,6 +13547,7 @@ class AuroDropdown extends r$5 {
+
= 0; + var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle$2(element).position) >= 0; var clipperElement = canEscapeClipping && isHTMLElement$1(element) ? getOffsetParent$1(element) : element; if (!isElement$1(clipperElement)) { @@ -11291,7 +11291,7 @@ function isOverflowElement(element) { overflowX, overflowY, display - } = getComputedStyle(element); + } = getComputedStyle$1(element); return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display); } function isTableElement(element) { @@ -11308,7 +11308,7 @@ function isTopLayer(element) { } function isContainingBlock(elementOrCss) { const webkit = isWebKit(); - const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss; + const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value)); @@ -11332,7 +11332,7 @@ function isWebKit() { function isLastTraversableNode(node) { return ['html', 'body', '#document'].includes(getNodeName(node)); } -function getComputedStyle(element) { +function getComputedStyle$1(element) { return getWindow(element).getComputedStyle(element); } function getNodeScroll(element) { @@ -11394,7 +11394,7 @@ function getFrameElement(win) { } function getCssDimensions(element) { - const css = getComputedStyle(element); + const css = getComputedStyle$1(element); // In testing environments, the `width` and `height` properties are empty // strings for SVG elements, returning NaN. Fallback to `0` in this case. let width = parseFloat(css.width) || 0; @@ -11499,7 +11499,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar while (currentIFrame && offsetParent && offsetWin !== currentWin) { const iframeScale = getScale(currentIFrame); const iframeRect = currentIFrame.getBoundingClientRect(); - const css = getComputedStyle(currentIFrame); + const css = getComputedStyle$1(currentIFrame); const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x; const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y; x *= iframeScale.x; @@ -11599,7 +11599,7 @@ function getDocumentRect(element) { const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight); let x = -scroll.scrollLeft + getWindowScrollBarX(element); const y = -scroll.scrollTop; - if (getComputedStyle(body).direction === 'rtl') { + if (getComputedStyle$1(body).direction === 'rtl') { x += max(html.clientWidth, body.clientWidth) - width; } return { @@ -11676,7 +11676,7 @@ function hasFixedPositionAncestor(element, stopNode) { if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { return false; } - return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); + return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); } // A "clipping ancestor" is an `overflow` element with the characteristic of @@ -11689,12 +11689,12 @@ function getClippingElementAncestors(element, cache) { } let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body'); let currentContainingBlockComputedStyle = null; - const elementIsFixed = getComputedStyle(element).position === 'fixed'; + const elementIsFixed = getComputedStyle$1(element).position === 'fixed'; let currentNode = elementIsFixed ? getParentNode(element) : element; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block while (isElement(currentNode) && !isLastTraversableNode(currentNode)) { - const computedStyle = getComputedStyle(currentNode); + const computedStyle = getComputedStyle$1(currentNode); const currentNodeIsContaining = isContainingBlock(currentNode); if (!currentNodeIsContaining && computedStyle.position === 'fixed') { currentContainingBlockComputedStyle = null; @@ -11788,11 +11788,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) { } function isStaticPositioned(element) { - return getComputedStyle(element).position === 'static'; + return getComputedStyle$1(element).position === 'static'; } function getTrueOffsetParent(element, polyfill) { - if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') { + if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') { return null; } if (polyfill) { @@ -11853,7 +11853,7 @@ const getElementRects = async function (data) { }; function isRTL(element) { - return getComputedStyle(element).direction === 'rtl'; + return getComputedStyle$1(element).direction === 'rtl'; } const platform = { @@ -12084,32 +12084,115 @@ class AuroFloatingUI { this.keyDownHandler = null; } - position() { - // Define the middlware for the floater configuration - const middleware = [ - offset(this.element.floaterConfig.offset || 0), - ]; - - // Add flip middleware if flip is enabled - if (this.element.floaterConfig.flip) { - middleware.push(flip()); + /** + * @private + * Adjusts the size of the bib content based on the bibSizer dimensions. + * + * This method retrieves the computed styles of the bibSizer element and applies them to the bib content. + * If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it + * mirrors the width and height from the bibSizer, ensuring that they are not set to zero. + * + * @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode. + * If true, the bib content dimensions are cleared; if false, they are set + * based on the bibSizer's computed styles. + */ + mirrorSize(fullscreen) { + // mirror the boxsize from bibSizer + const sizerStyle = window.getComputedStyle(this.element.bibSizer); + const bibContent = this.element.bib.shadowRoot.querySelector(".container"); + if (fullscreen) { + bibContent.style.width = ''; + bibContent.style.height = ''; + bibContent.style.maxWidth = ''; + bibContent.style.maxHeight = ''; + } else { + if (sizerStyle.width !== '0px') { + bibContent.style.width = sizerStyle.width; + } + if (sizerStyle.height !== '0px') { + bibContent.style.height = sizerStyle.height; + } + bibContent.style.maxWidth = sizerStyle.maxWidth; + bibContent.style.maxHeight = sizerStyle.maxHeight; } + } - // Add autoPlacement middleware if autoPlacement is enabled - if (this.element.floaterConfig.autoPlacement) { - middleware.push(autoPlacement()); + /** + * @private + * Determines the positioning strategy based on the current viewport size and mobile breakpoint. + * + * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint + * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'. + * + * @returns {String} The positioning strategy, either 'fullscreen' or 'floating'. + */ + getPositioningStrategy() { + let strategy = 'floating'; + if (this.element.bib.mobileFullscreenBreakpoint) { + const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; + if (isMobile) { + strategy = 'fullscreen'; + } } + return strategy; + } - // Compute the position of the bib - computePosition(this.element.trigger, this.element.bib, { - placement: this.element.floaterConfig.placement || 'bottom', - middleware: middleware || [] - }).then(({x, y}) => { // eslint-disable-line id-length - Object.assign(this.element.bib.style, { - left: `${x}px`, - top: `${y}px`, + /** + * @private + * Positions the bib element based on the current configuration and positioning strategy. + * + * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly. + * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element, + * and applies the calculated position to the bib's style. + */ + position() { + const strategy = this.getPositioningStrategy(); + if (strategy === 'fullscreen') { + this.configureBibFullscreen(true); + this.mirrorSize(true); + } else { + this.configureBibFullscreen(false); + this.mirrorSize(false); + + // Define the middlware for the floater configuration + const middleware = [ + offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled + ]; + + // Compute the position of the bib + computePosition(this.element.trigger, this.element.bib, { + placement: this.element.floaterConfig.placement || 'bottom', + middleware: middleware || [] + }).then(({x, y}) => { // eslint-disable-line id-length + Object.assign(this.element.bib.style, { + left: `${x}px`, + top: `${y}px`, + }); }); - }); + } + } + + /** + * @private + * Configures the bib element for fullscreen mode based on the mobile status. + * + * This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true, + * and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the + * 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode. + * + * @param {boolean} isMobile - A flag indicating whether the current device is mobile. + */ + configureBibFullscreen(isMobile) { + if (isMobile) { + this.element.bib.setAttribute('isFullscreen', "true"); + // reset the prev position + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + } else { + this.element.bib.removeAttribute('isFullscreen'); + } } updateState() { @@ -12339,8 +12422,11 @@ class AuroFloatingUI { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); this.element.bib = this.element.shadowRoot.querySelector('#bib'); + this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); + document.body.append(this.element.bib); + this.handleTriggerTabIndex(); this.element.trigger.addEventListener('keydown', (event) => this.handleEvent(event)); @@ -12772,13 +12858,13 @@ if (!customElements.get("auro-icon")) { var iconVersion$1 = '6.1.1'; -var styleCss$1$1 = i$3$1`:host{position:relative}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$1 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$1 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; var tokensCss$4 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss$4 = i$3$1`.container{display:inline-block;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var styleCss$4 = i$3$1`:host{position:absolute;z-index:1;display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; var colorCss$4 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -12786,15 +12872,34 @@ var colorCss$4 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-con // See LICENSE in the project root for license information. + +const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; +const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ + 'lg', + 'md', + 'sm', + 'xs', +]; + /** * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. + * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ class AuroDropdownBib extends r$5 { + constructor() { + super(); + + /** + * @private + */ + this._mobileBreakpointValue = undefined; + } + static get styles() { return [ styleCss$4, @@ -12816,10 +12921,26 @@ class AuroDropdownBib extends r$5 { rounded: { type: Boolean, reflect: true - } + }, }; } + set mobileFullscreenBreakpoint(value) { + // verify the defined breakpoint is valid and exit out if not + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + this._mobileBreakpointValue = undefined; + } else { + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + } + } + + get mobileFullscreenBreakpoint() { + return this._mobileBreakpointValue; + } + // function that renders the HTML and CSS into the scope of the component render() { return u$1$1` @@ -12853,6 +12974,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib. * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger. * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element. + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed. * @slot - Default slot for the popover content. * @slot label - Defines the content of the label. @@ -12993,6 +13115,10 @@ class AuroDropdown extends r$5 { type: Function, reflect: false }, + mobileFullscreenBreakpoint: { + type: String, + reflect: true, + }, /** * @private @@ -13041,18 +13167,19 @@ class AuroDropdown extends r$5 { updated(changedProperties) { this.floater.handleUpdate(changedProperties); + + if (changedProperties.has('mobileFullscreenBreakpoint')) { + this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint; + } } firstUpdated() { this.floater.configure(this); + this.bibContent = this.floater.element.bib; // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); - this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); - - document.body.append(this.bibContent); - this.notifyReady(); } @@ -13175,6 +13302,7 @@ class AuroDropdown extends r$5 {
+
this.handleEvent(event)); diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index 78c79ad0..a5fc3cf7 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -1944,6 +1944,8 @@ class AuroFloatingUI { this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); + document.body.append(this.element.bib); + this.handleTriggerTabIndex(); this.element.trigger.addEventListener('keydown', (event) => this.handleEvent(event)); diff --git a/components/dropdown/src/floatingUI.mjs b/components/dropdown/src/floatingUI.mjs index 92e884a2..40197d75 100644 --- a/components/dropdown/src/floatingUI.mjs +++ b/components/dropdown/src/floatingUI.mjs @@ -352,6 +352,8 @@ export default class AuroFloatingUI { this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); + document.body.append(this.element.bib); + this.handleTriggerTabIndex(); this.element.trigger.addEventListener('keydown', (event) => this.handleEvent(event)); diff --git a/components/select/demo/api.min.js b/components/select/demo/api.min.js index e18e7f85..494b2fab 100644 --- a/components/select/demo/api.min.js +++ b/components/select/demo/api.min.js @@ -1310,7 +1310,7 @@ function isOverflowElement(element) { overflowX, overflowY, display - } = getComputedStyle(element); + } = getComputedStyle$1(element); return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display); } function isTableElement(element) { @@ -1327,7 +1327,7 @@ function isTopLayer(element) { } function isContainingBlock(elementOrCss) { const webkit = isWebKit(); - const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss; + const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value)); @@ -1351,7 +1351,7 @@ function isWebKit() { function isLastTraversableNode(node) { return ['html', 'body', '#document'].includes(getNodeName(node)); } -function getComputedStyle(element) { +function getComputedStyle$1(element) { return getWindow(element).getComputedStyle(element); } function getNodeScroll(element) { @@ -1413,7 +1413,7 @@ function getFrameElement(win) { } function getCssDimensions(element) { - const css = getComputedStyle(element); + const css = getComputedStyle$1(element); // In testing environments, the `width` and `height` properties are empty // strings for SVG elements, returning NaN. Fallback to `0` in this case. let width = parseFloat(css.width) || 0; @@ -1518,7 +1518,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar while (currentIFrame && offsetParent && offsetWin !== currentWin) { const iframeScale = getScale(currentIFrame); const iframeRect = currentIFrame.getBoundingClientRect(); - const css = getComputedStyle(currentIFrame); + const css = getComputedStyle$1(currentIFrame); const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x; const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y; x *= iframeScale.x; @@ -1618,7 +1618,7 @@ function getDocumentRect(element) { const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight); let x = -scroll.scrollLeft + getWindowScrollBarX(element); const y = -scroll.scrollTop; - if (getComputedStyle(body).direction === 'rtl') { + if (getComputedStyle$1(body).direction === 'rtl') { x += max(html.clientWidth, body.clientWidth) - width; } return { @@ -1695,7 +1695,7 @@ function hasFixedPositionAncestor(element, stopNode) { if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { return false; } - return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); + return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); } // A "clipping ancestor" is an `overflow` element with the characteristic of @@ -1708,12 +1708,12 @@ function getClippingElementAncestors(element, cache) { } let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body'); let currentContainingBlockComputedStyle = null; - const elementIsFixed = getComputedStyle(element).position === 'fixed'; + const elementIsFixed = getComputedStyle$1(element).position === 'fixed'; let currentNode = elementIsFixed ? getParentNode(element) : element; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block while (isElement(currentNode) && !isLastTraversableNode(currentNode)) { - const computedStyle = getComputedStyle(currentNode); + const computedStyle = getComputedStyle$1(currentNode); const currentNodeIsContaining = isContainingBlock(currentNode); if (!currentNodeIsContaining && computedStyle.position === 'fixed') { currentContainingBlockComputedStyle = null; @@ -1807,11 +1807,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) { } function isStaticPositioned(element) { - return getComputedStyle(element).position === 'static'; + return getComputedStyle$1(element).position === 'static'; } function getTrueOffsetParent(element, polyfill) { - if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') { + if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') { return null; } if (polyfill) { @@ -1872,7 +1872,7 @@ const getElementRects = async function (data) { }; function isRTL(element) { - return getComputedStyle(element).direction === 'rtl'; + return getComputedStyle$1(element).direction === 'rtl'; } const platform = { @@ -2103,32 +2103,115 @@ class AuroFloatingUI { this.keyDownHandler = null; } - position() { - // Define the middlware for the floater configuration - const middleware = [ - offset(this.element.floaterConfig.offset || 0), - ]; - - // Add flip middleware if flip is enabled - if (this.element.floaterConfig.flip) { - middleware.push(flip()); + /** + * @private + * Adjusts the size of the bib content based on the bibSizer dimensions. + * + * This method retrieves the computed styles of the bibSizer element and applies them to the bib content. + * If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it + * mirrors the width and height from the bibSizer, ensuring that they are not set to zero. + * + * @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode. + * If true, the bib content dimensions are cleared; if false, they are set + * based on the bibSizer's computed styles. + */ + mirrorSize(fullscreen) { + // mirror the boxsize from bibSizer + const sizerStyle = window.getComputedStyle(this.element.bibSizer); + const bibContent = this.element.bib.shadowRoot.querySelector(".container"); + if (fullscreen) { + bibContent.style.width = ''; + bibContent.style.height = ''; + bibContent.style.maxWidth = ''; + bibContent.style.maxHeight = ''; + } else { + if (sizerStyle.width !== '0px') { + bibContent.style.width = sizerStyle.width; + } + if (sizerStyle.height !== '0px') { + bibContent.style.height = sizerStyle.height; + } + bibContent.style.maxWidth = sizerStyle.maxWidth; + bibContent.style.maxHeight = sizerStyle.maxHeight; } + } - // Add autoPlacement middleware if autoPlacement is enabled - if (this.element.floaterConfig.autoPlacement) { - middleware.push(autoPlacement()); + /** + * @private + * Determines the positioning strategy based on the current viewport size and mobile breakpoint. + * + * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint + * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'. + * + * @returns {String} The positioning strategy, either 'fullscreen' or 'floating'. + */ + getPositioningStrategy() { + let strategy = 'floating'; + if (this.element.bib.mobileFullscreenBreakpoint) { + const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; + if (isMobile) { + strategy = 'fullscreen'; + } } + return strategy; + } - // Compute the position of the bib - computePosition(this.element.trigger, this.element.bib, { - placement: this.element.floaterConfig.placement || 'bottom', - middleware: middleware || [] - }).then(({x, y}) => { // eslint-disable-line id-length - Object.assign(this.element.bib.style, { - left: `${x}px`, - top: `${y}px`, + /** + * @private + * Positions the bib element based on the current configuration and positioning strategy. + * + * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly. + * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element, + * and applies the calculated position to the bib's style. + */ + position() { + const strategy = this.getPositioningStrategy(); + if (strategy === 'fullscreen') { + this.configureBibFullscreen(true); + this.mirrorSize(true); + } else { + this.configureBibFullscreen(false); + this.mirrorSize(false); + + // Define the middlware for the floater configuration + const middleware = [ + offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled + ]; + + // Compute the position of the bib + computePosition(this.element.trigger, this.element.bib, { + placement: this.element.floaterConfig.placement || 'bottom', + middleware: middleware || [] + }).then(({x, y}) => { // eslint-disable-line id-length + Object.assign(this.element.bib.style, { + left: `${x}px`, + top: `${y}px`, + }); }); - }); + } + } + + /** + * @private + * Configures the bib element for fullscreen mode based on the mobile status. + * + * This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true, + * and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the + * 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode. + * + * @param {boolean} isMobile - A flag indicating whether the current device is mobile. + */ + configureBibFullscreen(isMobile) { + if (isMobile) { + this.element.bib.setAttribute('isFullscreen', "true"); + // reset the prev position + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + } else { + this.element.bib.removeAttribute('isFullscreen'); + } } updateState() { @@ -2358,8 +2441,11 @@ class AuroFloatingUI { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); this.element.bib = this.element.shadowRoot.querySelector('#bib'); + this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); + document.body.append(this.element.bib); + this.handleTriggerTabIndex(); this.element.trigger.addEventListener('keydown', (event) => this.handleEvent(event)); @@ -2791,13 +2877,13 @@ if (!customElements.get("auro-icon")) { var iconVersion$1 = '6.1.1'; -var styleCss$1$1 = i$3`:host{position:relative}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$1 = i$3`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; var tokensCss$3 = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss$4 = i$3`.container{display:inline-block;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var styleCss$4 = i$3`:host{position:absolute;z-index:1;display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; var colorCss$4 = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2805,15 +2891,34 @@ var colorCss$4 = i$3`.container{background-color:var(--ds-auro-dropdownbib-conta // See LICENSE in the project root for license information. + +const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; +const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ + 'lg', + 'md', + 'sm', + 'xs', +]; + /** * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. + * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ class AuroDropdownBib extends r { + constructor() { + super(); + + /** + * @private + */ + this._mobileBreakpointValue = undefined; + } + static get styles() { return [ styleCss$4, @@ -2835,10 +2940,26 @@ class AuroDropdownBib extends r { rounded: { type: Boolean, reflect: true - } + }, }; } + set mobileFullscreenBreakpoint(value) { + // verify the defined breakpoint is valid and exit out if not + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + this._mobileBreakpointValue = undefined; + } else { + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + } + } + + get mobileFullscreenBreakpoint() { + return this._mobileBreakpointValue; + } + // function that renders the HTML and CSS into the scope of the component render() { return u$1` @@ -2872,6 +2993,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib. * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger. * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element. + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed. * @slot - Default slot for the popover content. * @slot label - Defines the content of the label. @@ -3012,6 +3134,10 @@ class AuroDropdown extends r { type: Function, reflect: false }, + mobileFullscreenBreakpoint: { + type: String, + reflect: true, + }, /** * @private @@ -3060,18 +3186,19 @@ class AuroDropdown extends r { updated(changedProperties) { this.floater.handleUpdate(changedProperties); + + if (changedProperties.has('mobileFullscreenBreakpoint')) { + this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint; + } } firstUpdated() { this.floater.configure(this); + this.bibContent = this.floater.element.bib; // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); - this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); - - document.body.append(this.bibContent); - this.notifyReady(); } @@ -3194,6 +3321,7 @@ class AuroDropdown extends r {
+
(css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value)); @@ -1299,7 +1299,7 @@ function isWebKit() { function isLastTraversableNode(node) { return ['html', 'body', '#document'].includes(getNodeName(node)); } -function getComputedStyle(element) { +function getComputedStyle$1(element) { return getWindow(element).getComputedStyle(element); } function getNodeScroll(element) { @@ -1361,7 +1361,7 @@ function getFrameElement(win) { } function getCssDimensions(element) { - const css = getComputedStyle(element); + const css = getComputedStyle$1(element); // In testing environments, the `width` and `height` properties are empty // strings for SVG elements, returning NaN. Fallback to `0` in this case. let width = parseFloat(css.width) || 0; @@ -1466,7 +1466,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar while (currentIFrame && offsetParent && offsetWin !== currentWin) { const iframeScale = getScale(currentIFrame); const iframeRect = currentIFrame.getBoundingClientRect(); - const css = getComputedStyle(currentIFrame); + const css = getComputedStyle$1(currentIFrame); const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x; const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y; x *= iframeScale.x; @@ -1566,7 +1566,7 @@ function getDocumentRect(element) { const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight); let x = -scroll.scrollLeft + getWindowScrollBarX(element); const y = -scroll.scrollTop; - if (getComputedStyle(body).direction === 'rtl') { + if (getComputedStyle$1(body).direction === 'rtl') { x += max(html.clientWidth, body.clientWidth) - width; } return { @@ -1643,7 +1643,7 @@ function hasFixedPositionAncestor(element, stopNode) { if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { return false; } - return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); + return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); } // A "clipping ancestor" is an `overflow` element with the characteristic of @@ -1656,12 +1656,12 @@ function getClippingElementAncestors(element, cache) { } let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body'); let currentContainingBlockComputedStyle = null; - const elementIsFixed = getComputedStyle(element).position === 'fixed'; + const elementIsFixed = getComputedStyle$1(element).position === 'fixed'; let currentNode = elementIsFixed ? getParentNode(element) : element; // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block while (isElement(currentNode) && !isLastTraversableNode(currentNode)) { - const computedStyle = getComputedStyle(currentNode); + const computedStyle = getComputedStyle$1(currentNode); const currentNodeIsContaining = isContainingBlock(currentNode); if (!currentNodeIsContaining && computedStyle.position === 'fixed') { currentContainingBlockComputedStyle = null; @@ -1755,11 +1755,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) { } function isStaticPositioned(element) { - return getComputedStyle(element).position === 'static'; + return getComputedStyle$1(element).position === 'static'; } function getTrueOffsetParent(element, polyfill) { - if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') { + if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') { return null; } if (polyfill) { @@ -1820,7 +1820,7 @@ const getElementRects = async function (data) { }; function isRTL(element) { - return getComputedStyle(element).direction === 'rtl'; + return getComputedStyle$1(element).direction === 'rtl'; } const platform = { @@ -2051,32 +2051,115 @@ class AuroFloatingUI { this.keyDownHandler = null; } - position() { - // Define the middlware for the floater configuration - const middleware = [ - offset(this.element.floaterConfig.offset || 0), - ]; - - // Add flip middleware if flip is enabled - if (this.element.floaterConfig.flip) { - middleware.push(flip()); + /** + * @private + * Adjusts the size of the bib content based on the bibSizer dimensions. + * + * This method retrieves the computed styles of the bibSizer element and applies them to the bib content. + * If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it + * mirrors the width and height from the bibSizer, ensuring that they are not set to zero. + * + * @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode. + * If true, the bib content dimensions are cleared; if false, they are set + * based on the bibSizer's computed styles. + */ + mirrorSize(fullscreen) { + // mirror the boxsize from bibSizer + const sizerStyle = window.getComputedStyle(this.element.bibSizer); + const bibContent = this.element.bib.shadowRoot.querySelector(".container"); + if (fullscreen) { + bibContent.style.width = ''; + bibContent.style.height = ''; + bibContent.style.maxWidth = ''; + bibContent.style.maxHeight = ''; + } else { + if (sizerStyle.width !== '0px') { + bibContent.style.width = sizerStyle.width; + } + if (sizerStyle.height !== '0px') { + bibContent.style.height = sizerStyle.height; + } + bibContent.style.maxWidth = sizerStyle.maxWidth; + bibContent.style.maxHeight = sizerStyle.maxHeight; } + } - // Add autoPlacement middleware if autoPlacement is enabled - if (this.element.floaterConfig.autoPlacement) { - middleware.push(autoPlacement()); + /** + * @private + * Determines the positioning strategy based on the current viewport size and mobile breakpoint. + * + * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint + * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'. + * + * @returns {String} The positioning strategy, either 'fullscreen' or 'floating'. + */ + getPositioningStrategy() { + let strategy = 'floating'; + if (this.element.bib.mobileFullscreenBreakpoint) { + const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches; + if (isMobile) { + strategy = 'fullscreen'; + } } + return strategy; + } - // Compute the position of the bib - computePosition(this.element.trigger, this.element.bib, { - placement: this.element.floaterConfig.placement || 'bottom', - middleware: middleware || [] - }).then(({x, y}) => { // eslint-disable-line id-length - Object.assign(this.element.bib.style, { - left: `${x}px`, - top: `${y}px`, + /** + * @private + * Positions the bib element based on the current configuration and positioning strategy. + * + * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly. + * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element, + * and applies the calculated position to the bib's style. + */ + position() { + const strategy = this.getPositioningStrategy(); + if (strategy === 'fullscreen') { + this.configureBibFullscreen(true); + this.mirrorSize(true); + } else { + this.configureBibFullscreen(false); + this.mirrorSize(false); + + // Define the middlware for the floater configuration + const middleware = [ + offset(this.element.floaterConfig.offset || 0), + ...(this.element.floaterConfig.flip ? [flip()] : []), // Add flip middleware if flip is enabled + ...(this.element.floaterConfig.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled + ]; + + // Compute the position of the bib + computePosition(this.element.trigger, this.element.bib, { + placement: this.element.floaterConfig.placement || 'bottom', + middleware: middleware || [] + }).then(({x, y}) => { // eslint-disable-line id-length + Object.assign(this.element.bib.style, { + left: `${x}px`, + top: `${y}px`, + }); }); - }); + } + } + + /** + * @private + * Configures the bib element for fullscreen mode based on the mobile status. + * + * This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true, + * and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the + * 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode. + * + * @param {boolean} isMobile - A flag indicating whether the current device is mobile. + */ + configureBibFullscreen(isMobile) { + if (isMobile) { + this.element.bib.setAttribute('isFullscreen', "true"); + // reset the prev position + this.element.bib.style.top = "0px"; + this.element.bib.style.left = "0px"; + } else { + this.element.bib.removeAttribute('isFullscreen'); + } } updateState() { @@ -2306,8 +2389,11 @@ class AuroFloatingUI { this.element = elem; this.element.trigger = this.element.shadowRoot.querySelector('#trigger'); this.element.bib = this.element.shadowRoot.querySelector('#bib'); + this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer'); this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon'); + document.body.append(this.element.bib); + this.handleTriggerTabIndex(); this.element.trigger.addEventListener('keydown', (event) => this.handleEvent(event)); @@ -2739,13 +2825,13 @@ if (!customElements.get("auro-icon")) { var iconVersion$1 = '6.1.1'; -var styleCss$1$1 = i$3`:host{position:relative}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$1 = i$3`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; var tokensCss$3 = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var styleCss$4 = i$3`.container{display:inline-block;box-sizing:border-box}:host{position:absolute;z-index:1;display:none}:host([data-show]){display:block}:host([common]) .container,:host([rounded]) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}`; +var styleCss$4 = i$3`:host{position:absolute;z-index:1;display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`; var colorCss$4 = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; @@ -2753,15 +2839,34 @@ var colorCss$4 = i$3`.container{background-color:var(--ds-auro-dropdownbib-conta // See LICENSE in the project root for license information. + +const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-'; +const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [ + 'lg', + 'md', + 'sm', + 'xs', +]; + /** * @attr { Boolean } common - If declared, will apply all styles for the common theme. * @attr { Boolean } rounded - If declared, will apply border-radius to the bib. * @attr { Boolean } inset - If declared, will apply extra padding to bib content. + * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @csspart bibContainer - Apply css to the bib container. */ class AuroDropdownBib extends r { + constructor() { + super(); + + /** + * @private + */ + this._mobileBreakpointValue = undefined; + } + static get styles() { return [ styleCss$4, @@ -2783,10 +2888,26 @@ class AuroDropdownBib extends r { rounded: { type: Boolean, reflect: true - } + }, }; } + set mobileFullscreenBreakpoint(value) { + // verify the defined breakpoint is valid and exit out if not + const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined; + if (!validatedValue) { + this._mobileBreakpointValue = undefined; + } else { + // get the pixel value for the defined breakpoint + const docStyle = getComputedStyle(document.documentElement); + this._mobileBreakpointValue = docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value); + } + } + + get mobileFullscreenBreakpoint() { + return this._mobileBreakpointValue; + } + // function that renders the HTML and CSS into the scope of the component render() { return u$1` @@ -2820,6 +2941,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib. * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger. * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element. + * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed. * @slot - Default slot for the popover content. * @slot label - Defines the content of the label. @@ -2960,6 +3082,10 @@ class AuroDropdown extends r { type: Function, reflect: false }, + mobileFullscreenBreakpoint: { + type: String, + reflect: true, + }, /** * @private @@ -3008,18 +3134,19 @@ class AuroDropdown extends r { updated(changedProperties) { this.floater.handleUpdate(changedProperties); + + if (changedProperties.has('mobileFullscreenBreakpoint')) { + this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint; + } } firstUpdated() { this.floater.configure(this); + this.bibContent = this.floater.element.bib; // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown'); - this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); - - document.body.append(this.bibContent); - this.notifyReady(); } @@ -3142,6 +3269,7 @@ class AuroDropdown extends r {
+