@aurodesignsystem-dev/auro-formkit 0.0.0-pr794.2 → 0.0.0-pr794.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/combobox/demo/api.min.js +26 -71
- package/components/combobox/demo/index.min.js +26 -71
- package/components/combobox/dist/index.js +19 -69
- package/components/combobox/dist/registered.js +19 -69
- package/components/counter/demo/api.min.js +20 -70
- package/components/counter/demo/index.min.js +20 -70
- package/components/counter/dist/index.js +19 -69
- package/components/counter/dist/registered.js +19 -69
- package/components/datepicker/demo/api.min.js +90 -106
- package/components/datepicker/demo/index.min.js +90 -106
- package/components/datepicker/dist/auro-datepicker.d.ts +14 -1
- package/components/datepicker/dist/index.js +89 -105
- package/components/datepicker/dist/registered.js +89 -105
- package/components/dropdown/demo/api.md +1 -1
- package/components/dropdown/demo/api.min.js +20 -70
- package/components/dropdown/demo/index.min.js +20 -70
- package/components/dropdown/dist/auro-dropdown.d.ts +2 -7
- package/components/dropdown/dist/index.js +19 -69
- package/components/dropdown/dist/registered.js +19 -69
- package/components/dropdown/dist/styles/style-css.d.ts +2 -0
- package/components/form/demo/api.min.js +1 -1
- package/components/form/demo/index.min.js +1 -1
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/menu/demo/api.md +12 -13
- package/components/menu/demo/api.min.js +7 -2
- package/components/menu/demo/index.min.js +7 -2
- package/components/menu/dist/auro-menu.d.ts +6 -1
- package/components/menu/dist/index.js +6 -1
- package/components/menu/dist/registered.js +6 -1
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/select/demo/api.min.js +26 -71
- package/components/select/demo/index.min.js +26 -71
- package/components/select/dist/index.js +19 -69
- package/components/select/dist/registered.js +19 -69
- package/package.json +3 -3
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | ` String ` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
|
|
20
20
|
| [hoverToggle](#hoverToggle) | `hoverToggle` | ` Boolean ` | | If declared, the trigger will toggle the dropdown on mouseover/mouseout. |
|
|
21
21
|
| [isBibFullscreen](#isBibFullscreen) | `isBibFullscreen` | `boolean` | false | If true, the dropdown bib is taking the fullscreen when it's open. |
|
|
22
|
-
| [isPopoverVisible](#isPopoverVisible) | `
|
|
22
|
+
| [isPopoverVisible](#isPopoverVisible) | `open` | ` Boolean ` | false | If true, the dropdown bib is displayed. |
|
|
23
23
|
| [layout](#layout) | | | "undefined" | |
|
|
24
24
|
| [matchWidth](#matchWidth) | `matchWidth` | ` Boolean ` | false | If declared, the popover and trigger will be set to the same width. |
|
|
25
25
|
| [noFlip](#noFlip) | `noFlip` | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
|
|
@@ -61,7 +61,7 @@ const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShad
|
|
|
61
61
|
* @license
|
|
62
62
|
* Copyright 2017 Google LLC
|
|
63
63
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
64
|
-
*/const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$1(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e
|
|
64
|
+
*/const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$1(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
|
|
65
65
|
|
|
66
66
|
/**
|
|
67
67
|
* @license
|
|
@@ -1891,6 +1891,7 @@ class AuroFloatingUI {
|
|
|
1891
1891
|
this.element.bib.style.left = "0px";
|
|
1892
1892
|
this.element.bib.style.width = '';
|
|
1893
1893
|
this.element.bib.style.height = '';
|
|
1894
|
+
this.element.style.contain = '';
|
|
1894
1895
|
|
|
1895
1896
|
// reset the size that was mirroring `size` css-part
|
|
1896
1897
|
const bibContent = this.element.bib.shadowRoot.querySelector(".container");
|
|
@@ -1915,6 +1916,7 @@ class AuroFloatingUI {
|
|
|
1915
1916
|
this.element.bib.style.position = '';
|
|
1916
1917
|
this.element.bib.removeAttribute('isfullscreen');
|
|
1917
1918
|
this.element.isBibFullscreen = false;
|
|
1919
|
+
this.element.style.contain = 'layout';
|
|
1918
1920
|
}
|
|
1919
1921
|
|
|
1920
1922
|
const isChanged = this.strategy && this.strategy !== value;
|
|
@@ -2686,7 +2688,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
2686
2688
|
return _fetchMap.get(uri);
|
|
2687
2689
|
};
|
|
2688
2690
|
|
|
2689
|
-
var styleCss$
|
|
2691
|
+
var styleCss$3 = i$2`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
|
|
2690
2692
|
|
|
2691
2693
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2692
2694
|
// See LICENSE in the project root for license information.
|
|
@@ -2729,7 +2731,7 @@ class BaseIcon extends AuroElement$1 {
|
|
|
2729
2731
|
|
|
2730
2732
|
static get styles() {
|
|
2731
2733
|
return i$2`
|
|
2732
|
-
${styleCss$
|
|
2734
|
+
${styleCss$3}
|
|
2733
2735
|
`;
|
|
2734
2736
|
}
|
|
2735
2737
|
|
|
@@ -2931,7 +2933,7 @@ class AuroIcon extends BaseIcon {
|
|
|
2931
2933
|
return [
|
|
2932
2934
|
super.styles,
|
|
2933
2935
|
i$2`${tokensCss$2}`,
|
|
2934
|
-
i$2`${styleCss$
|
|
2936
|
+
i$2`${styleCss$3}`,
|
|
2935
2937
|
i$2`${colorCss$3}`
|
|
2936
2938
|
];
|
|
2937
2939
|
}
|
|
@@ -3017,7 +3019,7 @@ class AuroIcon extends BaseIcon {
|
|
|
3017
3019
|
|
|
3018
3020
|
var iconVersion = '6.1.2';
|
|
3019
3021
|
|
|
3020
|
-
var styleCss$
|
|
3022
|
+
var styleCss$2 = i$2`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
|
|
3021
3023
|
|
|
3022
3024
|
var colorCss$2 = i$2`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
3023
3025
|
|
|
@@ -3059,7 +3061,7 @@ class AuroDropdownBib extends i {
|
|
|
3059
3061
|
|
|
3060
3062
|
static get styles() {
|
|
3061
3063
|
return [
|
|
3062
|
-
styleCss$
|
|
3064
|
+
styleCss$2,
|
|
3063
3065
|
colorCss$2,
|
|
3064
3066
|
tokensCss$1
|
|
3065
3067
|
];
|
|
@@ -3220,13 +3222,15 @@ var shapeSizeCss = i$2`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic
|
|
|
3220
3222
|
|
|
3221
3223
|
var colorCss$1 = i$2`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
3222
3224
|
|
|
3225
|
+
var styleCss$1 = i$2`:host{display:block;position:relative}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
|
|
3226
|
+
|
|
3223
3227
|
var classicColorCss = i$2``;
|
|
3224
3228
|
|
|
3225
|
-
var classicLayoutCss = i$2`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}
|
|
3229
|
+
var classicLayoutCss = i$2`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
|
|
3226
3230
|
|
|
3227
|
-
var styleEmphasizedCss = i$2
|
|
3231
|
+
var styleEmphasizedCss = i$2`.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
|
|
3228
3232
|
|
|
3229
|
-
var styleSnowflakeCss = i$2`:host
|
|
3233
|
+
var styleSnowflakeCss = i$2`:host([layout*=snowflake]) .leftIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}.layout-snowflake .chevron,.layout-snowflake-left .chevron,.layout-snowflake-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}`;
|
|
3230
3234
|
|
|
3231
3235
|
var colorCss = i$2`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3232
3236
|
|
|
@@ -3533,6 +3537,7 @@ class AuroElement extends i {
|
|
|
3533
3537
|
// See LICENSE in the project root for license information.
|
|
3534
3538
|
|
|
3535
3539
|
|
|
3540
|
+
|
|
3536
3541
|
/*
|
|
3537
3542
|
* @slot - Default slot for the popover content.
|
|
3538
3543
|
* @slot helpText - Defines the content of the helpText.
|
|
@@ -3799,7 +3804,9 @@ class AuroDropdown extends AuroElement {
|
|
|
3799
3804
|
* If true, the dropdown bib is displayed.
|
|
3800
3805
|
*/
|
|
3801
3806
|
isPopoverVisible: {
|
|
3802
|
-
type: Boolean
|
|
3807
|
+
type: Boolean,
|
|
3808
|
+
reflect: true,
|
|
3809
|
+
attribute: 'open'
|
|
3803
3810
|
},
|
|
3804
3811
|
|
|
3805
3812
|
/**
|
|
@@ -3935,6 +3942,7 @@ class AuroDropdown extends AuroElement {
|
|
|
3935
3942
|
|
|
3936
3943
|
static get styles() {
|
|
3937
3944
|
return [
|
|
3945
|
+
styleCss$1,
|
|
3938
3946
|
tokensCss$1,
|
|
3939
3947
|
colorCss$1,
|
|
3940
3948
|
|
|
@@ -4115,64 +4123,6 @@ class AuroDropdown extends AuroElement {
|
|
|
4115
4123
|
this.hasFocus = false;
|
|
4116
4124
|
}
|
|
4117
4125
|
|
|
4118
|
-
/**
|
|
4119
|
-
* Determines if the element or any children are focusable.
|
|
4120
|
-
* @private
|
|
4121
|
-
* @param {HTMLElement} element - Element to check.
|
|
4122
|
-
* @returns {Boolean} - True if the element or any children are focusable.
|
|
4123
|
-
*/
|
|
4124
|
-
containsFocusableElement(element) {
|
|
4125
|
-
this.showTriggerBorders = true;
|
|
4126
|
-
|
|
4127
|
-
const nodes = [
|
|
4128
|
-
element,
|
|
4129
|
-
...element.children
|
|
4130
|
-
];
|
|
4131
|
-
|
|
4132
|
-
const focusableElements = [
|
|
4133
|
-
'a',
|
|
4134
|
-
'auro-hyperlink',
|
|
4135
|
-
'button',
|
|
4136
|
-
'auro-button',
|
|
4137
|
-
'input',
|
|
4138
|
-
'auro-input',
|
|
4139
|
-
];
|
|
4140
|
-
|
|
4141
|
-
const focusableElementsThatNeedBorders = ['auro-input'];
|
|
4142
|
-
|
|
4143
|
-
const result = nodes.some((node) => {
|
|
4144
|
-
const tagName = node.tagName.toLowerCase();
|
|
4145
|
-
|
|
4146
|
-
if (node.tabIndex > -1) {
|
|
4147
|
-
return true;
|
|
4148
|
-
}
|
|
4149
|
-
|
|
4150
|
-
if (focusableElements.includes(tagName)) {
|
|
4151
|
-
if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
|
|
4152
|
-
return true;
|
|
4153
|
-
}
|
|
4154
|
-
if (!node.hasAttribute('disabled')) {
|
|
4155
|
-
return true;
|
|
4156
|
-
}
|
|
4157
|
-
}
|
|
4158
|
-
|
|
4159
|
-
if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
|
|
4160
|
-
return true;
|
|
4161
|
-
}
|
|
4162
|
-
|
|
4163
|
-
return false;
|
|
4164
|
-
});
|
|
4165
|
-
|
|
4166
|
-
if (result) {
|
|
4167
|
-
this.showTriggerBorders = !nodes.some((node) => {
|
|
4168
|
-
const tagName = node.tagName.toLowerCase();
|
|
4169
|
-
return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
|
|
4170
|
-
});
|
|
4171
|
-
}
|
|
4172
|
-
|
|
4173
|
-
return result;
|
|
4174
|
-
}
|
|
4175
|
-
|
|
4176
4126
|
/**
|
|
4177
4127
|
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
4178
4128
|
* @private
|
|
@@ -4284,7 +4234,7 @@ class AuroDropdown extends AuroElement {
|
|
|
4284
4234
|
if (triggerContentNodes) {
|
|
4285
4235
|
|
|
4286
4236
|
// See if any of them are focusable elements
|
|
4287
|
-
this.triggerContentFocusable = triggerContentNodes.some((node) =>
|
|
4237
|
+
this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
|
|
4288
4238
|
|
|
4289
4239
|
// If any of them are focusable elements
|
|
4290
4240
|
if (this.triggerContentFocusable) {
|
|
@@ -4356,7 +4306,7 @@ class AuroDropdown extends AuroElement {
|
|
|
4356
4306
|
<div
|
|
4357
4307
|
id="trigger"
|
|
4358
4308
|
class="${e$2(this.commonWrapperClasses)}" part="wrapper"
|
|
4359
|
-
tabindex="${this.tabIndex}"
|
|
4309
|
+
tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
|
|
4360
4310
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
4361
4311
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
4362
4312
|
aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
@@ -36,7 +36,7 @@ const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShad
|
|
|
36
36
|
* @license
|
|
37
37
|
* Copyright 2017 Google LLC
|
|
38
38
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
39
|
-
*/const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$1(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e
|
|
39
|
+
*/const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$1(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
|
|
40
40
|
|
|
41
41
|
/**
|
|
42
42
|
* @license
|
|
@@ -1866,6 +1866,7 @@ class AuroFloatingUI {
|
|
|
1866
1866
|
this.element.bib.style.left = "0px";
|
|
1867
1867
|
this.element.bib.style.width = '';
|
|
1868
1868
|
this.element.bib.style.height = '';
|
|
1869
|
+
this.element.style.contain = '';
|
|
1869
1870
|
|
|
1870
1871
|
// reset the size that was mirroring `size` css-part
|
|
1871
1872
|
const bibContent = this.element.bib.shadowRoot.querySelector(".container");
|
|
@@ -1890,6 +1891,7 @@ class AuroFloatingUI {
|
|
|
1890
1891
|
this.element.bib.style.position = '';
|
|
1891
1892
|
this.element.bib.removeAttribute('isfullscreen');
|
|
1892
1893
|
this.element.isBibFullscreen = false;
|
|
1894
|
+
this.element.style.contain = 'layout';
|
|
1893
1895
|
}
|
|
1894
1896
|
|
|
1895
1897
|
const isChanged = this.strategy && this.strategy !== value;
|
|
@@ -2661,7 +2663,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
2661
2663
|
return _fetchMap.get(uri);
|
|
2662
2664
|
};
|
|
2663
2665
|
|
|
2664
|
-
var styleCss$
|
|
2666
|
+
var styleCss$3 = i$2`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
|
|
2665
2667
|
|
|
2666
2668
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2667
2669
|
// See LICENSE in the project root for license information.
|
|
@@ -2704,7 +2706,7 @@ class BaseIcon extends AuroElement$1 {
|
|
|
2704
2706
|
|
|
2705
2707
|
static get styles() {
|
|
2706
2708
|
return i$2`
|
|
2707
|
-
${styleCss$
|
|
2709
|
+
${styleCss$3}
|
|
2708
2710
|
`;
|
|
2709
2711
|
}
|
|
2710
2712
|
|
|
@@ -2906,7 +2908,7 @@ class AuroIcon extends BaseIcon {
|
|
|
2906
2908
|
return [
|
|
2907
2909
|
super.styles,
|
|
2908
2910
|
i$2`${tokensCss$2}`,
|
|
2909
|
-
i$2`${styleCss$
|
|
2911
|
+
i$2`${styleCss$3}`,
|
|
2910
2912
|
i$2`${colorCss$3}`
|
|
2911
2913
|
];
|
|
2912
2914
|
}
|
|
@@ -2992,7 +2994,7 @@ class AuroIcon extends BaseIcon {
|
|
|
2992
2994
|
|
|
2993
2995
|
var iconVersion = '6.1.2';
|
|
2994
2996
|
|
|
2995
|
-
var styleCss$
|
|
2997
|
+
var styleCss$2 = i$2`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
|
|
2996
2998
|
|
|
2997
2999
|
var colorCss$2 = i$2`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
2998
3000
|
|
|
@@ -3034,7 +3036,7 @@ class AuroDropdownBib extends i {
|
|
|
3034
3036
|
|
|
3035
3037
|
static get styles() {
|
|
3036
3038
|
return [
|
|
3037
|
-
styleCss$
|
|
3039
|
+
styleCss$2,
|
|
3038
3040
|
colorCss$2,
|
|
3039
3041
|
tokensCss$1
|
|
3040
3042
|
];
|
|
@@ -3195,13 +3197,15 @@ var shapeSizeCss = i$2`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic
|
|
|
3195
3197
|
|
|
3196
3198
|
var colorCss$1 = i$2`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
3197
3199
|
|
|
3200
|
+
var styleCss$1 = i$2`:host{display:block;position:relative}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
|
|
3201
|
+
|
|
3198
3202
|
var classicColorCss = i$2``;
|
|
3199
3203
|
|
|
3200
|
-
var classicLayoutCss = i$2`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}
|
|
3204
|
+
var classicLayoutCss = i$2`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
|
|
3201
3205
|
|
|
3202
|
-
var styleEmphasizedCss = i$2
|
|
3206
|
+
var styleEmphasizedCss = i$2`.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
|
|
3203
3207
|
|
|
3204
|
-
var styleSnowflakeCss = i$2`:host
|
|
3208
|
+
var styleSnowflakeCss = i$2`:host([layout*=snowflake]) .leftIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}.layout-snowflake .chevron,.layout-snowflake-left .chevron,.layout-snowflake-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}`;
|
|
3205
3209
|
|
|
3206
3210
|
var colorCss = i$2`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3207
3211
|
|
|
@@ -3508,6 +3512,7 @@ class AuroElement extends i {
|
|
|
3508
3512
|
// See LICENSE in the project root for license information.
|
|
3509
3513
|
|
|
3510
3514
|
|
|
3515
|
+
|
|
3511
3516
|
/*
|
|
3512
3517
|
* @slot - Default slot for the popover content.
|
|
3513
3518
|
* @slot helpText - Defines the content of the helpText.
|
|
@@ -3774,7 +3779,9 @@ class AuroDropdown extends AuroElement {
|
|
|
3774
3779
|
* If true, the dropdown bib is displayed.
|
|
3775
3780
|
*/
|
|
3776
3781
|
isPopoverVisible: {
|
|
3777
|
-
type: Boolean
|
|
3782
|
+
type: Boolean,
|
|
3783
|
+
reflect: true,
|
|
3784
|
+
attribute: 'open'
|
|
3778
3785
|
},
|
|
3779
3786
|
|
|
3780
3787
|
/**
|
|
@@ -3910,6 +3917,7 @@ class AuroDropdown extends AuroElement {
|
|
|
3910
3917
|
|
|
3911
3918
|
static get styles() {
|
|
3912
3919
|
return [
|
|
3920
|
+
styleCss$1,
|
|
3913
3921
|
tokensCss$1,
|
|
3914
3922
|
colorCss$1,
|
|
3915
3923
|
|
|
@@ -4090,64 +4098,6 @@ class AuroDropdown extends AuroElement {
|
|
|
4090
4098
|
this.hasFocus = false;
|
|
4091
4099
|
}
|
|
4092
4100
|
|
|
4093
|
-
/**
|
|
4094
|
-
* Determines if the element or any children are focusable.
|
|
4095
|
-
* @private
|
|
4096
|
-
* @param {HTMLElement} element - Element to check.
|
|
4097
|
-
* @returns {Boolean} - True if the element or any children are focusable.
|
|
4098
|
-
*/
|
|
4099
|
-
containsFocusableElement(element) {
|
|
4100
|
-
this.showTriggerBorders = true;
|
|
4101
|
-
|
|
4102
|
-
const nodes = [
|
|
4103
|
-
element,
|
|
4104
|
-
...element.children
|
|
4105
|
-
];
|
|
4106
|
-
|
|
4107
|
-
const focusableElements = [
|
|
4108
|
-
'a',
|
|
4109
|
-
'auro-hyperlink',
|
|
4110
|
-
'button',
|
|
4111
|
-
'auro-button',
|
|
4112
|
-
'input',
|
|
4113
|
-
'auro-input',
|
|
4114
|
-
];
|
|
4115
|
-
|
|
4116
|
-
const focusableElementsThatNeedBorders = ['auro-input'];
|
|
4117
|
-
|
|
4118
|
-
const result = nodes.some((node) => {
|
|
4119
|
-
const tagName = node.tagName.toLowerCase();
|
|
4120
|
-
|
|
4121
|
-
if (node.tabIndex > -1) {
|
|
4122
|
-
return true;
|
|
4123
|
-
}
|
|
4124
|
-
|
|
4125
|
-
if (focusableElements.includes(tagName)) {
|
|
4126
|
-
if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
|
|
4127
|
-
return true;
|
|
4128
|
-
}
|
|
4129
|
-
if (!node.hasAttribute('disabled')) {
|
|
4130
|
-
return true;
|
|
4131
|
-
}
|
|
4132
|
-
}
|
|
4133
|
-
|
|
4134
|
-
if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
|
|
4135
|
-
return true;
|
|
4136
|
-
}
|
|
4137
|
-
|
|
4138
|
-
return false;
|
|
4139
|
-
});
|
|
4140
|
-
|
|
4141
|
-
if (result) {
|
|
4142
|
-
this.showTriggerBorders = !nodes.some((node) => {
|
|
4143
|
-
const tagName = node.tagName.toLowerCase();
|
|
4144
|
-
return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
|
|
4145
|
-
});
|
|
4146
|
-
}
|
|
4147
|
-
|
|
4148
|
-
return result;
|
|
4149
|
-
}
|
|
4150
|
-
|
|
4151
4101
|
/**
|
|
4152
4102
|
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
4153
4103
|
* @private
|
|
@@ -4259,7 +4209,7 @@ class AuroDropdown extends AuroElement {
|
|
|
4259
4209
|
if (triggerContentNodes) {
|
|
4260
4210
|
|
|
4261
4211
|
// See if any of them are focusable elements
|
|
4262
|
-
this.triggerContentFocusable = triggerContentNodes.some((node) =>
|
|
4212
|
+
this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
|
|
4263
4213
|
|
|
4264
4214
|
// If any of them are focusable elements
|
|
4265
4215
|
if (this.triggerContentFocusable) {
|
|
@@ -4331,7 +4281,7 @@ class AuroDropdown extends AuroElement {
|
|
|
4331
4281
|
<div
|
|
4332
4282
|
id="trigger"
|
|
4333
4283
|
class="${e$2(this.commonWrapperClasses)}" part="wrapper"
|
|
4334
|
-
tabindex="${this.tabIndex}"
|
|
4284
|
+
tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
|
|
4335
4285
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
4336
4286
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
4337
4287
|
aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
@@ -85,6 +85,8 @@ export class AuroDropdown extends AuroElement {
|
|
|
85
85
|
*/
|
|
86
86
|
isPopoverVisible: {
|
|
87
87
|
type: BooleanConstructor;
|
|
88
|
+
reflect: boolean;
|
|
89
|
+
attribute: string;
|
|
88
90
|
};
|
|
89
91
|
/**
|
|
90
92
|
* If true, the dropdown bib is taking the fullscreen when it's open.
|
|
@@ -348,13 +350,6 @@ export class AuroDropdown extends AuroElement {
|
|
|
348
350
|
* @return {void}
|
|
349
351
|
*/
|
|
350
352
|
private handleFocusout;
|
|
351
|
-
/**
|
|
352
|
-
* Determines if the element or any children are focusable.
|
|
353
|
-
* @private
|
|
354
|
-
* @param {HTMLElement} element - Element to check.
|
|
355
|
-
* @returns {Boolean} - True if the element or any children are focusable.
|
|
356
|
-
*/
|
|
357
|
-
private containsFocusableElement;
|
|
358
353
|
/**
|
|
359
354
|
* Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
|
|
360
355
|
* This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
|