diff --git a/components/checkbox/package.json b/components/checkbox/package.json index b2f11ed8..a1745118 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -51,7 +51,7 @@ "build": "run-s build:sass bundler types", "build:sass": "sass --no-source-map --load-path=../../node_modules \"./src/styles/:./src/styles/\"", "build:watch": "nodemon -e scss,js --watch src --ignore \"*.css\" --ignore \"*-css.js\" --exec \"npm run build\"", - "bundler": "rollup -c node:@auro-formkit/config/rollup --input src/index.js", + "bundler": "rollup -c node:@auro-formkit/config/rollup", "clean": "rm -rf dist build", "dev": "web-dev-server", "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs", diff --git a/components/combobox/demo/api.min.js b/components/combobox/demo/api.min.js index be021c9a..7c39d703 100644 --- a/components/combobox/demo/api.min.js +++ b/components/combobox/demo/api.min.js @@ -115,39 +115,39 @@ function focusExample() { * Copyright 2019 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const t$6=globalThis,e$9=t$6.ShadowRoot&&(void 0===t$6.ShadyCSS||t$6.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$6=Symbol(),o$9=new WeakMap;let n$7 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$6)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$9&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$9.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$9.set(s,t));}return t}toString(){return this.cssText}};const r$8=t=>new n$7("string"==typeof t?t:t+"",void 0,s$6),i$b=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$7(o,t,s$6)},S$3=(s,o)=>{if(e$9)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$6.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$6=e$9?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$8(e)})(t):t; +const t$7=globalThis,e$9=t$7.ShadowRoot&&(void 0===t$7.ShadyCSS||t$7.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$7=Symbol(),o$a=new WeakMap;let n$8 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$7)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$9&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$a.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$a.set(s,t));}return t}toString(){return this.cssText}};const r$9=t=>new n$8("string"==typeof t?t:t+"",void 0,s$7),i$c=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$8(o,t,s$7)},S$4=(s,o)=>{if(e$9)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$7.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$7=e$9?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$9(e)})(t):t; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */const{is:i$a,defineProperty:e$8,getOwnPropertyDescriptor:r$7,getOwnPropertyNames:h$3,getOwnPropertySymbols:o$8,getPrototypeOf:n$6}=Object,a$5=globalThis,c$5=a$5.trustedTypes,l$5=c$5?c$5.emptyScript:"",p$4=a$5.reactiveElementPolyfillSupport,d$3=(t,s)=>t,u$7={toAttribute(t,s){switch(s){case Boolean:t=t?l$5: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$3=(t,s)=>!i$a(t,s),y$3={attribute:!0,type:String,converter:u$7,reflect:!1,hasChanged:f$3};Symbol.metadata??=Symbol("metadata"),a$5.litPropertyMetadata??=new WeakMap;let b$1 = class b 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=y$3){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$8(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$7(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$3}static _$Ei(){if(this.hasOwnProperty(d$3("elementProperties")))return;const t=n$6(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$3("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$3("properties"))){const t=this.properties,s=[...h$3(t),...o$8(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$6(s));}else void 0!==s&&i.push(c$6(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,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$3(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$7).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),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),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$7;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$3)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;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)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$1.elementStyles=[],b$1.shadowRootOptions={mode:"open"},b$1[d$3("elementProperties")]=new Map,b$1[d$3("finalized")]=new Map,p$4?.({ReactiveElement:b$1}),(a$5.reactiveElementVersions??=[]).push("2.0.4"); + */const{is:i$b,defineProperty:e$8,getOwnPropertyDescriptor:r$8,getOwnPropertyNames:h$4,getOwnPropertySymbols:o$9,getPrototypeOf:n$7}=Object,a$6=globalThis,c$6=a$6.trustedTypes,l$6=c$6?c$6.emptyScript:"",p$5=a$6.reactiveElementPolyfillSupport,d$4=(t,s)=>t,u$8={toAttribute(t,s){switch(s){case Boolean:t=t?l$6: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$4=(t,s)=>!i$b(t,s),y$4={attribute:!0,type:String,converter:u$8,reflect:!1,hasChanged:f$4};Symbol.metadata??=Symbol("metadata"),a$6.litPropertyMetadata??=new WeakMap;let b$2 = class b 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=y$4){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$8(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$8(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$4}static _$Ei(){if(this.hasOwnProperty(d$4("elementProperties")))return;const t=n$7(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$4("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$4("properties"))){const t=this.properties,s=[...h$4(t),...o$9(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$7(s));}else void 0!==s&&i.push(c$7(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,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$4(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$8).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),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),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$8;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$4)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;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)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$2.elementStyles=[],b$2.shadowRootOptions={mode:"open"},b$2[d$4("elementProperties")]=new Map,b$2[d$4("finalized")]=new Map,p$5?.({ReactiveElement:b$2}),(a$6.reactiveElementVersions??=[]).push("2.0.4"); /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const t$5=globalThis,i$9=t$5.trustedTypes,s$5=i$9?i$9.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$7="$lit$",h$2=`lit$${Math.random().toFixed(9).slice(2)}$`,o$7="?"+h$2,n$5=`<${o$7}>`,r$6=document,l$4=()=>r$6.createComment(""),c$4=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$4=Array.isArray,u$6=t=>a$4(t)||"function"==typeof t?.[Symbol.iterator],d$2="[ \t\n\f\r]",f$2=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$2=/-->/g,_$1=/>/g,m$2=RegExp(`>|${d$2}(?:([^\\s"'>=/]+)(${d$2}*=${d$2}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$3=/'/g,g$1=/"/g,$$1=/^(?:script|style|textarea|title)$/i,y$2=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$2(1),T$1=Symbol.for("lit-noChange"),E$1=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$6.createTreeWalker(r$6,129);function P$1(t,i){if(!a$4(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$5?s$5.createHTML(i):i}const V$1=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f$2;for(let i=0;i"===u[0]?(c=r??f$2,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$2:'"'===u[3]?g$1:p$3):c===g$1||c===p$3?c=m$2:c===v$2||c===_$1?c=f$2:(c=m$2,r=void 0);const x=c===m$2&&t[i+1].startsWith("/>")?" ":"";l+=c===f$2?s+n$5:d>=0?(o.push(a),s.slice(0,d)+e$7+s.slice(d)+h$2+x):s+h$2+(-2===d?i:x);}return [P$1(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};let N$1 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$1(t,s);if(this.el=N.createElement(f,n),C$1.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$1.nextNode())&&d.length0){r.textContent=i$9?i$9.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E$1;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$2(this,t,i,0),o=!c$4(t)||t!==this._$AH&&t!==T$1,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$1(i.insertBefore(l$4(),t),t,void 0,s??{});}return h._$AI(t),h}; +const t$6=globalThis,i$a=t$6.trustedTypes,s$6=i$a?i$a.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$7="$lit$",h$3=`lit$${Math.random().toFixed(9).slice(2)}$`,o$8="?"+h$3,n$6=`<${o$8}>`,r$7=document,l$5=()=>r$7.createComment(""),c$5=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$5=Array.isArray,u$7=t=>a$5(t)||"function"==typeof t?.[Symbol.iterator],d$3="[ \t\n\f\r]",f$3=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$3=/-->/g,_$2=/>/g,m$3=RegExp(`>|${d$3}(?:([^\\s"'>=/]+)(${d$3}*=${d$3}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$4=/'/g,g$2=/"/g,$$2=/^(?:script|style|textarea|title)$/i,y$3=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$2=y$3(1),T$2=Symbol.for("lit-noChange"),E$2=Symbol.for("lit-nothing"),A$2=new WeakMap,C$2=r$7.createTreeWalker(r$7,129);function P$2(t,i){if(!a$5(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$6?s$6.createHTML(i):i}const V$2=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f$3;for(let i=0;i"===u[0]?(c=r??f$3,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$3:'"'===u[3]?g$2:p$4):c===g$2||c===p$4?c=m$3:c===v$3||c===_$2?c=f$3:(c=m$3,r=void 0);const x=c===m$3&&t[i+1].startsWith("/>")?" ":"";l+=c===f$3?s+n$6:d>=0?(o.push(a),s.slice(0,d)+e$7+s.slice(d)+h$3+x):s+h$3+(-2===d?i:x);}return [P$2(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};let N$2 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$2(t,s);if(this.el=N.createElement(f,n),C$2.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$2.nextNode())&&d.length0){r.textContent=i$a?i$a.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E$2;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$3(this,t,i,0),o=!c$5(t)||t!==this._$AH&&t!==T$2,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$2(i.insertBefore(l$5(),t),t,void 0,s??{});}return h._$AI(t),h}; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */let r$5 = class r extends b$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$1(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T$1}};r$5._$litElement$=!0,r$5["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r$5});const i$8=globalThis.litElementPolyfillSupport;i$8?.({LitElement:r$5});(globalThis.litElementVersions??=[]).push("4.1.1"); + */let r$6 = class r extends b$2{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$2(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T$2}};r$6._$litElement$=!0,r$6["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r$6});const i$9=globalThis.litElementPolyfillSupport;i$9?.({LitElement:r$6});(globalThis.litElementVersions??=[]).push("4.1.1"); /** * @license * Copyright 2020 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const a$3=Symbol.for(""),o$6=t=>{if(t?.r===a$3)return t?._$litStatic$},s$4=t=>({_$litStatic$:t,r:a$3}),i$7=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$3}),l$3=new Map,n$4=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;${if(t?.r===a$4)return t?._$litStatic$},s$5=t=>({_$litStatic$:t,r:a$4}),i$8=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$4}),l$4=new Map,n$5=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$t}):void 0,e$6="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$5="?"+h$1,n$3=`<${o$5}>`,r$4=document,l$2=()=>r$4.createComment(""),c$3=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$4=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_=/>/g,m$1=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$2=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y$1(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$4.createTreeWalker(r$4,129);function P(t,i){if(!a$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$3?s$3.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f$1;for(let i=0;i"===u[0]?(c=r??f$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$1:'"'===u[3]?g:p$2):c===g||c===p$2?c=m$1:c===v$1||c===_?c=f$1:(c=m$1,r=void 0);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$6+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [P(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length0){r.textContent=i$6?i$6.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$1(this,t,i,0),o=!c$3(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l$2(),t),t,void 0,s??{});}return h._$AI(t),h}; +const t$2$1=globalThis,i$5$1=t$2$1.trustedTypes,s$2$1=i$5$1?i$5$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$4$1="$lit$",h$1$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4$1="?"+h$1$1,n$3$1=`<${o$4$1}>`,r$3$1=document,l$2$1=()=>r$3$1.createComment(""),c$2$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2$1=Array.isArray,u$2$1=t=>a$2$1(t)||"function"==typeof t?.[Symbol.iterator],d$1$1="[ \t\n\f\r]",f$1$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$2=/-->/g,_$1=/>/g,m$2=RegExp(`>|${d$1$1}(?:([^\\s"'>=/]+)(${d$1$1}*=${d$1$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$1$1=/'/g,g$1=/"/g,$$1=/^(?:script|style|textarea|title)$/i,y$1$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$1$1(1),T$1=Symbol.for("lit-noChange"),E$1=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$3$1.createTreeWalker(r$3$1,129);function P$1(t,i){if(!a$2$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$2$1?s$2$1.createHTML(i):i}const V$1=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f$1$1;for(let i=0;i"===u[0]?(c=r??f$1$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$2:'"'===u[3]?g$1:p$1$1):c===g$1||c===p$1$1?c=m$2:c===v$2||c===_$1?c=f$1$1:(c=m$2,r=void 0);const x=c===m$2&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1$1?s+n$3$1:d>=0?(o.push(a),s.slice(0,d)+e$4$1+s.slice(d)+h$1$1+x):s+h$1$1+(-2===d?i:x);}return [P$1(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};let N$1 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$1(t,s);if(this.el=N.createElement(f,n),C$1.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$1.nextNode())&&d.length0){r.textContent=i$5$1?i$5$1.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E$1;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$1$1(this,t,i,0),o=!c$2$1(t)||t!==this._$AH&&t!==T$1,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$1(i.insertBefore(l$2$1(),t),t,void 0,s??{});}return h._$AI(t),h}; /** * @license * Copyright 2020 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const a$1=Symbol.for(""),o$4=t=>{if(t?.r===a$1)return t?._$litStatic$},s$2=t=>({_$litStatic$:t,r:a$1}),i$5=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$1}),l$1=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;${if(t?.r===a$1$1)return t?._$litStatic$},s$1$1=t=>({_$litStatic$:t,r:a$1$1}),i$4$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$1$1}),l$1$1=new Map,n$2$1=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$new n$1("string"==typeof t?t:t+"",void 0,s$1),i$4=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s$1)},S=(s,o)=>{if(e$5)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$3.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$5?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t; +const t$1$1=globalThis,e$3$1=t$1$1.ShadowRoot&&(void 0===t$1$1.ShadyCSS||t$1$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$4=Symbol(),o$2$1=new WeakMap;let n$1$1 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$4)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$3$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2$1.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2$1.set(s,t));}return t}toString(){return this.cssText}};const r$2$1=t=>new n$1$1("string"==typeof t?t:t+"",void 0,s$4),i$3$1=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1$1(o,t,s$4)},S$2=(s,o)=>{if(e$3$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1$1=e$3$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2$1(e)})(t):t; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */const{is:i$3,defineProperty:e$4,getOwnPropertyDescriptor:r$2,getOwnPropertyNames:h,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c$1=a.trustedTypes,l=c$1?c$1.emptyScript:"",p$1=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u$2={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$3(t,s),y={attribute:!0,type:String,converter:u$2,reflect:!1,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class b 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=y){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$4(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$2(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}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=!0,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...h(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$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,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(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$2).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),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),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$2;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;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)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d("elementProperties")]=new Map,b[d("finalized")]=new Map,p$1?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.4"); + */const{is:i$2$1,defineProperty:e$2$1,getOwnPropertyDescriptor:r$1$1,getOwnPropertyNames:h$2,getOwnPropertySymbols:o$1$1,getPrototypeOf:n$4}=Object,a$3=globalThis,c$4=a$3.trustedTypes,l$3=c$4?c$4.emptyScript:"",p$3=a$3.reactiveElementPolyfillSupport,d$2=(t,s)=>t,u$5={toAttribute(t,s){switch(s){case Boolean:t=t?l$3: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$2=(t,s)=>!i$2$1(t,s),y$2={attribute:!0,type:String,converter:u$5,reflect:!1,hasChanged:f$2};Symbol.metadata??=Symbol("metadata"),a$3.litPropertyMetadata??=new WeakMap;let b$1 = class b 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=y$2){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$2$1(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$1$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$2}static _$Ei(){if(this.hasOwnProperty(d$2("elementProperties")))return;const t=n$4(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$2("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$2("properties"))){const t=this.properties,s=[...h$2(t),...o$1$1(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$1(s));}else void 0!==s&&i.push(c$1$1(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,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$2(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$5).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),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),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$5;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$2)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;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)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$1.elementStyles=[],b$1.shadowRootOptions={mode:"open"},b$1[d$2("elementProperties")]=new Map,b$1[d$2("finalized")]=new Map,p$3?.({ReactiveElement:b$1}),(a$3.reactiveElementVersions??=[]).push("2.0.4"); /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */let r$1 = class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}};r$1._$litElement$=!0,r$1["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r$1});const i$2=globalThis.litElementPolyfillSupport;i$2?.({LitElement:r$1});(globalThis.litElementVersions??=[]).push("4.1.1"); + */let r$5 = class r extends b$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$1(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T$1}};r$5._$litElement$=!0,r$5["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r$5});const i$1$1=globalThis.litElementPolyfillSupport;i$1$1?.({LitElement:r$5});(globalThis.litElementVersions??=[]).push("4.1.1"); // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -598,7 +598,7 @@ const t$3=globalThis,e$5=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.na /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ -class AuroLibraryRuntimeUtils { +let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils { /* eslint-disable jsdoc/require-param */ @@ -659,7 +659,7 @@ class AuroLibraryRuntimeUtils { return elemTag === tag || elem.hasAttribute(tag); } -} +}; /** * Custom positioning reference element. @@ -2450,7 +2450,7 @@ class AuroFloatingUI { // See LICENSE in the project root for license information. -class AuroDependencyVersioning { +let AuroDependencyVersioning$1 = class AuroDependencyVersioning { /** * Generates a unique string to be used for child auro element naming. @@ -2476,7 +2476,7 @@ class AuroDependencyVersioning { */ generateTag(baseName, version, tagClass) { const elementName = this.generateElementName(baseName, version); - const tag = i$5`${s$2(elementName)}`; + const tag = i$4$1`${s$1$1(elementName)}`; if (!customElements.get(elementName)) { customElements.define(elementName, class extends tagClass {}); @@ -2484,26 +2484,26 @@ class AuroDependencyVersioning { return tag; } -} +}; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const t$2={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$3=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}; +const t$5={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1$2=t=>(...e)=>({_$litDirective$:t,values:e});let i$7 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}; /** * @license * Copyright 2018 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */const e$2=e$3(class extends i$1{constructor(t){if(super(t),t.type!==t$2.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}}); + */const e$6=e$1$2(class extends i$7{constructor(t$1){if(super(t$1),t$1.type!==t$5.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$1}}); /** * @license * Copyright 2018 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */const o$1=o=>o??E; + */const o$6=o=>o??E$1; // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -2515,7 +2515,7 @@ const t$2={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6} * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually */ -let AuroElement$1 = class AuroElement extends r$1 { +let AuroElement$2 = class AuroElement extends r$5 { // function to define props used within the scope of this component static get properties() { @@ -2541,11 +2541,11 @@ let AuroElement$1 = class AuroElement extends r$1 { } }; -var error$1 = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"Error alert indicator."}; +var error$2 = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"Error alert indicator."}; /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */ -const _fetchMap$1 = new Map(); +const _fetchMap$2 = new Map(); /** * A callback to parse Response body. @@ -2563,15 +2563,15 @@ const _fetchMap$1 = new Map(); * @param {ResponseParser} [options.responseParser=(response) => response.text()] * @returns {Promise} */ -const cacheFetch$1 = (uri, options = {}) => { +const cacheFetch$2 = (uri, options = {}) => { const responseParser = options.responseParser || ((response) => response.text()); - if (!_fetchMap$1.has(uri)) { - _fetchMap$1.set(uri, fetch(uri).then(responseParser)); + if (!_fetchMap$2.has(uri)) { + _fetchMap$2.set(uri, fetch(uri).then(responseParser)); } - return _fetchMap$1.get(uri); + return _fetchMap$2.get(uri); }; -var styleCss$9 = i$4`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}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}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`; +var styleCss$2$2 = i$3$1`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}:host([customSize]){--auro-size-lg:100%;--ds-size-300: 100%;width:100%;height:100%}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`; // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -2584,7 +2584,7 @@ var styleCss$9 = i$4`*,*:before,*:after{box-sizing:border-box}@media(prefers-red */ // build the component class -let BaseIcon$1 = class BaseIcon extends AuroElement$1 { +let BaseIcon$2 = class BaseIcon extends AuroElement$2 { constructor() { super(); this.onDark = false; @@ -2610,8 +2610,8 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 { } static get styles() { - return i$4` - ${styleCss$9} + return i$3$1` + ${styleCss$2$2} `; } @@ -2626,9 +2626,9 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 { let iconHTML = ''; if (category === 'logos') { - iconHTML = await cacheFetch$1(`${this.uri}/${category}/${name}.svg`); + iconHTML = await cacheFetch$2(`${this.uri}/${category}/${name}.svg`); } else { - iconHTML = await cacheFetch$1(`${this.uri}/icons/${category}/${name}.svg`); + iconHTML = await cacheFetch$2(`${this.uri}/icons/${category}/${name}.svg`); } const dom = new DOMParser().parseFromString(iconHTML, 'text/html'); @@ -2644,7 +2644,7 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 { if (svg) { this.svg = svg; } else if (!svg) { - const penDOM = new DOMParser().parseFromString(error$1.svg, 'text/html'); + const penDOM = new DOMParser().parseFromString(error$2.svg, 'text/html'); this.svg = penDOM.body.firstChild; } @@ -2652,9 +2652,9 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 { } }; -var tokensCss$6 = i$4`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`; +var tokensCss$1$2 = i$3$1`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default)}`; -var colorCss$8 = i$4`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`; +var colorCss$2$2 = i$3$1`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`; // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -2664,6 +2664,7 @@ var colorCss$8 = i$4`:host{color:var(--ds-auro-icon-color)}:host([customColor]){ /** * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name. * + * @attr {Boolean} customSize - Allows for custom size use. * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage. * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage * @attr {Boolean} customColor - Removes primary selector. @@ -2687,7 +2688,7 @@ var colorCss$8 = i$4`:host{color:var(--ds-auro-icon-color)}:host([customColor]){ */ // build the component class -let AuroIcon$1 = class AuroIcon extends BaseIcon$1 { +let AuroIcon$2 = class AuroIcon extends BaseIcon$2 { constructor() { super(); @@ -2716,7 +2717,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 { this.success = false; this.tertiary = false; this.warning = false; - this.runtimeUtils = new AuroLibraryRuntimeUtils(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); } // function to define props used within the scope of this component @@ -2798,24 +2799,12 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 { static get styles() { return [ super.styles, - i$4`${tokensCss$6}`, - i$4`${styleCss$9}`, - i$4`${colorCss$8}` + i$3$1`${tokensCss$1$2}`, + i$3$1`${styleCss$2$2}`, + i$3$1`${colorCss$2$2}` ]; } - /** - * This will register this element with the browser. - * @param {string} [name="auro-icon"] - The name of element that you want to register to. - * - * @example - * AuroIcon.register("custom-icon") // this will register this element to - * - */ - static register(name = "auro-icon") { - AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon); - } - connectedCallback() { super.connectedCallback(); @@ -2834,20 +2823,20 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 { 'label': this.label }; - return x` + return x$1`
- - ${this.customSvg ? x` + class="${e$6(classes)}" + title="${o$6(this.title || undefined)}"> + + ${this.customSvg ? x$1` - ` : x` + ` : x$1` ${this.svg} ` } -
+
@@ -2855,17 +2844,22 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 { } }; -var iconVersion$1 = '6.0.3'; +// default internal definition +if (!customElements.get("auro-icon")) { + customElements.define("auro-icon", AuroIcon$2); +} -var styleCss$8 = i$4`: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 iconVersion$2 = '6.1.1'; -var colorCss$7 = i$4`.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 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 tokensCss$5 = i$4`: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 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 styleCss$7 = i$4`.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 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 colorCss$6 = i$4`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`; +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 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)}`; // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -2878,12 +2872,12 @@ var colorCss$6 = i$4`.container{background-color:var(--ds-auro-dropdownbib-conta * @csspart bibContainer - Apply css to the bib container. */ -class AuroDropdownBib extends r$1 { +class AuroDropdownBib extends r$5 { static get styles() { return [ - styleCss$7, - colorCss$6, + styleCss$5, + colorCss$5, tokensCss$5 ]; } @@ -2907,7 +2901,7 @@ class AuroDropdownBib extends r$1 { // function that renders the HTML and CSS into the scope of the component render() { - return u$3` + return u$1$1`
@@ -2951,7 +2945,7 @@ if (!customElements.get("auro-dropdownbib")) { * @event auroDropdown-ready - Notifies that the component has finished initializing. * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed. */ -class AuroDropdown extends r$1 { +class AuroDropdown extends r$5 { constructor() { super(); @@ -2981,7 +2975,7 @@ class AuroDropdown extends r$1 { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils(); + this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); /** * @private @@ -3001,8 +2995,8 @@ class AuroDropdown extends r$1 { /** * Generate unique names for dependency components. */ - const versioning = new AuroDependencyVersioning(); - this.iconTag = versioning.generateTag('auro-icon', iconVersion$1, AuroIcon$1); + const versioning = new AuroDependencyVersioning$1(); + this.iconTag = versioning.generateTag('auro-icon', iconVersion$2, AuroIcon$2); } /** @@ -3098,8 +3092,8 @@ class AuroDropdown extends r$1 { static get styles() { return [ - styleCss$8, - colorCss$7, + styleCss$1$2, + colorCss$1$2, tokensCss$5 ]; } @@ -3113,7 +3107,7 @@ class AuroDropdown extends r$1 { * */ static register(name = "auro-dropdown") { - AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDropdown); + AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroDropdown); } connectedCallback() { @@ -3217,7 +3211,7 @@ class AuroDropdown extends r$1 { // function that renders the HTML and CSS into the scope of the component render() { - return u$3` + return u$1$1`
- ${this.chevron || this.common ? u$3` + ${this.chevron || this.common ? u$1$1`
@@ -3272,6 +3266,8 @@ class AuroDropdown extends r$1 { } } +AuroDropdown.register(); + var dropdownVersion = '3.0.0'; /** @@ -3279,32 +3275,46 @@ var dropdownVersion = '3.0.0'; * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const t$1={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}} +const t$3=globalThis,i$5=t$3.trustedTypes,s$3=i$5?i$5.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$4="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4="?"+h$1,n$3=`<${o$4}>`,r$4=document,l$2=()=>r$4.createComment(""),c$3=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$4=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_=/>/g,m$1=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$2=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y$1(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$4.createTreeWalker(r$4,129);function P(t,i){if(!a$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$3?s$3.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f$1;for(let i=0;i"===u[0]?(c=r??f$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$1:'"'===u[3]?g:p$2):c===g||c===p$2?c=m$1:c===v$1||c===_?c=f$1:(c=m$1,r=void 0);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$4+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [P(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length0){r.textContent=i$5?i$5.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$1(this,t,i,0),o=!c$3(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l$2(),t),t,void 0,s??{});}return h._$AI(t),h}; + +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const a$1=Symbol.for(""),o$3=t=>{if(t?.r===a$1)return t?._$litStatic$},s$2=t=>({_$litStatic$:t,r:a$1}),i$4=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$1}),l$1=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$(...e)=>({_$litDirective$:t,values:e});let i$3 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}; /** * @license * Copyright 2020 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */const {I:t}=Z,s=()=>document.createComment(""),r=(o,i,n)=>{const e=o._$AA.parentNode,l=void 0===i?o._$AB:i._$AA;if(void 0===n){const i=e.insertBefore(s(),l),c=e.insertBefore(s(),l);n=new t(i,c,o,o.options);}else {const t=n._$AB.nextSibling,i=n._$AM,c=i!==o;if(c){let t;n._$AQ?.(o),n._$AM=o,void 0!==n._$AP&&(t=o._$AU)!==i._$AU&&n._$AP(t);}if(t!==l||c){let o=n._$AA;for(;o!==t;){const t=o.nextSibling;e.insertBefore(o,l),o=t;}}}return n},v=(o,t,i=o)=>(o._$AI(t,i),o),u$1={},m=(o,t=u$1)=>o._$AH=t,p=o=>o._$AH,M=o=>{o._$AP?.(!1,!0);let t=o._$AA;const i=o._$AB.nextSibling;for(;t!==i;){const o=t.nextSibling;t.remove(),t=o;}}; + */const {I:t$1}=Z,s$1=()=>document.createComment(""),r$3=(o,i,n)=>{const e=o._$AA.parentNode,l=void 0===i?o._$AB:i._$AA;if(void 0===n){const i=e.insertBefore(s$1(),l),c=e.insertBefore(s$1(),l);n=new t$1(i,c,o,o.options);}else {const t=n._$AB.nextSibling,i=n._$AM,c=i!==o;if(c){let t;n._$AQ?.(o),n._$AM=o,void 0!==n._$AP&&(t=o._$AU)!==i._$AU&&n._$AP(t);}if(t!==l||c){let o=n._$AA;for(;o!==t;){const t=o.nextSibling;e.insertBefore(o,l),o=t;}}}return n},v=(o,t,i=o)=>(o._$AI(t,i),o),u$2={},m=(o,t=u$2)=>o._$AH=t,p$1=o=>o._$AH,M=o=>{o._$AP?.(!1,!0);let t=o._$AA;const i=o._$AB.nextSibling;for(;t!==i;){const o=t.nextSibling;t.remove(),t=o;}}; /** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ -const u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=e$1(class extends i{constructor(e){if(super(e),e.type!==t$1.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r$1,c]){const d=p(s),{values:p$1,keys:a}=this.dt(t,r$1,c);if(!Array.isArray(d))return this.ut=a,p$1;const h=this.ut??=[],v$1=[];let m$1,y,x=0,j=d.length-1,k=0,w=p$1.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v$1[k]=v(d[x],p$1[k]),x++,k++;else if(h[j]===a[w])v$1[w]=v(d[j],p$1[w]),j--,w--;else if(h[x]===a[w])v$1[w]=v(d[x],p$1[w]),r(s,v$1[w+1],d[x]),x++,w--;else if(h[j]===a[k])v$1[k]=v(d[j],p$1[k]),r(s,d[x],d[j]),j--,k++;else if(void 0===m$1&&(m$1=u(a,k,w),y=u(h,x,j)),m$1.has(h[x]))if(m$1.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=r(s,d[x]);v(e,p$1[k]),v$1[k]=e;}else v$1[k]=v(t,p$1[k]),r(s,d[x],t),d[e]=null;k++;}else M(d[j]),j--;else M(d[x]),x++;for(;k<=w;){const e=r(s,v$1[w+1]);v(e,p$1[k]),v$1[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&M(e);}return this.ut=a,m(s,v$1),T$1}}); +const u$1=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c$2=e$3(class extends i$3{constructor(e){if(super(e),e.type!==t$2.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=p$1(s),{values:p,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p;const h=this.ut??=[],v$1=[];let m$1,y,x=0,j=d.length-1,k=0,w=p.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v$1[k]=v(d[x],p[k]),x++,k++;else if(h[j]===a[w])v$1[w]=v(d[j],p[w]),j--,w--;else if(h[x]===a[w])v$1[w]=v(d[x],p[w]),r$3(s,v$1[w+1],d[x]),x++,w--;else if(h[j]===a[k])v$1[k]=v(d[j],p[k]),r$3(s,d[x],d[j]),j--,k++;else if(void 0===m$1&&(m$1=u$1(a,k,w),y=u$1(h,x,j)),m$1.has(h[x]))if(m$1.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=r$3(s,d[x]);v(e,p[k]),v$1[k]=e;}else v$1[k]=v(t,p[k]),r$3(s,d[x],t),d[e]=null;k++;}else M(d[j]),j--;else M(d[x]),x++;for(;k<=w;){const e=r$3(s,v$1[w+1]);v(e,p[k]),v$1[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&M(e);}return this.ut=a,m(s,v$1),T}}); /** * @license * Copyright 2018 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */const e=e$1(class extends i{constructor(t){if(super(t),t.type!==t$1.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$1}}); + */const e$2=e$3(class extends i$3{constructor(t){if(super(t),t.type!==t$2.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}}); /** * @license * Copyright 2018 Google LLC * SPDX-License-Identifier: BSD-3-Clause - */const o=o=>o??E$1; + */const o$2=o=>o??E; const watchedItems = new Set(); @@ -3409,11 +3419,30 @@ function stopNotifyingOnLangChange(element) { watchedItems.delete(element); } -var styleCss$6 = i$b`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{position:relative;display:flex;flex:1;flex-direction:row}input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{background:none;pointer-events:none}`; +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$4=globalThis,e$1$1=t$4.ShadowRoot&&(void 0===t$4.ShadyCSS||t$4.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$1=new WeakMap;let n$1 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$1$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$1.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$1.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$1("string"==typeof t?t:t+"",void 0,s),i$2=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s)},S=(s,o)=>{if(e$1$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$4.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const{is:i$1,defineProperty:e$5,getOwnPropertyDescriptor:r$1,getOwnPropertyNames:h,getOwnPropertySymbols:o$5,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),y={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class b 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=y){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$5(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}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=!0,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...h(t),...o$5(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 !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,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(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),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),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;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)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d("elementProperties")]=new Map,b[d("finalized")]=new Map,p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.4"); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i$6=globalThis.litElementPolyfillSupport;i$6?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1"); + +var styleCss$3$1 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{background:none;pointer-events:none}`; -var colorCss$5 = i$b`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`; +var colorCss$3 = i$2`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`; -var tokensCss$4 = i$b`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; +var tokensCss$3 = i$2`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; @@ -4972,678 +5001,983 @@ Cleave.DefaultProperties = DefaultProperties_1; // CommonJS var Cleave_1 = Cleave; -// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. +// --------------------------------------------------------------------- -/** - * Auro-input provides users a way to enter data into a text field. - * - * @attr {Boolean} activeLabel - If set, the label will remain fixed in the active position. - * @attr {String} autocapitalize - An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] - * @attr {String} autocomplete - An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. - * @attr {String} autocorrect - When set to `off`, stops iOS from auto correcting words when typed into a text box. - * @attr {Boolean} bordered - Applies bordered UI variant. - * @attr {Boolean} borderless - Applies borderless UI variant. - * @attr {Boolean} disabled - If set, disables the input. - * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. - * @prop {String} errorMessage - Contains the help text message for the current validity error. - * @attr {String} helpText - Deprecated, see `slot`. - * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. - * @attr {String} id - Sets the unique ID of the element. - * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. - * @attr {String} label - Deprecated, see `slot`. - * @attr {String} lang - defines the language of an element. - * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. - * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. - * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. - * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. - * @attr {String} name - Populates the `name` attribute on the input. - * @attr {Boolean} noValidate - If set, disables auto-validation on blur. - * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. - * @prop {Boolean} ready - When false the component API should not be called. - * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. - * @attr {String} pattern - Specifies a regular expression the form control's value should match. - * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. - * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates. - * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`. - * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`. - * @attr {String} setCustomValidityBadInput - Custom help text message to display when validity = `badInput`. - * @attr {String} setCustomValidityTooShort - Custom help text message to display when validity = `tooShort`. - * @attr {String} setCustomValidityTooLong - Custom help text message to display when validity = `tooLong`. - * @attr {String} setCustomValidityForType - Custom help text message to display for the declared element `type` and type validity fails. - * @attr {String} setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`. - * @attr {String} setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`. - * @attr {String} spellcheck - An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. - * @attr {String} type - Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day` or `text`. If given value is not allowed or set, defaults to `text`. - * @attr {Boolean} validateOnInput - Sets validation mode to re-eval with each input. - * @attr {String} validity - Specifies the `validityState` this element is in. - * @attr {String} value - Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. - * - * @slot helptext - Sets the help text displayed below the input. - * @slot label - Sets the label text for the input. - * - * @csspart wrapper - Use for customizing the style of the root element - * @csspart label - Use for customizing the style of the label element - * @csspart helpText - Use for customizing the style of the helpText element - * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon) - * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value) - * @event input - Event fires when the value of an `auro-input` has been changed. - * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed. - */ - -class BaseInput extends r$5 { - - constructor() { - super(); +/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ - this.isValid = false; +let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils { - this.icon = false; - this.disabled = false; - this.required = false; - this.noValidate = false; - this.max = undefined; - this.min = undefined; - this.maxLength = undefined; - this.minLength = undefined; - this.label = 'Input label is undefined'; - this.ready = false; - this.activeLabel = false; + /* eslint-disable jsdoc/require-param */ - this.setCustomValidityForType = undefined; + /** + * This will register a new custom element with the browser. + * @param {String} name - The name of the custom element. + * @param {Object} componentClass - The class to register as a custom element. + * @returns {void} + */ + registerComponent(name, componentClass) { + if (!customElements.get(name)) { + customElements.define(name, class extends componentClass {}); + } } /** - * Internal Defaults. - * @private + * Finds and returns the closest HTML Element based on a selector. * @returns {void} */ - privateDefaults() { - this.validation = new AuroFormValidation(); - this.inputIconName = undefined; - this.showPassword = false; - this.validationCCLength = undefined; - this.hasValue = false; + closestElement( + selector, // selector like in .closest() + base = this, // extra functionality to skip a parent + __Closest = (el, found = el && el.closest(selector)) => + !el || el === document || el === window + ? null // standard .closest() returns null for non-found selectors also + : found + ? found // found a selector INside this element + : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM + ) { + return __Closest(base); + } + /* eslint-enable jsdoc/require-param */ - this.allowedInputTypes = [ - "text", - "email", - "password", - "credit-card", - "month-day-year", - "year-month-day", - "month-year" - ]; + /** + * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. + * @param {Object} elem - The element to check. + * @param {String} tagName - The name of the Auro component to check for or add as an attribute. + * @returns {void} + */ + handleComponentTagRename(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); - this.dateInputTypes = [ - "month-day-year", - "year-month-day", - "month-year", - "month-fullYear", - "month", - "year", - "fullYear" - ]; + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } - this.autoFormattingTypes = [ - 'credit-card', - 'month-day-year', - 'month-year', - 'month-fullyear', - 'year-month-day' - ]; + /** + * Validates if an element is a specific Auro component. + * @param {Object} elem - The element to validate. + * @param {String} tagName - The name of the Auro component to check against. + * @returns {Boolean} - Returns true if the element is the specified Auro component. + */ + elementMatch(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); - /** - * Credit Card is not included as this caused cursor placement issues. - * The Safari issue. - */ - this.setSelectionInputTypes = [ - "text", - "password", - "email", - ]; + return elemTag === tag || elem.hasAttribute(tag); + } +}; - const idLength = 36; - const idSubstrEnd = 8; - const idSubstrStart = 2; +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. - this.uniqueId = Math.random() - .toString(idLength) - .substring(idSubstrStart, idSubstrEnd); + +class AuroFormValidation { + constructor() { + this.runtimeUtils = new AuroLibraryRuntimeUtils$1(); } - // function to define props used within the scope of this component - static get properties() { - return { - id: { type: String }, - label: { type: String }, - name: { type: String }, - type: { type: String, - reflect: true }, - value: { type: String }, - lang: { type: String }, - pattern: { - type: String, - reflect: true - }, - icon: { type: Boolean }, - disabled: { type: Boolean }, - required: { type: Boolean }, - noValidate: { type: Boolean }, - helpText: { type: String }, - spellcheck: { type: String }, - autocorrect: { type: String }, - autocapitalize: { type: String }, - autocomplete: { - type: String, - reflect: true - }, - placeholder: { type: String }, - activeLabel: { - type: Boolean, - reflect: true - }, - max: { type: String }, - min: { type: String }, - maxLength: { type: Number }, - minLength: { type: Number }, + /** + * Determines the validity state of the element based on the common attribute restrictions (pattern). + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + validateAttributes(elem) { + if (elem.pattern) { + const pattern = new RegExp(`^${elem.pattern}$`, 'u'); - /** - * @ignore - */ - showPassword: { state: true }, - validateOnInput: { type: Boolean }, - readonly: { type: Boolean }, - ready: { type: Boolean }, - error: { - type: String, - reflect: true - }, - errorMessage: { type: String }, - isValid: { - type: String, - reflect: true - }, - validity: { - type: String, - reflect: true - }, - setCustomValidity: { type: String }, - setCustomValidityCustomError: { type: String }, - setCustomValidityValueMissing: { type: String }, - setCustomValidityBadInput: { type: String }, - setCustomValidityTooShort: { type: String }, - setCustomValidityTooLong: { type: String }, - setCustomValidityRangeOverflow: { type: String}, - setCustomValidityRangeUnderflow: { type: String}, - customValidityTypeEmail: { type: String } - }; + if (!pattern.test(elem.value)) { + elem.validity = 'badInput'; + elem.setCustomValidity = elem.setCustomValidityBadInput || ''; + } + } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) { + elem.validity = 'tooShort'; + elem.setCustomValidity = elem.setCustomValidityTooShort || ''; + } else if (elem.value && elem.value.length > elem.maxLength) { + elem.validity = 'tooLong'; + elem.setCustomValidity = elem.setCustomValidityTooLong || ''; + } } - static get styles() { - return [ - i$b`${styleCss$6}`, - i$b`${colorCss$5}`, - i$b`${tokensCss$4}` - ]; - } + /** + * Determines the validity state of the element based on the type attribute. + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + validateType(elem) { + if (elem.hasAttribute('type')) { + if (elem.type === 'email') { + const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp - connectedCallback() { - super.connectedCallback(); + if (!elem.value.match(emailRegex)) { + elem.validity = 'badInput'; + elem.setCustomValidity = elem.setCustomValidityForType || ''; + } + } else if (elem.type === 'credit-card') { + if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) { + elem.validity = 'tooShort'; + elem.setCustomValidity = elem.setCustomValidityForType || ''; + } + } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { + elem.validity = 'rangeOverflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; + } - this.privateDefaults(); + if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) { + elem.validity = 'rangeUnderflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || ''; + } - notifyOnLangChange(this); + } else if (elem.type === 'month-day-year' || + elem.type === 'month-year' || + elem.type === 'month-fullYear' || + elem.type === 'year-month-day' + ) { + if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) { + elem.validity = 'tooShort'; + elem.setCustomValidity = elem.setCustomValidityForType || ''; + } else { + const valueDate = new Date(elem.value); - // Process auto-formatting if defined for CleaveJS - if (this.type) { - let config = null; + // validate max + if (elem.max !== undefined) { + const maxDate = new Date(elem.max); - // Set config for credit card - switch (this.type) { - case 'number': - config = { - numeral: true, - delimiter: '' - }; + if (valueDate > maxDate) { + elem.validity = 'rangeOverflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; + } + } - this.inputMode = 'numeric'; + // validate min + if (elem.min) { + const minDate = new Date(elem.min); - break; + if (valueDate < minDate) { + elem.validity = 'rangeUnderflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || ''; + } + } + } + } + } + } - case 'credit-card': - config = { - creditCard: true - }; + /** + * Determines the validity state of the element. + * @param {object} elem - HTML element to validate. + * @param {boolean} force - Boolean that forces validation to run. + * @returns {void} + */ + validate(elem, force) { + this.getInputElements(elem); + this.getAuroInputs(elem); - this.inputMode = 'numeric'; + // Validate only if noValidate is not true and the input does not have focus + const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput; - break; + if (elem.hasAttribute('error')) { + elem.validity = 'customError'; + elem.setCustomValidity = elem.error; + } else if (validationShouldRun) { + elem.validity = 'valid'; + elem.setCustomValidity = ''; - case 'month-day-year': - config = { - date: true, - delimiter: '/', - datePattern: [ - 'm', - 'd', - 'Y' - ] - }; + /** + * Only validate once we interact with the datepicker + * elem.value === undefined is the initial state pre-interaction. + * + * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState. + */ - this.inputMode = 'numeric'; + let hasValue = elem.value && elem.value.length > 0; - break; + // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false; + if (this.auroInputElements && this.auroInputElements.length === 2) { + if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) { + hasValue = false; + } + } - case 'year-month-day': - config = { - date: true, - delimiter: '/', - datePattern: [ - 'Y', - 'm', - 'd' - ] - }; + if (!hasValue && elem.required) { + elem.validity = 'valueMissing'; + elem.setCustomValidity = elem.setCustomValidityValueMissing || ''; + } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) { + this.validateType(elem); + this.validateAttributes(elem); + } + } - this.inputMode = 'numeric'; + if (this.auroInputElements && this.auroInputElements.length > 0) { + elem.validity = this.auroInputElements[0].validity; + elem.setCustomValidity = this.auroInputElements[0].setCustomValidity; - break; + if (elem.validity === 'valid') { + if (this.auroInputElements.length > 1) { + elem.validity = this.auroInputElements[1].validity; + elem.setCustomValidity = this.auroInputElements[1].setCustomValidity; + } + } + } - case 'month-year': - config = { - date: true, - datePattern: [ - 'm', - 'y' - ] - }; - - this.inputMode = 'numeric'; - - break; - - case 'month-fullYear': - config = { - date: true, - datePattern: [ - 'm', - 'Y' - ] - }; - - this.inputMode = 'numeric'; - - break; - - case 'fullYear': - config = { - date: true, - datePattern: ['Y'] - }; - - this.inputMode = 'numeric'; - - break; - - case 'year': - config = { - date: true, - datePattern: ['y'] - }; - - this.inputMode = 'numeric'; - - break; - - case 'month': - config = { - date: true, - datePattern: ['m'] - }; - - this.inputMode = 'numeric'; - - break; - // Do nothing - } - - // initialize CleaveJS if we have a defined config for the requested format - if (config) { - // eslint-disable-next-line no-unused-vars - new Cleave_1(this, config); - } - } - } - - disconnectedCallback() { - super.disconnectedCallback(); - stopNotifyingOnLangChange(this); - } - - firstUpdated() { - // add attribute for query selectors when auro-input is registered under a custom name - if (this.tagName.toLowerCase() !== 'auro-input') { - this.setAttribute('auro-input', true); - } - - this.inputElement = this.renderRoot.querySelector('input'); - this.labelElement = this.shadowRoot.querySelector('label'); - - // use validity message override if declared when initializing the component - if (this.hasAttribute('setCustomValidity')) { - this.ValidityMessageOverride = this.setCustomValidity; - } - - // if setCustomValidityForType is not set, use our default - if (!this.setCustomValidityForType) { - if (this.type === 'password') { - this.setCustomValidityForType = i18n(this.lang, 'password'); - } else if (this.type === 'credit-card') { - this.setCustomValidityForType = i18n(this.lang, 'creditcard'); - } else if (this.type === 'email') { - this.setCustomValidityForType = i18n(this.lang, 'email'); - } else if (this.type === 'month-day-year') { - this.setCustomValidityForType = i18n(this.lang, 'dateMMDDYYYY'); - } else if (this.type === 'month-year') { - this.setCustomValidityForType = i18n(this.lang, 'dateMMYY'); - } else if (this.type === 'month-fullyear') { - this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY'); - } else if (this.type === 'year-month-day') { - this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD'); - } else if (this.type === 'year') { - this.setCustomValidityForType = i18n(this.lang, 'dateYY'); - } else if (this.type === 'fullYear') { - this.setCustomValidityForType = i18n(this.lang, 'dateYYYY'); - } else if (this.type === 'month') { - this.setCustomValidityForType = i18n(this.lang, 'dateMM'); - } - } - - this.addEventListener('keydown', (evt) => { - if (this.autoFormattingTypes.includes(this.type)) { - if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') { - if (evt.key.length === 1) { - const numCharSelected = this.inputElement.selectionEnd - this.inputElement.selectionStart; - - if (numCharSelected > 1) { - this.cursorPosition = this.inputElement.selectionStart + 1; - } else if (numCharSelected === 1) { - this.cursorPosition = this.inputElement.selectionEnd; - } else { - this.cursorPosition = this.inputElement.selectionEnd + 1; - } - } else if (evt.key === 'Backspace') { - this.cursorPosition = this.inputElement.selectionEnd - 1; - } else if (evt.key === 'Delete') { - this.cursorPosition = this.inputElement.selectionEnd; - } - } + if (validationShouldRun || elem.hasAttribute('error')) { + if (elem.validity && elem.validity !== 'valid') { + elem.isValid = false; - if (evt.key === "ArrowUp" || evt.key === "ArrowDown" || evt.key === "ArrowLeft" || evt.key === "ArrowRight") { - if (evt.key === 'ArrowUp') { - this.cursorPosition = 0; - } else if (evt.key === 'ArrowDown') { - this.cursorPosition = this.value.length; - } else if (evt.key === 'ArrowLeft') { - this.cursorPosition = this.inputElement.selectionEnd - 1; - } else if (evt.key === 'ArrowRight') { - this.cursorPosition = this.inputElement.selectionEnd + 1; - } + // Use the validity message override if it is declared + if (elem.ValidityMessageOverride) { + elem.setCustomValidity = elem.ValidityMessageOverride; } - } - }); - - this.notifyReady(); - } - - /** - * LitElement lifecycle method. Called after the DOM has been updated. - * @param {Map} changedProperties - Keys are the names of changed properties, values are the corresponding previous values. - * @returns {void} - */ - updated(changedProperties) { - if (this.type === 'password') { - this.spellcheck = 'false'; - } - - if (this.spellcheck === 'false') { - this.autocorrect = 'off'; - this.autocapitalize = 'none'; - } else { - this.autocorrect = this.autocorrect ? this.autocorrect : undefined; - this.autocapitalize = undefined; - } - - if (changedProperties.has('readonly')) { - if (this.readonly) { - this.inputElement.setAttribute('readonly', true); - this.inputElement.setAttribute('aria-readonly', true); - } else { - this.inputElement.removeAttribute('readonly'); - this.inputElement.removeAttribute('aria-readonly'); - } - } - - if (changedProperties.has('type')) { - this.configureDataForType(); - } - - if (changedProperties.has('value')) { - if (this.value && this.value.length > 0) { - this.hasValue = true; - this.requestUpdate(); } else { - this.hasValue = false; - this.requestUpdate(); + elem.isValid = true; } - if (this.value !== this.inputElement.value) { - if (this.value) { - this.inputElement.value = this.value; - } else { - this.inputElement.value = ''; - } + this.getErrorMessage(elem); - if (!this.shadowRoot.contains(this.getActiveElement())) { - this.validation.validate(this); + elem.dispatchEvent(new CustomEvent('auroFormElement-validated', { + bubbles: true, + composed: true, + detail: { + validity: elem.validity, + message: elem.errorMessage } - - this.notifyValueChanged(); - } - this.autoFormatHandling(); - } - - if (changedProperties.has('error')) { - this.validation.validate(this, true); - } - - if (changedProperties.has('validity')) { - this.notifyValidityChange(); + })); } } /** + * Gets all the HTML5 `inputs` in the element shadow DOM. * @private - * @returns {void} Handles cursor position when input auto-formats. + * @param {object} elem - HTML element to validate. + * @returns {void} */ - autoFormatHandling() { - if (this.cursorPosition >= 0 && this.autoFormattingTypes.includes(this.type)) { - if (this.type === 'credit-card' && this.inputElement.value.charAt(this.cursorPosition) === ' ') { - this.cursorPosition += 1; - } else if (this.dateInputTypes.includes(this.type)) { - const divider = '/'; - const dividerNextChar = this.inputElement.value.charAt(this.cursorPosition) === divider; - - if (this.cursorPosition > 1 && dividerNextChar && this.inputElement.value.charAt(this.cursorPosition - 2) !== divider) { - this.cursorPosition += 1; - } else if (this.cursorPosition > 0 && this.inputElement.value.charAt(this.cursorPosition + 1) === divider - && this.inputElement.value.charAt(this.cursorPosition - 1) === '0') { // eslint-disable-line operator-linebreak - this.cursorPosition += 2; - } - } - - this.inputElement.setSelectionRange(this.cursorPosition, this.cursorPosition); - } + getInputElements(elem) { + this.inputElements = elem.renderRoot.querySelectorAll('input'); } /** + * Gets all the `auro-inputs` in the element shadow DOM. * @private - * @returns {void} Notify validity state changed via event. + * @param {object} elem - HTML element to validate. + * @returns {void} */ - notifyValidityChange() { - this.dispatchEvent(new CustomEvent('auroInput-validityChange', { - bubbles: true, - cancelable: false, - composed: true, - })); + getAuroInputs(elem) { + this.auroInputElements = elem.shadowRoot.querySelectorAll('auro-input, [auro-input]'); } /** + * Return appropriate error message. * @private - * @returns {void} Marks the component as ready and sends event. + * @param {object} elem - HTML element to validate. + * @returns {void} */ - notifyReady() { - this.ready = true; + getErrorMessage(elem) { + if (elem.validity !== 'valid') { + if (elem.setCustomValidity) { + elem.errorMessage = elem.setCustomValidity; + } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) { + const input = elem.renderRoot.querySelector('input'); - this.dispatchEvent(new CustomEvent('auroInput-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } + if (input.validationMessage.length > 0) { + elem.errorMessage = input.validationMessage; + } + } else if (this.inputElements && this.inputElements.length > 0) { + const firstInput = this.inputElements[0]; - /** - * @private - * @returns {string} - */ - definePattern() { - if (this.type === 'credit-card' && !this.noValidate && this.maxLength) { - return `.{${this.maxLength},${this.maxLength}}`; - } + if (firstInput.validationMessage.length > 0) { + elem.errorMessage = firstInput.validationMessage; + } else if (this.inputElements.length === 2) { + const secondInput = this.inputElements[1]; - return this.pattern; + if (secondInput.validationMessage.length > 0) { + elem.errorMessage = secondInput.validationMessage; + } + } + } + } else { + elem.errorMessage = undefined; + } } +} - /** - * Function to set element focus. - * @private - * @return {void} - */ - focus() { - this.inputElement.focus(); - } +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. - /** - * Required to convert SVG icons from data to HTML string. - * @private - * @param {string} icon HTML string for requested icon. - * @returns {object} Appended HTML for SVG. - */ - getIconAsHtml(icon) { - const dom = new DOMParser().parseFromString(icon.svg, 'text/html'); - return dom.body.firstChild; - } +/** + * Auro-input provides users a way to enter data into a text field. + * + * @attr {Boolean} activeLabel - If set, the label will remain fixed in the active position. + * @attr {String} autocapitalize - An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] + * @attr {String} autocomplete - An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. + * @attr {String} autocorrect - When set to `off`, stops iOS from auto correcting words when typed into a text box. + * @attr {Boolean} bordered - Applies bordered UI variant. + * @attr {Boolean} borderless - Applies borderless UI variant. + * @attr {Boolean} disabled - If set, disables the input. + * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. + * @prop {String} errorMessage - Contains the help text message for the current validity error. + * @attr {String} helpText - Deprecated, see `slot`. + * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. + * @attr {String} id - Sets the unique ID of the element. + * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. + * @attr {String} label - Deprecated, see `slot`. + * @attr {String} lang - defines the language of an element. + * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. + * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. + * @attr {String} name - Populates the `name` attribute on the input. + * @attr {Boolean} noValidate - If set, disables auto-validation on blur. + * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. + * @prop {Boolean} ready - When false the component API should not be called. + * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. + * @attr {String} pattern - Specifies a regular expression the form control's value should match. + * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. + * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates. + * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`. + * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`. + * @attr {String} setCustomValidityBadInput - Custom help text message to display when validity = `badInput`. + * @attr {String} setCustomValidityTooShort - Custom help text message to display when validity = `tooShort`. + * @attr {String} setCustomValidityTooLong - Custom help text message to display when validity = `tooLong`. + * @attr {String} setCustomValidityForType - Custom help text message to display for the declared element `type` and type validity fails. + * @attr {String} setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`. + * @attr {String} setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`. + * @attr {String} spellcheck - An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. + * @attr {String} type - Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day` or `text`. If given value is not allowed or set, defaults to `text`. + * @attr {Boolean} validateOnInput - Sets validation mode to re-eval with each input. + * @attr {String} validity - Specifies the `validityState` this element is in. + * @attr {String} value - Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. + * + * @slot helptext - Sets the help text displayed below the input. + * @slot label - Sets the label text for the input. + * + * @csspart wrapper - Use for customizing the style of the root element + * @csspart label - Use for customizing the style of the label element + * @csspart helpText - Use for customizing the style of the helpText element + * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon) + * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value) + * @event input - Event fires when the value of an `auro-input` has been changed. + * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed. + */ - /** - * Sends event notifying that the input has changed it's value. - * @private - * @returns {void} - */ - notifyValueChanged() { - let inputEvent = null; +class BaseInput extends r { - inputEvent = new Event('input', { - bubbles: true, - composed: true, - }); + constructor() { + super(); - // Dispatched event to alert outside shadow DOM context of event firing. - this.dispatchEvent(inputEvent); - } + this.isValid = false; - /** - * Handles event of clearing input content by clicking the X icon. - * @private - * @return {void} - */ - handleClickClear() { - this.inputElement.value = ""; - this.value = ""; - this.labelElement.classList.remove('inputElement-label--sticky'); - this.focus(); - this.validation.validate(this); - this.notifyValueChanged(); + this.icon = false; + this.disabled = false; + this.required = false; + this.noValidate = false; + this.max = undefined; + this.min = undefined; + this.maxLength = undefined; + this.minLength = undefined; + this.label = 'Input label is undefined'; + this.ready = false; + this.activeLabel = false; + + this.setCustomValidityForType = undefined; } /** + * Internal Defaults. * @private - * @return {void} + * @returns {void} */ - handleInput() { - // Prevent non-numeric characters from being entered on credit card fields. - if (this.type === 'credit-card') { - this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); - } - - // Sets value property to value of element value (el.value). - this.value = this.inputElement.value; - - // Validation on blur or input. - if (this.validateOnInput) { - this.validation.validate(this); - } + privateDefaults() { + this.validation = new AuroFormValidation(); + this.inputIconName = undefined; + this.showPassword = false; + this.validationCCLength = undefined; + this.hasValue = false; - // Prevents cursor jumping in Safari. - const { selectionStart } = this.inputElement; + this.allowedInputTypes = [ + "text", + "email", + "password", + "credit-card", + "month-day-year", + "year-month-day", + "month-year" + ]; - if (this.setSelectionInputTypes.includes(this.type)) { - this.updateComplete.then(() => { - try { - this.inputElement.setSelectionRange(selectionStart, selectionStart); - } catch (error) { // eslint-disable-line - // do nothing - } - }); - } - } + this.dateInputTypes = [ + "month-day-year", + "year-month-day", + "month-year", + "month-fullYear", + "month", + "year", + "fullYear" + ]; - /** - * Function to support @focusin event. - * @private - * @return {void} - */ - handleFocusin() { + this.autoFormattingTypes = [ + 'credit-card', + 'month-day-year', + 'month-year', + 'month-fullyear', + 'year-month-day' + ]; /** - * The input is considered to be in it's initial state based on - * if this.value === undefined. The first time we interact with the - * input manually, by applying focusin, we need to flag the - * input as no longer in the initial state. + * Credit Card is not included as this caused cursor placement issues. + * The Safari issue. */ - if (this.value === undefined) { - this.value = ''; - } - } + this.setSelectionInputTypes = [ + "text", + "password", + "email", + ]; - /** - * Function to support @blur event. - * @private - * @return {void} - */ - handleBlur() { - this.inputElement.scrollLeft = 100; + const idLength = 36; + const idSubstrEnd = 8; + const idSubstrStart = 2; - if (!this.noValidate) { - this.validation.validate(this); - } + this.uniqueId = Math.random() + .toString(idLength) + .substring(idSubstrStart, idSubstrEnd); } - /** - * Returns focused element, even if it's in the shadow DOM. - * @private + // function to define props used within the scope of this component + static get properties() { + return { + id: { type: String }, + label: { type: String }, + name: { type: String }, + type: { type: String, + reflect: true }, + value: { type: String }, + lang: { type: String }, + pattern: { + type: String, + reflect: true + }, + icon: { type: Boolean }, + disabled: { type: Boolean }, + required: { type: Boolean }, + noValidate: { type: Boolean }, + helpText: { type: String }, + spellcheck: { type: String }, + autocorrect: { type: String }, + autocapitalize: { type: String }, + autocomplete: { + type: String, + reflect: true + }, + placeholder: { type: String }, + activeLabel: { + type: Boolean, + reflect: true + }, + max: { type: String }, + min: { type: String }, + maxLength: { type: Number }, + minLength: { type: Number }, + + /** + * @ignore + */ + showPassword: { state: true }, + validateOnInput: { type: Boolean }, + readonly: { type: Boolean }, + ready: { type: Boolean }, + error: { + type: String, + reflect: true + }, + errorMessage: { type: String }, + isValid: { + type: String, + reflect: true + }, + validity: { + type: String, + reflect: true + }, + setCustomValidity: { type: String }, + setCustomValidityCustomError: { type: String }, + setCustomValidityValueMissing: { type: String }, + setCustomValidityBadInput: { type: String }, + setCustomValidityTooShort: { type: String }, + setCustomValidityTooLong: { type: String }, + setCustomValidityRangeOverflow: { type: String}, + setCustomValidityRangeUnderflow: { type: String}, + customValidityTypeEmail: { type: String } + }; + } + + static get styles() { + return [ + i$2`${styleCss$3$1}`, + i$2`${colorCss$3}`, + i$2`${tokensCss$3}` + ]; + } + + connectedCallback() { + super.connectedCallback(); + + this.privateDefaults(); + + notifyOnLangChange(this); + + // Process auto-formatting if defined for CleaveJS + if (this.type) { + let config = null; + + // Set config for credit card + switch (this.type) { + case 'number': + config = { + numeral: true, + delimiter: '' + }; + + this.inputMode = 'numeric'; + + break; + + case 'credit-card': + config = { + creditCard: true + }; + + this.inputMode = 'numeric'; + + break; + + case 'month-day-year': + config = { + date: true, + delimiter: '/', + datePattern: [ + 'm', + 'd', + 'Y' + ] + }; + + this.inputMode = 'numeric'; + + break; + + case 'year-month-day': + config = { + date: true, + delimiter: '/', + datePattern: [ + 'Y', + 'm', + 'd' + ] + }; + + this.inputMode = 'numeric'; + + break; + + case 'month-year': + config = { + date: true, + datePattern: [ + 'm', + 'y' + ] + }; + + this.inputMode = 'numeric'; + + break; + + case 'month-fullYear': + config = { + date: true, + datePattern: [ + 'm', + 'Y' + ] + }; + + this.inputMode = 'numeric'; + + break; + + case 'fullYear': + config = { + date: true, + datePattern: ['Y'] + }; + + this.inputMode = 'numeric'; + + break; + + case 'year': + config = { + date: true, + datePattern: ['y'] + }; + + this.inputMode = 'numeric'; + + break; + + case 'month': + config = { + date: true, + datePattern: ['m'] + }; + + this.inputMode = 'numeric'; + + break; + // Do nothing + } + + // initialize CleaveJS if we have a defined config for the requested format + if (config) { + // eslint-disable-next-line no-unused-vars + new Cleave_1(this, config); + } + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + stopNotifyingOnLangChange(this); + } + + firstUpdated() { + // add attribute for query selectors when auro-input is registered under a custom name + if (this.tagName.toLowerCase() !== 'auro-input') { + this.setAttribute('auro-input', true); + } + + this.inputElement = this.renderRoot.querySelector('input'); + this.labelElement = this.shadowRoot.querySelector('label'); + + // use validity message override if declared when initializing the component + if (this.hasAttribute('setCustomValidity')) { + this.ValidityMessageOverride = this.setCustomValidity; + } + + // if setCustomValidityForType is not set, use our default + if (!this.setCustomValidityForType) { + if (this.type === 'password') { + this.setCustomValidityForType = i18n(this.lang, 'password'); + } else if (this.type === 'credit-card') { + this.setCustomValidityForType = i18n(this.lang, 'creditcard'); + } else if (this.type === 'email') { + this.setCustomValidityForType = i18n(this.lang, 'email'); + } else if (this.type === 'month-day-year') { + this.setCustomValidityForType = i18n(this.lang, 'dateMMDDYYYY'); + } else if (this.type === 'month-year') { + this.setCustomValidityForType = i18n(this.lang, 'dateMMYY'); + } else if (this.type === 'month-fullyear') { + this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY'); + } else if (this.type === 'year-month-day') { + this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD'); + } else if (this.type === 'year') { + this.setCustomValidityForType = i18n(this.lang, 'dateYY'); + } else if (this.type === 'fullYear') { + this.setCustomValidityForType = i18n(this.lang, 'dateYYYY'); + } else if (this.type === 'month') { + this.setCustomValidityForType = i18n(this.lang, 'dateMM'); + } + } + + this.addEventListener('keydown', (evt) => { + if (this.autoFormattingTypes.includes(this.type)) { + if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') { + if (evt.key.length === 1) { + const numCharSelected = this.inputElement.selectionEnd - this.inputElement.selectionStart; + + if (numCharSelected > 1) { + this.cursorPosition = this.inputElement.selectionStart + 1; + } else if (numCharSelected === 1) { + this.cursorPosition = this.inputElement.selectionEnd; + } else { + this.cursorPosition = this.inputElement.selectionEnd + 1; + } + } else if (evt.key === 'Backspace') { + this.cursorPosition = this.inputElement.selectionEnd - 1; + } else if (evt.key === 'Delete') { + this.cursorPosition = this.inputElement.selectionEnd; + } + } + + if (evt.key === "ArrowUp" || evt.key === "ArrowDown" || evt.key === "ArrowLeft" || evt.key === "ArrowRight") { + if (evt.key === 'ArrowUp') { + this.cursorPosition = 0; + } else if (evt.key === 'ArrowDown') { + this.cursorPosition = this.value.length; + } else if (evt.key === 'ArrowLeft') { + this.cursorPosition = this.inputElement.selectionEnd - 1; + } else if (evt.key === 'ArrowRight') { + this.cursorPosition = this.inputElement.selectionEnd + 1; + } + } + } + }); + + this.notifyReady(); + } + + /** + * LitElement lifecycle method. Called after the DOM has been updated. + * @param {Map} changedProperties - Keys are the names of changed properties, values are the corresponding previous values. + * @returns {void} + */ + updated(changedProperties) { + if (this.type === 'password') { + this.spellcheck = 'false'; + } + + if (this.spellcheck === 'false') { + this.autocorrect = 'off'; + this.autocapitalize = 'none'; + } else { + this.autocorrect = this.autocorrect ? this.autocorrect : undefined; + this.autocapitalize = undefined; + } + + if (changedProperties.has('readonly')) { + if (this.readonly) { + this.inputElement.setAttribute('readonly', true); + this.inputElement.setAttribute('aria-readonly', true); + } else { + this.inputElement.removeAttribute('readonly'); + this.inputElement.removeAttribute('aria-readonly'); + } + } + + if (changedProperties.has('type')) { + this.configureDataForType(); + } + + if (changedProperties.has('value')) { + if (this.value && this.value.length > 0) { + this.hasValue = true; + this.requestUpdate(); + } else { + this.hasValue = false; + this.requestUpdate(); + } + + if (this.value !== this.inputElement.value) { + if (this.value) { + this.inputElement.value = this.value; + } else { + this.inputElement.value = ''; + } + + if (!this.shadowRoot.contains(this.getActiveElement())) { + this.validation.validate(this); + } + + this.notifyValueChanged(); + } + this.autoFormatHandling(); + } + + if (changedProperties.has('error')) { + this.validation.validate(this, true); + } + + if (changedProperties.has('validity')) { + this.notifyValidityChange(); + } + } + + /** + * @private + * @returns {void} Handles cursor position when input auto-formats. + */ + autoFormatHandling() { + if (this.cursorPosition >= 0 && this.autoFormattingTypes.includes(this.type)) { + if (this.type === 'credit-card' && this.inputElement.value.charAt(this.cursorPosition) === ' ') { + this.cursorPosition += 1; + } else if (this.dateInputTypes.includes(this.type)) { + const divider = '/'; + const dividerNextChar = this.inputElement.value.charAt(this.cursorPosition) === divider; + + if (this.cursorPosition > 1 && dividerNextChar && this.inputElement.value.charAt(this.cursorPosition - 2) !== divider) { + this.cursorPosition += 1; + } else if (this.cursorPosition > 0 && this.inputElement.value.charAt(this.cursorPosition + 1) === divider + && this.inputElement.value.charAt(this.cursorPosition - 1) === '0') { // eslint-disable-line operator-linebreak + this.cursorPosition += 2; + } + } + + this.inputElement.setSelectionRange(this.cursorPosition, this.cursorPosition); + } + } + + /** + * @private + * @returns {void} Notify validity state changed via event. + */ + notifyValidityChange() { + this.dispatchEvent(new CustomEvent('auroInput-validityChange', { + bubbles: true, + cancelable: false, + composed: true, + })); + } + + /** + * @private + * @returns {void} Marks the component as ready and sends event. + */ + notifyReady() { + this.ready = true; + + this.dispatchEvent(new CustomEvent('auroInput-ready', { + bubbles: true, + cancelable: false, + composed: true, + })); + } + + /** + * @private + * @returns {string} + */ + definePattern() { + if (this.type === 'credit-card' && !this.noValidate && this.maxLength) { + return `.{${this.maxLength},${this.maxLength}}`; + } + + return this.pattern; + } + + /** + * Function to set element focus. + * @private + * @return {void} + */ + focus() { + this.inputElement.focus(); + } + + /** + * Required to convert SVG icons from data to HTML string. + * @private + * @param {string} icon HTML string for requested icon. + * @returns {object} Appended HTML for SVG. + */ + getIconAsHtml(icon) { + const dom = new DOMParser().parseFromString(icon.svg, 'text/html'); + + return dom.body.firstChild; + } + + /** + * Sends event notifying that the input has changed it's value. + * @private + * @returns {void} + */ + notifyValueChanged() { + let inputEvent = null; + + inputEvent = new Event('input', { + bubbles: true, + composed: true, + }); + + // Dispatched event to alert outside shadow DOM context of event firing. + this.dispatchEvent(inputEvent); + } + + /** + * Handles event of clearing input content by clicking the X icon. + * @private + * @return {void} + */ + handleClickClear() { + this.inputElement.value = ""; + this.value = ""; + this.labelElement.classList.remove('inputElement-label--sticky'); + this.focus(); + this.validation.validate(this); + this.notifyValueChanged(); + } + + /** + * @private + * @return {void} + */ + handleInput() { + // Prevent non-numeric characters from being entered on credit card fields. + if (this.type === 'credit-card') { + this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); + } + + // Sets value property to value of element value (el.value). + this.value = this.inputElement.value; + + // Validation on blur or input. + if (this.validateOnInput) { + this.validation.validate(this); + } + + // Prevents cursor jumping in Safari. + const { selectionStart } = this.inputElement; + + if (this.setSelectionInputTypes.includes(this.type)) { + this.updateComplete.then(() => { + try { + this.inputElement.setSelectionRange(selectionStart, selectionStart); + } catch (error) { // eslint-disable-line + // do nothing + } + }); + } + } + + /** + * Function to support @focusin event. + * @private + * @return {void} + */ + handleFocusin() { + + /** + * The input is considered to be in it's initial state based on + * if this.value === undefined. The first time we interact with the + * input manually, by applying focusin, we need to flag the + * input as no longer in the initial state. + */ + if (this.value === undefined) { + this.value = ''; + } + } + + /** + * Function to support @blur event. + * @private + * @return {void} + */ + handleBlur() { + this.inputElement.scrollLeft = 100; + + if (!this.noValidate) { + this.validation.validate(this); + } + } + + /** + * Returns focused element, even if it's in the shadow DOM. + * @private * @param {Object} root - Element to check for focus. * @returns {Object} */ @@ -5769,7 +6103,7 @@ class BaseInput extends r$5 { return !this.placeholder ? 'MM' : this.placeholder; } - return o(this.placeholder); + return o$2(this.placeholder); } /** @@ -5916,6 +6250,116 @@ class BaseInput extends r$5 { } } +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +class AuroDependencyVersioning { + + /** + * Generates a unique string to be used for child auro element naming. + * @private + * @param {string} baseName - Defines the first part of the unique element name. + * @param {string} version - Version of the component that will be appended to the baseName. + * @returns {string} - Unique string to be used for naming. + */ + generateElementName(baseName, version) { + let result = baseName; + + result += '-'; + result += version.replace(/[.]/g, '_'); + + return result; + } + + /** + * Generates a unique string to be used for child auro element naming. + * @param {string} baseName - Defines the first part of the unique element name. + * @param {string} version - Version of the component that will be appended to the baseName. + * @returns {string} - Unique string to be used for naming. + */ + generateTag(baseName, version, tagClass) { + const elementName = this.generateElementName(baseName, version); + const tag = i$4`${s$2(elementName)}`; + + if (!customElements.get(elementName)) { + customElements.define(elementName, class extends tagClass {}); + } + + return tag; + } +} + +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ + +class AuroLibraryRuntimeUtils { + + /* eslint-disable jsdoc/require-param */ + + /** + * This will register a new custom element with the browser. + * @param {String} name - The name of the custom element. + * @param {Object} componentClass - The class to register as a custom element. + * @returns {void} + */ + registerComponent(name, componentClass) { + if (!customElements.get(name)) { + customElements.define(name, class extends componentClass {}); + } + } + + /** + * Finds and returns the closest HTML Element based on a selector. + * @returns {void} + */ + closestElement( + selector, // selector like in .closest() + base = this, // extra functionality to skip a parent + __Closest = (el, found = el && el.closest(selector)) => + !el || el === document || el === window + ? null // standard .closest() returns null for non-found selectors also + : found + ? found // found a selector INside this element + : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM + ) { + return __Closest(base); + } + /* eslint-enable jsdoc/require-param */ + + /** + * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. + * @param {Object} elem - The element to check. + * @param {String} tagName - The name of the Auro component to check for or add as an attribute. + * @returns {void} + */ + handleComponentTagRename(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } + + /** + * Validates if an element is a specific Auro component. + * @param {Object} elem - The element to validate. + * @param {String} tagName - The name of the Auro component to check against. + * @returns {Boolean} - Returns true if the element is the specified Auro component. + */ + elementMatch(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + return elemTag === tag || elem.hasAttribute(tag); + } +} + // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -5926,7 +6370,7 @@ class BaseInput extends r$5 { * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually */ -class AuroElement extends r$5 { +let AuroElement$1 = class AuroElement extends r { // function to define props used within the scope of this component static get properties() { @@ -5950,13 +6394,13 @@ class AuroElement extends r$5 { return 'false' } -} +}; -var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"Error alert indicator."}; +var error$1 = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"Error alert indicator."}; /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */ -const _fetchMap = new Map(); +const _fetchMap$1 = new Map(); /** * A callback to parse Response body. @@ -5974,15 +6418,15 @@ const _fetchMap = new Map(); * @param {ResponseParser} [options.responseParser=(response) => response.text()] * @returns {Promise} */ -const cacheFetch = (uri, options = {}) => { +const cacheFetch$1 = (uri, options = {}) => { const responseParser = options.responseParser || ((response) => response.text()); - if (!_fetchMap.has(uri)) { - _fetchMap.set(uri, fetch(uri).then(responseParser)); + if (!_fetchMap$1.has(uri)) { + _fetchMap$1.set(uri, fetch(uri).then(responseParser)); } - return _fetchMap.get(uri); + return _fetchMap$1.get(uri); }; -var styleCss$5 = i$b`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}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}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`; +var styleCss$2$1 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}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}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`; // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -5995,7 +6439,7 @@ var styleCss$5 = i$b`*,*:before,*:after{box-sizing:border-box}@media(prefers-red */ // build the component class -class BaseIcon extends AuroElement { +let BaseIcon$1 = class BaseIcon extends AuroElement$1 { constructor() { super(); this.onDark = false; @@ -6021,8 +6465,8 @@ class BaseIcon extends AuroElement { } static get styles() { - return i$b` - ${styleCss$5} + return i$2` + ${styleCss$2$1} `; } @@ -6037,9 +6481,9 @@ class BaseIcon extends AuroElement { let iconHTML = ''; if (category === 'logos') { - iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`); + iconHTML = await cacheFetch$1(`${this.uri}/${category}/${name}.svg`); } else { - iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`); + iconHTML = await cacheFetch$1(`${this.uri}/icons/${category}/${name}.svg`); } const dom = new DOMParser().parseFromString(iconHTML, 'text/html'); @@ -6055,17 +6499,17 @@ class BaseIcon extends AuroElement { if (svg) { this.svg = svg; } else if (!svg) { - const penDOM = new DOMParser().parseFromString(error.svg, 'text/html'); + const penDOM = new DOMParser().parseFromString(error$1.svg, 'text/html'); this.svg = penDOM.body.firstChild; } } } -} +}; -var tokensCss$3 = i$b`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`; +var tokensCss$2 = i$2`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`; -var colorCss$4 = i$b`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`; +var colorCss$2$1 = i$2`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`; // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -6098,7 +6542,7 @@ var colorCss$4 = i$b`:host{color:var(--ds-auro-icon-color)}:host([customColor]){ */ // build the component class -class AuroIcon extends BaseIcon { +let AuroIcon$1 = class AuroIcon extends BaseIcon$1 { constructor() { super(); @@ -6127,7 +6571,7 @@ class AuroIcon extends BaseIcon { this.success = false; this.tertiary = false; this.warning = false; - this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); + this.runtimeUtils = new AuroLibraryRuntimeUtils(); } // function to define props used within the scope of this component @@ -6209,9 +6653,9 @@ class AuroIcon extends BaseIcon { static get styles() { return [ super.styles, - i$b`${tokensCss$3}`, - i$b`${styleCss$5}`, - i$b`${colorCss$4}` + i$2`${tokensCss$2}`, + i$2`${styleCss$2$1}`, + i$2`${colorCss$2$1}` ]; } @@ -6224,7 +6668,7 @@ class AuroIcon extends BaseIcon { * */ static register(name = "auro-icon") { - AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon); + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon); } connectedCallback() { @@ -6234,6 +6678,13 @@ class AuroIcon extends BaseIcon { this.runtimeUtils.handleComponentTagRename(this, 'auro-icon'); } + /** + * @returns {void} Exposes CSS parts for styling from parent components. + */ + exposeCssParts() { + this.setAttribute('exportparts', 'svg:iconSvg'); + } + // function that renders the HTML and CSS into the scope of the component render() { const a11y = { @@ -6245,38 +6696,40 @@ class AuroIcon extends BaseIcon { 'label': this.label }; - return x$1` + return x`
- - ${this.customSvg ? x$1` + class="${e$2(classes)}" + title="${o$2(this.title || undefined)}"> + + ${this.customSvg ? x` - ` : x$1` + ` : x` ${this.svg} ` } -
+
`; } -} +}; + +var iconVersion$1 = '6.1.1'; -var styleCss$4 = i$b`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`; +var styleCss$1$1 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`; -var colorCss$3 = i$b`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`; +var colorCss$1$1 = i$2`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`; -var tokensCss$2 = i$b`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`; +var tokensCss$1$1 = i$2`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`; -var styleCss$3 = i$b`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`; +var styleCss$4 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`; -var colorCss$2 = i$b`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`; +var colorCss$4 = i$2`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`; -var tokensCss$1 = i$b`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}`; +var tokensCss$4 = i$2`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}`; // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -6301,7 +6754,7 @@ var tokensCss$1 = i$b`:host{--ds-auro-loader-background-color: currentcolor;--ds */ // build the component class -class AuroLoader extends r$5 { +class AuroLoader extends r { constructor() { super(); @@ -6323,7 +6776,7 @@ class AuroLoader extends r$5 { /** * @private */ - this.runtimeUtils = new AuroLibraryRuntimeUtils$2(); + this.runtimeUtils = new AuroLibraryRuntimeUtils(); this.orbit = false; this.ringworm = false; @@ -6355,9 +6808,9 @@ class AuroLoader extends r$5 { static get styles() { return [ - i$b`${styleCss$3}`, - i$b`${colorCss$2}`, - i$b`${tokensCss$1}` + i$2`${styleCss$4}`, + i$2`${colorCss$4}`, + i$2`${tokensCss$4}` ]; } @@ -6370,7 +6823,7 @@ class AuroLoader extends r$5 { * */ static register(name = "auro-loader") { - AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader); + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader); } firstUpdated() { @@ -6403,14 +6856,14 @@ class AuroLoader extends r$5 { // function that renders the HTML and CSS into the scope of the component render() { - return x$1` - ${this.defineTemplate().map((idx) => x$1` + return x` + ${this.defineTemplate().map((idx) => x` `)}
Loading...
- ${this.ringworm ? x$1` + ${this.ringworm ? x` ` @@ -6456,7 +6909,7 @@ var loaderVersion = '3.1.1'; /* eslint-disable lit/no-invalid-html, lit/binding-positions */ -class AuroButton extends r$5 { +class AuroButton extends r { constructor() { super(); @@ -6475,7 +6928,7 @@ class AuroButton extends r$5 { /** * Generate unique names for dependency components. */ - const versioning = new AuroDependencyVersioning$1(); + const versioning = new AuroDependencyVersioning(); /** * @private @@ -6485,9 +6938,9 @@ class AuroButton extends r$5 { static get styles() { return [ - tokensCss$2, - styleCss$4, - colorCss$3 + tokensCss$1$1, + styleCss$1$1, + colorCss$1$1 ]; } @@ -6570,7 +7023,7 @@ class AuroButton extends r$5 { * */ static register(name = "auro-button") { - AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton); + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton); } /** @@ -6623,27 +7076,27 @@ class AuroButton extends r$5 { 'loading': this.loading }; - return u$5` + return u$3` + `; + } + + updated(properties) { + if (properties.has('dateFrom') || + properties.has('dateTo') || + properties.has('hoveredDate') || + properties.has('day')) { + this.dateChanged(this.dateFrom, this.dateTo, this.hoveredDate, this.day); + } + } + + dateChanged(dateFrom, dateTo, hoveredDate, day) { + this.selected = false; + this.hovered = false; + const parsedDateFrom = parseInt(dateFrom, 10); + const parsedDateTo = parseInt(dateTo, 10); + if (day) { + if (getTime(startOfDay(parsedDateTo * 1000)) / 1000 === day.date || + getTime(startOfDay(parsedDateFrom * 1000)) / 1000 === day.date) { + this.selected = true; } - if (!(options !== null && options !== void 0 && options.useAdditionalDayOfYearTokens) && isProtectedDayOfYearToken(token)) { - throwProtectedError(token, formatString, dirtyDateString); + if (((hoveredDate === day.date || day.date < hoveredDate) && + day.date > parsedDateFrom && + !parsedDateTo && + !Number.isNaN(parsedDateFrom) && + parsedDateFrom !== undefined && + !this.selected) || + (day.date > parsedDateFrom && day.date < parsedDateTo)) { + this.hovered = true; } - var firstCharacter = token[0]; - var parser = parsers[firstCharacter]; - if (parser) { - var incompatibleTokens = parser.incompatibleTokens; - if (Array.isArray(incompatibleTokens)) { - var incompatibleToken = usedTokens.find(function (usedToken) { - return incompatibleTokens.includes(usedToken.token) || usedToken.token === firstCharacter; - }); - if (incompatibleToken) { - throw new RangeError("The format string mustn't contain `".concat(incompatibleToken.fullToken, "` and `").concat(token, "` at the same time")); - } - } else if (parser.incompatibleTokens === '*' && usedTokens.length > 0) { - throw new RangeError("The format string mustn't contain `".concat(token, "` and any other token at the same time")); - } - usedTokens.push({ - token: firstCharacter, - fullToken: token - }); - var parseResult = parser.run(dateString, token, locale$1.match, subFnOptions); - if (!parseResult) { - return { - v: new Date(NaN) - }; - } - setters.push(parseResult.setter); - dateString = parseResult.rest; - } else { - if (firstCharacter.match(unescapedLatinCharacterRegExp)) { - throw new RangeError('Format string contains an unescaped latin alphabet character `' + firstCharacter + '`'); - } + } + } + + handleTap() { + let _a; + if (!this.disabled) { + this.dispatchEvent(new CustomEvent('date-is-selected', { + detail: { date: (_a = this.day) === null || _a === void 0 ? void 0 : _a.date }, + })); + } + } + + handleHover() { + let _a; + this.dispatchEvent(new CustomEvent('date-is-hovered', { + detail: { date: (_a = this.day) === null || _a === void 0 ? void 0 : _a.date }, + })); + } + + isSelected(selected) { + return selected ? 'selected' : ''; + } + + isHovered(hovered) { + return hovered ? 'hovered' : ''; + } + + isEnabled(day, min, max, disabledDays) { + this.disabled = false; + if (disabledDays && day && day.date) { + if (day.date < min || + day.date > max || + disabledDays.findIndex((disabledDay) => parseInt(disabledDay, 10) === day.date) !== -1) { + this.disabled = true; + return 'disabled'; + } + } + return ''; + } + + getTitle(date) { + if (date === undefined) { + return ''; + } + return format(date * 1000, 'PPPP', { + locale: this.locale, + }); + } +} +RangeDatepickerCell.styles = i$c` + :host { + display: block; + } + + .day { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + text-align: center; + height: 38px; + width: 38px; + margin: 0; + padding: 0; + color: var(--wc-datepicker-cell-text); + + border: none; + outline: none; + background-color: transparent; + } + + .day:focus { + outline: 1px solid + var(--wc-datepicker-cell-hovered, rgba(0, 150, 136, 0.5)); + } + + .day:not(.disabled):hover { + background: var(--wc-datepicker-cell-hover, #e4e7e7); + cursor: pointer; + } + + .day.hovered { + background: var( + --wc-datepicker-cell-hovered, + rgba(0, 150, 136, 0.5) + ) !important; + color: var(--wc-datepicker-cell-hovered-text, white); + } + + .day.selected { + background: var( + --wc-datepicker-cell-selected, + rgb(0, 150, 136) + ) !important; + color: var(--wc-datepicker-cell-selected-text, white); + } + + .day.currentDate .currentDayMarker { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + text-align: center; + + width: 80%; + height: 80%; + font-weight: var(--wc-current-day-font-weight, bold); + border-radius: 50%; + background-color: var(--wc-current-day-color); + color: var(--wc-current-day-color-text); + } + + .day.disabled { + opacity: 0.4; + } + `; +__decorate([n$5({ type: Object })], RangeDatepickerCell.prototype, "day", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepickerCell.prototype, "selected", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepickerCell.prototype, "hovered", void 0); +__decorate([n$5({ type: String })], RangeDatepickerCell.prototype, "dateTo", void 0); +__decorate([n$5({ type: String })], RangeDatepickerCell.prototype, "dateFrom", void 0); +__decorate([n$5({ type: String })], RangeDatepickerCell.prototype, "month", void 0); +__decorate([n$5({ type: Number })], RangeDatepickerCell.prototype, "min", void 0); +__decorate([n$5({ type: Number })], RangeDatepickerCell.prototype, "max", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepickerCell.prototype, "disabled", void 0); +__decorate([n$5({ type: Array })], RangeDatepickerCell.prototype, "disabledDays", void 0); +__decorate([n$5({ type: String })], RangeDatepickerCell.prototype, "hoveredDate", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepickerCell.prototype, "isCurrentDate", void 0); +__decorate([n$5({ type: Object })], RangeDatepickerCell.prototype, "locale", null); +AuroLibraryRuntimeUtils$3.prototype.registerComponent('wc-range-datepicker-cell', RangeDatepickerCell); + +class Day { + constructor(date) { + this.date = parseInt(format(date, 't'), 10); + this.title = parseInt(format(date, 'd'), 10); + } +} + +class RangeDatepickerCalendar extends r$7 { + constructor() { + super(); + + /** + * Date from. Format is Unix timestamp. + */ + this.dateFrom = null; + + /** + * Date to. Format is Unix timestamp. + */ + this.dateTo = null; + this.hoveredDate = null; + this.enableYearChange = false; + this.month = '01'; + this.narrow = false; + this.noRange = false; + this.next = false; + this.prev = false; + this.year = 2020; + this.disabledDays = []; + + /** + * Max date. Format is Unix timestamp. + */ + this.max = null; + + /** + * Minimal date. Format is Unix timestamp. + */ + this.min = null; + this.yearsList = []; + this.monthsList = []; + this.dayNamesOfTheWeek = []; + this.daysOfMonth = []; + this._locale = null; + this.currentDate = parseInt(format(startOfDay(Date.now()), 't'), 10); + this.localeChanged(); + this.yearAndMonthChanged(this.year, this.month); + } + + get locale() { + return this._locale ? this._locale : enUS; + } + + set locale(value) { + const oldValue = this._locale; + this._locale = value; + this.requestUpdate('locale', oldValue); + } + + render() { + let _a, _b; + return x$2` +
+
+ ${this.renderPrevButton()} +
+
${this.computeCurrentMonthName(this.month, this.year)}
+
${this.renderYear()}
+
+ ${this.renderNextButton()} +
+ +
+
+
+ ${(_a = this.dayNamesOfTheWeek) === null || _a === void 0 ? void 0 : _a.map((dayNameOfWeek) => this.renderDayOfWeek(dayNameOfWeek))} +
+
+
+ ${(_b = this.daysOfMonth) === null || _b === void 0 ? void 0 : _b.map((week) => this.renderWeek(week))} +
+
+
+ `; + } + + renderPrevButton() { + if (this.prev || this.narrow || this.enableYearChange) { + return x$2` + + `; + } + return null; + } + + renderNextButton() { + if (this.next || this.narrow || this.enableYearChange) { + return x$2` + `; + } + + return null; + } + + renderYear() { + return x$2`${this.year}`; + } + + renderDayOfWeek(dayOfWeek) { + return x$2`
${dayOfWeek}
`; + } + + renderWeek(week) { + return x$2` +
${week.map((day) => this.renderDay(day))}
+ `; + } + + renderDay(day) { + return x$2` +
+ ${day ? x$2` + + + ` : null} +
+ `; + } + + async firstUpdated() { + this.monthsList = [ + '01', + '02', + '03', + '04', + '05', + '06', + '07', + '08', + '09', + '10', + '11', + '12', + ]; + setTimeout(() => { + this.setYears(1930, 2100); + }); + await this.updateComplete; + } + + updated(properties) { + if (properties.has('locale')) { + this.localeChanged(); + } + if (properties.has('year')) { + this.dispatchEvent(new CustomEvent('year-changed', { detail: { value: this.year } })); + } + if (properties.has('year') || properties.has('month')) { + this.yearAndMonthChanged(this.year, this.month); + } + } + + isCurrentDate(day) { + const dayDate = day.date; + return dayDate === this.currentDate; + } + + localeChanged() { + const dayNamesOfTheWeek = []; + for (let index = 0; index < 7; index += 1) { + dayNamesOfTheWeek.push(this.locale.localize.day(index, { width: 'short' })); + } + const firstDayOfWeek = this.locale.options.weekStartsOn + ? this.locale.options.weekStartsOn + : 0; + const tmp = dayNamesOfTheWeek.slice().splice(0, firstDayOfWeek); + const newDayNamesOfTheWeek = dayNamesOfTheWeek + .slice() // eslint-disable-line dot-location + .splice(firstDayOfWeek, dayNamesOfTheWeek.length) // eslint-disable-line dot-location + .concat(tmp); // eslint-disable-line dot-location + this.dayNamesOfTheWeek = newDayNamesOfTheWeek; + } + + yearAndMonthChanged(year, month) { + if (year && month) { + let monthMinus = `${month}`; + monthMinus = monthMinus.substring(monthMinus.length - 2); + let startDateString = `01/${monthMinus}/${year}`; + let startDateFn = parse(startDateString, 'dd/MM/yyyy', new Date()); + const endDateFn = endOfMonth(startDateFn); + const endDateString = format(endDateFn, 'dd/MM/yyyy'); + const firstDayOfWeek = this.locale.options.weekStartsOn + ? this.locale.options.weekStartsOn + : 0; + const rows = []; + let columns = []; + const lastDayOfWeek = 6; + while (startDateString !== endDateString) { + let dayNumberFn = getDay(startDateFn) - firstDayOfWeek; + if (dayNumberFn < 0) { + dayNumberFn = 6; + } + const columnFn = new Day(startDateFn); + columns.push(columnFn); + if (dayNumberFn === lastDayOfWeek) { + for (let index = columns.length; index < lastDayOfWeek + 1; index += 1) { + columns.unshift(null); + } + rows.push(columns.slice()); + columns = []; + } + startDateFn = addDays(startDateFn, 1); + startDateString = format(startDateFn, 'dd/MM/yyyy'); + if (startDateString === endDateString) { + const endColumnFn = new Day(startDateFn); + columns.push(endColumnFn); + for (let index = columns.length; index <= lastDayOfWeek; index += 1) { + columns.push(null); + } + rows.push(columns.slice()); + columns = []; + } + } + this.daysOfMonth = rows; + } + } + + computeCurrentMonthName(month, year) { + return format(new Date(year, parseInt(month, 10) - 1), 'MMMM', { + locale: this.locale, + }); + } + + tdIsEnabled(day) { + return day ? 'enabled' : ''; + } + + handleDateSelected(event) { + const { detail } = event; + const { date } = detail; + if (!this.noRange) { + if (this.dateFrom && this.dateTo) { + this.dateFrom = date; + this.dateTo = null; + this.hoveredDate = null; + } else if (!this.dateFrom || (this.dateFrom && date < this.dateFrom)) { + this.dateFrom = date; + } else if (!this.dateTo || (this.dateTo && date > this.dateTo)) { + this.dateTo = date; + } + } else { + this.dateFrom = date; + } + + this.dispatchEvent(new CustomEvent('date-from-changed', { detail: { value: this.dateFrom } })); + this.dispatchEvent(new CustomEvent('date-to-changed', { detail: { value: this.dateTo } })); + } + + handleOpenYearSelection() { + let _a; + const menu = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.year-change'); + const index = menu.items.findIndex((item) => item.value === this.year.toString()); + menu.select(index); + menu.show(); + } + + handleYearSelected() { + let _a; + const menu = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.year-change'); + const selected = menu.selected; + this.year = parseInt(selected === null || selected === void 0 ? void 0 : selected.value, 10); + } + + handleDateHovered(event) { + this.hoveredDate = event.detail.date; + this.dispatchEvent(new CustomEvent('hovered-date-changed', { + detail: { value: this.hoveredDate }, + })); + } + + handleNextMonth() { + let _a, _b; + const tbody = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tbody'); + const monthName = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.header > div'); + tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('withTransition'); + tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('moveToLeft'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('withTransition'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('moveToLeft'); + const month = parse(this.month, 'MM', new Date()); + const monthPlusDate = addMonths(month, 1); + const monthPlusString = format(monthPlusDate, 'MM', { + locale: this.locale, + }); + this.month = monthPlusString; + if (this.month === '01') { + const year = parse(this.year.toString(), 'yyyy', new Date()); + const yearPlusDate = addYears(year, 1); + const yearPlusString = format(yearPlusDate, 'yyyy', { + locale: this.locale, + }); + this.year = parseInt(yearPlusString, 10); + } + this.dispatchEvent(new CustomEvent('next-month')); + setTimeout(() => { + tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('withTransition'); + tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('moveToRight'); + tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('moveToLeft'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('withTransition'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('moveToRight'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('moveToLeft'); + setTimeout(() => { + tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('withTransition'); + tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('moveToRight'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('withTransition'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('moveToRight'); + setTimeout(() => { + tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('withTransition'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('withTransition'); + }, 100); + }, 100); + }, 100); + } + + handlePrevMonth() { + let _a, _b; + const tbody = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tbody'); + const monthName = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.header > div'); + tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('withTransition'); + tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('moveToRight'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('withTransition'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('moveToRight'); + const month = parse(this.month, 'MM', new Date()); + const monthMinusDate = subMonths(month, 1); + const monthMinusString = format(monthMinusDate, 'MM', { + locale: this.locale, + }); + this.month = monthMinusString; + if (this.month === '12') { + const year = parse(this.year.toString(), 'yyyy', new Date()); + const yearMinusDate = subYears(year, 1); + const yearMinusString = format(yearMinusDate, 'yyyy', { + locale: this.locale, + }); + this.year = parseInt(yearMinusString, 10); + } + this.dispatchEvent(new CustomEvent('prev-month')); + setTimeout(() => { + tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('withTransition'); + tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('moveToLeft'); + tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('moveToRight'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('withTransition'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('moveToLeft'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('moveToRight'); + setTimeout(() => { + tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('withTransition'); + tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('moveToLeft'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('withTransition'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('moveToLeft'); + setTimeout(() => { + monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('withTransition'); + monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('withTransition'); + }, 100); + }, 100); + }, 100); + } + + setYears(from, to) { + const yearsList = []; + for (let index = from; index <= to; index += 1) { + yearsList.push(index); + } + this.yearsList = yearsList; + } +} + +RangeDatepickerCalendar.styles = i$c` + :host { + display: block; + width: 266px; + } + + :host > div { + overflow: hidden; + } + + div.table { + display: table; + border-collapse: collapse; + table-layout: fixed; + } + + div.th { + display: table-cell; + color: var(--range-datepicker-day-names-text, rgb(117, 117, 117)); + font-size: 11px; + width: 38px; + padding: 0; + margin: 0; + text-align: center; + } + + div.tr { + display: table-row; + height: 38px; + } + + div.td { + display: table-cell; + padding: 0; + width: 38px; + margin: 0; + height: 38px; + } + + .header { + display: flex; + flex-direction: row; + align-items: center; + width: 266px; + margin: 10px 0; + text-align: center; + color: var(--range-datepicker-month-text); + } + + .headerTitle { + display: flex; + flex: 1; + flex-direction: row; + align-items: center; + justify-content: center; + font-size: 20px; + } + + .header mwc-icon-button { + padding: 0; + --mdc-icon-size: 30px; + } + + .header::first-letter { + text-transform: uppercase; + } + + .header > div > div { + margin-right: 8px; + } + + div.tbody { + transition: all 0ms; + transform: translateX(0); + height: 235px; + } + + .withTransition { + transition: all 100ms; + } + + .moveToLeft { + transform: translateX(-274px); + } + + .moveToRight { + transform: translateX(274px); + } + + .withTransition td, + .moveToLeft td, + .moveToRight td { + border: none; + } + + .year-container { + position: relative; + display: flex; + align-items: center; + } + + .year-change { + max-height: 200px; + } + `; +__decorate([n$5({ type: String })], RangeDatepickerCalendar.prototype, "dateFrom", void 0); +__decorate([n$5({ type: String })], RangeDatepickerCalendar.prototype, "dateTo", void 0); +__decorate([n$5({ type: String })], RangeDatepickerCalendar.prototype, "hoveredDate", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepickerCalendar.prototype, "enableYearChange", void 0); +__decorate([n$5({ type: String })], RangeDatepickerCalendar.prototype, "month", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepickerCalendar.prototype, "narrow", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepickerCalendar.prototype, "noRange", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepickerCalendar.prototype, "next", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepickerCalendar.prototype, "prev", void 0); +__decorate([n$5({ type: String })], RangeDatepickerCalendar.prototype, "year", void 0); +__decorate([n$5({ type: Array })], RangeDatepickerCalendar.prototype, "disabledDays", void 0); +__decorate([n$5({ type: Object })], RangeDatepickerCalendar.prototype, "locale", null); +__decorate([n$5({ type: String })], RangeDatepickerCalendar.prototype, "max", void 0); +__decorate([n$5({ type: String })], RangeDatepickerCalendar.prototype, "min", void 0); +__decorate([n$5({ type: Array })], RangeDatepickerCalendar.prototype, "yearsList", void 0); +__decorate([n$5({ type: Array })], RangeDatepickerCalendar.prototype, "monthsList", void 0); +__decorate([n$5({ type: Array })], RangeDatepickerCalendar.prototype, "dayNamesOfTheWeek", void 0); +__decorate([n$5({ type: Array })], RangeDatepickerCalendar.prototype, "daysOfMonth", void 0); +AuroLibraryRuntimeUtils$3.prototype.registerComponent('wc-range-datepicker-calendar', RangeDatepickerCalendar); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$5={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$7=t=>(...e)=>({_$litDirective$:t,values:e});let i$7 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}; + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const e$6=e$7(class extends i$7{constructor(t){if(super(t),t.type!==t$5.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$2}}); + +var styleCss$6 = i$c`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`; + +var colorCss$6 = i$c`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d)}.day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}.day.selected{--ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);box-shadow:var(--ds-auro-calendar-boxshadow-color)}.day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:unset}.day.selected:not(:hover){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff)}.day:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}.day.disabled{--ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff)}.day.inRange:before,.day.rangeDepartDate:before,.day.rangeReturnDate:before,.day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}.day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}:host([disabled]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`; + +var styleCss$5 = i$c`:root{--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: #dddddd;--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: #dddddd;--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}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([addSpace]) :host(:not([data-show])) .popover,:host(:not([data-show])) .popover,:host([disabled]) .popover{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(*){white-space:normal}::slotted(*:hover){cursor:pointer}[data-trigger-placement]::slotted(*:hover){position:relative}[data-trigger-placement]::slotted(*:hover):before{position:absolute;left:0;display:block;width:100%;height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));content:""}[data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}[data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}:host([data-show]) .popover{z-index:var(--ds-depth-tooltip, 300)}:host([removeSpace]) .popover{margin:calc(-1*(var(--ds-size-50, 0.25rem) + 1px)) 0 !important}:host([addSpace]) .popover{margin:var(--ds-size-200, 1rem) 0 !important}:host([addSpace]) [data-trigger-placement]::slotted(*:hover):before{height:var(--ds-size-500, 2.5rem)}:host([addSpace]) [data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*var(--ds-size-500, 2.5rem))}:host([addSpace]) [data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*var(--ds-size-500, 2.5rem))}.popover{display:inline-block;max-width:calc(100% - var(--ds-size-400, 2rem));border-radius:var(--ds-border-radius, 0.375rem)}@media screen and (min-width: 576px){.popover{max-width:50%}}@media screen and (min-width: 768px){.popover{max-width:40%}}@media screen and (min-width: 1024px){.popover{max-width:27rem}}[data-popper-placement^=top]>.arrow{bottom:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=top]>.arrow:before{top:calc(-1*var(--ds-size-200, 1rem));left:calc(-1*var(--ds-size-75, 0.375rem));transform:rotate(45deg)}[data-popper-placement^=bottom]>.arrow{top:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=bottom]>.arrow:before{top:var(--ds-size-50, 0.25rem);right:calc(-1*var(--ds-size-200, 1rem));transform:rotate(-135deg)}.arrow{position:relative;margin-top:-var(--ds-size-100, 0.5rem)}.arrow:before{position:absolute;width:var(--ds-size-150, 0.75rem);height:var(--ds-size-150, 0.75rem);content:""}`; + +var colorCss$5 = i$c`::slotted(*){color:var(--ds-auro-popover-text-color)}.popover{background-color:var(--ds-auro-popover-container-color);box-shadow:var(--ds-auro-popover-boxshadow-color)}.arrow:before{background-color:var(--ds-auro-popover-container-color);box-shadow:2px 2px 1px 0 var(--ds-auro-popover-boxshadow-color)}`; + +var tokensCss$5 = i$c`:host{--ds-auro-popover-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; + +var top = 'top'; +var bottom = 'bottom'; +var right = 'right'; +var left = 'left'; +var auto = 'auto'; +var basePlacements = [top, bottom, right, left]; +var start = 'start'; +var end = 'end'; +var clippingParents = 'clippingParents'; +var viewport = 'viewport'; +var popper = 'popper'; +var reference = 'reference'; +var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) { + return acc.concat([placement + "-" + start, placement + "-" + end]); +}, []); +var placements$1 = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) { + return acc.concat([placement, placement + "-" + start, placement + "-" + end]); +}, []); // modifiers that need to read the DOM + +var beforeRead = 'beforeRead'; +var read = 'read'; +var afterRead = 'afterRead'; // pure-logic modifiers + +var beforeMain = 'beforeMain'; +var main = 'main'; +var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state) - // Replace two single quote characters with one single quote character - if (token === "''") { - token = "'"; - } else if (firstCharacter === "'") { - token = cleanEscapedString(token); - } +var beforeWrite = 'beforeWrite'; +var write = 'write'; +var afterWrite = 'afterWrite'; +var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite]; - // Cut token from string, or, if string doesn't match the token, return Invalid Date - if (dateString.indexOf(token) === 0) { - dateString = dateString.slice(token.length); - } else { - return { - v: new Date(NaN) - }; - } - } - }; - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var _ret = _loop(); - if (_typeof(_ret) === "object") return _ret.v; - } - - // Check if the remaining input contains something other than whitespace - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); - } - if (dateString.length > 0 && notWhitespaceRegExp.test(dateString)) { - return new Date(NaN); - } - var uniquePrioritySetters = setters.map(function (setter) { - return setter.priority; - }).sort(function (a, b) { - return b - a; - }).filter(function (priority, index, array) { - return array.indexOf(priority) === index; - }).map(function (priority) { - return setters.filter(function (setter) { - return setter.priority === priority; - }).sort(function (a, b) { - return b.subPriority - a.subPriority; - }); - }).map(function (setterArray) { - return setterArray[0]; - }); - var date = toDate(dirtyReferenceDate); - if (isNaN(date.getTime())) { - return new Date(NaN); +function getNodeName$1(element) { + return element ? (element.nodeName || '').toLowerCase() : null; +} + +function getWindow$1(node) { + if (node == null) { + return window; } - // Convert the date in system timezone to the same date in UTC+00:00 timezone. - var utcDate = subMilliseconds(date, getTimezoneOffsetInMilliseconds(date)); - var flags = {}; - var _iterator2 = _createForOfIteratorHelper(uniquePrioritySetters), - _step2; - try { - for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { - var setter = _step2.value; - if (!setter.validate(utcDate, subFnOptions)) { - return new Date(NaN); - } - var result = setter.set(utcDate, flags, subFnOptions); - // Result is tuple (date, flags) - if (Array.isArray(result)) { - utcDate = result[0]; - assign(flags, result[1]); - // Result is date - } else { - utcDate = result; - } - } - } catch (err) { - _iterator2.e(err); - } finally { - _iterator2.f(); + if (node.toString() !== '[object Window]') { + var ownerDocument = node.ownerDocument; + return ownerDocument ? ownerDocument.defaultView || window : window; } - return utcDate; -} -function cleanEscapedString(input) { - return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'"); -} -/** - * @name subMonths - * @category Month Helpers - * @summary Subtract the specified number of months from the given date. - * - * @description - * Subtract the specified number of months from the given date. - * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the months subtracted - * @throws {TypeError} 2 arguments required - * - * @example - * // Subtract 5 months from 1 February 2015: - * const result = subMonths(new Date(2015, 1, 1), 5) - * //=> Mon Sep 01 2014 00:00:00 - */ -function subMonths(dirtyDate, dirtyAmount) { - requiredArgs(2, arguments); - var amount = toInteger(dirtyAmount); - return addMonths(dirtyDate, -amount); + return node; } -/** - * @name subYears - * @category Year Helpers - * @summary Subtract the specified number of years from the given date. - * - * @description - * Subtract the specified number of years from the given date. - * - * @param {Date|Number} date - the date to be changed - * @param {Number} amount - the amount of years to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. - * @returns {Date} the new date with the years subtracted - * @throws {TypeError} 2 arguments required - * - * @example - * // Subtract 5 years from 1 September 2014: - * const result = subYears(new Date(2014, 8, 1), 5) - * //=> Tue Sep 01 2009 00:00:00 - */ -function subYears(dirtyDate, dirtyAmount) { - requiredArgs(2, arguments); - var amount = toInteger(dirtyAmount); - return addYears(dirtyDate, -amount); +function isElement$1(node) { + var OwnElement = getWindow$1(node).Element; + return node instanceof OwnElement || node instanceof Element; } -class RangeDatepickerCell extends r$2 { - constructor() { - super(...arguments); - this.day = null; - this.selected = false; - this.hovered = false; - this.dateTo = null; - this.dateFrom = null; - this.month = null; - this.min = null; - this.max = null; - this.disabled = false; - this.disabledDays = []; - this.hoveredDate = null; - this.isCurrentDate = false; - this._locale = null; +function isHTMLElement$1(node) { + var OwnElement = getWindow$1(node).HTMLElement; + return node instanceof OwnElement || node instanceof HTMLElement; +} +function isShadowRoot$1(node) { + // IE 11 has no ShadowRoot + if (typeof ShadowRoot === 'undefined') { + return false; } - get locale() { - return this._locale ? this._locale : locale; - } + var OwnElement = getWindow$1(node).ShadowRoot; + return node instanceof OwnElement || node instanceof ShadowRoot; +} - set locale(value) { - const oldValue = this._locale; - this._locale = value; - this.requestUpdate('locale', oldValue); - } +// and applies them to the HTMLElements such as popper and arrow - render() { - let _a, _b; - return x` - - `; - } +function applyStyles(_ref) { + var state = _ref.state; + Object.keys(state.elements).forEach(function (name) { + var style = state.styles[name] || {}; + var attributes = state.attributes[name] || {}; + var element = state.elements[name]; // arrow is optional + virtual elements - updated(properties) { - if (properties.has('dateFrom') || - properties.has('dateTo') || - properties.has('hoveredDate') || - properties.has('day')) { - this.dateChanged(this.dateFrom, this.dateTo, this.hoveredDate, this.day); - } - } + if (!isHTMLElement$1(element) || !getNodeName$1(element)) { + return; + } // Flow doesn't support to extend this property, but it's the most + // effective way to apply styles to an HTMLElement + // $FlowFixMe[cannot-write] - dateChanged(dateFrom, dateTo, hoveredDate, day) { - this.selected = false; - this.hovered = false; - const parsedDateFrom = parseInt(dateFrom, 10); - const parsedDateTo = parseInt(dateTo, 10); - if (day) { - if (getTime(startOfDay(parsedDateTo * 1000)) / 1000 === day.date || - getTime(startOfDay(parsedDateFrom * 1000)) / 1000 === day.date) { - this.selected = true; - } - if (((hoveredDate === day.date || day.date < hoveredDate) && - day.date > parsedDateFrom && - !parsedDateTo && - !Number.isNaN(parsedDateFrom) && - parsedDateFrom !== undefined && - !this.selected) || - (day.date > parsedDateFrom && day.date < parsedDateTo)) { - this.hovered = true; + + Object.assign(element.style, style); + Object.keys(attributes).forEach(function (name) { + var value = attributes[name]; + + if (value === false) { + element.removeAttribute(name); + } else { + element.setAttribute(name, value === true ? '' : value); } - } - } + }); + }); +} - handleTap() { - let _a; - if (!this.disabled) { - this.dispatchEvent(new CustomEvent('date-is-selected', { - detail: { date: (_a = this.day) === null || _a === void 0 ? void 0 : _a.date }, - })); - } - } +function effect$2(_ref2) { + var state = _ref2.state; + var initialStyles = { + popper: { + position: state.options.strategy, + left: '0', + top: '0', + margin: '0' + }, + arrow: { + position: 'absolute' + }, + reference: {} + }; + Object.assign(state.elements.popper.style, initialStyles.popper); + state.styles = initialStyles; - handleHover() { - let _a; - this.dispatchEvent(new CustomEvent('date-is-hovered', { - detail: { date: (_a = this.day) === null || _a === void 0 ? void 0 : _a.date }, - })); + if (state.elements.arrow) { + Object.assign(state.elements.arrow.style, initialStyles.arrow); } - isSelected(selected) { - return selected ? 'selected' : ''; - } + return function () { + Object.keys(state.elements).forEach(function (name) { + var element = state.elements[name]; + var attributes = state.attributes[name] || {}; + var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them - isHovered(hovered) { - return hovered ? 'hovered' : ''; - } + var style = styleProperties.reduce(function (style, property) { + style[property] = ''; + return style; + }, {}); // arrow is optional + virtual elements - isEnabled(day, min, max, disabledDays) { - this.disabled = false; - if (disabledDays && day && day.date) { - if (day.date < min || - day.date > max || - disabledDays.findIndex((disabledDay) => parseInt(disabledDay, 10) === day.date) !== -1) { - this.disabled = true; - return 'disabled'; + if (!isHTMLElement$1(element) || !getNodeName$1(element)) { + return; } - } - return ''; - } - getTitle(date) { - if (date === undefined) { - return ''; - } - return format(date * 1000, 'PPPP', { - locale: this.locale, + Object.assign(element.style, style); + Object.keys(attributes).forEach(function (attribute) { + element.removeAttribute(attribute); + }); }); - } + }; +} // eslint-disable-next-line import/no-unused-modules + + +var applyStyles$1 = { + name: 'applyStyles', + enabled: true, + phase: 'write', + fn: applyStyles, + effect: effect$2, + requires: ['computeStyles'] +}; + +function getBasePlacement(placement) { + return placement.split('-')[0]; } -RangeDatepickerCell.styles = i$5` - :host { - display: block; - } - .day { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - text-align: center; - height: 38px; - width: 38px; - margin: 0; - padding: 0; - color: var(--wc-datepicker-cell-text); +var max$1 = Math.max; +var min$1 = Math.min; +var round$1 = Math.round; - border: none; - outline: none; - background-color: transparent; - } +function getUAString() { + var uaData = navigator.userAgentData; - .day:focus { - outline: 1px solid - var(--wc-datepicker-cell-hovered, rgba(0, 150, 136, 0.5)); + if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) { + return uaData.brands.map(function (item) { + return item.brand + "/" + item.version; + }).join(' '); } - .day:not(.disabled):hover { - background: var(--wc-datepicker-cell-hover, #e4e7e7); - cursor: pointer; - } + return navigator.userAgent; +} - .day.hovered { - background: var( - --wc-datepicker-cell-hovered, - rgba(0, 150, 136, 0.5) - ) !important; - color: var(--wc-datepicker-cell-hovered-text, white); +function isLayoutViewport() { + return !/^((?!chrome|android).)*safari/i.test(getUAString()); +} + +function getBoundingClientRect$1(element, includeScale, isFixedStrategy) { + if (includeScale === void 0) { + includeScale = false; } - .day.selected { - background: var( - --wc-datepicker-cell-selected, - rgb(0, 150, 136) - ) !important; - color: var(--wc-datepicker-cell-selected-text, white); + if (isFixedStrategy === void 0) { + isFixedStrategy = false; } - .day.currentDate .currentDayMarker { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - text-align: center; + var clientRect = element.getBoundingClientRect(); + var scaleX = 1; + var scaleY = 1; - width: 80%; - height: 80%; - font-weight: var(--wc-current-day-font-weight, bold); - border-radius: 50%; - background-color: var(--wc-current-day-color); - color: var(--wc-current-day-color-text); + if (includeScale && isHTMLElement$1(element)) { + scaleX = element.offsetWidth > 0 ? round$1(clientRect.width) / element.offsetWidth || 1 : 1; + scaleY = element.offsetHeight > 0 ? round$1(clientRect.height) / element.offsetHeight || 1 : 1; } - .day.disabled { - opacity: 0.4; - } - `; -__decorate([n({ type: Object })], RangeDatepickerCell.prototype, "day", void 0); -__decorate([n({ type: Boolean })], RangeDatepickerCell.prototype, "selected", void 0); -__decorate([n({ type: Boolean })], RangeDatepickerCell.prototype, "hovered", void 0); -__decorate([n({ type: String })], RangeDatepickerCell.prototype, "dateTo", void 0); -__decorate([n({ type: String })], RangeDatepickerCell.prototype, "dateFrom", void 0); -__decorate([n({ type: String })], RangeDatepickerCell.prototype, "month", void 0); -__decorate([n({ type: Number })], RangeDatepickerCell.prototype, "min", void 0); -__decorate([n({ type: Number })], RangeDatepickerCell.prototype, "max", void 0); -__decorate([n({ type: Boolean })], RangeDatepickerCell.prototype, "disabled", void 0); -__decorate([n({ type: Array })], RangeDatepickerCell.prototype, "disabledDays", void 0); -__decorate([n({ type: String })], RangeDatepickerCell.prototype, "hoveredDate", void 0); -__decorate([n({ type: Boolean })], RangeDatepickerCell.prototype, "isCurrentDate", void 0); -__decorate([n({ type: Object })], RangeDatepickerCell.prototype, "locale", null); -AuroLibraryRuntimeUtils.prototype.registerComponent('wc-range-datepicker-cell', RangeDatepickerCell); + var _ref = isElement$1(element) ? getWindow$1(element) : window, + visualViewport = _ref.visualViewport; -class Day { - constructor(date) { - this.date = parseInt(format(date, 't'), 10); - this.title = parseInt(format(date, 'd'), 10); - } + var addVisualOffsets = !isLayoutViewport() && isFixedStrategy; + var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX; + var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY; + var width = clientRect.width / scaleX; + var height = clientRect.height / scaleY; + return { + width: width, + height: height, + top: y, + right: x + width, + bottom: y + height, + left: x, + x: x, + y: y + }; } -class RangeDatepickerCalendar extends r$2 { - constructor() { - super(); - - /** - * Date from. Format is Unix timestamp. - */ - this.dateFrom = null; - - /** - * Date to. Format is Unix timestamp. - */ - this.dateTo = null; - this.hoveredDate = null; - this.enableYearChange = false; - this.month = '01'; - this.narrow = false; - this.noRange = false; - this.next = false; - this.prev = false; - this.year = 2020; - this.disabledDays = []; +// means it doesn't take into account transforms. - /** - * Max date. Format is Unix timestamp. - */ - this.max = null; +function getLayoutRect(element) { + var clientRect = getBoundingClientRect$1(element); // Use the clientRect sizes if it's not been transformed. + // Fixes https://github.com/popperjs/popper-core/issues/1223 - /** - * Minimal date. Format is Unix timestamp. - */ - this.min = null; - this.yearsList = []; - this.monthsList = []; - this.dayNamesOfTheWeek = []; - this.daysOfMonth = []; - this._locale = null; - this.currentDate = parseInt(format(startOfDay(Date.now()), 't'), 10); - this.localeChanged(); - this.yearAndMonthChanged(this.year, this.month); - } + var width = element.offsetWidth; + var height = element.offsetHeight; - get locale() { - return this._locale ? this._locale : locale; + if (Math.abs(clientRect.width - width) <= 1) { + width = clientRect.width; } - set locale(value) { - const oldValue = this._locale; - this._locale = value; - this.requestUpdate('locale', oldValue); + if (Math.abs(clientRect.height - height) <= 1) { + height = clientRect.height; } - render() { - let _a, _b; - return x` -
-
- ${this.renderPrevButton()} -
-
${this.computeCurrentMonthName(this.month, this.year)}
-
${this.renderYear()}
-
- ${this.renderNextButton()} -
+ return { + x: element.offsetLeft, + y: element.offsetTop, + width: width, + height: height + }; +} -
-
-
- ${(_a = this.dayNamesOfTheWeek) === null || _a === void 0 ? void 0 : _a.map((dayNameOfWeek) => this.renderDayOfWeek(dayNameOfWeek))} -
-
-
- ${(_b = this.daysOfMonth) === null || _b === void 0 ? void 0 : _b.map((week) => this.renderWeek(week))} -
-
-
- `; - } +function contains(parent, child) { + var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method - renderPrevButton() { - if (this.prev || this.narrow || this.enableYearChange) { - return x` - - `; - } - return null; - } + if (parent.contains(child)) { + return true; + } // then fallback to custom implementation with Shadow DOM support + else if (rootNode && isShadowRoot$1(rootNode)) { + var next = child; - renderNextButton() { - if (this.next || this.narrow || this.enableYearChange) { - return x` - `; - } + do { + if (next && parent.isSameNode(next)) { + return true; + } // $FlowFixMe[prop-missing]: need a better way to handle this... - return null; - } - renderYear() { - return x`${this.year}`; - } + next = next.parentNode || next.host; + } while (next); + } // Give up, the result is false - renderDayOfWeek(dayOfWeek) { - return x`
${dayOfWeek}
`; - } - renderWeek(week) { - return x` -
${week.map((day) => this.renderDay(day))}
- `; - } + return false; +} - renderDay(day) { - return x` -
- ${day ? x` - - - ` : null} -
- `; - } +function getComputedStyle$1(element) { + return getWindow$1(element).getComputedStyle(element); +} - async firstUpdated() { - this.monthsList = [ - '01', - '02', - '03', - '04', - '05', - '06', - '07', - '08', - '09', - '10', - '11', - '12', - ]; - setTimeout(() => { - this.setYears(1930, 2100); - }); - await this.updateComplete; - } +function isTableElement$1(element) { + return ['table', 'td', 'th'].indexOf(getNodeName$1(element)) >= 0; +} - updated(properties) { - if (properties.has('locale')) { - this.localeChanged(); - } - if (properties.has('year')) { - this.dispatchEvent(new CustomEvent('year-changed', { detail: { value: this.year } })); - } - if (properties.has('year') || properties.has('month')) { - this.yearAndMonthChanged(this.year, this.month); - } - } +function getDocumentElement$1(element) { + // $FlowFixMe[incompatible-return]: assume body is always available + return ((isElement$1(element) ? element.ownerDocument : // $FlowFixMe[prop-missing] + element.document) || window.document).documentElement; +} - isCurrentDate(day) { - const dayDate = day.date; - return dayDate === this.currentDate; +function getParentNode$1(element) { + if (getNodeName$1(element) === 'html') { + return element; } - localeChanged() { - const dayNamesOfTheWeek = []; - for (let index = 0; index < 7; index += 1) { - dayNamesOfTheWeek.push(this.locale.localize.day(index, { width: 'short' })); - } - const firstDayOfWeek = this.locale.options.weekStartsOn - ? this.locale.options.weekStartsOn - : 0; - const tmp = dayNamesOfTheWeek.slice().splice(0, firstDayOfWeek); - const newDayNamesOfTheWeek = dayNamesOfTheWeek - .slice() // eslint-disable-line dot-location - .splice(firstDayOfWeek, dayNamesOfTheWeek.length) // eslint-disable-line dot-location - .concat(tmp); // eslint-disable-line dot-location - this.dayNamesOfTheWeek = newDayNamesOfTheWeek; + return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle + // $FlowFixMe[incompatible-return] + // $FlowFixMe[prop-missing] + element.assignedSlot || // step into the shadow DOM of the parent of a slotted node + element.parentNode || ( // DOM Element detected + isShadowRoot$1(element) ? element.host : null) || // ShadowRoot detected + // $FlowFixMe[incompatible-call]: HTMLElement is a Node + getDocumentElement$1(element) // fallback + + ); +} + +function getTrueOffsetParent$1(element) { + if (!isHTMLElement$1(element) || // https://github.com/popperjs/popper-core/issues/837 + getComputedStyle$1(element).position === 'fixed') { + return null; } - yearAndMonthChanged(year, month) { - if (year && month) { - let monthMinus = `${month}`; - monthMinus = monthMinus.substring(monthMinus.length - 2); - let startDateString = `01/${monthMinus}/${year}`; - let startDateFn = parse(startDateString, 'dd/MM/yyyy', new Date()); - const endDateFn = endOfMonth(startDateFn); - const endDateString = format(endDateFn, 'dd/MM/yyyy'); - const firstDayOfWeek = this.locale.options.weekStartsOn - ? this.locale.options.weekStartsOn - : 0; - const rows = []; - let columns = []; - const lastDayOfWeek = 6; - while (startDateString !== endDateString) { - let dayNumberFn = getDay(startDateFn) - firstDayOfWeek; - if (dayNumberFn < 0) { - dayNumberFn = 6; - } - const columnFn = new Day(startDateFn); - columns.push(columnFn); - if (dayNumberFn === lastDayOfWeek) { - for (let index = columns.length; index < lastDayOfWeek + 1; index += 1) { - columns.unshift(null); - } - rows.push(columns.slice()); - columns = []; - } - startDateFn = addDays(startDateFn, 1); - startDateString = format(startDateFn, 'dd/MM/yyyy'); - if (startDateString === endDateString) { - const endColumnFn = new Day(startDateFn); - columns.push(endColumnFn); - for (let index = columns.length; index <= lastDayOfWeek; index += 1) { - columns.push(null); - } - rows.push(columns.slice()); - columns = []; - } - } - this.daysOfMonth = rows; + return element.offsetParent; +} // `.offsetParent` reports `null` for fixed elements, while absolute elements +// return the containing block + + +function getContainingBlock$1(element) { + var isFirefox = /firefox/i.test(getUAString()); + var isIE = /Trident/i.test(getUAString()); + + if (isIE && isHTMLElement$1(element)) { + // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport + var elementCss = getComputedStyle$1(element); + + if (elementCss.position === 'fixed') { + return null; } } - computeCurrentMonthName(month, year) { - return format(new Date(year, parseInt(month, 10) - 1), 'MMMM', { - locale: this.locale, - }); - } + var currentNode = getParentNode$1(element); - tdIsEnabled(day) { - return day ? 'enabled' : ''; + if (isShadowRoot$1(currentNode)) { + currentNode = currentNode.host; } - handleDateSelected(event) { - const { detail } = event; - const { date } = detail; - if (!this.noRange) { - if (this.dateFrom && this.dateTo) { - this.dateFrom = date; - this.dateTo = null; - this.hoveredDate = null; - } else if (!this.dateFrom || (this.dateFrom && date < this.dateFrom)) { - this.dateFrom = date; - } else if (!this.dateTo || (this.dateTo && date > this.dateTo)) { - this.dateTo = date; - } + while (isHTMLElement$1(currentNode) && ['html', 'body'].indexOf(getNodeName$1(currentNode)) < 0) { + var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that + // create a containing block. + // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block + + if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') { + return currentNode; } else { - this.dateFrom = date; + currentNode = currentNode.parentNode; } - - this.dispatchEvent(new CustomEvent('date-from-changed', { detail: { value: this.dateFrom } })); - this.dispatchEvent(new CustomEvent('date-to-changed', { detail: { value: this.dateTo } })); } - handleOpenYearSelection() { - let _a; - const menu = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.year-change'); - const index = menu.items.findIndex((item) => item.value === this.year.toString()); - menu.select(index); - menu.show(); - } + return null; +} // Gets the closest ancestor positioned element. Handles some edge cases, +// such as table ancestors and cross browser bugs. - handleYearSelected() { - let _a; - const menu = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.year-change'); - const selected = menu.selected; - this.year = parseInt(selected === null || selected === void 0 ? void 0 : selected.value, 10); - } - handleDateHovered(event) { - this.hoveredDate = event.detail.date; - this.dispatchEvent(new CustomEvent('hovered-date-changed', { - detail: { value: this.hoveredDate }, - })); - } +function getOffsetParent$1(element) { + var window = getWindow$1(element); + var offsetParent = getTrueOffsetParent$1(element); - handleNextMonth() { - let _a, _b; - const tbody = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tbody'); - const monthName = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.header > div'); - tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('withTransition'); - tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('moveToLeft'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('withTransition'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('moveToLeft'); - const month = parse(this.month, 'MM', new Date()); - const monthPlusDate = addMonths(month, 1); - const monthPlusString = format(monthPlusDate, 'MM', { - locale: this.locale, - }); - this.month = monthPlusString; - if (this.month === '01') { - const year = parse(this.year.toString(), 'yyyy', new Date()); - const yearPlusDate = addYears(year, 1); - const yearPlusString = format(yearPlusDate, 'yyyy', { - locale: this.locale, - }); - this.year = parseInt(yearPlusString, 10); - } - this.dispatchEvent(new CustomEvent('next-month')); - setTimeout(() => { - tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('withTransition'); - tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('moveToRight'); - tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('moveToLeft'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('withTransition'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('moveToRight'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('moveToLeft'); - setTimeout(() => { - tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('withTransition'); - tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('moveToRight'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('withTransition'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('moveToRight'); - setTimeout(() => { - tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('withTransition'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('withTransition'); - }, 100); - }, 100); - }, 100); + while (offsetParent && isTableElement$1(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') { + offsetParent = getTrueOffsetParent$1(offsetParent); } - handlePrevMonth() { - let _a, _b; - const tbody = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tbody'); - const monthName = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.header > div'); - tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('withTransition'); - tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('moveToRight'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('withTransition'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('moveToRight'); - const month = parse(this.month, 'MM', new Date()); - const monthMinusDate = subMonths(month, 1); - const monthMinusString = format(monthMinusDate, 'MM', { - locale: this.locale, - }); - this.month = monthMinusString; - if (this.month === '12') { - const year = parse(this.year.toString(), 'yyyy', new Date()); - const yearMinusDate = subYears(year, 1); - const yearMinusString = format(yearMinusDate, 'yyyy', { - locale: this.locale, - }); - this.year = parseInt(yearMinusString, 10); - } - this.dispatchEvent(new CustomEvent('prev-month')); - setTimeout(() => { - tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('withTransition'); - tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('moveToLeft'); - tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('moveToRight'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('withTransition'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('moveToLeft'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('moveToRight'); - setTimeout(() => { - tbody === null || tbody === void 0 ? void 0 : tbody.classList.add('withTransition'); - tbody === null || tbody === void 0 ? void 0 : tbody.classList.remove('moveToLeft'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.add('withTransition'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('moveToLeft'); - setTimeout(() => { - monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('withTransition'); - monthName === null || monthName === void 0 ? void 0 : monthName.classList.remove('withTransition'); - }, 100); - }, 100); - }, 100); + if (offsetParent && (getNodeName$1(offsetParent) === 'html' || getNodeName$1(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static')) { + return window; } - setYears(from, to) { - const yearsList = []; - for (let index = from; index <= to; index += 1) { - yearsList.push(index); - } - this.yearsList = yearsList; - } + return offsetParent || getContainingBlock$1(element) || window; +} + +function getMainAxisFromPlacement(placement) { + return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y'; +} + +function within(min, value, max) { + return max$1(min, min$1(value, max)); +} +function withinMaxClamp(min, value, max) { + var v = within(min, value, max); + return v > max ? max : v; +} + +function getFreshSideObject() { + return { + top: 0, + right: 0, + bottom: 0, + left: 0 + }; +} + +function mergePaddingObject(paddingObject) { + return Object.assign({}, getFreshSideObject(), paddingObject); } -RangeDatepickerCalendar.styles = i$5` - :host { - display: block; - width: 266px; - } +function expandToHashMap(value, keys) { + return keys.reduce(function (hashMap, key) { + hashMap[key] = value; + return hashMap; + }, {}); +} + +var toPaddingObject = function toPaddingObject(padding, state) { + padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, { + placement: state.placement + })) : padding; + return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); +}; + +function arrow(_ref) { + var _state$modifiersData$; - :host > div { - overflow: hidden; - } + var state = _ref.state, + name = _ref.name, + options = _ref.options; + var arrowElement = state.elements.arrow; + var popperOffsets = state.modifiersData.popperOffsets; + var basePlacement = getBasePlacement(state.placement); + var axis = getMainAxisFromPlacement(basePlacement); + var isVertical = [left, right].indexOf(basePlacement) >= 0; + var len = isVertical ? 'height' : 'width'; - div.table { - display: table; - border-collapse: collapse; - table-layout: fixed; + if (!arrowElement || !popperOffsets) { + return; } - div.th { - display: table-cell; - color: var(--range-datepicker-day-names-text, rgb(117, 117, 117)); - font-size: 11px; - width: 38px; - padding: 0; - margin: 0; - text-align: center; - } + var paddingObject = toPaddingObject(options.padding, state); + var arrowRect = getLayoutRect(arrowElement); + var minProp = axis === 'y' ? top : left; + var maxProp = axis === 'y' ? bottom : right; + var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len]; + var startDiff = popperOffsets[axis] - state.rects.reference[axis]; + var arrowOffsetParent = getOffsetParent$1(arrowElement); + var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0; + var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is + // outside of the popper bounds - div.tr { - display: table-row; - height: 38px; - } + var min = paddingObject[minProp]; + var max = clientSize - arrowRect[len] - paddingObject[maxProp]; + var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference; + var offset = within(min, center, max); // Prevents breaking syntax highlighting... - div.td { - display: table-cell; - padding: 0; - width: 38px; - margin: 0; - height: 38px; - } + var axisProp = axis; + state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$); +} - .header { - display: flex; - flex-direction: row; - align-items: center; - width: 266px; - margin: 10px 0; - text-align: center; - color: var(--range-datepicker-month-text); - } +function effect$1(_ref2) { + var state = _ref2.state, + options = _ref2.options; + var _options$element = options.element, + arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element; - .headerTitle { - display: flex; - flex: 1; - flex-direction: row; - align-items: center; - justify-content: center; - font-size: 20px; - } + if (arrowElement == null) { + return; + } // CSS selector - .header mwc-icon-button { - padding: 0; - --mdc-icon-size: 30px; - } - .header::first-letter { - text-transform: uppercase; - } + if (typeof arrowElement === 'string') { + arrowElement = state.elements.popper.querySelector(arrowElement); - .header > div > div { - margin-right: 8px; + if (!arrowElement) { + return; + } } - div.tbody { - transition: all 0ms; - transform: translateX(0); - height: 235px; + if (!contains(state.elements.popper, arrowElement)) { + return; } - .withTransition { - transition: all 100ms; - } + state.elements.arrow = arrowElement; +} // eslint-disable-next-line import/no-unused-modules - .moveToLeft { - transform: translateX(-274px); - } - .moveToRight { - transform: translateX(274px); - } +var arrow$1 = { + name: 'arrow', + enabled: true, + phase: 'main', + fn: arrow, + effect: effect$1, + requires: ['popperOffsets'], + requiresIfExists: ['preventOverflow'] +}; - .withTransition td, - .moveToLeft td, - .moveToRight td { - border: none; - } +function getVariation(placement) { + return placement.split('-')[1]; +} - .year-container { - position: relative; - display: flex; - align-items: center; - } +var unsetSides = { + top: 'auto', + right: 'auto', + bottom: 'auto', + left: 'auto' +}; // Round the offsets to the nearest suitable subpixel based on the DPR. +// Zooming can change the DPR, but it seems to report a value that will +// cleanly divide the values into the appropriate subpixels. - .year-change { - max-height: 200px; - } - `; -__decorate([n({ type: String })], RangeDatepickerCalendar.prototype, "dateFrom", void 0); -__decorate([n({ type: String })], RangeDatepickerCalendar.prototype, "dateTo", void 0); -__decorate([n({ type: String })], RangeDatepickerCalendar.prototype, "hoveredDate", void 0); -__decorate([n({ type: Boolean })], RangeDatepickerCalendar.prototype, "enableYearChange", void 0); -__decorate([n({ type: String })], RangeDatepickerCalendar.prototype, "month", void 0); -__decorate([n({ type: Boolean })], RangeDatepickerCalendar.prototype, "narrow", void 0); -__decorate([n({ type: Boolean })], RangeDatepickerCalendar.prototype, "noRange", void 0); -__decorate([n({ type: Boolean })], RangeDatepickerCalendar.prototype, "next", void 0); -__decorate([n({ type: Boolean })], RangeDatepickerCalendar.prototype, "prev", void 0); -__decorate([n({ type: String })], RangeDatepickerCalendar.prototype, "year", void 0); -__decorate([n({ type: Array })], RangeDatepickerCalendar.prototype, "disabledDays", void 0); -__decorate([n({ type: Object })], RangeDatepickerCalendar.prototype, "locale", null); -__decorate([n({ type: String })], RangeDatepickerCalendar.prototype, "max", void 0); -__decorate([n({ type: String })], RangeDatepickerCalendar.prototype, "min", void 0); -__decorate([n({ type: Array })], RangeDatepickerCalendar.prototype, "yearsList", void 0); -__decorate([n({ type: Array })], RangeDatepickerCalendar.prototype, "monthsList", void 0); -__decorate([n({ type: Array })], RangeDatepickerCalendar.prototype, "dayNamesOfTheWeek", void 0); -__decorate([n({ type: Array })], RangeDatepickerCalendar.prototype, "daysOfMonth", void 0); -AuroLibraryRuntimeUtils.prototype.registerComponent('wc-range-datepicker-calendar', RangeDatepickerCalendar); +function roundOffsetsByDPR(_ref, win) { + var x = _ref.x, + y = _ref.y; + var dpr = win.devicePixelRatio || 1; + return { + x: round$1(x * dpr) / dpr || 0, + y: round$1(y * dpr) / dpr || 0 + }; +} -/** - * @license - * Copyright 2017 Google LLC - * SPDX-License-Identifier: BSD-3-Clause - */ -const t$1={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}} +function mapToStyles(_ref2) { + var _Object$assign2; -/** - * @license - * Copyright 2018 Google LLC - * SPDX-License-Identifier: BSD-3-Clause - */const e=e$1(class extends i{constructor(t){if(super(t),t.type!==t$1.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}}); + var popper = _ref2.popper, + popperRect = _ref2.popperRect, + placement = _ref2.placement, + variation = _ref2.variation, + offsets = _ref2.offsets, + position = _ref2.position, + gpuAcceleration = _ref2.gpuAcceleration, + adaptive = _ref2.adaptive, + roundOffsets = _ref2.roundOffsets, + isFixed = _ref2.isFixed; + var _offsets$x = offsets.x, + x = _offsets$x === void 0 ? 0 : _offsets$x, + _offsets$y = offsets.y, + y = _offsets$y === void 0 ? 0 : _offsets$y; + + var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({ + x: x, + y: y + }) : { + x: x, + y: y + }; -var styleCss$6 = i$5`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`; + x = _ref3.x; + y = _ref3.y; + var hasX = offsets.hasOwnProperty('x'); + var hasY = offsets.hasOwnProperty('y'); + var sideX = left; + var sideY = top; + var win = window; -var colorCss$6 = i$5`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d)}.day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}.day.selected{--ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);box-shadow:var(--ds-auro-calendar-boxshadow-color)}.day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:unset}.day.selected:not(:hover){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff)}.day:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}.day.disabled{--ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff)}.day.inRange:before,.day.rangeDepartDate:before,.day.rangeReturnDate:before,.day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}.day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}:host([disabled]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`; + if (adaptive) { + var offsetParent = getOffsetParent$1(popper); + var heightProp = 'clientHeight'; + var widthProp = 'clientWidth'; -var styleCss$5 = i$5`:root{--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: #dddddd;--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: #dddddd;--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}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([addSpace]) :host(:not([data-show])) .popover,:host(:not([data-show])) .popover,:host([disabled]) .popover{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(*){white-space:normal}::slotted(*:hover){cursor:pointer}[data-trigger-placement]::slotted(*:hover){position:relative}[data-trigger-placement]::slotted(*:hover):before{position:absolute;left:0;display:block;width:100%;height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));content:""}[data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}[data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}:host([data-show]) .popover{z-index:var(--ds-depth-tooltip, 300)}:host([removeSpace]) .popover{margin:calc(-1*(var(--ds-size-50, 0.25rem) + 1px)) 0 !important}:host([addSpace]) .popover{margin:var(--ds-size-200, 1rem) 0 !important}:host([addSpace]) [data-trigger-placement]::slotted(*:hover):before{height:var(--ds-size-500, 2.5rem)}:host([addSpace]) [data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*var(--ds-size-500, 2.5rem))}:host([addSpace]) [data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*var(--ds-size-500, 2.5rem))}.popover{display:inline-block;max-width:calc(100% - var(--ds-size-400, 2rem));border-radius:var(--ds-border-radius, 0.375rem)}@media screen and (min-width: 576px){.popover{max-width:50%}}@media screen and (min-width: 768px){.popover{max-width:40%}}@media screen and (min-width: 1024px){.popover{max-width:27rem}}[data-popper-placement^=top]>.arrow{bottom:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=top]>.arrow:before{top:calc(-1*var(--ds-size-200, 1rem));left:calc(-1*var(--ds-size-75, 0.375rem));transform:rotate(45deg)}[data-popper-placement^=bottom]>.arrow{top:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=bottom]>.arrow:before{top:var(--ds-size-50, 0.25rem);right:calc(-1*var(--ds-size-200, 1rem));transform:rotate(-135deg)}.arrow{position:relative;margin-top:-var(--ds-size-100, 0.5rem)}.arrow:before{position:absolute;width:var(--ds-size-150, 0.75rem);height:var(--ds-size-150, 0.75rem);content:""}`; + if (offsetParent === getWindow$1(popper)) { + offsetParent = getDocumentElement$1(popper); -var colorCss$5 = i$5`::slotted(*){color:var(--ds-auro-popover-text-color)}.popover{background-color:var(--ds-auro-popover-container-color);box-shadow:var(--ds-auro-popover-boxshadow-color)}.arrow:before{background-color:var(--ds-auro-popover-container-color);box-shadow:2px 2px 1px 0 var(--ds-auro-popover-boxshadow-color)}`; + if (getComputedStyle$1(offsetParent).position !== 'static' && position === 'absolute') { + heightProp = 'scrollHeight'; + widthProp = 'scrollWidth'; + } + } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it -var tokensCss$5 = i$5`:host{--ds-auro-popover-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; -var top = 'top'; -var bottom = 'bottom'; -var right = 'right'; -var left = 'left'; -var auto = 'auto'; -var basePlacements = [top, bottom, right, left]; -var start = 'start'; -var end = 'end'; -var clippingParents = 'clippingParents'; -var viewport = 'viewport'; -var popper = 'popper'; -var reference = 'reference'; -var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) { - return acc.concat([placement + "-" + start, placement + "-" + end]); -}, []); -var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) { - return acc.concat([placement, placement + "-" + start, placement + "-" + end]); -}, []); // modifiers that need to read the DOM + offsetParent = offsetParent; -var beforeRead = 'beforeRead'; -var read = 'read'; -var afterRead = 'afterRead'; // pure-logic modifiers + if (placement === top || (placement === left || placement === right) && variation === end) { + sideY = bottom; + var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing] + offsetParent[heightProp]; + y -= offsetY - popperRect.height; + y *= gpuAcceleration ? 1 : -1; + } -var beforeMain = 'beforeMain'; -var main = 'main'; -var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state) + if (placement === left || (placement === top || placement === bottom) && variation === end) { + sideX = right; + var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing] + offsetParent[widthProp]; + x -= offsetX - popperRect.width; + x *= gpuAcceleration ? 1 : -1; + } + } -var beforeWrite = 'beforeWrite'; -var write = 'write'; -var afterWrite = 'afterWrite'; -var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite]; + var commonStyles = Object.assign({ + position: position + }, adaptive && unsetSides); -function getNodeName(element) { - return element ? (element.nodeName || '').toLowerCase() : null; -} + var _ref4 = roundOffsets === true ? roundOffsetsByDPR({ + x: x, + y: y + }, getWindow$1(popper)) : { + x: x, + y: y + }; -function getWindow(node) { - if (node == null) { - return window; - } + x = _ref4.x; + y = _ref4.y; - if (node.toString() !== '[object Window]') { - var ownerDocument = node.ownerDocument; - return ownerDocument ? ownerDocument.defaultView || window : window; - } + if (gpuAcceleration) { + var _Object$assign; - return node; -} + return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign)); + } -function isElement(node) { - var OwnElement = getWindow(node).Element; - return node instanceof OwnElement || node instanceof Element; + return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); } -function isHTMLElement(node) { - var OwnElement = getWindow(node).HTMLElement; - return node instanceof OwnElement || node instanceof HTMLElement; -} +function computeStyles(_ref5) { + var state = _ref5.state, + options = _ref5.options; + var _options$gpuAccelerat = options.gpuAcceleration, + gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, + _options$adaptive = options.adaptive, + adaptive = _options$adaptive === void 0 ? true : _options$adaptive, + _options$roundOffsets = options.roundOffsets, + roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets; + var commonStyles = { + placement: getBasePlacement(state.placement), + variation: getVariation(state.placement), + popper: state.elements.popper, + popperRect: state.rects.popper, + gpuAcceleration: gpuAcceleration, + isFixed: state.options.strategy === 'fixed' + }; -function isShadowRoot(node) { - // IE 11 has no ShadowRoot - if (typeof ShadowRoot === 'undefined') { - return false; + if (state.modifiersData.popperOffsets != null) { + state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, { + offsets: state.modifiersData.popperOffsets, + position: state.options.strategy, + adaptive: adaptive, + roundOffsets: roundOffsets + }))); } - var OwnElement = getWindow(node).ShadowRoot; - return node instanceof OwnElement || node instanceof ShadowRoot; -} + if (state.modifiersData.arrow != null) { + state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, { + offsets: state.modifiersData.arrow, + position: 'absolute', + adaptive: false, + roundOffsets: roundOffsets + }))); + } -// and applies them to the HTMLElements such as popper and arrow + state.attributes.popper = Object.assign({}, state.attributes.popper, { + 'data-popper-placement': state.placement + }); +} // eslint-disable-next-line import/no-unused-modules -function applyStyles(_ref) { - var state = _ref.state; - Object.keys(state.elements).forEach(function (name) { - var style = state.styles[name] || {}; - var attributes = state.attributes[name] || {}; - var element = state.elements[name]; // arrow is optional + virtual elements - if (!isHTMLElement(element) || !getNodeName(element)) { - return; - } // Flow doesn't support to extend this property, but it's the most - // effective way to apply styles to an HTMLElement - // $FlowFixMe[cannot-write] +var computeStyles$1 = { + name: 'computeStyles', + enabled: true, + phase: 'beforeWrite', + fn: computeStyles, + data: {} +}; +var passive = { + passive: true +}; - Object.assign(element.style, style); - Object.keys(attributes).forEach(function (name) { - var value = attributes[name]; +function effect(_ref) { + var state = _ref.state, + instance = _ref.instance, + options = _ref.options; + var _options$scroll = options.scroll, + scroll = _options$scroll === void 0 ? true : _options$scroll, + _options$resize = options.resize, + resize = _options$resize === void 0 ? true : _options$resize; + var window = getWindow$1(state.elements.popper); + var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper); - if (value === false) { - element.removeAttribute(name); - } else { - element.setAttribute(name, value === true ? '' : value); - } + if (scroll) { + scrollParents.forEach(function (scrollParent) { + scrollParent.addEventListener('scroll', instance.update, passive); }); - }); -} - -function effect$2(_ref2) { - var state = _ref2.state; - var initialStyles = { - popper: { - position: state.options.strategy, - left: '0', - top: '0', - margin: '0' - }, - arrow: { - position: 'absolute' - }, - reference: {} - }; - Object.assign(state.elements.popper.style, initialStyles.popper); - state.styles = initialStyles; + } - if (state.elements.arrow) { - Object.assign(state.elements.arrow.style, initialStyles.arrow); + if (resize) { + window.addEventListener('resize', instance.update, passive); } return function () { - Object.keys(state.elements).forEach(function (name) { - var element = state.elements[name]; - var attributes = state.attributes[name] || {}; - var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them - - var style = styleProperties.reduce(function (style, property) { - style[property] = ''; - return style; - }, {}); // arrow is optional + virtual elements - - if (!isHTMLElement(element) || !getNodeName(element)) { - return; - } - - Object.assign(element.style, style); - Object.keys(attributes).forEach(function (attribute) { - element.removeAttribute(attribute); + if (scroll) { + scrollParents.forEach(function (scrollParent) { + scrollParent.removeEventListener('scroll', instance.update, passive); }); - }); + } + + if (resize) { + window.removeEventListener('resize', instance.update, passive); + } }; } // eslint-disable-next-line import/no-unused-modules -var applyStyles$1 = { - name: 'applyStyles', +var eventListeners = { + name: 'eventListeners', enabled: true, phase: 'write', - fn: applyStyles, - effect: effect$2, - requires: ['computeStyles'] + fn: function fn() {}, + effect: effect, + data: {} }; -function getBasePlacement(placement) { - return placement.split('-')[0]; -} - -var max = Math.max; -var min = Math.min; -var round = Math.round; - -function getUAString() { - var uaData = navigator.userAgentData; - - if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) { - return uaData.brands.map(function (item) { - return item.brand + "/" + item.version; - }).join(' '); - } - - return navigator.userAgent; +var hash$1 = { + left: 'right', + right: 'left', + bottom: 'top', + top: 'bottom' +}; +function getOppositePlacement$1(placement) { + return placement.replace(/left|right|bottom|top/g, function (matched) { + return hash$1[matched]; + }); } -function isLayoutViewport() { - return !/^((?!chrome|android).)*safari/i.test(getUAString()); +var hash = { + start: 'end', + end: 'start' +}; +function getOppositeVariationPlacement(placement) { + return placement.replace(/start|end/g, function (matched) { + return hash[matched]; + }); } -function getBoundingClientRect(element, includeScale, isFixedStrategy) { - if (includeScale === void 0) { - includeScale = false; - } - - if (isFixedStrategy === void 0) { - isFixedStrategy = false; - } - - var clientRect = element.getBoundingClientRect(); - var scaleX = 1; - var scaleY = 1; - - if (includeScale && isHTMLElement(element)) { - scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1; - scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1; - } - - var _ref = isElement(element) ? getWindow(element) : window, - visualViewport = _ref.visualViewport; - - var addVisualOffsets = !isLayoutViewport() && isFixedStrategy; - var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX; - var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY; - var width = clientRect.width / scaleX; - var height = clientRect.height / scaleY; +function getWindowScroll(node) { + var win = getWindow$1(node); + var scrollLeft = win.pageXOffset; + var scrollTop = win.pageYOffset; return { - width: width, - height: height, - top: y, - right: x + width, - bottom: y + height, - left: x, - x: x, - y: y + scrollLeft: scrollLeft, + scrollTop: scrollTop }; } -// means it doesn't take into account transforms. - -function getLayoutRect(element) { - var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed. - // Fixes https://github.com/popperjs/popper-core/issues/1223 +function getWindowScrollBarX$1(element) { + // If has a CSS width greater than the viewport, then this will be + // incorrect for RTL. + // Popper 1 is broken in this case and never had a bug report so let's assume + // it's not an issue. I don't think anyone ever specifies width on + // anyway. + // Browsers where the left scrollbar doesn't cause an issue report `0` for + // this (e.g. Edge 2019, IE11, Safari) + return getBoundingClientRect$1(getDocumentElement$1(element)).left + getWindowScroll(element).scrollLeft; +} - var width = element.offsetWidth; - var height = element.offsetHeight; +function getViewportRect$1(element, strategy) { + var win = getWindow$1(element); + var html = getDocumentElement$1(element); + var visualViewport = win.visualViewport; + var width = html.clientWidth; + var height = html.clientHeight; + var x = 0; + var y = 0; - if (Math.abs(clientRect.width - width) <= 1) { - width = clientRect.width; - } + if (visualViewport) { + width = visualViewport.width; + height = visualViewport.height; + var layoutViewport = isLayoutViewport(); - if (Math.abs(clientRect.height - height) <= 1) { - height = clientRect.height; + if (layoutViewport || !layoutViewport && strategy === 'fixed') { + x = visualViewport.offsetLeft; + y = visualViewport.offsetTop; + } } return { - x: element.offsetLeft, - y: element.offsetTop, width: width, - height: height + height: height, + x: x + getWindowScrollBarX$1(element), + y: y }; } -function contains(parent, child) { - var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method - - if (parent.contains(child)) { - return true; - } // then fallback to custom implementation with Shadow DOM support - else if (rootNode && isShadowRoot(rootNode)) { - var next = child; - - do { - if (next && parent.isSameNode(next)) { - return true; - } // $FlowFixMe[prop-missing]: need a better way to handle this... - +// of the `` and `` rect bounds if horizontally scrollable - next = next.parentNode || next.host; - } while (next); - } // Give up, the result is false +function getDocumentRect$1(element) { + var _element$ownerDocumen; + var html = getDocumentElement$1(element); + var winScroll = getWindowScroll(element); + var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; + var width = max$1(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); + var height = max$1(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); + var x = -winScroll.scrollLeft + getWindowScrollBarX$1(element); + var y = -winScroll.scrollTop; - return false; -} + if (getComputedStyle$1(body || html).direction === 'rtl') { + x += max$1(html.clientWidth, body ? body.clientWidth : 0) - width; + } -function getComputedStyle(element) { - return getWindow(element).getComputedStyle(element); + return { + width: width, + height: height, + x: x, + y: y + }; } -function isTableElement(element) { - return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0; -} +function isScrollParent(element) { + // Firefox wants us to check `-x` and `-y` variations as well + var _getComputedStyle = getComputedStyle$1(element), + overflow = _getComputedStyle.overflow, + overflowX = _getComputedStyle.overflowX, + overflowY = _getComputedStyle.overflowY; -function getDocumentElement(element) { - // $FlowFixMe[incompatible-return]: assume body is always available - return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing] - element.document) || window.document).documentElement; + return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); } -function getParentNode(element) { - if (getNodeName(element) === 'html') { - return element; +function getScrollParent(node) { + if (['html', 'body', '#document'].indexOf(getNodeName$1(node)) >= 0) { + // $FlowFixMe[incompatible-return]: assume body is always available + return node.ownerDocument.body; } - return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle - // $FlowFixMe[incompatible-return] - // $FlowFixMe[prop-missing] - element.assignedSlot || // step into the shadow DOM of the parent of a slotted node - element.parentNode || ( // DOM Element detected - isShadowRoot(element) ? element.host : null) || // ShadowRoot detected - // $FlowFixMe[incompatible-call]: HTMLElement is a Node - getDocumentElement(element) // fallback - - ); -} - -function getTrueOffsetParent(element) { - if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837 - getComputedStyle(element).position === 'fixed') { - return null; + if (isHTMLElement$1(node) && isScrollParent(node)) { + return node; } - return element.offsetParent; -} // `.offsetParent` reports `null` for fixed elements, while absolute elements -// return the containing block - - -function getContainingBlock(element) { - var isFirefox = /firefox/i.test(getUAString()); - var isIE = /Trident/i.test(getUAString()); - - if (isIE && isHTMLElement(element)) { - // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport - var elementCss = getComputedStyle(element); + return getScrollParent(getParentNode$1(node)); +} - if (elementCss.position === 'fixed') { - return null; - } - } +/* +given a DOM element, return the list of all scroll parents, up the list of ancesors +until we get to the top window object. This list is what we attach scroll listeners +to, because if any of these parent elements scroll, we'll need to re-calculate the +reference element's position. +*/ - var currentNode = getParentNode(element); +function listScrollParents(element, list) { + var _element$ownerDocumen; - if (isShadowRoot(currentNode)) { - currentNode = currentNode.host; + if (list === void 0) { + list = []; } - while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) { - var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that - // create a containing block. - // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block - - if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') { - return currentNode; - } else { - currentNode = currentNode.parentNode; - } - } + var scrollParent = getScrollParent(element); + var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body); + var win = getWindow$1(scrollParent); + var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent; + var updatedList = list.concat(target); + return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here + updatedList.concat(listScrollParents(getParentNode$1(target))); +} - return null; -} // Gets the closest ancestor positioned element. Handles some edge cases, -// such as table ancestors and cross browser bugs. +function rectToClientRect$1(rect) { + return Object.assign({}, rect, { + left: rect.x, + top: rect.y, + right: rect.x + rect.width, + bottom: rect.y + rect.height + }); +} +function getInnerBoundingClientRect$1(element, strategy) { + var rect = getBoundingClientRect$1(element, false, strategy === 'fixed'); + rect.top = rect.top + element.clientTop; + rect.left = rect.left + element.clientLeft; + rect.bottom = rect.top + element.clientHeight; + rect.right = rect.left + element.clientWidth; + rect.width = element.clientWidth; + rect.height = element.clientHeight; + rect.x = rect.left; + rect.y = rect.top; + return rect; +} -function getOffsetParent(element) { - var window = getWindow(element); - var offsetParent = getTrueOffsetParent(element); +function getClientRectFromMixedType(element, clippingParent, strategy) { + return clippingParent === viewport ? rectToClientRect$1(getViewportRect$1(element, strategy)) : isElement$1(clippingParent) ? getInnerBoundingClientRect$1(clippingParent, strategy) : rectToClientRect$1(getDocumentRect$1(getDocumentElement$1(element))); +} // A "clipping parent" is an overflowable container with the characteristic of +// clipping (or hiding) overflowing elements with a position different from +// `initial` - while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') { - offsetParent = getTrueOffsetParent(offsetParent); - } - if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) { - return window; - } +function getClippingParents(element) { + var clippingParents = listScrollParents(getParentNode$1(element)); + var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle$1(element).position) >= 0; + var clipperElement = canEscapeClipping && isHTMLElement$1(element) ? getOffsetParent$1(element) : element; - return offsetParent || getContainingBlock(element) || window; -} + if (!isElement$1(clipperElement)) { + return []; + } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414 -function getMainAxisFromPlacement(placement) { - return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y'; -} -function within(min$1, value, max$1) { - return max(min$1, min(value, max$1)); -} -function withinMaxClamp(min, value, max) { - var v = within(min, value, max); - return v > max ? max : v; -} + return clippingParents.filter(function (clippingParent) { + return isElement$1(clippingParent) && contains(clippingParent, clipperElement) && getNodeName$1(clippingParent) !== 'body'; + }); +} // Gets the maximum area that the element is visible in due to any number of +// clipping parents -function getFreshSideObject() { - return { - top: 0, - right: 0, - bottom: 0, - left: 0 - }; -} -function mergePaddingObject(paddingObject) { - return Object.assign({}, getFreshSideObject(), paddingObject); +function getClippingRect$1(element, boundary, rootBoundary, strategy) { + var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); + var clippingParents = [].concat(mainClippingParents, [rootBoundary]); + var firstClippingParent = clippingParents[0]; + var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { + var rect = getClientRectFromMixedType(element, clippingParent, strategy); + accRect.top = max$1(rect.top, accRect.top); + accRect.right = min$1(rect.right, accRect.right); + accRect.bottom = min$1(rect.bottom, accRect.bottom); + accRect.left = max$1(rect.left, accRect.left); + return accRect; + }, getClientRectFromMixedType(element, firstClippingParent, strategy)); + clippingRect.width = clippingRect.right - clippingRect.left; + clippingRect.height = clippingRect.bottom - clippingRect.top; + clippingRect.x = clippingRect.left; + clippingRect.y = clippingRect.top; + return clippingRect; } -function expandToHashMap(value, keys) { - return keys.reduce(function (hashMap, key) { - hashMap[key] = value; - return hashMap; - }, {}); -} +function computeOffsets(_ref) { + var reference = _ref.reference, + element = _ref.element, + placement = _ref.placement; + var basePlacement = placement ? getBasePlacement(placement) : null; + var variation = placement ? getVariation(placement) : null; + var commonX = reference.x + reference.width / 2 - element.width / 2; + var commonY = reference.y + reference.height / 2 - element.height / 2; + var offsets; -var toPaddingObject = function toPaddingObject(padding, state) { - padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, { - placement: state.placement - })) : padding; - return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); -}; + switch (basePlacement) { + case top: + offsets = { + x: commonX, + y: reference.y - element.height + }; + break; -function arrow(_ref) { - var _state$modifiersData$; + case bottom: + offsets = { + x: commonX, + y: reference.y + reference.height + }; + break; - var state = _ref.state, - name = _ref.name, - options = _ref.options; - var arrowElement = state.elements.arrow; - var popperOffsets = state.modifiersData.popperOffsets; - var basePlacement = getBasePlacement(state.placement); - var axis = getMainAxisFromPlacement(basePlacement); - var isVertical = [left, right].indexOf(basePlacement) >= 0; - var len = isVertical ? 'height' : 'width'; + case right: + offsets = { + x: reference.x + reference.width, + y: commonY + }; + break; - if (!arrowElement || !popperOffsets) { - return; - } + case left: + offsets = { + x: reference.x - element.width, + y: commonY + }; + break; - var paddingObject = toPaddingObject(options.padding, state); - var arrowRect = getLayoutRect(arrowElement); - var minProp = axis === 'y' ? top : left; - var maxProp = axis === 'y' ? bottom : right; - var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len]; - var startDiff = popperOffsets[axis] - state.rects.reference[axis]; - var arrowOffsetParent = getOffsetParent(arrowElement); - var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0; - var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is - // outside of the popper bounds + default: + offsets = { + x: reference.x, + y: reference.y + }; + } - var min = paddingObject[minProp]; - var max = clientSize - arrowRect[len] - paddingObject[maxProp]; - var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference; - var offset = within(min, center, max); // Prevents breaking syntax highlighting... + var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null; - var axisProp = axis; - state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$); -} + if (mainAxis != null) { + var len = mainAxis === 'y' ? 'height' : 'width'; -function effect$1(_ref2) { - var state = _ref2.state, - options = _ref2.options; - var _options$element = options.element, - arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element; + switch (variation) { + case start: + offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2); + break; - if (arrowElement == null) { - return; - } // CSS selector + case end: + offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2); + break; + } + } + return offsets; +} - if (typeof arrowElement === 'string') { - arrowElement = state.elements.popper.querySelector(arrowElement); +function detectOverflow$1(state, options) { + if (options === void 0) { + options = {}; + } - if (!arrowElement) { - return; - } + var _options = options, + _options$placement = _options.placement, + placement = _options$placement === void 0 ? state.placement : _options$placement, + _options$strategy = _options.strategy, + strategy = _options$strategy === void 0 ? state.strategy : _options$strategy, + _options$boundary = _options.boundary, + boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, + _options$rootBoundary = _options.rootBoundary, + rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, + _options$elementConte = _options.elementContext, + elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, + _options$altBoundary = _options.altBoundary, + altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, + _options$padding = _options.padding, + padding = _options$padding === void 0 ? 0 : _options$padding; + var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); + var altContext = elementContext === popper ? reference : popper; + var popperRect = state.rects.popper; + var element = state.elements[altBoundary ? altContext : elementContext]; + var clippingClientRect = getClippingRect$1(isElement$1(element) ? element : element.contextElement || getDocumentElement$1(state.elements.popper), boundary, rootBoundary, strategy); + var referenceClientRect = getBoundingClientRect$1(state.elements.reference); + var popperOffsets = computeOffsets({ + reference: referenceClientRect, + element: popperRect, + strategy: 'absolute', + placement: placement + }); + var popperClientRect = rectToClientRect$1(Object.assign({}, popperRect, popperOffsets)); + var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect + // 0 or negative = within the clipping rect + + var overflowOffsets = { + top: clippingClientRect.top - elementClientRect.top + paddingObject.top, + bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom, + left: clippingClientRect.left - elementClientRect.left + paddingObject.left, + right: elementClientRect.right - clippingClientRect.right + paddingObject.right + }; + var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element + + if (elementContext === popper && offsetData) { + var offset = offsetData[placement]; + Object.keys(overflowOffsets).forEach(function (key) { + var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1; + var axis = [top, bottom].indexOf(key) >= 0 ? 'y' : 'x'; + overflowOffsets[key] += offset[axis] * multiply; + }); } - if (!contains(state.elements.popper, arrowElement)) { - return; + return overflowOffsets; +} + +function computeAutoPlacement(state, options) { + if (options === void 0) { + options = {}; } - state.elements.arrow = arrowElement; -} // eslint-disable-next-line import/no-unused-modules + var _options = options, + placement = _options.placement, + boundary = _options.boundary, + rootBoundary = _options.rootBoundary, + padding = _options.padding, + flipVariations = _options.flipVariations, + _options$allowedAutoP = _options.allowedAutoPlacements, + allowedAutoPlacements = _options$allowedAutoP === void 0 ? placements$1 : _options$allowedAutoP; + var variation = getVariation(placement); + var placements = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) { + return getVariation(placement) === variation; + }) : basePlacements; + var allowedPlacements = placements.filter(function (placement) { + return allowedAutoPlacements.indexOf(placement) >= 0; + }); + if (allowedPlacements.length === 0) { + allowedPlacements = placements; + } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions... -var arrow$1 = { - name: 'arrow', - enabled: true, - phase: 'main', - fn: arrow, - effect: effect$1, - requires: ['popperOffsets'], - requiresIfExists: ['preventOverflow'] -}; -function getVariation(placement) { - return placement.split('-')[1]; + var overflows = allowedPlacements.reduce(function (acc, placement) { + acc[placement] = detectOverflow$1(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding + })[getBasePlacement(placement)]; + return acc; + }, {}); + return Object.keys(overflows).sort(function (a, b) { + return overflows[a] - overflows[b]; + }); } -var unsetSides = { - top: 'auto', - right: 'auto', - bottom: 'auto', - left: 'auto' -}; // Round the offsets to the nearest suitable subpixel based on the DPR. -// Zooming can change the DPR, but it seems to report a value that will -// cleanly divide the values into the appropriate subpixels. +function getExpandedFallbackPlacements(placement) { + if (getBasePlacement(placement) === auto) { + return []; + } -function roundOffsetsByDPR(_ref, win) { - var x = _ref.x, - y = _ref.y; - var dpr = win.devicePixelRatio || 1; - return { - x: round(x * dpr) / dpr || 0, - y: round(y * dpr) / dpr || 0 - }; + var oppositePlacement = getOppositePlacement$1(placement); + return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)]; } -function mapToStyles(_ref2) { - var _Object$assign2; +function flip$2(_ref) { + var state = _ref.state, + options = _ref.options, + name = _ref.name; - var popper = _ref2.popper, - popperRect = _ref2.popperRect, - placement = _ref2.placement, - variation = _ref2.variation, - offsets = _ref2.offsets, - position = _ref2.position, - gpuAcceleration = _ref2.gpuAcceleration, - adaptive = _ref2.adaptive, - roundOffsets = _ref2.roundOffsets, - isFixed = _ref2.isFixed; - var _offsets$x = offsets.x, - x = _offsets$x === void 0 ? 0 : _offsets$x, - _offsets$y = offsets.y, - y = _offsets$y === void 0 ? 0 : _offsets$y; + if (state.modifiersData[name]._skip) { + return; + } - var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({ - x: x, - y: y - }) : { - x: x, - y: y - }; + var _options$mainAxis = options.mainAxis, + checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, + _options$altAxis = options.altAxis, + checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, + specifiedFallbackPlacements = options.fallbackPlacements, + padding = options.padding, + boundary = options.boundary, + rootBoundary = options.rootBoundary, + altBoundary = options.altBoundary, + _options$flipVariatio = options.flipVariations, + flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, + allowedAutoPlacements = options.allowedAutoPlacements; + var preferredPlacement = state.options.placement; + var basePlacement = getBasePlacement(preferredPlacement); + var isBasePlacement = basePlacement === preferredPlacement; + var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement$1(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement)); + var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) { + return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding, + flipVariations: flipVariations, + allowedAutoPlacements: allowedAutoPlacements + }) : placement); + }, []); + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var checksMap = new Map(); + var makeFallbackChecks = true; + var firstFittingPlacement = placements[0]; - x = _ref3.x; - y = _ref3.y; - var hasX = offsets.hasOwnProperty('x'); - var hasY = offsets.hasOwnProperty('y'); - var sideX = left; - var sideY = top; - var win = window; + for (var i = 0; i < placements.length; i++) { + var placement = placements[i]; - if (adaptive) { - var offsetParent = getOffsetParent(popper); - var heightProp = 'clientHeight'; - var widthProp = 'clientWidth'; + var _basePlacement = getBasePlacement(placement); - if (offsetParent === getWindow(popper)) { - offsetParent = getDocumentElement(popper); + var isStartVariation = getVariation(placement) === start; + var isVertical = [top, bottom].indexOf(_basePlacement) >= 0; + var len = isVertical ? 'width' : 'height'; + var overflow = detectOverflow$1(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + altBoundary: altBoundary, + padding: padding + }); + var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top; - if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') { - heightProp = 'scrollHeight'; - widthProp = 'scrollWidth'; - } - } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it + if (referenceRect[len] > popperRect[len]) { + mainVariationSide = getOppositePlacement$1(mainVariationSide); + } + var altVariationSide = getOppositePlacement$1(mainVariationSide); + var checks = []; - offsetParent = offsetParent; + if (checkMainAxis) { + checks.push(overflow[_basePlacement] <= 0); + } - if (placement === top || (placement === left || placement === right) && variation === end) { - sideY = bottom; - var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing] - offsetParent[heightProp]; - y -= offsetY - popperRect.height; - y *= gpuAcceleration ? 1 : -1; + if (checkAltAxis) { + checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0); } - if (placement === left || (placement === top || placement === bottom) && variation === end) { - sideX = right; - var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing] - offsetParent[widthProp]; - x -= offsetX - popperRect.width; - x *= gpuAcceleration ? 1 : -1; + if (checks.every(function (check) { + return check; + })) { + firstFittingPlacement = placement; + makeFallbackChecks = false; + break; } - } - - var commonStyles = Object.assign({ - position: position - }, adaptive && unsetSides); - var _ref4 = roundOffsets === true ? roundOffsetsByDPR({ - x: x, - y: y - }, getWindow(popper)) : { - x: x, - y: y - }; + checksMap.set(placement, checks); + } - x = _ref4.x; - y = _ref4.y; + if (makeFallbackChecks) { + // `2` may be desired in some cases – research later + var numberOfChecks = flipVariations ? 3 : 1; - if (gpuAcceleration) { - var _Object$assign; + var _loop = function _loop(_i) { + var fittingPlacement = placements.find(function (placement) { + var checks = checksMap.get(placement); - return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign)); - } + if (checks) { + return checks.slice(0, _i).every(function (check) { + return check; + }); + } + }); - return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); -} + if (fittingPlacement) { + firstFittingPlacement = fittingPlacement; + return "break"; + } + }; -function computeStyles(_ref5) { - var state = _ref5.state, - options = _ref5.options; - var _options$gpuAccelerat = options.gpuAcceleration, - gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, - _options$adaptive = options.adaptive, - adaptive = _options$adaptive === void 0 ? true : _options$adaptive, - _options$roundOffsets = options.roundOffsets, - roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets; - var commonStyles = { - placement: getBasePlacement(state.placement), - variation: getVariation(state.placement), - popper: state.elements.popper, - popperRect: state.rects.popper, - gpuAcceleration: gpuAcceleration, - isFixed: state.options.strategy === 'fixed' - }; + for (var _i = numberOfChecks; _i > 0; _i--) { + var _ret = _loop(_i); - if (state.modifiersData.popperOffsets != null) { - state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, { - offsets: state.modifiersData.popperOffsets, - position: state.options.strategy, - adaptive: adaptive, - roundOffsets: roundOffsets - }))); + if (_ret === "break") break; + } } - if (state.modifiersData.arrow != null) { - state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, { - offsets: state.modifiersData.arrow, - position: 'absolute', - adaptive: false, - roundOffsets: roundOffsets - }))); + if (state.placement !== firstFittingPlacement) { + state.modifiersData[name]._skip = true; + state.placement = firstFittingPlacement; + state.reset = true; } - - state.attributes.popper = Object.assign({}, state.attributes.popper, { - 'data-popper-placement': state.placement - }); } // eslint-disable-next-line import/no-unused-modules -var computeStyles$1 = { - name: 'computeStyles', +var flip$3 = { + name: 'flip', enabled: true, - phase: 'beforeWrite', - fn: computeStyles, - data: {} -}; - -var passive = { - passive: true + phase: 'main', + fn: flip$2, + requiresIfExists: ['offset'], + data: { + _skip: false + } }; -function effect(_ref) { - var state = _ref.state, - instance = _ref.instance, - options = _ref.options; - var _options$scroll = options.scroll, - scroll = _options$scroll === void 0 ? true : _options$scroll, - _options$resize = options.resize, - resize = _options$resize === void 0 ? true : _options$resize; - var window = getWindow(state.elements.popper); - var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper); - - if (scroll) { - scrollParents.forEach(function (scrollParent) { - scrollParent.addEventListener('scroll', instance.update, passive); - }); +function getSideOffsets(overflow, rect, preventedOffsets) { + if (preventedOffsets === void 0) { + preventedOffsets = { + x: 0, + y: 0 + }; } - if (resize) { - window.addEventListener('resize', instance.update, passive); - } + return { + top: overflow.top - rect.height - preventedOffsets.y, + right: overflow.right - rect.width + preventedOffsets.x, + bottom: overflow.bottom - rect.height + preventedOffsets.y, + left: overflow.left - rect.width - preventedOffsets.x + }; +} - return function () { - if (scroll) { - scrollParents.forEach(function (scrollParent) { - scrollParent.removeEventListener('scroll', instance.update, passive); - }); - } +function isAnySideFullyClipped(overflow) { + return [top, right, bottom, left].some(function (side) { + return overflow[side] >= 0; + }); +} - if (resize) { - window.removeEventListener('resize', instance.update, passive); - } +function hide(_ref) { + var state = _ref.state, + name = _ref.name; + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var preventedOffsets = state.modifiersData.preventOverflow; + var referenceOverflow = detectOverflow$1(state, { + elementContext: 'reference' + }); + var popperAltOverflow = detectOverflow$1(state, { + altBoundary: true + }); + var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect); + var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets); + var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets); + var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); + state.modifiersData[name] = { + referenceClippingOffsets: referenceClippingOffsets, + popperEscapeOffsets: popperEscapeOffsets, + isReferenceHidden: isReferenceHidden, + hasPopperEscaped: hasPopperEscaped }; + state.attributes.popper = Object.assign({}, state.attributes.popper, { + 'data-popper-reference-hidden': isReferenceHidden, + 'data-popper-escaped': hasPopperEscaped + }); } // eslint-disable-next-line import/no-unused-modules -var eventListeners = { - name: 'eventListeners', +var hide$1 = { + name: 'hide', enabled: true, - phase: 'write', - fn: function fn() {}, - effect: effect, - data: {} + phase: 'main', + requiresIfExists: ['preventOverflow'], + fn: hide }; -var hash$1 = { - left: 'right', - right: 'left', - bottom: 'top', - top: 'bottom' -}; -function getOppositePlacement(placement) { - return placement.replace(/left|right|bottom|top/g, function (matched) { - return hash$1[matched]; - }); -} +function distanceAndSkiddingToXY(placement, rects, offset) { + var basePlacement = getBasePlacement(placement); + var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1; -var hash = { - start: 'end', - end: 'start' -}; -function getOppositeVariationPlacement(placement) { - return placement.replace(/start|end/g, function (matched) { - return hash[matched]; - }); -} + var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, { + placement: placement + })) : offset, + skidding = _ref[0], + distance = _ref[1]; -function getWindowScroll(node) { - var win = getWindow(node); - var scrollLeft = win.pageXOffset; - var scrollTop = win.pageYOffset; - return { - scrollLeft: scrollLeft, - scrollTop: scrollTop + skidding = skidding || 0; + distance = (distance || 0) * invertDistance; + return [left, right].indexOf(basePlacement) >= 0 ? { + x: distance, + y: skidding + } : { + x: skidding, + y: distance }; } -function getWindowScrollBarX(element) { - // If has a CSS width greater than the viewport, then this will be - // incorrect for RTL. - // Popper 1 is broken in this case and never had a bug report so let's assume - // it's not an issue. I don't think anyone ever specifies width on - // anyway. - // Browsers where the left scrollbar doesn't cause an issue report `0` for - // this (e.g. Edge 2019, IE11, Safari) - return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft; -} - -function getViewportRect(element, strategy) { - var win = getWindow(element); - var html = getDocumentElement(element); - var visualViewport = win.visualViewport; - var width = html.clientWidth; - var height = html.clientHeight; - var x = 0; - var y = 0; - - if (visualViewport) { - width = visualViewport.width; - height = visualViewport.height; - var layoutViewport = isLayoutViewport(); - - if (layoutViewport || !layoutViewport && strategy === 'fixed') { - x = visualViewport.offsetLeft; - y = visualViewport.offsetTop; - } - } +function offset$2(_ref2) { + var state = _ref2.state, + options = _ref2.options, + name = _ref2.name; + var _options$offset = options.offset, + offset = _options$offset === void 0 ? [0, 0] : _options$offset; + var data = placements$1.reduce(function (acc, placement) { + acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset); + return acc; + }, {}); + var _data$state$placement = data[state.placement], + x = _data$state$placement.x, + y = _data$state$placement.y; - return { - width: width, - height: height, - x: x + getWindowScrollBarX(element), - y: y - }; -} + if (state.modifiersData.popperOffsets != null) { + state.modifiersData.popperOffsets.x += x; + state.modifiersData.popperOffsets.y += y; + } -// of the `` and `` rect bounds if horizontally scrollable + state.modifiersData[name] = data; +} // eslint-disable-next-line import/no-unused-modules -function getDocumentRect(element) { - var _element$ownerDocumen; - var html = getDocumentElement(element); - var winScroll = getWindowScroll(element); - var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; - var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); - var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); - var x = -winScroll.scrollLeft + getWindowScrollBarX(element); - var y = -winScroll.scrollTop; +var offset$3 = { + name: 'offset', + enabled: true, + phase: 'main', + requires: ['popperOffsets'], + fn: offset$2 +}; - if (getComputedStyle(body || html).direction === 'rtl') { - x += max(html.clientWidth, body ? body.clientWidth : 0) - width; - } +function popperOffsets(_ref) { + var state = _ref.state, + name = _ref.name; + // Offsets are the actual position the popper needs to have to be + // properly positioned near its reference element + // This is the most basic placement, and will be adjusted by + // the modifiers in the next step + state.modifiersData[name] = computeOffsets({ + reference: state.rects.reference, + element: state.rects.popper, + strategy: 'absolute', + placement: state.placement + }); +} // eslint-disable-next-line import/no-unused-modules - return { - width: width, - height: height, - x: x, - y: y - }; -} -function isScrollParent(element) { - // Firefox wants us to check `-x` and `-y` variations as well - var _getComputedStyle = getComputedStyle(element), - overflow = _getComputedStyle.overflow, - overflowX = _getComputedStyle.overflowX, - overflowY = _getComputedStyle.overflowY; +var popperOffsets$1 = { + name: 'popperOffsets', + enabled: true, + phase: 'read', + fn: popperOffsets, + data: {} +}; - return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); +function getAltAxis(axis) { + return axis === 'x' ? 'y' : 'x'; } -function getScrollParent(node) { - if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) { - // $FlowFixMe[incompatible-return]: assume body is always available - return node.ownerDocument.body; - } +function preventOverflow(_ref) { + var state = _ref.state, + options = _ref.options, + name = _ref.name; + var _options$mainAxis = options.mainAxis, + checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, + _options$altAxis = options.altAxis, + checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, + boundary = options.boundary, + rootBoundary = options.rootBoundary, + altBoundary = options.altBoundary, + padding = options.padding, + _options$tether = options.tether, + tether = _options$tether === void 0 ? true : _options$tether, + _options$tetherOffset = options.tetherOffset, + tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset; + var overflow = detectOverflow$1(state, { + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding, + altBoundary: altBoundary + }); + var basePlacement = getBasePlacement(state.placement); + var variation = getVariation(state.placement); + var isBasePlacement = !variation; + var mainAxis = getMainAxisFromPlacement(basePlacement); + var altAxis = getAltAxis(mainAxis); + var popperOffsets = state.modifiersData.popperOffsets; + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { + placement: state.placement + })) : tetherOffset; + var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? { + mainAxis: tetherOffsetValue, + altAxis: tetherOffsetValue + } : Object.assign({ + mainAxis: 0, + altAxis: 0 + }, tetherOffsetValue); + var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null; + var data = { + x: 0, + y: 0 + }; - if (isHTMLElement(node) && isScrollParent(node)) { - return node; + if (!popperOffsets) { + return; } - return getScrollParent(getParentNode(node)); -} + if (checkMainAxis) { + var _offsetModifierState$; -/* -given a DOM element, return the list of all scroll parents, up the list of ancesors -until we get to the top window object. This list is what we attach scroll listeners -to, because if any of these parent elements scroll, we'll need to re-calculate the -reference element's position. -*/ + var mainSide = mainAxis === 'y' ? top : left; + var altSide = mainAxis === 'y' ? bottom : right; + var len = mainAxis === 'y' ? 'height' : 'width'; + var offset = popperOffsets[mainAxis]; + var min = offset + overflow[mainSide]; + var max = offset - overflow[altSide]; + var additive = tether ? -popperRect[len] / 2 : 0; + var minLen = variation === start ? referenceRect[len] : popperRect[len]; + var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go + // outside the reference bounds -function listScrollParents(element, list) { - var _element$ownerDocumen; + var arrowElement = state.elements.arrow; + var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : { + width: 0, + height: 0 + }; + var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject(); + var arrowPaddingMin = arrowPaddingObject[mainSide]; + var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want + // to include its full size in the calculation. If the reference is small + // and near the edge of a boundary, the popper can overflow even if the + // reference is not overflowing as well (e.g. virtual elements with no + // width or height) - if (list === void 0) { - list = []; + var arrowLen = within(0, referenceRect[len], arrowRect[len]); + var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis; + var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis; + var arrowOffsetParent = state.elements.arrow && getOffsetParent$1(state.elements.arrow); + var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; + var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0; + var tetherMin = offset + minOffset - offsetModifierValue - clientOffset; + var tetherMax = offset + maxOffset - offsetModifierValue; + var preventedOffset = within(tether ? min$1(min, tetherMin) : min, offset, tether ? max$1(max, tetherMax) : max); + popperOffsets[mainAxis] = preventedOffset; + data[mainAxis] = preventedOffset - offset; } - var scrollParent = getScrollParent(element); - var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body); - var win = getWindow(scrollParent); - var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent; - var updatedList = list.concat(target); - return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here - updatedList.concat(listScrollParents(getParentNode(target))); -} + if (checkAltAxis) { + var _offsetModifierState$2; -function rectToClientRect(rect) { - return Object.assign({}, rect, { - left: rect.x, - top: rect.y, - right: rect.x + rect.width, - bottom: rect.y + rect.height - }); -} + var _mainSide = mainAxis === 'x' ? top : left; -function getInnerBoundingClientRect(element, strategy) { - var rect = getBoundingClientRect(element, false, strategy === 'fixed'); - rect.top = rect.top + element.clientTop; - rect.left = rect.left + element.clientLeft; - rect.bottom = rect.top + element.clientHeight; - rect.right = rect.left + element.clientWidth; - rect.width = element.clientWidth; - rect.height = element.clientHeight; - rect.x = rect.left; - rect.y = rect.top; - return rect; -} + var _altSide = mainAxis === 'x' ? bottom : right; -function getClientRectFromMixedType(element, clippingParent, strategy) { - return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element))); -} // A "clipping parent" is an overflowable container with the characteristic of -// clipping (or hiding) overflowing elements with a position different from -// `initial` + var _offset = popperOffsets[altAxis]; + var _len = altAxis === 'y' ? 'height' : 'width'; -function getClippingParents(element) { - var clippingParents = listScrollParents(getParentNode(element)); - var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0; - var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element; + var _min = _offset + overflow[_mainSide]; - if (!isElement(clipperElement)) { - return []; - } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414 + var _max = _offset - overflow[_altSide]; + var isOriginSide = [top, left].indexOf(basePlacement) !== -1; - return clippingParents.filter(function (clippingParent) { - return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body'; - }); -} // Gets the maximum area that the element is visible in due to any number of -// clipping parents + var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0; + var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis; -function getClippingRect(element, boundary, rootBoundary, strategy) { - var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); - var clippingParents = [].concat(mainClippingParents, [rootBoundary]); - var firstClippingParent = clippingParents[0]; - var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { - var rect = getClientRectFromMixedType(element, clippingParent, strategy); - accRect.top = max(rect.top, accRect.top); - accRect.right = min(rect.right, accRect.right); - accRect.bottom = min(rect.bottom, accRect.bottom); - accRect.left = max(rect.left, accRect.left); - return accRect; - }, getClientRectFromMixedType(element, firstClippingParent, strategy)); - clippingRect.width = clippingRect.right - clippingRect.left; - clippingRect.height = clippingRect.bottom - clippingRect.top; - clippingRect.x = clippingRect.left; - clippingRect.y = clippingRect.top; - return clippingRect; -} + var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max; -function computeOffsets(_ref) { - var reference = _ref.reference, - element = _ref.element, - placement = _ref.placement; - var basePlacement = placement ? getBasePlacement(placement) : null; - var variation = placement ? getVariation(placement) : null; - var commonX = reference.x + reference.width / 2 - element.width / 2; - var commonY = reference.y + reference.height / 2 - element.height / 2; - var offsets; + var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max); - switch (basePlacement) { - case top: - offsets = { - x: commonX, - y: reference.y - element.height - }; - break; + popperOffsets[altAxis] = _preventedOffset; + data[altAxis] = _preventedOffset - _offset; + } - case bottom: - offsets = { - x: commonX, - y: reference.y + reference.height - }; - break; + state.modifiersData[name] = data; +} // eslint-disable-next-line import/no-unused-modules - case right: - offsets = { - x: reference.x + reference.width, - y: commonY - }; - break; - case left: - offsets = { - x: reference.x - element.width, - y: commonY - }; - break; +var preventOverflow$1 = { + name: 'preventOverflow', + enabled: true, + phase: 'main', + fn: preventOverflow, + requiresIfExists: ['offset'] +}; + +function getHTMLElementScroll(element) { + return { + scrollLeft: element.scrollLeft, + scrollTop: element.scrollTop + }; +} - default: - offsets = { - x: reference.x, - y: reference.y - }; +function getNodeScroll$1(node) { + if (node === getWindow$1(node) || !isHTMLElement$1(node)) { + return getWindowScroll(node); + } else { + return getHTMLElementScroll(node); } +} - var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null; +function isElementScaled(element) { + var rect = element.getBoundingClientRect(); + var scaleX = round$1(rect.width) / element.offsetWidth || 1; + var scaleY = round$1(rect.height) / element.offsetHeight || 1; + return scaleX !== 1 || scaleY !== 1; +} // Returns the composite rect of an element relative to its offsetParent. +// Composite means it takes into account transforms as well as layout. - if (mainAxis != null) { - var len = mainAxis === 'y' ? 'height' : 'width'; - switch (variation) { - case start: - offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2); - break; +function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) { + if (isFixed === void 0) { + isFixed = false; + } - case end: - offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2); - break; + var isOffsetParentAnElement = isHTMLElement$1(offsetParent); + var offsetParentIsScaled = isHTMLElement$1(offsetParent) && isElementScaled(offsetParent); + var documentElement = getDocumentElement$1(offsetParent); + var rect = getBoundingClientRect$1(elementOrVirtualElement, offsetParentIsScaled, isFixed); + var scroll = { + scrollLeft: 0, + scrollTop: 0 + }; + var offsets = { + x: 0, + y: 0 + }; + + if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { + if (getNodeName$1(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078 + isScrollParent(documentElement)) { + scroll = getNodeScroll$1(offsetParent); + } + + if (isHTMLElement$1(offsetParent)) { + offsets = getBoundingClientRect$1(offsetParent, true); + offsets.x += offsetParent.clientLeft; + offsets.y += offsetParent.clientTop; + } else if (documentElement) { + offsets.x = getWindowScrollBarX$1(documentElement); } } - return offsets; + return { + x: rect.left + scroll.scrollLeft - offsets.x, + y: rect.top + scroll.scrollTop - offsets.y, + width: rect.width, + height: rect.height + }; } -function detectOverflow(state, options) { - if (options === void 0) { - options = {}; - } - - var _options = options, - _options$placement = _options.placement, - placement = _options$placement === void 0 ? state.placement : _options$placement, - _options$strategy = _options.strategy, - strategy = _options$strategy === void 0 ? state.strategy : _options$strategy, - _options$boundary = _options.boundary, - boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, - _options$rootBoundary = _options.rootBoundary, - rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, - _options$elementConte = _options.elementContext, - elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, - _options$altBoundary = _options.altBoundary, - altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, - _options$padding = _options.padding, - padding = _options$padding === void 0 ? 0 : _options$padding; - var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); - var altContext = elementContext === popper ? reference : popper; - var popperRect = state.rects.popper; - var element = state.elements[altBoundary ? altContext : elementContext]; - var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy); - var referenceClientRect = getBoundingClientRect(state.elements.reference); - var popperOffsets = computeOffsets({ - reference: referenceClientRect, - element: popperRect, - strategy: 'absolute', - placement: placement - }); - var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets)); - var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect - // 0 or negative = within the clipping rect +function order(modifiers) { + var map = new Map(); + var visited = new Set(); + var result = []; + modifiers.forEach(function (modifier) { + map.set(modifier.name, modifier); + }); // On visiting object, check for its dependencies and visit them recursively - var overflowOffsets = { - top: clippingClientRect.top - elementClientRect.top + paddingObject.top, - bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom, - left: clippingClientRect.left - elementClientRect.left + paddingObject.left, - right: elementClientRect.right - clippingClientRect.right + paddingObject.right - }; - var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element + function sort(modifier) { + visited.add(modifier.name); + var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []); + requires.forEach(function (dep) { + if (!visited.has(dep)) { + var depModifier = map.get(dep); - if (elementContext === popper && offsetData) { - var offset = offsetData[placement]; - Object.keys(overflowOffsets).forEach(function (key) { - var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1; - var axis = [top, bottom].indexOf(key) >= 0 ? 'y' : 'x'; - overflowOffsets[key] += offset[axis] * multiply; + if (depModifier) { + sort(depModifier); + } + } }); + result.push(modifier); } - return overflowOffsets; + modifiers.forEach(function (modifier) { + if (!visited.has(modifier.name)) { + // check for visited object + sort(modifier); + } + }); + return result; } -function computeAutoPlacement(state, options) { - if (options === void 0) { - options = {}; - } +function orderModifiers(modifiers) { + // order based on dependencies + var orderedModifiers = order(modifiers); // order based on phase - var _options = options, - placement = _options.placement, - boundary = _options.boundary, - rootBoundary = _options.rootBoundary, - padding = _options.padding, - flipVariations = _options.flipVariations, - _options$allowedAutoP = _options.allowedAutoPlacements, - allowedAutoPlacements = _options$allowedAutoP === void 0 ? placements : _options$allowedAutoP; - var variation = getVariation(placement); - var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) { - return getVariation(placement) === variation; - }) : basePlacements; - var allowedPlacements = placements$1.filter(function (placement) { - return allowedAutoPlacements.indexOf(placement) >= 0; - }); + return modifierPhases.reduce(function (acc, phase) { + return acc.concat(orderedModifiers.filter(function (modifier) { + return modifier.phase === phase; + })); + }, []); +} - if (allowedPlacements.length === 0) { - allowedPlacements = placements$1; - } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions... +function debounce(fn) { + var pending; + return function () { + if (!pending) { + pending = new Promise(function (resolve) { + Promise.resolve().then(function () { + pending = undefined; + resolve(fn()); + }); + }); + } + return pending; + }; +} - var overflows = allowedPlacements.reduce(function (acc, placement) { - acc[placement] = detectOverflow(state, { - placement: placement, - boundary: boundary, - rootBoundary: rootBoundary, - padding: padding - })[getBasePlacement(placement)]; - return acc; - }, {}); - return Object.keys(overflows).sort(function (a, b) { - return overflows[a] - overflows[b]; +function mergeByName(modifiers) { + var merged = modifiers.reduce(function (merged, current) { + var existing = merged[current.name]; + merged[current.name] = existing ? Object.assign({}, existing, current, { + options: Object.assign({}, existing.options, current.options), + data: Object.assign({}, existing.data, current.data) + }) : current; + return merged; + }, {}); // IE11 does not support Object.values + + return Object.keys(merged).map(function (key) { + return merged[key]; }); } -function getExpandedFallbackPlacements(placement) { - if (getBasePlacement(placement) === auto) { - return []; +var DEFAULT_OPTIONS = { + placement: 'bottom', + modifiers: [], + strategy: 'absolute' +}; + +function areValidElements() { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; } - var oppositePlacement = getOppositePlacement(placement); - return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)]; + return !args.some(function (element) { + return !(element && typeof element.getBoundingClientRect === 'function'); + }); } -function flip(_ref) { - var state = _ref.state, - options = _ref.options, - name = _ref.name; - - if (state.modifiersData[name]._skip) { - return; +function popperGenerator(generatorOptions) { + if (generatorOptions === void 0) { + generatorOptions = {}; } - var _options$mainAxis = options.mainAxis, - checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, - _options$altAxis = options.altAxis, - checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, - specifiedFallbackPlacements = options.fallbackPlacements, - padding = options.padding, - boundary = options.boundary, - rootBoundary = options.rootBoundary, - altBoundary = options.altBoundary, - _options$flipVariatio = options.flipVariations, - flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, - allowedAutoPlacements = options.allowedAutoPlacements; - var preferredPlacement = state.options.placement; - var basePlacement = getBasePlacement(preferredPlacement); - var isBasePlacement = basePlacement === preferredPlacement; - var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement)); - var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) { - return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, { - placement: placement, - boundary: boundary, - rootBoundary: rootBoundary, - padding: padding, - flipVariations: flipVariations, - allowedAutoPlacements: allowedAutoPlacements - }) : placement); - }, []); - var referenceRect = state.rects.reference; - var popperRect = state.rects.popper; - var checksMap = new Map(); - var makeFallbackChecks = true; - var firstFittingPlacement = placements[0]; - - for (var i = 0; i < placements.length; i++) { - var placement = placements[i]; + var _generatorOptions = generatorOptions, + _generatorOptions$def = _generatorOptions.defaultModifiers, + defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def, + _generatorOptions$def2 = _generatorOptions.defaultOptions, + defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2; + return function createPopper(reference, popper, options) { + if (options === void 0) { + options = defaultOptions; + } - var _basePlacement = getBasePlacement(placement); + var state = { + placement: 'bottom', + orderedModifiers: [], + options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions), + modifiersData: {}, + elements: { + reference: reference, + popper: popper + }, + attributes: {}, + styles: {} + }; + var effectCleanupFns = []; + var isDestroyed = false; + var instance = { + state: state, + setOptions: function setOptions(setOptionsAction) { + var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction; + cleanupModifierEffects(); + state.options = Object.assign({}, defaultOptions, state.options, options); + state.scrollParents = { + reference: isElement$1(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [], + popper: listScrollParents(popper) + }; // Orders the modifiers based on their dependencies and `phase` + // properties - var isStartVariation = getVariation(placement) === start; - var isVertical = [top, bottom].indexOf(_basePlacement) >= 0; - var len = isVertical ? 'width' : 'height'; - var overflow = detectOverflow(state, { - placement: placement, - boundary: boundary, - rootBoundary: rootBoundary, - altBoundary: altBoundary, - padding: padding - }); - var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top; + var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers - if (referenceRect[len] > popperRect[len]) { - mainVariationSide = getOppositePlacement(mainVariationSide); - } + state.orderedModifiers = orderedModifiers.filter(function (m) { + return m.enabled; + }); + runModifierEffects(); + return instance.update(); + }, + // Sync update – it will always be executed, even if not necessary. This + // is useful for low frequency updates where sync behavior simplifies the + // logic. + // For high frequency updates (e.g. `resize` and `scroll` events), always + // prefer the async Popper#update method + forceUpdate: function forceUpdate() { + if (isDestroyed) { + return; + } - var altVariationSide = getOppositePlacement(mainVariationSide); - var checks = []; + var _state$elements = state.elements, + reference = _state$elements.reference, + popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements + // anymore - if (checkMainAxis) { - checks.push(overflow[_basePlacement] <= 0); - } + if (!areValidElements(reference, popper)) { + return; + } // Store the reference and popper rects to be read by modifiers - if (checkAltAxis) { - checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0); - } - if (checks.every(function (check) { - return check; - })) { - firstFittingPlacement = placement; - makeFallbackChecks = false; - break; - } + state.rects = { + reference: getCompositeRect(reference, getOffsetParent$1(popper), state.options.strategy === 'fixed'), + popper: getLayoutRect(popper) + }; // Modifiers have the ability to reset the current update cycle. The + // most common use case for this is the `flip` modifier changing the + // placement, which then needs to re-run all the modifiers, because the + // logic was previously ran for the previous placement and is therefore + // stale/incorrect - checksMap.set(placement, checks); - } + state.reset = false; + state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier + // is filled with the initial data specified by the modifier. This means + // it doesn't persist and is fresh on each update. + // To ensure persistent data, use `${name}#persistent` - if (makeFallbackChecks) { - // `2` may be desired in some cases – research later - var numberOfChecks = flipVariations ? 3 : 1; + state.orderedModifiers.forEach(function (modifier) { + return state.modifiersData[modifier.name] = Object.assign({}, modifier.data); + }); - var _loop = function _loop(_i) { - var fittingPlacement = placements.find(function (placement) { - var checks = checksMap.get(placement); + for (var index = 0; index < state.orderedModifiers.length; index++) { + if (state.reset === true) { + state.reset = false; + index = -1; + continue; + } - if (checks) { - return checks.slice(0, _i).every(function (check) { - return check; - }); - } - }); + var _state$orderedModifie = state.orderedModifiers[index], + fn = _state$orderedModifie.fn, + _state$orderedModifie2 = _state$orderedModifie.options, + _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, + name = _state$orderedModifie.name; - if (fittingPlacement) { - firstFittingPlacement = fittingPlacement; - return "break"; + if (typeof fn === 'function') { + state = fn({ + state: state, + options: _options, + name: name, + instance: instance + }) || state; + } + } + }, + // Async and optimistically optimized update – it will not be executed if + // not necessary (debounced to run at most once-per-tick) + update: debounce(function () { + return new Promise(function (resolve) { + instance.forceUpdate(); + resolve(state); + }); + }), + destroy: function destroy() { + cleanupModifierEffects(); + isDestroyed = true; } }; - for (var _i = numberOfChecks; _i > 0; _i--) { - var _ret = _loop(_i); - - if (_ret === "break") break; + if (!areValidElements(reference, popper)) { + return instance; } - } - if (state.placement !== firstFittingPlacement) { - state.modifiersData[name]._skip = true; - state.placement = firstFittingPlacement; - state.reset = true; - } -} // eslint-disable-next-line import/no-unused-modules + instance.setOptions(options).then(function (state) { + if (!isDestroyed && options.onFirstUpdate) { + options.onFirstUpdate(state); + } + }); // Modifiers have the ability to execute arbitrary code before the first + // update cycle runs. They will be executed in the same order as the update + // cycle. This is useful when a modifier adds some persistent data that + // other modifiers need to use, but the modifier is run after the dependent + // one. + function runModifierEffects() { + state.orderedModifiers.forEach(function (_ref) { + var name = _ref.name, + _ref$options = _ref.options, + options = _ref$options === void 0 ? {} : _ref$options, + effect = _ref.effect; -var flip$1 = { - name: 'flip', - enabled: true, - phase: 'main', - fn: flip, - requiresIfExists: ['offset'], - data: { - _skip: false - } -}; + if (typeof effect === 'function') { + var cleanupFn = effect({ + state: state, + name: name, + instance: instance, + options: options + }); -function getSideOffsets(overflow, rect, preventedOffsets) { - if (preventedOffsets === void 0) { - preventedOffsets = { - x: 0, - y: 0 - }; - } + var noopFn = function noopFn() {}; - return { - top: overflow.top - rect.height - preventedOffsets.y, - right: overflow.right - rect.width + preventedOffsets.x, - bottom: overflow.bottom - rect.height + preventedOffsets.y, - left: overflow.left - rect.width - preventedOffsets.x + effectCleanupFns.push(cleanupFn || noopFn); + } + }); + } + + function cleanupModifierEffects() { + effectCleanupFns.forEach(function (fn) { + return fn(); + }); + effectCleanupFns = []; + } + + return instance; }; } -function isAnySideFullyClipped(overflow) { - return [top, right, bottom, left].some(function (side) { - return overflow[side] >= 0; - }); -} +var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$3, flip$3, preventOverflow$1, arrow$1, hide$1]; +var createPopper = /*#__PURE__*/popperGenerator({ + defaultModifiers: defaultModifiers +}); // eslint-disable-next-line import/no-unused-modules + +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. -function hide(_ref) { - var state = _ref.state, - name = _ref.name; - var referenceRect = state.rects.reference; - var popperRect = state.rects.popper; - var preventedOffsets = state.modifiersData.preventOverflow; - var referenceOverflow = detectOverflow(state, { - elementContext: 'reference' - }); - var popperAltOverflow = detectOverflow(state, { - altBoundary: true - }); - var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect); - var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets); - var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets); - var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); - state.modifiersData[name] = { - referenceClippingOffsets: referenceClippingOffsets, - popperEscapeOffsets: popperEscapeOffsets, - isReferenceHidden: isReferenceHidden, - hasPopperEscaped: hasPopperEscaped - }; - state.attributes.popper = Object.assign({}, state.attributes.popper, { - 'data-popper-reference-hidden': isReferenceHidden, - 'data-popper-escaped': hasPopperEscaped - }); -} // eslint-disable-next-line import/no-unused-modules +// build the component class +const popoverOffsetDistance = 18, + popoverOffsetSkidding = 0; -var hide$1 = { - name: 'hide', - enabled: true, - phase: 'main', - requiresIfExists: ['preventOverflow'], - fn: hide -}; +class Popover { -function distanceAndSkiddingToXY(placement, rects, offset) { - var basePlacement = getBasePlacement(placement); - var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1; + constructor(anchor, popover, placement, boundary) { + this.anchor = anchor; + this.popover = popover; + this.boundaryElement = this.setBoundary(boundary); + this.options = { + placement, + visibleClass: 'data-show' + }; + this.popover.classList.remove(this.options.visibleClass); + } - var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, { - placement: placement - })) : offset, - skidding = _ref[0], - distance = _ref[1]; + setBoundary(boundary) { + if (typeof boundary === 'string') { + return document.querySelector(boundary) || document.body; + } - skidding = skidding || 0; - distance = (distance || 0) * invertDistance; - return [left, right].indexOf(basePlacement) >= 0 ? { - x: distance, - y: skidding - } : { - x: skidding, - y: distance - }; -} + return boundary || document.body; + } -function offset(_ref2) { - var state = _ref2.state, - options = _ref2.options, - name = _ref2.name; - var _options$offset = options.offset, - offset = _options$offset === void 0 ? [0, 0] : _options$offset; - var data = placements.reduce(function (acc, placement) { - acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset); - return acc; - }, {}); - var _data$state$placement = data[state.placement], - x = _data$state$placement.x, - y = _data$state$placement.y; + show() { + if (this.popper) { + this.popper.destroy(); + } - if (state.modifiersData.popperOffsets != null) { - state.modifiersData.popperOffsets.x += x; - state.modifiersData.popperOffsets.y += y; + this.popper = createPopper(this.anchor, this.popover, { + tooltip: this.anchor, + placement: this.options.placement, + modifiers: [ + { + name: 'offset', + options: { + offset: [ + popoverOffsetSkidding, + popoverOffsetDistance + ] + } + }, + { + name: 'preventOverflow', + options: { + mainAxis: true, + boundary: this.boundaryElement, + rootBoundary: 'document', + padding: 16, + } + }, + ] + }); } - state.modifiersData[name] = data; -} // eslint-disable-next-line import/no-unused-modules + triggerUpdate() { + this.popper.update(); + } + hide() { + this.popover.classList.remove(this.options.visibleClass); + } +} -var offset$1 = { - name: 'offset', - enabled: true, - phase: 'main', - requires: ['popperOffsets'], - fn: offset -}; +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. -function popperOffsets(_ref) { - var state = _ref.state, - name = _ref.name; - // Offsets are the actual position the popper needs to have to be - // properly positioned near its reference element - // This is the most basic placement, and will be adjusted by - // the modifiers in the next step - state.modifiersData[name] = computeOffsets({ - reference: state.rects.reference, - element: state.rects.popper, - strategy: 'absolute', - placement: state.placement - }); -} // eslint-disable-next-line import/no-unused-modules +/** + * Popover attaches to an element and displays on hover/blur. + * + * @attr {boolean} addSpace - If true, will add additional top and bottom space around the appearance of the popover in relation to the trigger + * @attr {boolean} disabled - If true, will disable the popover from showing on hover and focus + * @attr {String} for - Directly associate the popover with a trigger element with the given ID. In most cases, this should not be necessary and set slot="trigger" on the element instead. + * @attr {String} placement - Expects top/bottom - position for popover in relation to the element + * @attr {boolean} removeSpace - If true, will remove top and bottom space around the appearance of the popover in relation to the trigger + * @attr {String | Object} boundary - The element to use as the boundary for the popover. Can be a query selector or an HTML element. + * @slot - Default unnamed slot for the use of popover content + * @slot trigger - The element in this slot triggers hiding and showing the popover. + */ +class AuroPopover extends r$7 { + constructor() { + super(); -var popperOffsets$1 = { - name: 'popperOffsets', - enabled: true, - phase: 'read', - fn: popperOffsets, - data: {} -}; + this.placement = 'top'; + } -function getAltAxis(axis) { - return axis === 'x' ? 'y' : 'x'; -} + /** + * Internal Defaults. + * @private + * @returns {void} + */ + privateDefaults() { + this.isPopoverVisible = false; + this.id = `popover-${(Math.random() + 1).toString(36).substring(7)}`; + this.runtimeUtils = new AuroLibraryRuntimeUtils$3(); + } -function preventOverflow(_ref) { - var state = _ref.state, - options = _ref.options, - name = _ref.name; - var _options$mainAxis = options.mainAxis, - checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, - _options$altAxis = options.altAxis, - checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, - boundary = options.boundary, - rootBoundary = options.rootBoundary, - altBoundary = options.altBoundary, - padding = options.padding, - _options$tether = options.tether, - tether = _options$tether === void 0 ? true : _options$tether, - _options$tetherOffset = options.tetherOffset, - tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset; - var overflow = detectOverflow(state, { - boundary: boundary, - rootBoundary: rootBoundary, - padding: padding, - altBoundary: altBoundary - }); - var basePlacement = getBasePlacement(state.placement); - var variation = getVariation(state.placement); - var isBasePlacement = !variation; - var mainAxis = getMainAxisFromPlacement(basePlacement); - var altAxis = getAltAxis(mainAxis); - var popperOffsets = state.modifiersData.popperOffsets; - var referenceRect = state.rects.reference; - var popperRect = state.rects.popper; - var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { - placement: state.placement - })) : tetherOffset; - var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? { - mainAxis: tetherOffsetValue, - altAxis: tetherOffsetValue - } : Object.assign({ - mainAxis: 0, - altAxis: 0 - }, tetherOffsetValue); - var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null; - var data = { - x: 0, - y: 0 - }; + // function to define props used within the scope of this component + static get properties() { + return { + placement: { type: String }, + for: { type: String }, + disabled: { type: Boolean }, + boundary: { type: String } + }; + } - if (!popperOffsets) { - return; + static get styles() { + return [ + i$c`${styleCss$5}`, + i$c`${colorCss$5}`, + i$c`${tokensCss$5}` + ]; } - if (checkMainAxis) { - var _offsetModifierState$; + /** + * This will register this element with the browser. + * @param {string} [name="auro-popover"] - The name of element that you want to register to. + * + * @example + * AuroPopover.register("custom-popover") // this will register this element to + * + */ + static register(name = "auro-popover") { + AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroPopover); + } - var mainSide = mainAxis === 'y' ? top : left; - var altSide = mainAxis === 'y' ? bottom : right; - var len = mainAxis === 'y' ? 'height' : 'width'; - var offset = popperOffsets[mainAxis]; - var min$1 = offset + overflow[mainSide]; - var max$1 = offset - overflow[altSide]; - var additive = tether ? -popperRect[len] / 2 : 0; - var minLen = variation === start ? referenceRect[len] : popperRect[len]; - var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go - // outside the reference bounds + connectedCallback() { + super.connectedCallback(); - var arrowElement = state.elements.arrow; - var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : { - width: 0, - height: 0 - }; - var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject(); - var arrowPaddingMin = arrowPaddingObject[mainSide]; - var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want - // to include its full size in the calculation. If the reference is small - // and near the edge of a boundary, the popper can overflow even if the - // reference is not overflowing as well (e.g. virtual elements with no - // width or height) + this.privateDefaults(); - var arrowLen = within(0, referenceRect[len], arrowRect[len]); - var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis; - var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis; - var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow); - var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; - var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0; - var tetherMin = offset + minOffset - offsetModifierValue - clientOffset; - var tetherMax = offset + maxOffset - offsetModifierValue; - var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1); - popperOffsets[mainAxis] = preventedOffset; - data[mainAxis] = preventedOffset - offset; + // adds toggle function to root element based on touch + this.addEventListener('touchstart', function() { + this.toggle(); + this.setAttribute("isTouch", "true"); + }); } - if (checkAltAxis) { - var _offsetModifierState$2; - - var _mainSide = mainAxis === 'x' ? top : left; + disconnectedCallback() { + super.disconnectedCallback(); + document.removeEventListener('click', this.documentClickHandler); + } - var _altSide = mainAxis === 'x' ? bottom : right; + firstUpdated() { + // Add the tag name as an attribute if it is different than the component name + this.runtimeUtils.handleComponentTagRename(this, 'auro-popover'); - var _offset = popperOffsets[altAxis]; + if (this.for) { + this.trigger = document.querySelector(`#${this.for}`) || this.getRootNode().querySelector(`#${this.for}`); + } - var _len = altAxis === 'y' ? 'height' : 'width'; + if (!this.trigger) { + [this.trigger] = this.shadowRoot.querySelector('slot[name="trigger"]').assignedElements(); + } - var _min = _offset + overflow[_mainSide]; + this.auroPopover = this.shadowRoot.querySelector('#popover'); + this.popper = new Popover(this.trigger, this.auroPopover, this.placement, this.boundary); - var _max = _offset - overflow[_altSide]; + const handleShow = () => { + this.toggleShow(); + }, + handleHide = () => { + this.toggleHide(); + }, + handleKeyboardWhenFocusOnTrigger = (event) => { + const key = event.key.toLowerCase(); - var isOriginSide = [top, left].indexOf(basePlacement) !== -1; + if (this.isPopoverVisible) { + if (key === 'tab' || key === 'escape') { + this.toggleHide(); + } + } - var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0; + if (key === ' ' || key === 'enter') { + this.toggle(); + } + }, + element = this.trigger.parentElement.nodeName === 'AURO-POPOVER' ? this : this.trigger; - var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis; + element.addEventListener('mouseenter', handleShow); + element.addEventListener('mouseleave', handleHide); - var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max; + // if user tabs off of trigger, then hide the popover. + this.trigger.addEventListener('keydown', handleKeyboardWhenFocusOnTrigger); - var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max); + // handle gain/loss of focus + this.trigger.addEventListener('focus', handleShow); + this.trigger.addEventListener('blur', handleHide); - popperOffsets[altAxis] = _preventedOffset; - data[altAxis] = _preventedOffset - _offset; + // e.g. for a closePopover button in the popover + this.addEventListener('hidePopover', handleHide); } - state.modifiersData[name] = data; -} // eslint-disable-next-line import/no-unused-modules - - -var preventOverflow$1 = { - name: 'preventOverflow', - enabled: true, - phase: 'main', - fn: preventOverflow, - requiresIfExists: ['offset'] -}; + /** + * Toggles the display of the popover content. + * @private + * @returns {void} Fires an update lifecycle. + */ + toggle() { + if (this.isPopoverVisible) { + this.toggleHide(); + } else { + this.toggleShow(); + } + } -function getHTMLElementScroll(element) { - return { - scrollLeft: element.scrollLeft, - scrollTop: element.scrollTop - }; -} + /** + * Hides the popover. + * @private + * @returns {void} Fires an update lifecycle. + */ + toggleHide() { + this.popper.hide(); + this.isPopoverVisible = false; + this.removeAttribute('data-show'); -function getNodeScroll(node) { - if (node === getWindow(node) || !isHTMLElement(node)) { - return getWindowScroll(node); - } else { - return getHTMLElementScroll(node); + document.querySelector('body').removeEventListener('mouseover', this.mouseoverHandler); } -} -function isElementScaled(element) { - var rect = element.getBoundingClientRect(); - var scaleX = round(rect.width) / element.offsetWidth || 1; - var scaleY = round(rect.height) / element.offsetHeight || 1; - return scaleX !== 1 || scaleY !== 1; -} // Returns the composite rect of an element relative to its offsetParent. -// Composite means it takes into account transforms as well as layout. + /** + * Shows the popover. + * @private + * @returns {void} Fires an update lifecycle. + */ + toggleShow() { + this.popper.show(); + this.isPopoverVisible = true; + this.setAttribute('data-show', true); + this.mouseoverHandler = (evt) => this.handleMouseoverEvent(evt); -function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) { - if (isFixed === void 0) { - isFixed = false; + document.querySelector('body').addEventListener('mouseover', this.mouseoverHandler); } - var isOffsetParentAnElement = isHTMLElement(offsetParent); - var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent); - var documentElement = getDocumentElement(offsetParent); - var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed); - var scroll = { - scrollLeft: 0, - scrollTop: 0 - }; - var offsets = { - x: 0, - y: 0 - }; - - if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { - if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078 - isScrollParent(documentElement)) { - scroll = getNodeScroll(offsetParent); + /** + * Hides the popover when hovering outside of the popover or it's trigger. + * @private + * @param {Event} evt - The event object. + * @returns {void} + */ + handleMouseoverEvent(evt) { + if (this.isPopoverVisible && !evt.composedPath().includes(this)) { + this.toggleHide(); } + } - if (isHTMLElement(offsetParent)) { - offsets = getBoundingClientRect(offsetParent, true); - offsets.x += offsetParent.clientLeft; - offsets.y += offsetParent.clientTop; - } else if (documentElement) { - offsets.x = getWindowScrollBarX(documentElement); + updated(changedProperties) { + if (changedProperties.has('boundary')) { + this.popper.boundaryElement = this.boundary; } } - return { - x: rect.left + scroll.scrollLeft - offsets.x, - y: rect.top + scroll.scrollTop - offsets.y, - width: rect.width, - height: rect.height - }; + // function that renders the HTML and CSS into the scope of the component + render() { + return x$2` +
+
+ +
+ + + + + `; + } } -function order(modifiers) { - var map = new Map(); - var visited = new Set(); - var result = []; - modifiers.forEach(function (modifier) { - map.set(modifier.name, modifier); - }); // On visiting object, check for its dependencies and visit them recursively +var popoverVersion = '4.1.1'; - function sort(modifier) { - visited.add(modifier.name); - var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []); - requires.forEach(function (dep) { - if (!visited.has(dep)) { - var depModifier = map.get(dep); +/* eslint-disable max-lines, no-underscore-dangle, no-magic-numbers, no-underscore-dangle, max-params, no-void, init-declarations, no-extra-parens, arrow-parens, max-lines, line-comment-position, no-inline-comments, lit/binding-positions, lit/no-invalid-html */ - if (depModifier) { - sort(depModifier); - } - } - }); - result.push(modifier); +class AuroCalendarCell extends r$7 { + constructor() { + super(); + + this.day = null; + this.selected = false; + this.hovered = false; + this.dateTo = null; + this.dateFrom = null; + this.month = null; + this.min = null; + this.max = null; + this.disabled = false; + this.disabledDays = []; + this.hoveredDate = null; + this.isCurrentDate = false; + this._locale = null; + this.dateStr = null; + this.renderForDateSlot = false; // When false, the numerical date will render vertically centered. When true, the date will render off-center to the top and leave room below for the slot content. + this.runtimeUtils = new AuroLibraryRuntimeUtils$3(); + + /** + * Generate unique names for dependency components. + */ + const versioning = new AuroDependencyVersioning$2(); + this.popoverTag = versioning.generateTag('auro-popover', popoverVersion, AuroPopover); } - modifiers.forEach(function (modifier) { - if (!visited.has(modifier.name)) { - // check for visited object - sort(modifier); - } - }); - return result; -} + // This function is to define props used within the scope of this component + // Be sure to review https://lit-element.polymer-project.org/guide/properties#reflected-attributes + // to understand how to use reflected attributes with your property settings. + static get properties() { + return { + // ...super.properties, + day: { type: Object }, + selected: { type: Boolean }, + hovered: { type: Boolean }, + dateTo: { type: String }, + dateFrom: { type: String }, + month: { type: String }, + min: { type: Number }, + max: { type: Number }, + disabled: { type: Boolean }, + disabledDays: { type: Array }, + hoveredDate: { type: String }, + isCurrentDate: { type: Boolean }, + locale: { type: Object }, + dateStr: { type: String }, + renderForDateSlot: { type: Boolean } + }; + } -function orderModifiers(modifiers) { - // order based on dependencies - var orderedModifiers = order(modifiers); // order based on phase + get locale() { + return this._locale ? this._locale : enUS; + } - return modifierPhases.reduce(function (acc, phase) { - return acc.concat(orderedModifiers.filter(function (modifier) { - return modifier.phase === phase; - })); - }, []); -} + set locale(value) { + const oldValue = this._locale; + this._locale = value; + this.requestUpdate('locale', oldValue); + } -function debounce(fn) { - var pending; - return function () { - if (!pending) { - pending = new Promise(function (resolve) { - Promise.resolve().then(function () { - pending = undefined; - resolve(fn()); - }); - }); - } + static get styles() { + return [ + // ...super.styles, + styleCss$6, + colorCss$6, + tokensCss$6 + ]; + } - return pending; - }; -} + /** + * Handles selected and hovered states of the calendar cell when the date changes. + * @private + * @param {Number} dateFrom - Depart date. + * @param {Number} dateTo - Return date. + * @param {Number} hoveredDate - Hovered date. + * @param {Object} day - An object containing the dateFrom and day of month values. + * @returns {void} + */ + dateChanged(dateFrom, dateTo, hoveredDate, day) { + this.selected = false; + this.hovered = false; -function mergeByName(modifiers) { - var merged = modifiers.reduce(function (merged, current) { - var existing = merged[current.name]; - merged[current.name] = existing ? Object.assign({}, existing, current, { - options: Object.assign({}, existing.options, current.options), - data: Object.assign({}, existing.data, current.data) - }) : current; - return merged; - }, {}); // IE11 does not support Object.values + const parsedDateFrom = parseInt(dateFrom, 10); + const parsedDateTo = parseInt(dateTo, 10); - return Object.keys(merged).map(function (key) { - return merged[key]; - }); -} + if (day) { + const departTimestamp = startOfDay(parsedDateFrom * 1000) / 1000; + const returnTimestamp = startOfDay(parsedDateTo * 1000) / 1000; -var DEFAULT_OPTIONS = { - placement: 'bottom', - modifiers: [], - strategy: 'absolute' -}; + if (day.date === departTimestamp || day.date === returnTimestamp) { + this.selected = true; + } -function areValidElements() { - for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; + if (((hoveredDate === day.date || day.date < hoveredDate) && day.date > parsedDateFrom && !parsedDateTo && !Number.isNaN(parsedDateFrom) && parsedDateFrom !== undefined && !this.selected) || (day.date > parsedDateFrom && day.date < parsedDateTo)) { + this.hovered = true; + } + } } - return !args.some(function (element) { - return !(element && typeof element.getBoundingClientRect === 'function'); - }); -} + /** + * Handles user click events and calls datepicker to update the value(s). + * @private + * @returns {void} + */ + handleTap() { + if (!this.disabled) { + this.datepicker.handleCellClick(this.day.date); + } + } -function popperGenerator(generatorOptions) { - if (generatorOptions === void 0) { - generatorOptions = {}; + /** + * Handles user hover events and dispatches a custom event. + * @private + * @returns {void} + */ + handleHover() { + this.hovered = true; + + let _a; + this.dispatchEvent(new CustomEvent('date-is-hovered', { + detail: { date: (_a = this.day) === null || _a === void 0 ? void 0 : _a.date }, + })); } - var _generatorOptions = generatorOptions, - _generatorOptions$def = _generatorOptions.defaultModifiers, - defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def, - _generatorOptions$def2 = _generatorOptions.defaultOptions, - defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2; - return function createPopper(reference, popper, options) { - if (options === void 0) { - options = defaultOptions; + /** + * Checks if the current date is a valid date depending on the min and max values. + * @private + * @param {Object} day - An object containing the dateFrom and day of month values. + * @param {Number} min - The minimum date value. + * @param {Number} max - The maximum date value. + * @param {Array} disabledDays - An array of disabled dates. + * @returns {Boolean} - True if the date is disabled. + */ + isEnabled(day, min, max, disabledDays) { + this.removeAttribute('disabled'); + + if (disabledDays && day && day.date) { + if (day.date < min || day.date > max || disabledDays.findIndex(disabledDay => parseInt(disabledDay, 10) === day.date) !== -1) { + this.setAttribute('disabled', true); + return true; + } } + return false; + } - var state = { - placement: 'bottom', - orderedModifiers: [], - options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions), - modifiersData: {}, - elements: { - reference: reference, - popper: popper - }, - attributes: {}, - styles: {} - }; - var effectCleanupFns = []; - var isDestroyed = false; - var instance = { - state: state, - setOptions: function setOptions(setOptionsAction) { - var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction; - cleanupModifierEffects(); - state.options = Object.assign({}, defaultOptions, state.options, options); - state.scrollParents = { - reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [], - popper: listScrollParents(popper) - }; // Orders the modifiers based on their dependencies and `phase` - // properties + /** + * Checks if the current date is the depart date. + * @private + * @param {Object} day - An object containing the dateFrom and day of month values. + * @param {Number} dateFrom - Depart date. + * @returns {Boolean} True if the date is the depart date. + */ + isDepartDate(day, dateFrom) { + const parsedDateFrom = parseInt(dateFrom, 10); + const departTimestamp = startOfDay(parsedDateFrom * 1000) / 1000; - var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers + return this.selected && day.date === departTimestamp; + } - state.orderedModifiers = orderedModifiers.filter(function (m) { - return m.enabled; - }); - runModifierEffects(); - return instance.update(); - }, - // Sync update – it will always be executed, even if not necessary. This - // is useful for low frequency updates where sync behavior simplifies the - // logic. - // For high frequency updates (e.g. `resize` and `scroll` events), always - // prefer the async Popper#update method - forceUpdate: function forceUpdate() { - if (isDestroyed) { - return; - } + /** + * Checks if the current date is the return date. + * @private + * @param {Object} day - An object containing the dateFrom and day of month values. + * @param {Number} dateFrom - Depart date. + * @param {Number} dateTo - Return date. + * @returns {Boolean} True if the date is the return date. + */ + isReturnDate(day, dateFrom, dateTo) { + const parsedDateTo = parseInt(dateTo, 10); + const returnTimestamp = startOfDay(parsedDateTo * 1000) / 1000; - var _state$elements = state.elements, - reference = _state$elements.reference, - popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements - // anymore + return this.selected && day.date === returnTimestamp && dateFrom; + } - if (!areValidElements(reference, popper)) { - return; - } // Store the reference and popper rects to be read by modifiers + /** + * Checks if the current date is between dateFrom and dateTo. + * @private + * @param {Object} day - An object containing the dateFrom and day of month values. + * @param {Number} dateFrom - Depart date. + * @param {Number} dateTo - Return date. + * @returns {Boolean} True if the current date is between dateFrom and dateTo. + */ + isInRange(day, dateFrom, dateTo) { + /** + * Cell is in not range if any of the following are true: + * - Datepicker does not support range selection. + * - First date has not been selected. + * - Cell date is before or equal first date. + * - Both range dates selected and current cell is after the second date. + */ + if (!this.datepicker.hasAttribute('range') || (!dateFrom || day.date <= dateFrom) || (dateTo && day.date >= dateTo)) { + return false; + } - state.rects = { - reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'), - popper: getLayoutRect(popper) - }; // Modifiers have the ability to reset the current update cycle. The - // most common use case for this is the `flip` modifier changing the - // placement, which then needs to re-run all the modifiers, because the - // logic was previously ran for the previous placement and is therefore - // stale/incorrect + return true; + } - state.reset = false; - state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier - // is filled with the initial data specified by the modifier. This means - // it doesn't persist and is fresh on each update. - // To ensure persistent data, use `${name}#persistent` + /** + * Determines the hovered date appearing latest in the calendar. + * @private + * @param {Object} day - An object containing the dateFrom and day of month values. + * @param {Number} dateFrom - Depart date. + * @param {Number} dateTo - Return date. + * @param {Number} hoveredDate - Hovered date. + * @returns {Boolean} True if the hovered date is the latest hovered date in the calendar. + */ + isLastHoveredDate(day, dateFrom, dateTo, hoveredDate) { + return dateFrom && hoveredDate > dateFrom && day.date === hoveredDate && !dateTo; + } - state.orderedModifiers.forEach(function (modifier) { - return state.modifiersData[modifier.name] = Object.assign({}, modifier.data); - }); + /** + * Determines the title of the auro-calendar-cell. + * @private + * @param {Number} date - The date of the auro-calendar-cell. + * @returns {String} The title of the auro-calendar-cell in the user's locale. + */ + getTitle(date) { + if (date === undefined) { + return ''; + } + return format(date * 1000, 'PPPP', { + locale: this.locale, + }); + } - for (var index = 0; index < state.orderedModifiers.length; index++) { - if (state.reset === true) { - state.reset = false; - index = -1; - continue; - } + /** + * Gets the name of the date slot. + * @private + * @returns {void} + */ + setDateSlotName() { + const date = new Date(this.day.date * 1000); - var _state$orderedModifie = state.orderedModifiers[index], - fn = _state$orderedModifie.fn, - _state$orderedModifie2 = _state$orderedModifie.options, - _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, - name = _state$orderedModifie.name; + let month = date.getMonth() + 1; + let day = date.getDate(); - if (typeof fn === 'function') { - state = fn({ - state: state, - options: _options, - name: name, - instance: instance - }) || state; - } - } - }, - // Async and optimistically optimized update – it will not be executed if - // not necessary (debounced to run at most once-per-tick) - update: debounce(function () { - return new Promise(function (resolve) { - instance.forceUpdate(); - resolve(state); - }); - }), - destroy: function destroy() { - cleanupModifierEffects(); - isDestroyed = true; - } - }; + if (month.toString().length === 1) { + month = `0${month}`; + } - if (!areValidElements(reference, popper)) { - return instance; + if (day.toString().length === 1) { + day = `0${day}`; } - instance.setOptions(options).then(function (state) { - if (!isDestroyed && options.onFirstUpdate) { - options.onFirstUpdate(state); - } - }); // Modifiers have the ability to execute arbitrary code before the first - // update cycle runs. They will be executed in the same order as the update - // cycle. This is useful when a modifier adds some persistent data that - // other modifiers need to use, but the modifier is run after the dependent - // one. + const year = date.getFullYear(); - function runModifierEffects() { - state.orderedModifiers.forEach(function (_ref) { - var name = _ref.name, - _ref$options = _ref.options, - options = _ref$options === void 0 ? {} : _ref$options, - effect = _ref.effect; + this.dateStr = `${month}_${day}_${year}`; + } - if (typeof effect === 'function') { - var cleanupFn = effect({ - state: state, - name: name, - instance: instance, - options: options - }); + /** + * Remove existing cell slot content and clone any current slot content from the root `auro-datepicker` which matches this cells date. + * @private + * @returns {void} + */ + handleSlotContent() { + try { + // Get the slot names for this cell + const dateSlotName = `date_${this.dateStr}`; + const popoverSlotName = `popover_${this.dateStr}`; - var noopFn = function noopFn() {}; + // Remove any existing slot content from this cell + const existingSlotContent = this.querySelectorAll(`[slot]`); - effectCleanupFns.push(cleanupFn || noopFn); - } + existingSlotContent.forEach((slot) => { + slot.remove(); }); - } - function cleanupModifierEffects() { - effectCleanupFns.forEach(function (fn) { - return fn(); - }); - effectCleanupFns = []; + // // Get any slots for this cell from the datepicker + const dateSlotContent = this.datepicker.querySelector(`[slot="${dateSlotName}"]`); + const popoverSlotContent = this.datepicker.querySelector(`[slot="${popoverSlotName}"]`); + + // Insert any fetched slot content into this cell + if (dateSlotContent) { + this.appendChild(dateSlotContent.cloneNode(true)); + this.setAttribute('renderForDateSlot', true); + } else { + this.removeAttribute('renderForDateSlot'); + } + + if (popoverSlotContent) { + this.appendChild(popoverSlotContent.cloneNode(true)); + this.auroPopover.removeAttribute('disabled'); + } else { + this.auroPopover.setAttribute('disabled', true); + } + } catch (err) { // eslint-disable-line no-unused-vars + // Error handling goes here } + } - return instance; - }; -} + firstUpdated() { + this.datepicker = this.runtimeUtils.closestElement('auro-datepicker', this) || + this.runtimeUtils.closestElement('[auro-datepicker]', this); -var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1]; -var createPopper = /*#__PURE__*/popperGenerator({ - defaultModifiers: defaultModifiers -}); // eslint-disable-next-line import/no-unused-modules + if (this.datepicker) { + this.datepicker.addEventListener('auroDatePicker-newSlotContent', () => { + this.handleSlotContent(); + }); + } -// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. + this.calendarMonth = this.runtimeUtils.closestElement('auro-calendar-month', this); + this.auroPopover = this.shadowRoot.querySelector(this.popoverTag._$litStatic$); + this.auroPopover.boundary = this.calendarMonth; + } -// build the component class -const popoverOffsetDistance = 18, - popoverOffsetSkidding = 0; + updated(properties) { + if (properties.has('dateFrom') || properties.has('dateTo') || properties.has('hoveredDate') || properties.has('day')) { + this.dateChanged(this.dateFrom, this.dateTo, this.hoveredDate, this.day); + } -let Popover$1 = class Popover { + this.setDateSlotName(); + this.handleSlotContent(); + } - constructor(anchor, popover, placement, boundary) { - this.anchor = anchor; - this.popover = popover; - this.boundaryElement = this.setBoundary(boundary); - this.options = { - placement, - visibleClass: 'data-show' + render() { + const buttonClasses = { + 'day': true, + 'currentDate': this.currentDate, + 'selected': this.selected, + 'inRange': this.hovered && this.isInRange(this.day, this.dateFrom, this.dateTo), + 'lastHoveredDate': this.isLastHoveredDate(this.day, this.dateFrom, this.dateTo, this.hoveredDate) && this.datepicker && this.datepicker.hasAttribute('range'), + 'disabled': this.isEnabled(this.day, this.min, this.max, this.disabledDays), + 'rangeDepartDate': this.isDepartDate(this.day, this.dateFrom) && (this.hoveredDate > this.dateFrom || this.dateTo), + 'rangeReturnDate': this.isReturnDate(this.day, this.dateFrom, this.dateTo), + 'sameDateTrip': this.dateFrom === this.dateTo }; - this.popover.classList.remove(this.options.visibleClass); + + let _a, _b; + return u$6` + <${this.popoverTag}> + + + + `; } +} - setBoundary(boundary) { - if (typeof boundary === 'string') { - return document.querySelector(boundary) || document.body; - } +if (!customElements.get('auro-calendar-cell')) { + customElements.define('auro-calendar-cell', AuroCalendarCell); +} - return boundary || document.body; - } +// See https://git.io/JJ6SJ for "How to document your components using JSDoc" - show() { - if (this.popper) { - this.popper.destroy(); - } +/* eslint-disable no-magic-numbers, dot-location */ - this.popper = createPopper(this.anchor, this.popover, { - tooltip: this.anchor, - placement: this.options.placement, - modifiers: [ - { - name: 'offset', - options: { - offset: [ - popoverOffsetSkidding, - popoverOffsetDistance - ] - } - }, - { - name: 'preventOverflow', - options: { - mainAxis: true, - boundary: this.boundaryElement, - rootBoundary: 'document', - padding: 16, - } - }, - ] +class AuroCalendarMonth extends RangeDatepickerCalendar { + static get styles() { + return [ + // ...super.styles, + styleCss$7, + colorCss$7, + tokensCss$6 + ]; + } + + async firstUpdated() { + this.monthsList = [ + '01', + '02', + '03', + '04', + '05', + '06', + '07', + '08', + '09', + '10', + '11', + '12', + ]; + setTimeout(() => { + this.setYears(1930, 2100); }); + + await this.updateComplete; } - triggerUpdate() { - this.popper.update(); + /** + * Determines the current month name based on locale. + * This is a rewrite of the function used in the class RangeDatepickerCalendar and should not be removed from here. + * @private + * @returns {void} + */ + localeChanged() { + const dayNamesOfTheWeek = []; + for (let int = 0; int < 7; int += 1) { + dayNamesOfTheWeek.push(this.locale.localize.day(int, { width: 'narrow' })); + } + const firstDayOfWeek = this.locale.options.weekStartsOn + ? this.locale.options.weekStartsOn + : 0; + const tmp = dayNamesOfTheWeek.slice().splice(0, firstDayOfWeek); + const newDayNamesOfTheWeek = dayNamesOfTheWeek + .slice() + .splice(firstDayOfWeek, dayNamesOfTheWeek.length) + .concat(tmp); + this.dayNamesOfTheWeek = newDayNamesOfTheWeek; } - hide() { - this.popover.classList.remove(this.options.visibleClass); + renderDay(day) { + return x$2` +
+ ${day + ? x$2` + + + ` + : null} +
+ `; } -}; -// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. + /* Disabling linter for render as this code is directly from range-datepicker-calendar */ + /* eslint-disable */ + render() { + var _a, _b; + + return x$2 ` +
+
+ ${this.renderPrevButton()} +
+
${this.computeCurrentMonthName(this.month, this.year)}
+
${this.renderYear()}
+
+ ${this.renderNextButton()} +
+
+
+
+ ${(_a = this.dayNamesOfTheWeek) === null || _a === void 0 ? void 0 : _a.map(dayNameOfWeek => this.renderDayOfWeek(dayNameOfWeek))} +
+
+
+ ${(_b = this.daysOfMonth) === null || _b === void 0 ? void 0 : _b.map(week => this.renderWeek(week))} +
+
+
+ `; + } + /* eslint-enable */ +} -/** - * Popover attaches to an element and displays on hover/blur. - * - * @attr {boolean} addSpace - If true, will add additional top and bottom space around the appearance of the popover in relation to the trigger - * @attr {boolean} disabled - If true, will disable the popover from showing on hover and focus - * @attr {String} for - Directly associate the popover with a trigger element with the given ID. In most cases, this should not be necessary and set slot="trigger" on the element instead. - * @attr {String} placement - Expects top/bottom - position for popover in relation to the element - * @attr {boolean} removeSpace - If true, will remove top and bottom space around the appearance of the popover in relation to the trigger - * @attr {String | Object} boundary - The element to use as the boundary for the popover. Can be a query selector or an HTML element. - * @slot - Default unnamed slot for the use of popover content - * @slot trigger - The element in this slot triggers hiding and showing the popover. - */ -class AuroPopover extends r$2 { +if (!customElements.get('auro-calendar-month')) { + customElements.define('auro-calendar-month', AuroCalendarMonth); +} + +/* eslint-disable no-underscore-dangle, no-magic-numbers, no-underscore-dangle, no-void, init-declarations, no-extra-parens, no-unused-expressions */ + +class RangeDatepicker extends r$7 { constructor() { super(); - this.placement = 'top'; - } + /** + * Array of disabled days. Format is Unix timestamp. + */ + this.disabledDays = []; - /** - * Internal Defaults. - * @private - * @returns {void} - */ - privateDefaults() { - this.isPopoverVisible = false; - this.id = `popover-${(Math.random() + 1).toString(36).substring(7)}`; - this.runtimeUtils = new AuroLibraryRuntimeUtils(); - } + /** + * Display a select year control. + */ + this.enableYearChange = false; - // function to define props used within the scope of this component - static get properties() { - return { - placement: { type: String }, - for: { type: String }, - disabled: { type: Boolean }, - boundary: { type: String } - }; - } + /** + * Force display of only one month. + */ + this.forceNarrow = false; - static get styles() { - return [ - i$5`${styleCss$5}`, - i$5`${colorCss$5}`, - i$5`${tokensCss$5}` - ]; - } + /** + * Set locale of the calendar. + */ + this.locale = null; - /** - * This will register this element with the browser. - * @param {string} [name="auro-popover"] - The name of element that you want to register to. - * - * @example - * AuroPopover.register("custom-popover") // this will register this element to - * - */ - static register(name = "auro-popover") { - AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroPopover); - } + /** + * Max date. Format is Unix timestamp. + */ + this.max = '8640000000000'; - connectedCallback() { - super.connectedCallback(); + /** + * Minimal date. Format is Unix timestamp. + */ + this.min = '-8640000000000'; - this.privateDefaults(); + /** + * If true only one date can be selected. + */ + this.noRange = false; + this.dateFrom = null; + this.dateTo = null; + this.hoveredDate = null; + this.monthPlus = null; + this.yearPlus = null; + this.narrow = false; + const now = new Date(); + this.month = getMonth(now) + 1; + this.year = getYear(now); + this.monthChanged(this.month, this.year); + } - // adds toggle function to root element based on touch - this.addEventListener('touchstart', function() { - this.toggle(); - this.setAttribute("isTouch", "true"); - }); + render() { + return this.isNarrow(this.forceNarrow, this.narrow) + ? this.renderNarrow() + : this.renderNormal(); } - disconnectedCallback() { - super.disconnectedCallback(); - document.removeEventListener('click', this.documentClickHandler); + renderNormal() { + return x$2` +
+ + + + +
+ `; + } + + renderNarrow() { + return x$2` + + + `; } firstUpdated() { - // Add the tag name as an attribute if it is different than the component name - this.runtimeUtils.handleComponentTagRename(this, 'auro-popover'); + const mql = window.matchMedia('(max-width: 650px)'); + mql.addListener((mqlEvent) => this.queryMatchesChanged(mqlEvent)); + this.queryMatchesChanged(mql); + } - if (this.for) { - this.trigger = document.querySelector(`#${this.for}`) || this.getRootNode().querySelector(`#${this.for}`); + updated(properties) { + if (properties.has('month') || properties.has('year')) { + this.monthChanged(this.month, this.year); } - - if (!this.trigger) { - [this.trigger] = this.shadowRoot.querySelector('slot[name="trigger"]').assignedElements(); + if (properties.has('noRange')) { + this.noRangeChanged(this.noRange, properties.get('noRange')); } + if (properties.has('narrow')) { + this.dispatchEvent(new CustomEvent('narrow-changed', { detail: { value: this.narrow } })); + } + if (properties.has('locale')) { + this.localeChanged(); + } + } - this.auroPopover = this.shadowRoot.querySelector('#popover'); - this.popper = new Popover$1(this.trigger, this.auroPopover, this.placement, this.boundary); - - const handleShow = () => { - this.toggleShow(); - }, - handleHide = () => { - this.toggleHide(); - }, - handleKeyboardWhenFocusOnTrigger = (event) => { - const key = event.key.toLowerCase(); - - if (this.isPopoverVisible) { - if (key === 'tab' || key === 'escape') { - this.toggleHide(); - } - } - - if (key === ' ' || key === 'enter') { - this.toggle(); - } - }, - element = this.trigger.parentElement.nodeName === 'AURO-POPOVER' ? this : this.trigger; - - element.addEventListener('mouseenter', handleShow); - element.addEventListener('mouseleave', handleHide); - - // if user tabs off of trigger, then hide the popover. - this.trigger.addEventListener('keydown', handleKeyboardWhenFocusOnTrigger); - - // handle gain/loss of focus - this.trigger.addEventListener('focus', handleShow); - this.trigger.addEventListener('blur', handleHide); + isNarrow(forceNarrow, narrow) { + return forceNarrow || narrow; + } - // e.g. for a closePopover button in the popover - this.addEventListener('hidePopover', handleHide); + queryMatchesChanged(mql) { + this.narrow = mql.matches; + this.requestUpdate(); } - /** - * Toggles the display of the popover content. - * @private - * @returns {void} Fires an update lifecycle. - */ - toggle() { - if (this.isPopoverVisible) { - this.toggleHide(); - } else { - this.toggleShow(); + handlePrevMonth() { + let _a; + if (!this.enableYearChange) { + const calendar = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('wc-range-datepicker-calendar[next]'); + calendar === null || calendar === void 0 ? void 0 : calendar.handlePrevMonth(); } } - /** - * Hides the popover. - * @private - * @returns {void} Fires an update lifecycle. - */ - toggleHide() { - this.popper.hide(); - this.isPopoverVisible = false; - this.removeAttribute('data-show'); - - document.querySelector('body').removeEventListener('mouseover', this.mouseoverHandler); + handleNextMonth() { + let _a; + if (!this.enableYearChange) { + const calendar = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('wc-range-datepicker-calendar[prev]'); + calendar === null || calendar === void 0 ? void 0 : calendar.handleNextMonth(); + } } - /** - * Shows the popover. - * @private - * @returns {void} Fires an update lifecycle. - */ - toggleShow() { - this.popper.show(); - this.isPopoverVisible = true; - this.setAttribute('data-show', true); - - this.mouseoverHandler = (evt) => this.handleMouseoverEvent(evt); + hoveredDateChanged(event) { + this.hoveredDate = event.detail.value; + } - document.querySelector('body').addEventListener('mouseover', this.mouseoverHandler); + monthChanged(month, year) { + if (year && month) { + this.monthPlus = (month % 12) + 1; + if (this.monthPlus === 1) { + this.yearPlus = year + 1; + } else { + this.yearPlus = year; + } + } } - /** - * Hides the popover when hovering outside of the popover or it's trigger. - * @private - * @param {Event} evt - The event object. - * @returns {void} - */ - handleMouseoverEvent(evt) { - if (this.isPopoverVisible && !evt.composedPath().includes(this)) { - this.toggleHide(); + noRangeChanged(isNoRange, wasNoRange) { + if (!wasNoRange && isNoRange) { + this.dateTo = null; + this.hoveredDate = null; } } - updated(changedProperties) { - if (changedProperties.has('boundary')) { - this.popper.boundaryElement = this.boundary; + localeChanged() { + if (!this.month) { + this.month = getMonth(new Date()); + } + if (!this.year) { + this.year = getYear(new Date()); } } - // function that renders the HTML and CSS into the scope of the component - render() { - return x` -
-
- -
+ dateToChanged(event) { + this.dateTo = event.detail.value; + this.dispatchEvent(new CustomEvent('date-to-changed', { detail: { value: event.detail.value } })); + } - - - - `; + dateFromChanged(event) { + this.dateFrom = event.detail.value; + this.dispatchEvent(new CustomEvent('date-from-changed', { + detail: { value: event.detail.value }, + })); } } +RangeDatepicker.styles = i$c` + :host { + display: block; + position: relative; + } -var popoverVersion = '4.1.1'; + #container { + display: flex; + flex-direction: row; + } -/* eslint-disable max-lines, no-underscore-dangle, no-magic-numbers, no-underscore-dangle, max-params, no-void, init-declarations, no-extra-parens, arrow-parens, max-lines, line-comment-position, no-inline-comments, lit/binding-positions, lit/no-invalid-html */ + #firstDatePicker { + margin-right: 16px; + } + `; +__decorate([n$5({ type: Array })], RangeDatepicker.prototype, "disabledDays", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepicker.prototype, "enableYearChange", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepicker.prototype, "forceNarrow", void 0); +__decorate([n$5({ type: Object })], RangeDatepicker.prototype, "locale", void 0); +__decorate([n$5({ type: String })], RangeDatepicker.prototype, "max", void 0); +__decorate([n$5({ type: String })], RangeDatepicker.prototype, "min", void 0); +__decorate([n$5({ type: Number })], RangeDatepicker.prototype, "month", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepicker.prototype, "noRange", void 0); +__decorate([n$5({ type: Number })], RangeDatepicker.prototype, "year", void 0); +__decorate([n$5({ type: String })], RangeDatepicker.prototype, "dateFrom", void 0); +__decorate([n$5({ type: String })], RangeDatepicker.prototype, "dateTo", void 0); +__decorate([n$5({ type: String })], RangeDatepicker.prototype, "hoveredDate", void 0); +__decorate([n$5({ type: Number })], RangeDatepicker.prototype, "monthPlus", void 0); +__decorate([n$5({ type: Number })], RangeDatepicker.prototype, "yearPlus", void 0); +__decorate([n$5({ type: Boolean })], RangeDatepicker.prototype, "narrow", void 0); -class AuroCalendarCell extends r$2 { - constructor() { - super(); +var chevronLeft = {"role":"img","color":"currentColor","title":"","desc":"Directional indicator; left.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"chevron-left","category":"interface","svg":"Directional indicator; left."}; - this.day = null; - this.selected = false; - this.hovered = false; - this.dateTo = null; - this.dateFrom = null; - this.month = null; - this.min = null; - this.max = null; - this.disabled = false; - this.disabledDays = []; - this.hoveredDate = null; - this.isCurrentDate = false; - this._locale = null; - this.dateStr = null; - this.renderForDateSlot = false; // When false, the numerical date will render vertically centered. When true, the date will render off-center to the top and leave room below for the slot content. - this.runtimeUtils = new AuroLibraryRuntimeUtils(); +var chevronRight = {"role":"img","color":"currentColor","title":"","desc":"Directional indicator; right.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"chevron-right","category":"interface","svg":"Directional indicator; right."}; - /** - * Generate unique names for dependency components. - */ - const versioning = new AuroDependencyVersioning(); - this.popoverTag = versioning.generateTag('auro-popover', popoverVersion, AuroPopover); +class CalendarUtilities { + constructor() { + this.util = new AuroDatepickerUtilities(); } - // This function is to define props used within the scope of this component - // Be sure to review https://lit-element.polymer-project.org/guide/properties#reflected-attributes - // to understand how to use reflected attributes with your property settings. - static get properties() { - return { - // ...super.properties, - day: { type: Object }, - selected: { type: Boolean }, - hovered: { type: Boolean }, - dateTo: { type: String }, - dateFrom: { type: String }, - month: { type: String }, - min: { type: Number }, - max: { type: Number }, - disabled: { type: Boolean }, - disabledDays: { type: Array }, - hoveredDate: { type: String }, - isCurrentDate: { type: Boolean }, - locale: { type: Object }, - dateStr: { type: String }, - renderForDateSlot: { type: Boolean } - }; - } - get locale() { - return this._locale ? this._locale : locale; - } + /** + * Scroll the calendar month list to a given valid date if in mobile view. + * @param {Object} elem - The calendar element. + * @param {String} date - The date to scroll into view. + * @returns {void} + */ + scrollMonthIntoView(elem, date) { + const mobileLayout = window.innerWidth < elem.mobileBreakpoint; - set locale(value) { - const oldValue = this._locale; - this._locale = value; - this.requestUpdate('locale', oldValue); - } + if (this.util.validDateStr(date) && mobileLayout) { + const month = new Date(date).getMonth() + 1; + const year = new Date(date).getFullYear(); + const selector = `#month-${month}-${year}`; + const monthElem = elem.shadowRoot.querySelector(selector); - static get styles() { - return [ - // ...super.styles, - styleCss$6, - colorCss$6, - tokensCss$6 - ]; + monthElem.scrollIntoView(); + } } /** - * Handles selected and hovered states of the calendar cell when the date changes. + * Sends an event requesting the dropdown bib be closed. * @private - * @param {Number} dateFrom - Depart date. - * @param {Number} dateTo - Return date. - * @param {Number} hoveredDate - Hovered date. - * @param {Object} day - An object containing the dateFrom and day of month values. * @returns {void} */ - dateChanged(dateFrom, dateTo, hoveredDate, day) { - this.selected = false; - this.hovered = false; - - const parsedDateFrom = parseInt(dateFrom, 10); - const parsedDateTo = parseInt(dateTo, 10); - - if (day) { - const departTimestamp = startOfDay(parsedDateFrom * 1000) / 1000; - const returnTimestamp = startOfDay(parsedDateTo * 1000) / 1000; - - if (day.date === departTimestamp || day.date === returnTimestamp) { - this.selected = true; - } - - if (((hoveredDate === day.date || day.date < hoveredDate) && day.date > parsedDateFrom && !parsedDateTo && !Number.isNaN(parsedDateFrom) && parsedDateFrom !== undefined && !this.selected) || (day.date > parsedDateFrom && day.date < parsedDateTo)) { - this.hovered = true; - } - } + requestDismiss() { + this.dispatchEvent(new CustomEvent('auroCalendar-dismissRequest', { + bubbles: true, + cancelable: false, + composed: true, + })); } /** - * Handles user click events and calls datepicker to update the value(s). + * Handles the visibility of the previous and next month buttons. * @private + * @param {Object} elem - The auro-calendar element. * @returns {void} */ - handleTap() { - if (!this.disabled) { - this.datepicker.handleCellClick(this.day.date); + assessNavigationButtonVisibility(elem) { + + /** + * Hide/show the previous month button. + */ + + // 1. Compare the first rendered month to the earliest renderable month to determine if the previous month button should be hidden or shown + if (!elem.hasAttribute('calendarStartDate') && !elem.hasAttribute('minDate')) { + elem.showPrevMonthBtn = true; + } else if (this.util.convertDateToFirstOfMonth(new Date(elem.centralDate)) <= elem.firstMonthRenderable) { + elem.showPrevMonthBtn = false; + } else { + elem.showPrevMonthBtn = true; + } + + /** + * Hide/show the next month button. + */ + + // 1. Determine the last month that can possibly be rendered into the DOM. + let lastRenderableMonth = undefined; // eslint-disable-line no-undef-init + + if (elem.hasAttribute('calendarEndDate')) { + lastRenderableMonth = new Date(elem.getAttribute('calendarEndDate')); + } else if (elem.hasAttribute('maxDate')) { + lastRenderableMonth = new Date(elem.getAttribute('maxDate')); + } + + if (lastRenderableMonth) { + lastRenderableMonth = this.util.convertDateToFirstOfMonth(lastRenderableMonth); + } + + // 2. Determine the last month currently rendered into the DOM. + let lastRenderedMonth = new Date(elem.centralDate); + + if (!elem.noRange) { + lastRenderedMonth = new Date(lastRenderedMonth.setMonth(lastRenderedMonth.getMonth() + 1)); + } + + lastRenderedMonth = this.util.convertDateToFirstOfMonth(lastRenderedMonth); + + // 3. Compare the two and choose to show or hide the next month button + if (lastRenderedMonth >= lastRenderableMonth) { + elem.showNextMonthBtn = false; + } else { + elem.showNextMonthBtn = true; } + + // Request an update to the component needed to actually show/hide the buttons in the DOM + elem.requestUpdate(); } /** - * Handles user hover events and dispatches a custom event. + * Handles the change of the centralDate property. + * @param {Object} elem - The auro-calendar element. * @private * @returns {void} */ - handleHover() { - this.hovered = true; + centralDateChanged(elem) { + this.assessNavigationButtonVisibility(elem); - let _a; - this.dispatchEvent(new CustomEvent('date-is-hovered', { - detail: { date: (_a = this.day) === null || _a === void 0 ? void 0 : _a.date }, + elem.dispatchEvent(new CustomEvent('auroCalendar-centralDateChanged', { + detail: { + bubbles: true, + cancelable: false, + composed: true, + date: elem.centralDate + } })); } /** - * Checks if the current date is a valid date depending on the min and max values. - * @private - * @param {Object} day - An object containing the dateFrom and day of month values. - * @param {Number} min - The minimum date value. - * @param {Number} max - The maximum date value. - * @param {Array} disabledDays - An array of disabled dates. - * @returns {Boolean} - True if the date is disabled. + * Updates the month and year when the user navigates to a different calendar month. + * @param {Object} elem - The auro-calendar element. + * @param {String} direction - The direction the user is navigating. + * @returns {void} */ - isEnabled(day, min, max, disabledDays) { - this.removeAttribute('disabled'); + handleMonthChange(elem, direction) { + // Determine if the month number is going to be incremented or decremented + let increment = 0; - if (disabledDays && day && day.date) { - if (day.date < min || day.date > max || disabledDays.findIndex(disabledDay => parseInt(disabledDay, 10) === day.date) !== -1) { - this.setAttribute('disabled', true); - return true; - } + if (direction === 'next') { + increment = 1; + } else if (direction === 'prev') { + increment = -1; // eslint-disable-line no-magic-numbers } - return false; + + // calculate the new central date + const newCentralDate = new Date(elem.centralDate).setMonth(new Date(elem.centralDate).getMonth() + increment); + + // set the new central date to the first day of the month + elem.centralDate = this.util.convertDateToFirstOfMonth(newCentralDate); } +} - /** - * Checks if the current date is the depart date. - * @private - * @param {Object} day - An object containing the dateFrom and day of month values. - * @param {Number} dateFrom - Depart date. - * @returns {Boolean} True if the date is the depart date. - */ - isDepartDate(day, dateFrom) { - const parsedDateFrom = parseInt(dateFrom, 10); - const departTimestamp = startOfDay(parsedDateFrom * 1000) / 1000; +// See https://git.io/JJ6SJ for "How to document your components using JSDoc" +/** + * @prop {Object} firstDayOfWeek - Weekday that will be displayed in first column of month grid. + * 0: sunday, 1: monday, 2: tuesday, 3: wednesday , 4: thursday, 5: friday, 6: saturday + * Default is 0. + * @prop {Date | null} focusedDate - The currently focused date (if any). + * @prop {Date} maxDate - Maximum date. All dates after will be disabled. + * @prop {Date} minDate - Minimum date. All dates before will be disabled. + * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input. + * Not to be confused with the focused date (therefore not necessarily in active month view). + * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat: + * - 'short' (e.g., Thu) + * - 'narrow' (e.g., T). + * Default is 'short'. + * @event auroCalendar-dateSelected - Notifies that a date has been selected in the calendar. + * @event auroCalendar-ready - Notifies that the component has finished initializing. + * @event auroCalendar-monthChanged - Notifies that the visible calendar month(s) have changed. + */ - return this.selected && day.date === departTimestamp; +/* eslint-disable no-magic-numbers, no-undef-init, max-lines */ + +// class AuroCalendar extends LitElement { +class AuroCalendar extends RangeDatepicker { + constructor() { + super(); + + /** + * @private + */ + this.runtimeUtils = new AuroLibraryRuntimeUtils$3(); + + /** + * @private + */ + this.util = new AuroDatepickerUtilities(); + + /** + * @private + */ + this.utilCal = new CalendarUtilities(); + + /** + * @private + */ + this.utilCalRender = new UtilitiesCalendarRender(); + + this.datepicker = this.runtimeUtils.closestElement('auro-datepicker', this); + this.calendarStartDate = undefined; + this.calendarEndDate = undefined; + this.centralDate = undefined; + this.showPrevMonthBtn = true; + this.showNextMonthBtn = true; + + /** + * @private + */ + this.firstMonthRenderable = undefined; + + /** + * @private + */ + this.calendarRangeMonths = null; + + /** + * @private + */ + this.numCalendars = undefined; + + /** + * @private + */ + this.mobileBreakpoint = 660; } - /** - * Checks if the current date is the return date. - * @private - * @param {Object} day - An object containing the dateFrom and day of month values. - * @param {Number} dateFrom - Depart date. - * @param {Number} dateTo - Return date. - * @returns {Boolean} True if the date is the return date. - */ - isReturnDate(day, dateFrom, dateTo) { - const parsedDateTo = parseInt(dateTo, 10); - const returnTimestamp = startOfDay(parsedDateTo * 1000) / 1000; + static get styles() { + return [ + styleCss$8, + colorCss$8, + tokensCss$6 + ]; + } - return this.selected && day.date === returnTimestamp && dateFrom; + static get properties() { + return { + numCalendars: { + type: Number + }, + dateFrom: { + type: String + }, + dateTo: { + type: String + }, + maxDate: { + type: String, + reflect: true + }, + minDate: { + type: String, + reflect: true + }, + calendarStartMonth: { + type: String, + reflect: true + }, + calendarEndMonth: { + type: String, + reflect: true + }, + centralDate: { + type: String, + reflect: true + }, + }; } /** - * Checks if the current date is between dateFrom and dateTo. + * Updates the month and year when the user navigates to the previous calendar month. * @private - * @param {Object} day - An object containing the dateFrom and day of month values. - * @param {Number} dateFrom - Depart date. - * @param {Number} dateTo - Return date. - * @returns {Boolean} True if the current date is between dateFrom and dateTo. + * @returns {void} */ - isInRange(day, dateFrom, dateTo) { - - /** - * Cell is in not range if any of the following are true: - * - Datepicker does not support range selection. - * - First date has not been selected. - * - Cell date is before or equal first date. - * - Both range dates selected and current cell is after the second date. - */ - if (!this.datepicker.hasAttribute('range') || (!dateFrom || day.date <= dateFrom) || (dateTo && day.date >= dateTo)) { - return false; - } - - return true; + handlePrevMonth() { + this.utilCal.handleMonthChange(this, 'prev'); } /** - * Determines the hovered date appearing latest in the calendar. + * Updates the month and year when the user navigates to the next calendar month. * @private - * @param {Object} day - An object containing the dateFrom and day of month values. - * @param {Number} dateFrom - Depart date. - * @param {Number} dateTo - Return date. - * @param {Number} hoveredDate - Hovered date. - * @returns {Boolean} True if the hovered date is the latest hovered date in the calendar. + * @returns {void} */ - isLastHoveredDate(day, dateFrom, dateTo, hoveredDate) { - return dateFrom && hoveredDate > dateFrom && day.date === hoveredDate && !dateTo; + handleNextMonth() { + this.utilCal.handleMonthChange(this, 'next'); } /** - * Determines the title of the auro-calendar-cell. + * Renders all of the auro-calendar-months HTML. * @private - * @param {Number} date - The date of the auro-calendar-cell. - * @returns {String} The title of the auro-calendar-cell in the user's locale. + * @returns {Object} Returns the auro-calendar-months HTML. */ - getTitle(date) { - if (date === undefined) { - return ''; + renderAllCalendars() { + this.utilCalRender.setFirstRenderableMonthDate(this); + + const mobileLayout = window.innerWidth < this.mobileBreakpoint; + let renderedHtml = undefined; + + // Determine which month to render first + let dateMatches = undefined; + + if (!mobileLayout && this.centralDate) { + // On Desktop start the calendar at the central date if it exists, then minDate and finally the current date. + if (this.centralDate) { + dateMatches = this.util.datesMatch(this.firstRenderedMonth, this.util.convertDateToFirstOfMonth(this.centralDate)); + + if (!dateMatches) { + this.firstRenderedMonth = this.util.convertDateToFirstOfMonth(this.centralDate); + } + } else if (this.minDate) { + dateMatches = this.util.datesMatch(this.firstRenderedMonth, this.util.convertDateToFirstOfMonth(this.minDate)); + + if (!dateMatches) { + this.firstRenderedMonth = this.util.convertDateToFirstOfMonth(this.minDate); + } + } else { + const now = new Date(); + + dateMatches = this.util.datesMatch(this.firstRenderedMonth, this.util.convertDateToFirstOfMonth(now)); + + if (!dateMatches) { + this.firstRenderedMonth = this.util.convertDateToFirstOfMonth(now); + } + } + } else { + // On mobile start the calendar at the previously determined first renderable month. + this.firstRenderedMonth = this.firstMonthRenderable; } - return format(date * 1000, 'PPPP', { - locale: this.locale, - }); + + // Add the first calendar to the HTML + const firstMonth = this.firstRenderedMonth.getMonth() + 1; + const firstYear = this.firstRenderedMonth.getFullYear(); + + renderedHtml = x$2`${renderedHtml}${this.utilCalRender.renderCalendar(this, firstMonth, firstYear)}`; + + // Loop through the number of remaining calendars to render and add the HTML + let newMonthDate = undefined; + + for (let cal = 0; cal < this.numCalendars - 1; cal += 1) { + + const date = newMonthDate || this.firstRenderedMonth; + + const oldMonth = date.getMonth() + 1; + const oldYear = date.getFullYear(); + + let newMonth = undefined; + let newYear = undefined; + + if (oldMonth === 12) { + newMonth = 1; + newYear = oldYear + 1; + } else { + newMonth = oldMonth + 1; + newYear = oldYear; + } + + const newMonthDateStr = `${newMonth}/1/${newYear}`; + newMonthDate = new Date(newMonthDateStr); + + renderedHtml = x$2`${renderedHtml}${this.utilCalRender.renderCalendar(this, newMonth, newYear)}`; + } + + return renderedHtml; } /** - * Gets the name of the date slot. - * @private + * Request the calendar be scrolled to a given date. + * @param {String} date - The date to scroll into view. * @returns {void} */ - setDateSlotName() { - const date = new Date(this.day.date * 1000); + scrollMonthIntoView(date) { + this.utilCal.scrollMonthIntoView(this, date); + } - let month = date.getMonth() + 1; - let day = date.getDate(); + firstUpdated() { + this.addEventListener('date-from-changed', () => { + this.dispatchEvent(new CustomEvent('auroCalendar-dateSelected', { + bubbles: true, + cancelable: false, + composed: true, + })); + }); - if (month.toString().length === 1) { - month = `0${month}`; + this.addEventListener('date-to-changed', () => { + if (this.dateTo === null) { + this.dateTo = undefined; + } + this.dispatchEvent(new CustomEvent('auroCalendar-dateSelected', { + bubbles: true, + cancelable: false, + composed: true, + })); + }); + + this.utilCalRender.determineNumCalendarsToRender(this); + + window.addEventListener('resize', () => { + this.utilCalRender.determineNumCalendarsToRender(this); + }); + } + + updated(changedProperties) { + if (changedProperties.has('noRange')) { + this.noRangeChanged(this.noRange, changedProperties.get('noRange')); } - if (day.toString().length === 1) { - day = `0${day}`; + if (changedProperties.has('narrow')) { + this.dispatchEvent(new CustomEvent('narrow-changedProperties', { detail: { value: this.narrow } })); } - const year = date.getFullYear(); + if (changedProperties.has('locale')) { + this.localeChanged(); + } - this.dateStr = `${month}_${day}_${year}`; + if (changedProperties.has('centralDate')) { + this.utilCal.centralDateChanged(this); + } } - /** - * Remove existing cell slot content and clone any current slot content from the root `auro-datepicker` which matches this cells date. - * @private - * @returns {void} - */ - handleSlotContent() { - try { - // Get the slot names for this cell - const dateSlotName = `date_${this.dateStr}`; - const popoverSlotName = `popover_${this.dateStr}`; + render() { + return x$2` +
+
+
+ + +
+
+
+
+ ${this.renderAllCalendars(this)} +
+
+
+ Done +
+
+ ${this.showPrevMonthBtn ? x$2` + + ` : undefined} + ${this.showNextMonthBtn ? x$2` + + ` : undefined} +
+ `; + } +} - // Remove any existing slot content from this cell - const existingSlotContent = this.querySelectorAll(`[slot]`); +if (!customElements.get('auro-calendar')) { + customElements.define('auro-calendar', AuroCalendar); +} - existingSlotContent.forEach((slot) => { - slot.remove(); - }); +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$2$1=globalThis,i$5$1=t$2$1.trustedTypes,s$2$1=i$5$1?i$5$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$4$1="$lit$",h$1$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4$1="?"+h$1$1,n$3$1=`<${o$4$1}>`,r$3$1=document,l$2$1=()=>r$3$1.createComment(""),c$2$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2$1=Array.isArray,u$2$1=t=>a$2$1(t)||"function"==typeof t?.[Symbol.iterator],d$1$1="[ \t\n\f\r]",f$1$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$2=/-->/g,_$1=/>/g,m$2=RegExp(`>|${d$1$1}(?:([^\\s"'>=/]+)(${d$1$1}*=${d$1$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$1$1=/'/g,g$1=/"/g,$$1=/^(?:script|style|textarea|title)$/i,y$1$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$1$1(1),T$1=Symbol.for("lit-noChange"),E$1=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$3$1.createTreeWalker(r$3$1,129);function P$1(t,i){if(!a$2$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$2$1?s$2$1.createHTML(i):i}const V$1=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f$1$1;for(let i=0;i"===u[0]?(c=r??f$1$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$2:'"'===u[3]?g$1:p$1$1):c===g$1||c===p$1$1?c=m$2:c===v$2||c===_$1?c=f$1$1:(c=m$2,r=void 0);const x=c===m$2&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1$1?s+n$3$1:d>=0?(o.push(a),s.slice(0,d)+e$4$1+s.slice(d)+h$1$1+x):s+h$1$1+(-2===d?i:x);}return [P$1(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};let N$1 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$1(t,s);if(this.el=N.createElement(f,n),C$1.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$1.nextNode())&&d.length0){r.textContent=i$5$1?i$5$1.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E$1;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$1$1(this,t,i,0),o=!c$2$1(t)||t!==this._$AH&&t!==T$1,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$1(i.insertBefore(l$2$1(),t),t,void 0,s??{});}return h._$AI(t),h}; - // // Get any slots for this cell from the datepicker - const dateSlotContent = this.datepicker.querySelector(`[slot="${dateSlotName}"]`); - const popoverSlotContent = this.datepicker.querySelector(`[slot="${popoverSlotName}"]`); +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const a$1$1=Symbol.for(""),o$3$1=t=>{if(t?.r===a$1$1)return t?._$litStatic$},s$1$1=t=>({_$litStatic$:t,r:a$1$1}),i$4$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$1$1}),l$1$1=new Map,n$2$1=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$new n$1$1("string"==typeof t?t:t+"",void 0,s$4),i$3$1=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1$1(o,t,s$4)},S$2=(s,o)=>{if(e$3$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1$1=e$3$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2$1(e)})(t):t; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const{is:i$2$1,defineProperty:e$2$1,getOwnPropertyDescriptor:r$1$1,getOwnPropertyNames:h$2,getOwnPropertySymbols:o$1$1,getPrototypeOf:n$4}=Object,a$3=globalThis,c$4=a$3.trustedTypes,l$3=c$4?c$4.emptyScript:"",p$3=a$3.reactiveElementPolyfillSupport,d$2=(t,s)=>t,u$5={toAttribute(t,s){switch(s){case Boolean:t=t?l$3: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$2=(t,s)=>!i$2$1(t,s),y$2={attribute:!0,type:String,converter:u$5,reflect:!1,hasChanged:f$2};Symbol.metadata??=Symbol("metadata"),a$3.litPropertyMetadata??=new WeakMap;let b$1 = class b 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=y$2){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$2$1(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$1$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$2}static _$Ei(){if(this.hasOwnProperty(d$2("elementProperties")))return;const t=n$4(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$2("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$2("properties"))){const t=this.properties,s=[...h$2(t),...o$1$1(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$1(s));}else void 0!==s&&i.push(c$1$1(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,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$2(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$5).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),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),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$5;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$2)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;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)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$1.elementStyles=[],b$1.shadowRootOptions={mode:"open"},b$1[d$2("elementProperties")]=new Map,b$1[d$2("finalized")]=new Map,p$3?.({ReactiveElement:b$1}),(a$3.reactiveElementVersions??=[]).push("2.0.4"); - if (popoverSlotContent) { - this.appendChild(popoverSlotContent.cloneNode(true)); - this.auroPopover.removeAttribute('disabled'); - } else { - this.auroPopover.setAttribute('disabled', true); - } - } catch (err) { // eslint-disable-line no-unused-vars - // Error handling goes here - } - } +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */let r$5 = class r extends b$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$1(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T$1}};r$5._$litElement$=!0,r$5["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r$5});const i$1$1=globalThis.litElementPolyfillSupport;i$1$1?.({LitElement:r$5});(globalThis.litElementVersions??=[]).push("4.1.1"); - firstUpdated() { - this.datepicker = this.runtimeUtils.closestElement('auro-datepicker', this) || - this.runtimeUtils.closestElement('[auro-datepicker]', this); +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. - if (this.datepicker) { - this.datepicker.addEventListener('auroDatePicker-newSlotContent', () => { - this.handleSlotContent(); - }); - } +// --------------------------------------------------------------------- - this.calendarMonth = this.runtimeUtils.closestElement('auro-calendar-month', this); - this.auroPopover = this.shadowRoot.querySelector(this.popoverTag._$litStatic$); +/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ - this.auroPopover.boundary = this.calendarMonth; - } +let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils { - updated(properties) { - if (properties.has('dateFrom') || properties.has('dateTo') || properties.has('hoveredDate') || properties.has('day')) { - this.dateChanged(this.dateFrom, this.dateTo, this.hoveredDate, this.day); - } + /* eslint-disable jsdoc/require-param */ - this.setDateSlotName(); - this.handleSlotContent(); + /** + * This will register a new custom element with the browser. + * @param {String} name - The name of the custom element. + * @param {Object} componentClass - The class to register as a custom element. + * @returns {void} + */ + registerComponent(name, componentClass) { + if (!customElements.get(name)) { + customElements.define(name, class extends componentClass {}); + } } - render() { - const buttonClasses = { - 'day': true, - 'currentDate': this.currentDate, - 'selected': this.selected, - 'inRange': this.hovered && this.isInRange(this.day, this.dateFrom, this.dateTo), - 'lastHoveredDate': this.isLastHoveredDate(this.day, this.dateFrom, this.dateTo, this.hoveredDate) && this.datepicker && this.datepicker.hasAttribute('range'), - 'disabled': this.isEnabled(this.day, this.min, this.max, this.disabledDays), - 'rangeDepartDate': this.isDepartDate(this.day, this.dateFrom) && (this.hoveredDate > this.dateFrom || this.dateTo), - 'rangeReturnDate': this.isReturnDate(this.day, this.dateFrom, this.dateTo), - 'sameDateTrip': this.dateFrom === this.dateTo - }; - - let _a, _b; - return u$2` - <${this.popoverTag}> - - - - `; + /** + * Finds and returns the closest HTML Element based on a selector. + * @returns {void} + */ + closestElement( + selector, // selector like in .closest() + base = this, // extra functionality to skip a parent + __Closest = (el, found = el && el.closest(selector)) => + !el || el === document || el === window + ? null // standard .closest() returns null for non-found selectors also + : found + ? found // found a selector INside this element + : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM + ) { + return __Closest(base); } -} + /* eslint-enable jsdoc/require-param */ -if (!customElements.get('auro-calendar-cell')) { - customElements.define('auro-calendar-cell', AuroCalendarCell); -} + /** + * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. + * @param {Object} elem - The element to check. + * @param {String} tagName - The name of the Auro component to check for or add as an attribute. + * @returns {void} + */ + handleComponentTagRename(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); -// See https://git.io/JJ6SJ for "How to document your components using JSDoc" + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } -/* eslint-disable no-magic-numbers, dot-location */ + /** + * Validates if an element is a specific Auro component. + * @param {Object} elem - The element to validate. + * @param {String} tagName - The name of the Auro component to check against. + * @returns {Boolean} - Returns true if the element is the specified Auro component. + */ + elementMatch(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); -class AuroCalendarMonth extends RangeDatepickerCalendar { - static get styles() { - return [ - // ...super.styles, - styleCss$7, - colorCss$7, - tokensCss$6 - ]; + return elemTag === tag || elem.hasAttribute(tag); } +}; - async firstUpdated() { - this.monthsList = [ - '01', - '02', - '03', - '04', - '05', - '06', - '07', - '08', - '09', - '10', - '11', - '12', - ]; - setTimeout(() => { - this.setYears(1930, 2100); - }); +/** + * Custom positioning reference element. + * @see https://floating-ui.com/docs/virtual-elements + */ - await this.updateComplete; +const sides = ['top', 'right', 'bottom', 'left']; +const alignments = ['start', 'end']; +const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []); +const min = Math.min; +const max = Math.max; +const round = Math.round; +const floor = Math.floor; +const createCoords = v => ({ + x: v, + y: v +}); +const oppositeSideMap = { + left: 'right', + right: 'left', + bottom: 'top', + top: 'bottom' +}; +const oppositeAlignmentMap = { + start: 'end', + end: 'start' +}; +function evaluate(value, param) { + return typeof value === 'function' ? value(param) : value; +} +function getSide(placement) { + return placement.split('-')[0]; +} +function getAlignment(placement) { + return placement.split('-')[1]; +} +function getOppositeAxis(axis) { + return axis === 'x' ? 'y' : 'x'; +} +function getAxisLength(axis) { + return axis === 'y' ? 'height' : 'width'; +} +function getSideAxis(placement) { + return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x'; +} +function getAlignmentAxis(placement) { + return getOppositeAxis(getSideAxis(placement)); +} +function getAlignmentSides(placement, rects, rtl) { + if (rtl === void 0) { + rtl = false; + } + const alignment = getAlignment(placement); + const alignmentAxis = getAlignmentAxis(placement); + const length = getAxisLength(alignmentAxis); + let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top'; + if (rects.reference[length] > rects.floating[length]) { + mainAlignmentSide = getOppositePlacement(mainAlignmentSide); + } + return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)]; +} +function getExpandedPlacements(placement) { + const oppositePlacement = getOppositePlacement(placement); + return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)]; +} +function getOppositeAlignmentPlacement(placement) { + return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]); +} +function getSideList(side, isStart, rtl) { + const lr = ['left', 'right']; + const rl = ['right', 'left']; + const tb = ['top', 'bottom']; + const bt = ['bottom', 'top']; + switch (side) { + case 'top': + case 'bottom': + if (rtl) return isStart ? rl : lr; + return isStart ? lr : rl; + case 'left': + case 'right': + return isStart ? tb : bt; + default: + return []; } - - /** - * Determines the current month name based on locale. - * This is a rewrite of the function used in the class RangeDatepickerCalendar and should not be removed from here. - * @private - * @returns {void} - */ - localeChanged() { - const dayNamesOfTheWeek = []; - for (let int = 0; int < 7; int += 1) { - dayNamesOfTheWeek.push(this.locale.localize.day(int, { width: 'narrow' })); +} +function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) { + const alignment = getAlignment(placement); + let list = getSideList(getSide(placement), direction === 'start', rtl); + if (alignment) { + list = list.map(side => side + "-" + alignment); + if (flipAlignment) { + list = list.concat(list.map(getOppositeAlignmentPlacement)); } - const firstDayOfWeek = this.locale.options.weekStartsOn - ? this.locale.options.weekStartsOn - : 0; - const tmp = dayNamesOfTheWeek.slice().splice(0, firstDayOfWeek); - const newDayNamesOfTheWeek = dayNamesOfTheWeek - .slice() - .splice(firstDayOfWeek, dayNamesOfTheWeek.length) - .concat(tmp); - this.dayNamesOfTheWeek = newDayNamesOfTheWeek; } + return list; +} +function getOppositePlacement(placement) { + return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]); +} +function expandPaddingObject(padding) { + return { + top: 0, + right: 0, + bottom: 0, + left: 0, + ...padding + }; +} +function getPaddingObject(padding) { + return typeof padding !== 'number' ? expandPaddingObject(padding) : { + top: padding, + right: padding, + bottom: padding, + left: padding + }; +} +function rectToClientRect(rect) { + const { + x, + y, + width, + height + } = rect; + return { + width, + height, + top: y, + left: x, + right: x + width, + bottom: y + height, + x, + y + }; +} - renderDay(day) { - return x` -
- ${day - ? x` - - - ` - : null} -
- `; +function computeCoordsFromPlacement(_ref, placement, rtl) { + let { + reference, + floating + } = _ref; + const sideAxis = getSideAxis(placement); + const alignmentAxis = getAlignmentAxis(placement); + const alignLength = getAxisLength(alignmentAxis); + const side = getSide(placement); + const isVertical = sideAxis === 'y'; + const commonX = reference.x + reference.width / 2 - floating.width / 2; + const commonY = reference.y + reference.height / 2 - floating.height / 2; + const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2; + let coords; + switch (side) { + case 'top': + coords = { + x: commonX, + y: reference.y - floating.height + }; + break; + case 'bottom': + coords = { + x: commonX, + y: reference.y + reference.height + }; + break; + case 'right': + coords = { + x: reference.x + reference.width, + y: commonY + }; + break; + case 'left': + coords = { + x: reference.x - floating.width, + y: commonY + }; + break; + default: + coords = { + x: reference.x, + y: reference.y + }; + } + switch (getAlignment(placement)) { + case 'start': + coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1); + break; + case 'end': + coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1); + break; } + return coords; +} - /* Disabling linter for render as this code is directly from range-datepicker-calendar */ - /* eslint-disable */ - render() { - var _a, _b; - - return x ` -
-
- ${this.renderPrevButton()} -
-
${this.computeCurrentMonthName(this.month, this.year)}
-
${this.renderYear()}
-
- ${this.renderNextButton()} -
+/** + * Computes the `x` and `y` coordinates that will place the floating element + * next to a given reference element. + * + * This export does not have any `platform` interface logic. You will need to + * write one for the platform you are using Floating UI with. + */ +const computePosition$1 = async (reference, floating, config) => { + const { + placement = 'bottom', + strategy = 'absolute', + middleware = [], + platform + } = config; + const validMiddleware = middleware.filter(Boolean); + const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating)); + let rects = await platform.getElementRects({ + reference, + floating, + strategy + }); + let { + x, + y + } = computeCoordsFromPlacement(rects, placement, rtl); + let statefulPlacement = placement; + let middlewareData = {}; + let resetCount = 0; + for (let i = 0; i < validMiddleware.length; i++) { + const { + name, + fn + } = validMiddleware[i]; + const { + x: nextX, + y: nextY, + data, + reset + } = await fn({ + x, + y, + initialPlacement: placement, + placement: statefulPlacement, + strategy, + middlewareData, + rects, + platform, + elements: { + reference, + floating + } + }); + x = nextX != null ? nextX : x; + y = nextY != null ? nextY : y; + middlewareData = { + ...middlewareData, + [name]: { + ...middlewareData[name], + ...data + } + }; + if (reset && resetCount <= 50) { + resetCount++; + if (typeof reset === 'object') { + if (reset.placement) { + statefulPlacement = reset.placement; + } + if (reset.rects) { + rects = reset.rects === true ? await platform.getElementRects({ + reference, + floating, + strategy + }) : reset.rects; + } + ({ + x, + y + } = computeCoordsFromPlacement(rects, statefulPlacement, rtl)); + } + i = -1; + } + } + return { + x, + y, + placement: statefulPlacement, + strategy, + middlewareData + }; +}; -
-
-
- ${(_a = this.dayNamesOfTheWeek) === null || _a === void 0 ? void 0 : _a.map(dayNameOfWeek => this.renderDayOfWeek(dayNameOfWeek))} -
-
-
- ${(_b = this.daysOfMonth) === null || _b === void 0 ? void 0 : _b.map(week => this.renderWeek(week))} -
-
-
- `; +/** + * Resolves with an object of overflow side offsets that determine how much the + * element is overflowing a given clipping boundary on each side. + * - positive = overflowing the boundary by that number of pixels + * - negative = how many pixels left before it will overflow + * - 0 = lies flush with the boundary + * @see https://floating-ui.com/docs/detectOverflow + */ +async function detectOverflow(state, options) { + var _await$platform$isEle; + if (options === void 0) { + options = {}; } - /* eslint-enable */ + const { + x, + y, + platform, + rects, + elements, + strategy + } = state; + const { + boundary = 'clippingAncestors', + rootBoundary = 'viewport', + elementContext = 'floating', + altBoundary = false, + padding = 0 + } = evaluate(options, state); + const paddingObject = getPaddingObject(padding); + const altContext = elementContext === 'floating' ? 'reference' : 'floating'; + const element = elements[altBoundary ? altContext : elementContext]; + const clippingClientRect = rectToClientRect(await platform.getClippingRect({ + element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))), + boundary, + rootBoundary, + strategy + })); + const rect = elementContext === 'floating' ? { + x, + y, + width: rects.floating.width, + height: rects.floating.height + } : rects.reference; + const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)); + const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || { + x: 1, + y: 1 + } : { + x: 1, + y: 1 + }; + const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({ + elements, + rect, + offsetParent, + strategy + }) : rect); + return { + top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y, + bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y, + left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x, + right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x + }; } -if (!customElements.get('auro-calendar-month')) { - customElements.define('auro-calendar-month', AuroCalendarMonth); +function getPlacementList(alignment, autoAlignment, allowedPlacements) { + const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement); + return allowedPlacementsSortedByAlignment.filter(placement => { + if (alignment) { + return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false); + } + return true; + }); } +/** + * Optimizes the visibility of the floating element by choosing the placement + * that has the most space available automatically, without needing to specify a + * preferred placement. Alternative to `flip`. + * @see https://floating-ui.com/docs/autoPlacement + */ +const autoPlacement$1 = function (options) { + if (options === void 0) { + options = {}; + } + return { + name: 'autoPlacement', + options, + async fn(state) { + var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE; + const { + rects, + middlewareData, + placement, + platform, + elements + } = state; + const { + crossAxis = false, + alignment, + allowedPlacements = placements, + autoAlignment = true, + ...detectOverflowOptions + } = evaluate(options, state); + const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements; + const overflow = await detectOverflow(state, detectOverflowOptions); + const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0; + const currentPlacement = placements$1[currentIndex]; + if (currentPlacement == null) { + return {}; + } + const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))); -/* eslint-disable no-underscore-dangle, no-magic-numbers, no-underscore-dangle, no-void, init-declarations, no-extra-parens, no-unused-expressions */ - -class RangeDatepicker extends r$2 { - constructor() { - super(); - - /** - * Array of disabled days. Format is Unix timestamp. - */ - this.disabledDays = []; - - /** - * Display a select year control. - */ - this.enableYearChange = false; + // Make `computeCoords` start from the right place. + if (placement !== currentPlacement) { + return { + reset: { + placement: placements$1[0] + } + }; + } + const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]]; + const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), { + placement: currentPlacement, + overflows: currentOverflows + }]; + const nextPlacement = placements$1[currentIndex + 1]; - /** - * Force display of only one month. - */ - this.forceNarrow = false; + // There are more placements to check. + if (nextPlacement) { + return { + data: { + index: currentIndex + 1, + overflows: allOverflows + }, + reset: { + placement: nextPlacement + } + }; + } + const placementsSortedByMostSpace = allOverflows.map(d => { + const alignment = getAlignment(d.placement); + return [d.placement, alignment && crossAxis ? + // Check along the mainAxis and main crossAxis side. + d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) : + // Check only the mainAxis. + d.overflows[0], d.overflows]; + }).sort((a, b) => a[1] - b[1]); + const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0, + // Aligned placements should not check their opposite crossAxis + // side. + getAlignment(d[0]) ? 2 : 3).every(v => v <= 0)); + const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0]; + if (resetPlacement !== placement) { + return { + data: { + index: currentIndex + 1, + overflows: allOverflows + }, + reset: { + placement: resetPlacement + } + }; + } + return {}; + } + }; +}; - /** - * Set locale of the calendar. - */ - this.locale = null; +/** + * Optimizes the visibility of the floating element by flipping the `placement` + * in order to keep it in view when the preferred placement(s) will overflow the + * clipping boundary. Alternative to `autoPlacement`. + * @see https://floating-ui.com/docs/flip + */ +const flip$1 = function (options) { + if (options === void 0) { + options = {}; + } + return { + name: 'flip', + options, + async fn(state) { + var _middlewareData$arrow, _middlewareData$flip; + const { + placement, + middlewareData, + rects, + initialPlacement, + platform, + elements + } = state; + const { + mainAxis: checkMainAxis = true, + crossAxis: checkCrossAxis = true, + fallbackPlacements: specifiedFallbackPlacements, + fallbackStrategy = 'bestFit', + fallbackAxisSideDirection = 'none', + flipAlignment = true, + ...detectOverflowOptions + } = evaluate(options, state); + + // If a reset by the arrow was caused due to an alignment offset being + // added, we should skip any logic now since `flip()` has already done its + // work. + // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643 + if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) { + return {}; + } + const side = getSide(placement); + const initialSideAxis = getSideAxis(initialPlacement); + const isBasePlacement = getSide(initialPlacement) === initialPlacement; + const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)); + const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement)); + const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none'; + if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) { + fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl)); + } + const placements = [initialPlacement, ...fallbackPlacements]; + const overflow = await detectOverflow(state, detectOverflowOptions); + const overflows = []; + let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || []; + if (checkMainAxis) { + overflows.push(overflow[side]); + } + if (checkCrossAxis) { + const sides = getAlignmentSides(placement, rects, rtl); + overflows.push(overflow[sides[0]], overflow[sides[1]]); + } + overflowsData = [...overflowsData, { + placement, + overflows + }]; - /** - * Max date. Format is Unix timestamp. - */ - this.max = '8640000000000'; + // One or more sides is overflowing. + if (!overflows.every(side => side <= 0)) { + var _middlewareData$flip2, _overflowsData$filter; + const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1; + const nextPlacement = placements[nextIndex]; + if (nextPlacement) { + // Try next placement and re-run the lifecycle. + return { + data: { + index: nextIndex, + overflows: overflowsData + }, + reset: { + placement: nextPlacement + } + }; + } - /** - * Minimal date. Format is Unix timestamp. - */ - this.min = '-8640000000000'; + // First, find the candidates that fit on the mainAxis side of overflow, + // then find the placement that fits the best on the main crossAxis side. + let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement; + + // Otherwise fallback. + if (!resetPlacement) { + switch (fallbackStrategy) { + case 'bestFit': + { + var _overflowsData$filter2; + const placement = (_overflowsData$filter2 = overflowsData.filter(d => { + if (hasFallbackAxisSideDirection) { + const currentSideAxis = getSideAxis(d.placement); + return currentSideAxis === initialSideAxis || + // Create a bias to the `y` side axis due to horizontal + // reading directions favoring greater width. + currentSideAxis === 'y'; + } + return true; + }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0]; + if (placement) { + resetPlacement = placement; + } + break; + } + case 'initialPlacement': + resetPlacement = initialPlacement; + break; + } + } + if (placement !== resetPlacement) { + return { + reset: { + placement: resetPlacement + } + }; + } + } + return {}; + } + }; +}; - /** - * If true only one date can be selected. - */ - this.noRange = false; - this.dateFrom = null; - this.dateTo = null; - this.hoveredDate = null; - this.monthPlus = null; - this.yearPlus = null; - this.narrow = false; - const now = new Date(); - this.month = getMonth(now) + 1; - this.year = getYear(now); - this.monthChanged(this.month, this.year); +// For type backwards-compatibility, the `OffsetOptions` type was also +// Derivable. + +async function convertValueToCoords(state, options) { + const { + placement, + platform, + elements + } = state; + const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)); + const side = getSide(placement); + const alignment = getAlignment(placement); + const isVertical = getSideAxis(placement) === 'y'; + const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1; + const crossAxisMulti = rtl && isVertical ? -1 : 1; + const rawValue = evaluate(options, state); + + // eslint-disable-next-line prefer-const + let { + mainAxis, + crossAxis, + alignmentAxis + } = typeof rawValue === 'number' ? { + mainAxis: rawValue, + crossAxis: 0, + alignmentAxis: null + } : { + mainAxis: rawValue.mainAxis || 0, + crossAxis: rawValue.crossAxis || 0, + alignmentAxis: rawValue.alignmentAxis + }; + if (alignment && typeof alignmentAxis === 'number') { + crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis; } + return isVertical ? { + x: crossAxis * crossAxisMulti, + y: mainAxis * mainAxisMulti + } : { + x: mainAxis * mainAxisMulti, + y: crossAxis * crossAxisMulti + }; +} - render() { - return this.isNarrow(this.forceNarrow, this.narrow) - ? this.renderNarrow() - : this.renderNormal(); +/** + * Modifies the placement by translating the floating element along the + * specified axes. + * A number (shorthand for `mainAxis` or distance), or an axes configuration + * object may be passed. + * @see https://floating-ui.com/docs/offset + */ +const offset$1 = function (options) { + if (options === void 0) { + options = 0; } + return { + name: 'offset', + options, + async fn(state) { + var _middlewareData$offse, _middlewareData$arrow; + const { + x, + y, + placement, + middlewareData + } = state; + const diffCoords = await convertValueToCoords(state, options); + + // If the placement is the same and the arrow caused an alignment offset + // then we don't need to change the positioning coordinates. + if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) { + return {}; + } + return { + x: x + diffCoords.x, + y: y + diffCoords.y, + data: { + ...diffCoords, + placement + } + }; + } + }; +}; - renderNormal() { - return x` -
- - - - -
- `; +function hasWindow() { + return typeof window !== 'undefined'; +} +function getNodeName(node) { + if (isNode(node)) { + return (node.nodeName || '').toLowerCase(); + } + // Mocked nodes in testing environments may not be instances of Node. By + // returning `#document` an infinite loop won't occur. + // https://github.com/floating-ui/floating-ui/issues/2317 + return '#document'; +} +function getWindow(node) { + var _node$ownerDocument; + return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window; +} +function getDocumentElement(node) { + var _ref; + return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement; +} +function isNode(value) { + if (!hasWindow()) { + return false; } - - renderNarrow() { - return x` - - - `; + return value instanceof Node || value instanceof getWindow(value).Node; +} +function isElement(value) { + if (!hasWindow()) { + return false; + } + return value instanceof Element || value instanceof getWindow(value).Element; +} +function isHTMLElement(value) { + if (!hasWindow()) { + return false; } - - firstUpdated() { - const mql = window.matchMedia('(max-width: 650px)'); - mql.addListener((mqlEvent) => this.queryMatchesChanged(mqlEvent)); - this.queryMatchesChanged(mql); + return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement; +} +function isShadowRoot(value) { + if (!hasWindow() || typeof ShadowRoot === 'undefined') { + return false; } - - updated(properties) { - if (properties.has('month') || properties.has('year')) { - this.monthChanged(this.month, this.year); - } - if (properties.has('noRange')) { - this.noRangeChanged(this.noRange, properties.get('noRange')); - } - if (properties.has('narrow')) { - this.dispatchEvent(new CustomEvent('narrow-changed', { detail: { value: this.narrow } })); + return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot; +} +function isOverflowElement(element) { + const { + overflow, + overflowX, + overflowY, + display + } = getComputedStyle(element); + return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display); +} +function isTableElement(element) { + return ['table', 'td', 'th'].includes(getNodeName(element)); +} +function isTopLayer(element) { + return [':popover-open', ':modal'].some(selector => { + try { + return element.matches(selector); + } catch (e) { + return false; } - if (properties.has('locale')) { - this.localeChanged(); + }); +} +function isContainingBlock(elementOrCss) { + const webkit = isWebKit(); + const css = isElement(elementOrCss) ? getComputedStyle(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)); +} +function getContainingBlock(element) { + let currentNode = getParentNode(element); + while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) { + if (isContainingBlock(currentNode)) { + return currentNode; + } else if (isTopLayer(currentNode)) { + return null; } + currentNode = getParentNode(currentNode); } - - isNarrow(forceNarrow, narrow) { - return forceNarrow || narrow; + return null; +} +function isWebKit() { + if (typeof CSS === 'undefined' || !CSS.supports) return false; + return CSS.supports('-webkit-backdrop-filter', 'none'); +} +function isLastTraversableNode(node) { + return ['html', 'body', '#document'].includes(getNodeName(node)); +} +function getComputedStyle(element) { + return getWindow(element).getComputedStyle(element); +} +function getNodeScroll(element) { + if (isElement(element)) { + return { + scrollLeft: element.scrollLeft, + scrollTop: element.scrollTop + }; } - - queryMatchesChanged(mql) { - this.narrow = mql.matches; - this.requestUpdate(); + return { + scrollLeft: element.scrollX, + scrollTop: element.scrollY + }; +} +function getParentNode(node) { + if (getNodeName(node) === 'html') { + return node; } - - handlePrevMonth() { - let _a; - if (!this.enableYearChange) { - const calendar = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('wc-range-datepicker-calendar[next]'); - calendar === null || calendar === void 0 ? void 0 : calendar.handlePrevMonth(); - } + const result = + // Step into the shadow DOM of the parent of a slotted node. + node.assignedSlot || + // DOM Element detected. + node.parentNode || + // ShadowRoot detected. + isShadowRoot(node) && node.host || + // Fallback. + getDocumentElement(node); + return isShadowRoot(result) ? result.host : result; +} +function getNearestOverflowAncestor(node) { + const parentNode = getParentNode(node); + if (isLastTraversableNode(parentNode)) { + return node.ownerDocument ? node.ownerDocument.body : node.body; } - - handleNextMonth() { - let _a; - if (!this.enableYearChange) { - const calendar = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('wc-range-datepicker-calendar[prev]'); - calendar === null || calendar === void 0 ? void 0 : calendar.handleNextMonth(); - } + if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) { + return parentNode; } - - hoveredDateChanged(event) { - this.hoveredDate = event.detail.value; + return getNearestOverflowAncestor(parentNode); +} +function getOverflowAncestors(node, list, traverseIframes) { + var _node$ownerDocument2; + if (list === void 0) { + list = []; } - - monthChanged(month, year) { - if (year && month) { - this.monthPlus = (month % 12) + 1; - if (this.monthPlus === 1) { - this.yearPlus = year + 1; - } else { - this.yearPlus = year; - } - } + if (traverseIframes === void 0) { + traverseIframes = true; + } + const scrollableAncestor = getNearestOverflowAncestor(node); + const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body); + const win = getWindow(scrollableAncestor); + if (isBody) { + const frameElement = getFrameElement(win); + return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []); } + return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes)); +} +function getFrameElement(win) { + return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null; +} - noRangeChanged(isNoRange, wasNoRange) { - if (!wasNoRange && isNoRange) { - this.dateTo = null; - this.hoveredDate = null; - } +function getCssDimensions(element) { + const css = getComputedStyle(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; + let height = parseFloat(css.height) || 0; + const hasOffset = isHTMLElement(element); + const offsetWidth = hasOffset ? element.offsetWidth : width; + const offsetHeight = hasOffset ? element.offsetHeight : height; + const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight; + if (shouldFallback) { + width = offsetWidth; + height = offsetHeight; } + return { + width, + height, + $: shouldFallback + }; +} - localeChanged() { - if (!this.month) { - this.month = getMonth(new Date()); - } - if (!this.year) { - this.year = getYear(new Date()); - } +function unwrapElement(element) { + return !isElement(element) ? element.contextElement : element; +} + +function getScale(element) { + const domElement = unwrapElement(element); + if (!isHTMLElement(domElement)) { + return createCoords(1); } + const rect = domElement.getBoundingClientRect(); + const { + width, + height, + $ + } = getCssDimensions(domElement); + let x = ($ ? round(rect.width) : rect.width) / width; + let y = ($ ? round(rect.height) : rect.height) / height; - dateToChanged(event) { - this.dateTo = event.detail.value; - this.dispatchEvent(new CustomEvent('date-to-changed', { detail: { value: event.detail.value } })); + // 0, NaN, or Infinity should always fallback to 1. + + if (!x || !Number.isFinite(x)) { + x = 1; + } + if (!y || !Number.isFinite(y)) { + y = 1; } + return { + x, + y + }; +} - dateFromChanged(event) { - this.dateFrom = event.detail.value; - this.dispatchEvent(new CustomEvent('date-from-changed', { - detail: { value: event.detail.value }, - })); +const noOffsets = /*#__PURE__*/createCoords(0); +function getVisualOffsets(element) { + const win = getWindow(element); + if (!isWebKit() || !win.visualViewport) { + return noOffsets; } + return { + x: win.visualViewport.offsetLeft, + y: win.visualViewport.offsetTop + }; } -RangeDatepicker.styles = i$5` - :host { - display: block; - position: relative; +function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) { + if (isFixed === void 0) { + isFixed = false; } - - #container { - display: flex; - flex-direction: row; + if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) { + return false; } + return isFixed; +} - #firstDatePicker { - margin-right: 16px; +function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) { + if (includeScale === void 0) { + includeScale = false; } - `; -__decorate([n({ type: Array })], RangeDatepicker.prototype, "disabledDays", void 0); -__decorate([n({ type: Boolean })], RangeDatepicker.prototype, "enableYearChange", void 0); -__decorate([n({ type: Boolean })], RangeDatepicker.prototype, "forceNarrow", void 0); -__decorate([n({ type: Object })], RangeDatepicker.prototype, "locale", void 0); -__decorate([n({ type: String })], RangeDatepicker.prototype, "max", void 0); -__decorate([n({ type: String })], RangeDatepicker.prototype, "min", void 0); -__decorate([n({ type: Number })], RangeDatepicker.prototype, "month", void 0); -__decorate([n({ type: Boolean })], RangeDatepicker.prototype, "noRange", void 0); -__decorate([n({ type: Number })], RangeDatepicker.prototype, "year", void 0); -__decorate([n({ type: String })], RangeDatepicker.prototype, "dateFrom", void 0); -__decorate([n({ type: String })], RangeDatepicker.prototype, "dateTo", void 0); -__decorate([n({ type: String })], RangeDatepicker.prototype, "hoveredDate", void 0); -__decorate([n({ type: Number })], RangeDatepicker.prototype, "monthPlus", void 0); -__decorate([n({ type: Number })], RangeDatepicker.prototype, "yearPlus", void 0); -__decorate([n({ type: Boolean })], RangeDatepicker.prototype, "narrow", void 0); - -var chevronLeft = {"role":"img","color":"currentColor","title":"","desc":"Directional indicator; left.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"chevron-left","category":"interface","svg":"Directional indicator; left."}; + if (isFixedStrategy === void 0) { + isFixedStrategy = false; + } + const clientRect = element.getBoundingClientRect(); + const domElement = unwrapElement(element); + let scale = createCoords(1); + if (includeScale) { + if (offsetParent) { + if (isElement(offsetParent)) { + scale = getScale(offsetParent); + } + } else { + scale = getScale(element); + } + } + const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0); + let x = (clientRect.left + visualOffsets.x) / scale.x; + let y = (clientRect.top + visualOffsets.y) / scale.y; + let width = clientRect.width / scale.x; + let height = clientRect.height / scale.y; + if (domElement) { + const win = getWindow(domElement); + const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent; + let currentWin = win; + let currentIFrame = getFrameElement(currentWin); + while (currentIFrame && offsetParent && offsetWin !== currentWin) { + const iframeScale = getScale(currentIFrame); + const iframeRect = currentIFrame.getBoundingClientRect(); + const css = getComputedStyle(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; + y *= iframeScale.y; + width *= iframeScale.x; + height *= iframeScale.y; + x += left; + y += top; + currentWin = getWindow(currentIFrame); + currentIFrame = getFrameElement(currentWin); + } + } + return rectToClientRect({ + width, + height, + x, + y + }); +} -var chevronRight = {"role":"img","color":"currentColor","title":"","desc":"Directional indicator; right.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"chevron-right","category":"interface","svg":"Directional indicator; right."}; +// If has a CSS width greater than the viewport, then this will be +// incorrect for RTL. +function getWindowScrollBarX(element, rect) { + const leftScroll = getNodeScroll(element).scrollLeft; + if (!rect) { + return getBoundingClientRect(getDocumentElement(element)).left + leftScroll; + } + return rect.left + leftScroll; +} -class CalendarUtilities { - constructor() { - this.util = new AuroDatepickerUtilities(); +function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) { + if (ignoreScrollbarX === void 0) { + ignoreScrollbarX = false; } + const htmlRect = documentElement.getBoundingClientRect(); + const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 : + // RTL scrollbar. + getWindowScrollBarX(documentElement, htmlRect)); + const y = htmlRect.top + scroll.scrollTop; + return { + x, + y + }; +} +function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) { + let { + elements, + rect, + offsetParent, + strategy + } = _ref; + const isFixed = strategy === 'fixed'; + const documentElement = getDocumentElement(offsetParent); + const topLayer = elements ? isTopLayer(elements.floating) : false; + if (offsetParent === documentElement || topLayer && isFixed) { + return rect; + } + let scroll = { + scrollLeft: 0, + scrollTop: 0 + }; + let scale = createCoords(1); + const offsets = createCoords(0); + const isOffsetParentAnElement = isHTMLElement(offsetParent); + if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { + if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { + scroll = getNodeScroll(offsetParent); + } + if (isHTMLElement(offsetParent)) { + const offsetRect = getBoundingClientRect(offsetParent); + scale = getScale(offsetParent); + offsets.x = offsetRect.x + offsetParent.clientLeft; + offsets.y = offsetRect.y + offsetParent.clientTop; + } + } + const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0); + return { + width: rect.width * scale.x, + height: rect.height * scale.y, + x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x, + y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y + }; +} - /** - * Scroll the calendar month list to a given valid date if in mobile view. - * @param {Object} elem - The calendar element. - * @param {String} date - The date to scroll into view. - * @returns {void} - */ - scrollMonthIntoView(elem, date) { - const mobileLayout = window.innerWidth < elem.mobileBreakpoint; +function getClientRects(element) { + return Array.from(element.getClientRects()); +} - if (this.util.validDateStr(date) && mobileLayout) { - const month = new Date(date).getMonth() + 1; - const year = new Date(date).getFullYear(); - const selector = `#month-${month}-${year}`; - const monthElem = elem.shadowRoot.querySelector(selector); +// Gets the entire size of the scrollable document area, even extending outside +// of the `` and `` rect bounds if horizontally scrollable. +function getDocumentRect(element) { + const html = getDocumentElement(element); + const scroll = getNodeScroll(element); + const body = element.ownerDocument.body; + const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth); + 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') { + x += max(html.clientWidth, body.clientWidth) - width; + } + return { + width, + height, + x, + y + }; +} - monthElem.scrollIntoView(); +function getViewportRect(element, strategy) { + const win = getWindow(element); + const html = getDocumentElement(element); + const visualViewport = win.visualViewport; + let width = html.clientWidth; + let height = html.clientHeight; + let x = 0; + let y = 0; + if (visualViewport) { + width = visualViewport.width; + height = visualViewport.height; + const visualViewportBased = isWebKit(); + if (!visualViewportBased || visualViewportBased && strategy === 'fixed') { + x = visualViewport.offsetLeft; + y = visualViewport.offsetTop; } } + return { + width, + height, + x, + y + }; +} - /** - * Sends an event requesting the dropdown bib be closed. - * @private - * @returns {void} - */ - requestDismiss() { - this.dispatchEvent(new CustomEvent('auroCalendar-dismissRequest', { - bubbles: true, - cancelable: false, - composed: true, - })); +// Returns the inner client rect, subtracting scrollbars if present. +function getInnerBoundingClientRect(element, strategy) { + const clientRect = getBoundingClientRect(element, true, strategy === 'fixed'); + const top = clientRect.top + element.clientTop; + const left = clientRect.left + element.clientLeft; + const scale = isHTMLElement(element) ? getScale(element) : createCoords(1); + const width = element.clientWidth * scale.x; + const height = element.clientHeight * scale.y; + const x = left * scale.x; + const y = top * scale.y; + return { + width, + height, + x, + y + }; +} +function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) { + let rect; + if (clippingAncestor === 'viewport') { + rect = getViewportRect(element, strategy); + } else if (clippingAncestor === 'document') { + rect = getDocumentRect(getDocumentElement(element)); + } else if (isElement(clippingAncestor)) { + rect = getInnerBoundingClientRect(clippingAncestor, strategy); + } else { + const visualOffsets = getVisualOffsets(element); + rect = { + x: clippingAncestor.x - visualOffsets.x, + y: clippingAncestor.y - visualOffsets.y, + width: clippingAncestor.width, + height: clippingAncestor.height + }; } + return rectToClientRect(rect); +} +function hasFixedPositionAncestor(element, stopNode) { + const parentNode = getParentNode(element); + if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { + return false; + } + return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); +} - /** - * Handles the visibility of the previous and next month buttons. - * @private - * @param {Object} elem - The auro-calendar element. - * @returns {void} - */ - assessNavigationButtonVisibility(elem) { - - /** - * Hide/show the previous month button. - */ - - // 1. Compare the first rendered month to the earliest renderable month to determine if the previous month button should be hidden or shown - if (!elem.hasAttribute('calendarStartDate') && !elem.hasAttribute('minDate')) { - elem.showPrevMonthBtn = true; - } else if (this.util.convertDateToFirstOfMonth(new Date(elem.centralDate)) <= elem.firstMonthRenderable) { - elem.showPrevMonthBtn = false; +// A "clipping ancestor" is an `overflow` element with the characteristic of +// clipping (or hiding) child elements. This returns all clipping ancestors +// of the given element up the tree. +function getClippingElementAncestors(element, cache) { + const cachedResult = cache.get(element); + if (cachedResult) { + return cachedResult; + } + let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body'); + let currentContainingBlockComputedStyle = null; + const elementIsFixed = getComputedStyle(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 currentNodeIsContaining = isContainingBlock(currentNode); + if (!currentNodeIsContaining && computedStyle.position === 'fixed') { + currentContainingBlockComputedStyle = null; + } + const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode); + if (shouldDropCurrentNode) { + // Drop non-containing blocks. + result = result.filter(ancestor => ancestor !== currentNode); } else { - elem.showPrevMonthBtn = true; + // Record last containing block for next iteration. + currentContainingBlockComputedStyle = computedStyle; } + currentNode = getParentNode(currentNode); + } + cache.set(element, result); + return result; +} - /** - * Hide/show the next month button. - */ +// Gets the maximum area that the element is visible in due to any number of +// clipping ancestors. +function getClippingRect(_ref) { + let { + element, + boundary, + rootBoundary, + strategy + } = _ref; + const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary); + const clippingAncestors = [...elementClippingAncestors, rootBoundary]; + const firstClippingAncestor = clippingAncestors[0]; + const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => { + const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy); + accRect.top = max(rect.top, accRect.top); + accRect.right = min(rect.right, accRect.right); + accRect.bottom = min(rect.bottom, accRect.bottom); + accRect.left = max(rect.left, accRect.left); + return accRect; + }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy)); + return { + width: clippingRect.right - clippingRect.left, + height: clippingRect.bottom - clippingRect.top, + x: clippingRect.left, + y: clippingRect.top + }; +} - // 1. Determine the last month that can possibly be rendered into the DOM. - let lastRenderableMonth = undefined; // eslint-disable-line no-undef-init +function getDimensions(element) { + const { + width, + height + } = getCssDimensions(element); + return { + width, + height + }; +} - if (elem.hasAttribute('calendarEndDate')) { - lastRenderableMonth = new Date(elem.getAttribute('calendarEndDate')); - } else if (elem.hasAttribute('maxDate')) { - lastRenderableMonth = new Date(elem.getAttribute('maxDate')); +function getRectRelativeToOffsetParent(element, offsetParent, strategy) { + const isOffsetParentAnElement = isHTMLElement(offsetParent); + const documentElement = getDocumentElement(offsetParent); + const isFixed = strategy === 'fixed'; + const rect = getBoundingClientRect(element, true, isFixed, offsetParent); + let scroll = { + scrollLeft: 0, + scrollTop: 0 + }; + const offsets = createCoords(0); + if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { + if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { + scroll = getNodeScroll(offsetParent); } - - if (lastRenderableMonth) { - lastRenderableMonth = this.util.convertDateToFirstOfMonth(lastRenderableMonth); + if (isOffsetParentAnElement) { + const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent); + offsets.x = offsetRect.x + offsetParent.clientLeft; + offsets.y = offsetRect.y + offsetParent.clientTop; + } else if (documentElement) { + // If the scrollbar appears on the left (e.g. RTL systems). Use + // Firefox with layout.scrollbar.side = 3 in about:config to test this. + offsets.x = getWindowScrollBarX(documentElement); } + } + const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0); + const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x; + const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y; + return { + x, + y, + width: rect.width, + height: rect.height + }; +} - // 2. Determine the last month currently rendered into the DOM. - let lastRenderedMonth = new Date(elem.centralDate); +function isStaticPositioned(element) { + return getComputedStyle(element).position === 'static'; +} - if (!elem.noRange) { - lastRenderedMonth = new Date(lastRenderedMonth.setMonth(lastRenderedMonth.getMonth() + 1)); - } +function getTrueOffsetParent(element, polyfill) { + if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') { + return null; + } + if (polyfill) { + return polyfill(element); + } + let rawOffsetParent = element.offsetParent; - lastRenderedMonth = this.util.convertDateToFirstOfMonth(lastRenderedMonth); + // Firefox returns the element as the offsetParent if it's non-static, + // while Chrome and Safari return the element. The element must + // be used to perform the correct calculations even if the element is + // non-static. + if (getDocumentElement(element) === rawOffsetParent) { + rawOffsetParent = rawOffsetParent.ownerDocument.body; + } + return rawOffsetParent; +} - // 3. Compare the two and choose to show or hide the next month button - if (lastRenderedMonth >= lastRenderableMonth) { - elem.showNextMonthBtn = false; - } else { - elem.showNextMonthBtn = true; +// Gets the closest ancestor positioned element. Handles some edge cases, +// such as table ancestors and cross browser bugs. +function getOffsetParent(element, polyfill) { + const win = getWindow(element); + if (isTopLayer(element)) { + return win; + } + if (!isHTMLElement(element)) { + let svgOffsetParent = getParentNode(element); + while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) { + if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) { + return svgOffsetParent; + } + svgOffsetParent = getParentNode(svgOffsetParent); } - - // Request an update to the component needed to actually show/hide the buttons in the DOM - elem.requestUpdate(); + return win; + } + let offsetParent = getTrueOffsetParent(element, polyfill); + while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) { + offsetParent = getTrueOffsetParent(offsetParent, polyfill); } + if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) { + return win; + } + return offsetParent || getContainingBlock(element) || win; +} - /** - * Handles the change of the centralDate property. - * @param {Object} elem - The auro-calendar element. - * @private - * @returns {void} - */ - centralDateChanged(elem) { - this.assessNavigationButtonVisibility(elem); +const getElementRects = async function (data) { + const getOffsetParentFn = this.getOffsetParent || getOffsetParent; + const getDimensionsFn = this.getDimensions; + const floatingDimensions = await getDimensionsFn(data.floating); + return { + reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy), + floating: { + x: 0, + y: 0, + width: floatingDimensions.width, + height: floatingDimensions.height + } + }; +}; - elem.dispatchEvent(new CustomEvent('auroCalendar-centralDateChanged', { - detail: { - bubbles: true, - cancelable: false, - composed: true, - date: elem.centralDate - } - })); - } +function isRTL(element) { + return getComputedStyle(element).direction === 'rtl'; +} - /** - * Updates the month and year when the user navigates to a different calendar month. - * @param {Object} elem - The auro-calendar element. - * @param {String} direction - The direction the user is navigating. - * @returns {void} - */ - handleMonthChange(elem, direction) { - // Determine if the month number is going to be incremented or decremented - let increment = 0; +const platform = { + convertOffsetParentRelativeRectToViewportRelativeRect, + getDocumentElement, + getClippingRect, + getOffsetParent, + getElementRects, + getClientRects, + getDimensions, + getScale, + isElement, + isRTL +}; - if (direction === 'next') { - increment = 1; - } else if (direction === 'prev') { - increment = -1; // eslint-disable-line no-magic-numbers +// https://samthor.au/2021/observing-dom/ +function observeMove(element, onMove) { + let io = null; + let timeoutId; + const root = getDocumentElement(element); + function cleanup() { + var _io; + clearTimeout(timeoutId); + (_io = io) == null || _io.disconnect(); + io = null; + } + function refresh(skip, threshold) { + if (skip === void 0) { + skip = false; + } + if (threshold === void 0) { + threshold = 1; + } + cleanup(); + const { + left, + top, + width, + height + } = element.getBoundingClientRect(); + if (!skip) { + onMove(); + } + if (!width || !height) { + return; + } + const insetTop = floor(top); + const insetRight = floor(root.clientWidth - (left + width)); + const insetBottom = floor(root.clientHeight - (top + height)); + const insetLeft = floor(left); + const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px"; + const options = { + rootMargin, + threshold: max(0, min(1, threshold)) || 1 + }; + let isFirstUpdate = true; + function handleObserve(entries) { + const ratio = entries[0].intersectionRatio; + if (ratio !== threshold) { + if (!isFirstUpdate) { + return refresh(); + } + if (!ratio) { + // If the reference is clipped, the ratio is 0. Throttle the refresh + // to prevent an infinite loop of updates. + timeoutId = setTimeout(() => { + refresh(false, 1e-7); + }, 1000); + } else { + refresh(false, ratio); + } + } + isFirstUpdate = false; } - // calculate the new central date - const newCentralDate = new Date(elem.centralDate).setMonth(new Date(elem.centralDate).getMonth() + increment); - - // set the new central date to the first day of the month - elem.centralDate = this.util.convertDateToFirstOfMonth(newCentralDate); + // Older browsers don't support a `document` as the root and will throw an + // error. + try { + io = new IntersectionObserver(handleObserve, { + ...options, + // Handle