@aurodesignsystem/auro-devops-component 1.0.0-rc-1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +60 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +189 -0
- package/custom-elements.json +1628 -0
- package/demo/api.html +56 -0
- package/demo/api.js +1 -0
- package/demo/api.md +787 -0
- package/demo/api.min.js +3 -0
- package/demo/auro-slideshow.min.js +3327 -0
- package/demo/index.html +59 -0
- package/demo/index.js +6 -0
- package/demo/index.md +197 -0
- package/demo/index.min.js +6 -0
- package/dist/auro-slideshow-rYdnH7og.js +127 -0
- package/dist/index.d.ts +134 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +91 -0
|
@@ -0,0 +1,3327 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2019 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
+
*/
|
|
6
|
+
const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),o$5=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$3)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$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$3("string"==typeof t?t:t+"",void 0,s$3),i$5=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===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$3(o,t,s$3)},S$2=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$3=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @license
|
|
10
|
+
* Copyright 2017 Google LLC
|
|
11
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
12
|
+
*/const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:h$2,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$2=globalThis,c$2=a$2.trustedTypes,l$3=c$2?c$2.emptyScript:"",p$3=a$2.reactiveElementPolyfillSupport,d$2=(t,s)=>t,u$4={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$3=(t,s)=>!i$4(t,s),b$1={attribute:true,type:String,converter:u$4,reflect:false,useDefault:false,hasChanged:f$3};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;let y$3 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b$1){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$3(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$2(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b$1}static _$Ei(){if(this.hasOwnProperty(d$2("elementProperties")))return;const t=n$2(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=true,this._$Ei(),this.hasOwnProperty(d$2("properties"))){const t=this.properties,s=[...r$1(t),...o$4(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$3(s));}else void 0!==s&&i.push(c$3(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$2(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$4).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$4;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f$3)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}};y$3.elementStyles=[],y$3.shadowRootOptions={mode:"open"},y$3[d$2("elementProperties")]=new Map,y$3[d$2("finalized")]=new Map,p$3?.({ReactiveElement:y$3}),(a$2.reactiveElementVersions??=[]).push("2.1.1");
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* @license
|
|
16
|
+
* Copyright 2017 Google LLC
|
|
17
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
18
|
+
*/
|
|
19
|
+
const t$1=globalThis,i$3=t$1.trustedTypes,s$2=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$3="?"+h$1,n$1=`<${o$3}>`,r=document,l$2=()=>r.createComment(""),c$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$1=Array.isArray,u$3=t=>a$1(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$2=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_=/>/g,m$2=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$2=/'/g,g$2=/"/g,$=/^(?:script|style|textarea|title)$/i,y$2=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$2=y$2(1),T$1=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r.createTreeWalker(r,129);function P(t,i){if(!a$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$2?s$2.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$2;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$2?"!--"===u[1]?c=v$1:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$2):void 0!==u[3]&&(c=m$2):c===m$2?">"===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$2:p$2):c===g$2||c===p$2?c=m$2:c===v$1||c===_?c=f$2:(c=m$2,r=void 0);const x=c===m$2&&t[i+1].startsWith("/>")?" ":"";l+=c===f$2?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),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(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.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$2)){const i=v[a++],s=r.getAttribute(t).split(h$1),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H$1:"?"===e[1]?I:"@"===e[1]?L:k$2}),r.removeAttribute(t);}else t.startsWith(h$1)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h$1),s=t.length-1;if(s>0){r.textContent=i$3?i$3.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$2()),C$1.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$2());}}}else if(8===r.nodeType)if(r.data===o$3)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$1,t+1));)d.push({type:7,index:c}),t+=h$1.length-1;}c++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}};function S$1(t,i,s=t,e){if(i===T$1)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$1(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S$1(t,h._$AS(t,i.values),h,e)),i}let M$1 = class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r).importNode(i,true);C$1.currentNode=e;let h=C$1.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R$1(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$2(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$1.nextNode(),o++);}return C$1.currentNode=r,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}};let R$1 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$1(this,t,i),c$1(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T$1&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$3(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c$1(this._$AH)?this._$AA.nextSibling.data=t:this.T(r.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N$1.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$1(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$1.get(t.strings);return void 0===i&&A$1.set(t.strings,i=new N$1(t)),i}k(t){a$1(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$2()),this.O(l$2()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let k$2 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==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=false;if(void 0===h)t=S$1(this,t,i,0),o=!c$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<h.length-1;n++)r=S$1(this,e[s+n],i,n),r===T$1&&(r=this._$AH[n]),o||=!c$1(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$1 = class H extends k$2{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}};class I extends k$2{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k$2{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$1(this,t,i,0)??E)===T$1)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}let z$2 = class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S$1(this,t);}};const j=t$1.litHtmlPolyfillSupport;j?.(N$1,R$1),(t$1.litHtmlVersions??=[]).push("3.3.1");const B$1=(t,i,s)=>{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(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* @license
|
|
23
|
+
* Copyright 2017 Google LLC
|
|
24
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
25
|
+
*/const s$1=globalThis;let i$2 = class i extends y$3{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 r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$1(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T$1}};i$2._$litElement$=true,i$2["finalized"]=true,s$1.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$1.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$1.litElementVersions??=[]).push("4.2.1");
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* @license
|
|
29
|
+
* Copyright 2020 Google LLC
|
|
30
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
31
|
+
*/
|
|
32
|
+
const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$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}),l$1=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l$1.get(t))&&(n.raw=n,l$1.set(t,r=n)),e=u;}return t(r,...e)},u$2=n(x$2);
|
|
33
|
+
|
|
34
|
+
function isNumber(subject) {
|
|
35
|
+
return typeof subject === 'number';
|
|
36
|
+
}
|
|
37
|
+
function isString(subject) {
|
|
38
|
+
return typeof subject === 'string';
|
|
39
|
+
}
|
|
40
|
+
function isBoolean(subject) {
|
|
41
|
+
return typeof subject === 'boolean';
|
|
42
|
+
}
|
|
43
|
+
function isObject(subject) {
|
|
44
|
+
return Object.prototype.toString.call(subject) === '[object Object]';
|
|
45
|
+
}
|
|
46
|
+
function mathAbs(n) {
|
|
47
|
+
return Math.abs(n);
|
|
48
|
+
}
|
|
49
|
+
function mathSign(n) {
|
|
50
|
+
return Math.sign(n);
|
|
51
|
+
}
|
|
52
|
+
function deltaAbs(valueB, valueA) {
|
|
53
|
+
return mathAbs(valueB - valueA);
|
|
54
|
+
}
|
|
55
|
+
function factorAbs(valueB, valueA) {
|
|
56
|
+
if (valueB === 0 || valueA === 0) return 0;
|
|
57
|
+
if (mathAbs(valueB) <= mathAbs(valueA)) return 0;
|
|
58
|
+
const diff = deltaAbs(mathAbs(valueB), mathAbs(valueA));
|
|
59
|
+
return mathAbs(diff / valueB);
|
|
60
|
+
}
|
|
61
|
+
function roundToTwoDecimals(num) {
|
|
62
|
+
return Math.round(num * 100) / 100;
|
|
63
|
+
}
|
|
64
|
+
function arrayKeys(array) {
|
|
65
|
+
return objectKeys(array).map(Number);
|
|
66
|
+
}
|
|
67
|
+
function arrayLast(array) {
|
|
68
|
+
return array[arrayLastIndex(array)];
|
|
69
|
+
}
|
|
70
|
+
function arrayLastIndex(array) {
|
|
71
|
+
return Math.max(0, array.length - 1);
|
|
72
|
+
}
|
|
73
|
+
function arrayIsLastIndex(array, index) {
|
|
74
|
+
return index === arrayLastIndex(array);
|
|
75
|
+
}
|
|
76
|
+
function arrayFromNumber(n, startAt = 0) {
|
|
77
|
+
return Array.from(Array(n), (_, i) => startAt + i);
|
|
78
|
+
}
|
|
79
|
+
function objectKeys(object) {
|
|
80
|
+
return Object.keys(object);
|
|
81
|
+
}
|
|
82
|
+
function objectsMergeDeep(objectA, objectB) {
|
|
83
|
+
return [objectA, objectB].reduce((mergedObjects, currentObject) => {
|
|
84
|
+
objectKeys(currentObject).forEach(key => {
|
|
85
|
+
const valueA = mergedObjects[key];
|
|
86
|
+
const valueB = currentObject[key];
|
|
87
|
+
const areObjects = isObject(valueA) && isObject(valueB);
|
|
88
|
+
mergedObjects[key] = areObjects ? objectsMergeDeep(valueA, valueB) : valueB;
|
|
89
|
+
});
|
|
90
|
+
return mergedObjects;
|
|
91
|
+
}, {});
|
|
92
|
+
}
|
|
93
|
+
function isMouseEvent(evt, ownerWindow) {
|
|
94
|
+
return typeof ownerWindow.MouseEvent !== 'undefined' && evt instanceof ownerWindow.MouseEvent;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
function Alignment(align, viewSize) {
|
|
98
|
+
const predefined = {
|
|
99
|
+
start,
|
|
100
|
+
center,
|
|
101
|
+
end
|
|
102
|
+
};
|
|
103
|
+
function start() {
|
|
104
|
+
return 0;
|
|
105
|
+
}
|
|
106
|
+
function center(n) {
|
|
107
|
+
return end(n) / 2;
|
|
108
|
+
}
|
|
109
|
+
function end(n) {
|
|
110
|
+
return viewSize - n;
|
|
111
|
+
}
|
|
112
|
+
function measure(n, index) {
|
|
113
|
+
if (isString(align)) return predefined[align](n);
|
|
114
|
+
return align(viewSize, n, index);
|
|
115
|
+
}
|
|
116
|
+
const self = {
|
|
117
|
+
measure
|
|
118
|
+
};
|
|
119
|
+
return self;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
function EventStore() {
|
|
123
|
+
let listeners = [];
|
|
124
|
+
function add(node, type, handler, options = {
|
|
125
|
+
passive: true
|
|
126
|
+
}) {
|
|
127
|
+
let removeListener;
|
|
128
|
+
if ('addEventListener' in node) {
|
|
129
|
+
node.addEventListener(type, handler, options);
|
|
130
|
+
removeListener = () => node.removeEventListener(type, handler, options);
|
|
131
|
+
} else {
|
|
132
|
+
const legacyMediaQueryList = node;
|
|
133
|
+
legacyMediaQueryList.addListener(handler);
|
|
134
|
+
removeListener = () => legacyMediaQueryList.removeListener(handler);
|
|
135
|
+
}
|
|
136
|
+
listeners.push(removeListener);
|
|
137
|
+
return self;
|
|
138
|
+
}
|
|
139
|
+
function clear() {
|
|
140
|
+
listeners = listeners.filter(remove => remove());
|
|
141
|
+
}
|
|
142
|
+
const self = {
|
|
143
|
+
add,
|
|
144
|
+
clear
|
|
145
|
+
};
|
|
146
|
+
return self;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
function Animations(ownerDocument, ownerWindow, update, render) {
|
|
150
|
+
const documentVisibleHandler = EventStore();
|
|
151
|
+
const fixedTimeStep = 1000 / 60;
|
|
152
|
+
let lastTimeStamp = null;
|
|
153
|
+
let accumulatedTime = 0;
|
|
154
|
+
let animationId = 0;
|
|
155
|
+
function init() {
|
|
156
|
+
documentVisibleHandler.add(ownerDocument, 'visibilitychange', () => {
|
|
157
|
+
if (ownerDocument.hidden) reset();
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
function destroy() {
|
|
161
|
+
stop();
|
|
162
|
+
documentVisibleHandler.clear();
|
|
163
|
+
}
|
|
164
|
+
function animate(timeStamp) {
|
|
165
|
+
if (!animationId) return;
|
|
166
|
+
if (!lastTimeStamp) {
|
|
167
|
+
lastTimeStamp = timeStamp;
|
|
168
|
+
update();
|
|
169
|
+
update();
|
|
170
|
+
}
|
|
171
|
+
const timeElapsed = timeStamp - lastTimeStamp;
|
|
172
|
+
lastTimeStamp = timeStamp;
|
|
173
|
+
accumulatedTime += timeElapsed;
|
|
174
|
+
while (accumulatedTime >= fixedTimeStep) {
|
|
175
|
+
update();
|
|
176
|
+
accumulatedTime -= fixedTimeStep;
|
|
177
|
+
}
|
|
178
|
+
const alpha = accumulatedTime / fixedTimeStep;
|
|
179
|
+
render(alpha);
|
|
180
|
+
if (animationId) {
|
|
181
|
+
animationId = ownerWindow.requestAnimationFrame(animate);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
function start() {
|
|
185
|
+
if (animationId) return;
|
|
186
|
+
animationId = ownerWindow.requestAnimationFrame(animate);
|
|
187
|
+
}
|
|
188
|
+
function stop() {
|
|
189
|
+
ownerWindow.cancelAnimationFrame(animationId);
|
|
190
|
+
lastTimeStamp = null;
|
|
191
|
+
accumulatedTime = 0;
|
|
192
|
+
animationId = 0;
|
|
193
|
+
}
|
|
194
|
+
function reset() {
|
|
195
|
+
lastTimeStamp = null;
|
|
196
|
+
accumulatedTime = 0;
|
|
197
|
+
}
|
|
198
|
+
const self = {
|
|
199
|
+
init,
|
|
200
|
+
destroy,
|
|
201
|
+
start,
|
|
202
|
+
stop,
|
|
203
|
+
update,
|
|
204
|
+
render
|
|
205
|
+
};
|
|
206
|
+
return self;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
function Axis(axis, contentDirection) {
|
|
210
|
+
const isRightToLeft = contentDirection === 'rtl';
|
|
211
|
+
const isVertical = axis === 'y';
|
|
212
|
+
const scroll = isVertical ? 'y' : 'x';
|
|
213
|
+
const cross = isVertical ? 'x' : 'y';
|
|
214
|
+
const sign = !isVertical && isRightToLeft ? -1 : 1;
|
|
215
|
+
const startEdge = getStartEdge();
|
|
216
|
+
const endEdge = getEndEdge();
|
|
217
|
+
function measureSize(nodeRect) {
|
|
218
|
+
const {
|
|
219
|
+
height,
|
|
220
|
+
width
|
|
221
|
+
} = nodeRect;
|
|
222
|
+
return isVertical ? height : width;
|
|
223
|
+
}
|
|
224
|
+
function getStartEdge() {
|
|
225
|
+
if (isVertical) return 'top';
|
|
226
|
+
return isRightToLeft ? 'right' : 'left';
|
|
227
|
+
}
|
|
228
|
+
function getEndEdge() {
|
|
229
|
+
if (isVertical) return 'bottom';
|
|
230
|
+
return isRightToLeft ? 'left' : 'right';
|
|
231
|
+
}
|
|
232
|
+
function direction(n) {
|
|
233
|
+
return n * sign;
|
|
234
|
+
}
|
|
235
|
+
const self = {
|
|
236
|
+
scroll,
|
|
237
|
+
cross,
|
|
238
|
+
startEdge,
|
|
239
|
+
endEdge,
|
|
240
|
+
measureSize,
|
|
241
|
+
direction
|
|
242
|
+
};
|
|
243
|
+
return self;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
function Limit(min = 0, max = 0) {
|
|
247
|
+
const length = mathAbs(min - max);
|
|
248
|
+
function reachedMin(n) {
|
|
249
|
+
return n < min;
|
|
250
|
+
}
|
|
251
|
+
function reachedMax(n) {
|
|
252
|
+
return n > max;
|
|
253
|
+
}
|
|
254
|
+
function reachedAny(n) {
|
|
255
|
+
return reachedMin(n) || reachedMax(n);
|
|
256
|
+
}
|
|
257
|
+
function constrain(n) {
|
|
258
|
+
if (!reachedAny(n)) return n;
|
|
259
|
+
return reachedMin(n) ? min : max;
|
|
260
|
+
}
|
|
261
|
+
function removeOffset(n) {
|
|
262
|
+
if (!length) return n;
|
|
263
|
+
return n - length * Math.ceil((n - max) / length);
|
|
264
|
+
}
|
|
265
|
+
const self = {
|
|
266
|
+
length,
|
|
267
|
+
max,
|
|
268
|
+
min,
|
|
269
|
+
constrain,
|
|
270
|
+
reachedAny,
|
|
271
|
+
reachedMax,
|
|
272
|
+
reachedMin,
|
|
273
|
+
removeOffset
|
|
274
|
+
};
|
|
275
|
+
return self;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
function Counter(max, start, loop) {
|
|
279
|
+
const {
|
|
280
|
+
constrain
|
|
281
|
+
} = Limit(0, max);
|
|
282
|
+
const loopEnd = max + 1;
|
|
283
|
+
let counter = withinLimit(start);
|
|
284
|
+
function withinLimit(n) {
|
|
285
|
+
return !loop ? constrain(n) : mathAbs((loopEnd + n) % loopEnd);
|
|
286
|
+
}
|
|
287
|
+
function get() {
|
|
288
|
+
return counter;
|
|
289
|
+
}
|
|
290
|
+
function set(n) {
|
|
291
|
+
counter = withinLimit(n);
|
|
292
|
+
return self;
|
|
293
|
+
}
|
|
294
|
+
function add(n) {
|
|
295
|
+
return clone().set(get() + n);
|
|
296
|
+
}
|
|
297
|
+
function clone() {
|
|
298
|
+
return Counter(max, get(), loop);
|
|
299
|
+
}
|
|
300
|
+
const self = {
|
|
301
|
+
get,
|
|
302
|
+
set,
|
|
303
|
+
add,
|
|
304
|
+
clone
|
|
305
|
+
};
|
|
306
|
+
return self;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
function DragHandler(axis, rootNode, ownerDocument, ownerWindow, target, dragTracker, location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, baseFriction, watchDrag) {
|
|
310
|
+
const {
|
|
311
|
+
cross: crossAxis,
|
|
312
|
+
direction
|
|
313
|
+
} = axis;
|
|
314
|
+
const focusNodes = ['INPUT', 'SELECT', 'TEXTAREA'];
|
|
315
|
+
const nonPassiveEvent = {
|
|
316
|
+
passive: false
|
|
317
|
+
};
|
|
318
|
+
const initEvents = EventStore();
|
|
319
|
+
const dragEvents = EventStore();
|
|
320
|
+
const goToNextThreshold = Limit(50, 225).constrain(percentOfView.measure(20));
|
|
321
|
+
const snapForceBoost = {
|
|
322
|
+
mouse: 300,
|
|
323
|
+
touch: 400
|
|
324
|
+
};
|
|
325
|
+
const freeForceBoost = {
|
|
326
|
+
mouse: 500,
|
|
327
|
+
touch: 600
|
|
328
|
+
};
|
|
329
|
+
const baseSpeed = dragFree ? 43 : 25;
|
|
330
|
+
let isMoving = false;
|
|
331
|
+
let startScroll = 0;
|
|
332
|
+
let startCross = 0;
|
|
333
|
+
let pointerIsDown = false;
|
|
334
|
+
let preventScroll = false;
|
|
335
|
+
let preventClick = false;
|
|
336
|
+
let isMouse = false;
|
|
337
|
+
function init(emblaApi) {
|
|
338
|
+
if (!watchDrag) return;
|
|
339
|
+
function downIfAllowed(evt) {
|
|
340
|
+
if (isBoolean(watchDrag) || watchDrag(emblaApi, evt)) down(evt);
|
|
341
|
+
}
|
|
342
|
+
const node = rootNode;
|
|
343
|
+
initEvents.add(node, 'dragstart', evt => evt.preventDefault(), nonPassiveEvent).add(node, 'touchmove', () => undefined, nonPassiveEvent).add(node, 'touchend', () => undefined).add(node, 'touchstart', downIfAllowed).add(node, 'mousedown', downIfAllowed).add(node, 'touchcancel', up).add(node, 'contextmenu', up).add(node, 'click', click, true);
|
|
344
|
+
}
|
|
345
|
+
function destroy() {
|
|
346
|
+
initEvents.clear();
|
|
347
|
+
dragEvents.clear();
|
|
348
|
+
}
|
|
349
|
+
function addDragEvents() {
|
|
350
|
+
const node = isMouse ? ownerDocument : rootNode;
|
|
351
|
+
dragEvents.add(node, 'touchmove', move, nonPassiveEvent).add(node, 'touchend', up).add(node, 'mousemove', move, nonPassiveEvent).add(node, 'mouseup', up);
|
|
352
|
+
}
|
|
353
|
+
function isFocusNode(node) {
|
|
354
|
+
const nodeName = node.nodeName || '';
|
|
355
|
+
return focusNodes.includes(nodeName);
|
|
356
|
+
}
|
|
357
|
+
function forceBoost() {
|
|
358
|
+
const boost = dragFree ? freeForceBoost : snapForceBoost;
|
|
359
|
+
const type = isMouse ? 'mouse' : 'touch';
|
|
360
|
+
return boost[type];
|
|
361
|
+
}
|
|
362
|
+
function allowedForce(force, targetChanged) {
|
|
363
|
+
const next = index.add(mathSign(force) * -1);
|
|
364
|
+
const baseForce = scrollTarget.byDistance(force, !dragFree).distance;
|
|
365
|
+
if (dragFree || mathAbs(force) < goToNextThreshold) return baseForce;
|
|
366
|
+
if (skipSnaps && targetChanged) return baseForce * 0.5;
|
|
367
|
+
return scrollTarget.byIndex(next.get(), 0).distance;
|
|
368
|
+
}
|
|
369
|
+
function down(evt) {
|
|
370
|
+
const isMouseEvt = isMouseEvent(evt, ownerWindow);
|
|
371
|
+
isMouse = isMouseEvt;
|
|
372
|
+
preventClick = dragFree && isMouseEvt && !evt.buttons && isMoving;
|
|
373
|
+
isMoving = deltaAbs(target.get(), location.get()) >= 2;
|
|
374
|
+
if (isMouseEvt && evt.button !== 0) return;
|
|
375
|
+
if (isFocusNode(evt.target)) return;
|
|
376
|
+
pointerIsDown = true;
|
|
377
|
+
dragTracker.pointerDown(evt);
|
|
378
|
+
scrollBody.useFriction(0).useDuration(0);
|
|
379
|
+
target.set(location);
|
|
380
|
+
addDragEvents();
|
|
381
|
+
startScroll = dragTracker.readPoint(evt);
|
|
382
|
+
startCross = dragTracker.readPoint(evt, crossAxis);
|
|
383
|
+
eventHandler.emit('pointerDown');
|
|
384
|
+
}
|
|
385
|
+
function move(evt) {
|
|
386
|
+
const isTouchEvt = !isMouseEvent(evt, ownerWindow);
|
|
387
|
+
if (isTouchEvt && evt.touches.length >= 2) return up(evt);
|
|
388
|
+
const lastScroll = dragTracker.readPoint(evt);
|
|
389
|
+
const lastCross = dragTracker.readPoint(evt, crossAxis);
|
|
390
|
+
const diffScroll = deltaAbs(lastScroll, startScroll);
|
|
391
|
+
const diffCross = deltaAbs(lastCross, startCross);
|
|
392
|
+
if (!preventScroll && !isMouse) {
|
|
393
|
+
if (!evt.cancelable) return up(evt);
|
|
394
|
+
preventScroll = diffScroll > diffCross;
|
|
395
|
+
if (!preventScroll) return up(evt);
|
|
396
|
+
}
|
|
397
|
+
const diff = dragTracker.pointerMove(evt);
|
|
398
|
+
if (diffScroll > dragThreshold) preventClick = true;
|
|
399
|
+
scrollBody.useFriction(0.3).useDuration(0.75);
|
|
400
|
+
animation.start();
|
|
401
|
+
target.add(direction(diff));
|
|
402
|
+
evt.preventDefault();
|
|
403
|
+
}
|
|
404
|
+
function up(evt) {
|
|
405
|
+
const currentLocation = scrollTarget.byDistance(0, false);
|
|
406
|
+
const targetChanged = currentLocation.index !== index.get();
|
|
407
|
+
const rawForce = dragTracker.pointerUp(evt) * forceBoost();
|
|
408
|
+
const force = allowedForce(direction(rawForce), targetChanged);
|
|
409
|
+
const forceFactor = factorAbs(rawForce, force);
|
|
410
|
+
const speed = baseSpeed - 10 * forceFactor;
|
|
411
|
+
const friction = baseFriction + forceFactor / 50;
|
|
412
|
+
preventScroll = false;
|
|
413
|
+
pointerIsDown = false;
|
|
414
|
+
dragEvents.clear();
|
|
415
|
+
scrollBody.useDuration(speed).useFriction(friction);
|
|
416
|
+
scrollTo.distance(force, !dragFree);
|
|
417
|
+
isMouse = false;
|
|
418
|
+
eventHandler.emit('pointerUp');
|
|
419
|
+
}
|
|
420
|
+
function click(evt) {
|
|
421
|
+
if (preventClick) {
|
|
422
|
+
evt.stopPropagation();
|
|
423
|
+
evt.preventDefault();
|
|
424
|
+
preventClick = false;
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
function pointerDown() {
|
|
428
|
+
return pointerIsDown;
|
|
429
|
+
}
|
|
430
|
+
const self = {
|
|
431
|
+
init,
|
|
432
|
+
destroy,
|
|
433
|
+
pointerDown
|
|
434
|
+
};
|
|
435
|
+
return self;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
function DragTracker(axis, ownerWindow) {
|
|
439
|
+
const logInterval = 170;
|
|
440
|
+
let startEvent;
|
|
441
|
+
let lastEvent;
|
|
442
|
+
function readTime(evt) {
|
|
443
|
+
return evt.timeStamp;
|
|
444
|
+
}
|
|
445
|
+
function readPoint(evt, evtAxis) {
|
|
446
|
+
const property = evtAxis || axis.scroll;
|
|
447
|
+
const coord = `client${property === 'x' ? 'X' : 'Y'}`;
|
|
448
|
+
return (isMouseEvent(evt, ownerWindow) ? evt : evt.touches[0])[coord];
|
|
449
|
+
}
|
|
450
|
+
function pointerDown(evt) {
|
|
451
|
+
startEvent = evt;
|
|
452
|
+
lastEvent = evt;
|
|
453
|
+
return readPoint(evt);
|
|
454
|
+
}
|
|
455
|
+
function pointerMove(evt) {
|
|
456
|
+
const diff = readPoint(evt) - readPoint(lastEvent);
|
|
457
|
+
const expired = readTime(evt) - readTime(startEvent) > logInterval;
|
|
458
|
+
lastEvent = evt;
|
|
459
|
+
if (expired) startEvent = evt;
|
|
460
|
+
return diff;
|
|
461
|
+
}
|
|
462
|
+
function pointerUp(evt) {
|
|
463
|
+
if (!startEvent || !lastEvent) return 0;
|
|
464
|
+
const diffDrag = readPoint(lastEvent) - readPoint(startEvent);
|
|
465
|
+
const diffTime = readTime(evt) - readTime(startEvent);
|
|
466
|
+
const expired = readTime(evt) - readTime(lastEvent) > logInterval;
|
|
467
|
+
const force = diffDrag / diffTime;
|
|
468
|
+
const isFlick = diffTime && !expired && mathAbs(force) > 0.1;
|
|
469
|
+
return isFlick ? force : 0;
|
|
470
|
+
}
|
|
471
|
+
const self = {
|
|
472
|
+
pointerDown,
|
|
473
|
+
pointerMove,
|
|
474
|
+
pointerUp,
|
|
475
|
+
readPoint
|
|
476
|
+
};
|
|
477
|
+
return self;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
function NodeRects() {
|
|
481
|
+
function measure(node) {
|
|
482
|
+
const {
|
|
483
|
+
offsetTop,
|
|
484
|
+
offsetLeft,
|
|
485
|
+
offsetWidth,
|
|
486
|
+
offsetHeight
|
|
487
|
+
} = node;
|
|
488
|
+
const offset = {
|
|
489
|
+
top: offsetTop,
|
|
490
|
+
right: offsetLeft + offsetWidth,
|
|
491
|
+
bottom: offsetTop + offsetHeight,
|
|
492
|
+
left: offsetLeft,
|
|
493
|
+
width: offsetWidth,
|
|
494
|
+
height: offsetHeight
|
|
495
|
+
};
|
|
496
|
+
return offset;
|
|
497
|
+
}
|
|
498
|
+
const self = {
|
|
499
|
+
measure
|
|
500
|
+
};
|
|
501
|
+
return self;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
function PercentOfView(viewSize) {
|
|
505
|
+
function measure(n) {
|
|
506
|
+
return viewSize * (n / 100);
|
|
507
|
+
}
|
|
508
|
+
const self = {
|
|
509
|
+
measure
|
|
510
|
+
};
|
|
511
|
+
return self;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
function ResizeHandler(container, eventHandler, ownerWindow, slides, axis, watchResize, nodeRects) {
|
|
515
|
+
const observeNodes = [container].concat(slides);
|
|
516
|
+
let resizeObserver;
|
|
517
|
+
let containerSize;
|
|
518
|
+
let slideSizes = [];
|
|
519
|
+
let destroyed = false;
|
|
520
|
+
function readSize(node) {
|
|
521
|
+
return axis.measureSize(nodeRects.measure(node));
|
|
522
|
+
}
|
|
523
|
+
function init(emblaApi) {
|
|
524
|
+
if (!watchResize) return;
|
|
525
|
+
containerSize = readSize(container);
|
|
526
|
+
slideSizes = slides.map(readSize);
|
|
527
|
+
function defaultCallback(entries) {
|
|
528
|
+
for (const entry of entries) {
|
|
529
|
+
if (destroyed) return;
|
|
530
|
+
const isContainer = entry.target === container;
|
|
531
|
+
const slideIndex = slides.indexOf(entry.target);
|
|
532
|
+
const lastSize = isContainer ? containerSize : slideSizes[slideIndex];
|
|
533
|
+
const newSize = readSize(isContainer ? container : slides[slideIndex]);
|
|
534
|
+
const diffSize = mathAbs(newSize - lastSize);
|
|
535
|
+
if (diffSize >= 0.5) {
|
|
536
|
+
emblaApi.reInit();
|
|
537
|
+
eventHandler.emit('resize');
|
|
538
|
+
break;
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
resizeObserver = new ResizeObserver(entries => {
|
|
543
|
+
if (isBoolean(watchResize) || watchResize(emblaApi, entries)) {
|
|
544
|
+
defaultCallback(entries);
|
|
545
|
+
}
|
|
546
|
+
});
|
|
547
|
+
ownerWindow.requestAnimationFrame(() => {
|
|
548
|
+
observeNodes.forEach(node => resizeObserver.observe(node));
|
|
549
|
+
});
|
|
550
|
+
}
|
|
551
|
+
function destroy() {
|
|
552
|
+
destroyed = true;
|
|
553
|
+
if (resizeObserver) resizeObserver.disconnect();
|
|
554
|
+
}
|
|
555
|
+
const self = {
|
|
556
|
+
init,
|
|
557
|
+
destroy
|
|
558
|
+
};
|
|
559
|
+
return self;
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
function ScrollBody(location, offsetLocation, previousLocation, target, baseDuration, baseFriction) {
|
|
563
|
+
let scrollVelocity = 0;
|
|
564
|
+
let scrollDirection = 0;
|
|
565
|
+
let scrollDuration = baseDuration;
|
|
566
|
+
let scrollFriction = baseFriction;
|
|
567
|
+
let rawLocation = location.get();
|
|
568
|
+
let rawLocationPrevious = 0;
|
|
569
|
+
function seek() {
|
|
570
|
+
const displacement = target.get() - location.get();
|
|
571
|
+
const isInstant = !scrollDuration;
|
|
572
|
+
let scrollDistance = 0;
|
|
573
|
+
if (isInstant) {
|
|
574
|
+
scrollVelocity = 0;
|
|
575
|
+
previousLocation.set(target);
|
|
576
|
+
location.set(target);
|
|
577
|
+
scrollDistance = displacement;
|
|
578
|
+
} else {
|
|
579
|
+
previousLocation.set(location);
|
|
580
|
+
scrollVelocity += displacement / scrollDuration;
|
|
581
|
+
scrollVelocity *= scrollFriction;
|
|
582
|
+
rawLocation += scrollVelocity;
|
|
583
|
+
location.add(scrollVelocity);
|
|
584
|
+
scrollDistance = rawLocation - rawLocationPrevious;
|
|
585
|
+
}
|
|
586
|
+
scrollDirection = mathSign(scrollDistance);
|
|
587
|
+
rawLocationPrevious = rawLocation;
|
|
588
|
+
return self;
|
|
589
|
+
}
|
|
590
|
+
function settled() {
|
|
591
|
+
const diff = target.get() - offsetLocation.get();
|
|
592
|
+
return mathAbs(diff) < 0.001;
|
|
593
|
+
}
|
|
594
|
+
function duration() {
|
|
595
|
+
return scrollDuration;
|
|
596
|
+
}
|
|
597
|
+
function direction() {
|
|
598
|
+
return scrollDirection;
|
|
599
|
+
}
|
|
600
|
+
function velocity() {
|
|
601
|
+
return scrollVelocity;
|
|
602
|
+
}
|
|
603
|
+
function useBaseDuration() {
|
|
604
|
+
return useDuration(baseDuration);
|
|
605
|
+
}
|
|
606
|
+
function useBaseFriction() {
|
|
607
|
+
return useFriction(baseFriction);
|
|
608
|
+
}
|
|
609
|
+
function useDuration(n) {
|
|
610
|
+
scrollDuration = n;
|
|
611
|
+
return self;
|
|
612
|
+
}
|
|
613
|
+
function useFriction(n) {
|
|
614
|
+
scrollFriction = n;
|
|
615
|
+
return self;
|
|
616
|
+
}
|
|
617
|
+
const self = {
|
|
618
|
+
direction,
|
|
619
|
+
duration,
|
|
620
|
+
velocity,
|
|
621
|
+
seek,
|
|
622
|
+
settled,
|
|
623
|
+
useBaseFriction,
|
|
624
|
+
useBaseDuration,
|
|
625
|
+
useFriction,
|
|
626
|
+
useDuration
|
|
627
|
+
};
|
|
628
|
+
return self;
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
function ScrollBounds(limit, location, target, scrollBody, percentOfView) {
|
|
632
|
+
const pullBackThreshold = percentOfView.measure(10);
|
|
633
|
+
const edgeOffsetTolerance = percentOfView.measure(50);
|
|
634
|
+
const frictionLimit = Limit(0.1, 0.99);
|
|
635
|
+
let disabled = false;
|
|
636
|
+
function shouldConstrain() {
|
|
637
|
+
if (disabled) return false;
|
|
638
|
+
if (!limit.reachedAny(target.get())) return false;
|
|
639
|
+
if (!limit.reachedAny(location.get())) return false;
|
|
640
|
+
return true;
|
|
641
|
+
}
|
|
642
|
+
function constrain(pointerDown) {
|
|
643
|
+
if (!shouldConstrain()) return;
|
|
644
|
+
const edge = limit.reachedMin(location.get()) ? 'min' : 'max';
|
|
645
|
+
const diffToEdge = mathAbs(limit[edge] - location.get());
|
|
646
|
+
const diffToTarget = target.get() - location.get();
|
|
647
|
+
const friction = frictionLimit.constrain(diffToEdge / edgeOffsetTolerance);
|
|
648
|
+
target.subtract(diffToTarget * friction);
|
|
649
|
+
if (!pointerDown && mathAbs(diffToTarget) < pullBackThreshold) {
|
|
650
|
+
target.set(limit.constrain(target.get()));
|
|
651
|
+
scrollBody.useDuration(25).useBaseFriction();
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
function toggleActive(active) {
|
|
655
|
+
disabled = !active;
|
|
656
|
+
}
|
|
657
|
+
const self = {
|
|
658
|
+
shouldConstrain,
|
|
659
|
+
constrain,
|
|
660
|
+
toggleActive
|
|
661
|
+
};
|
|
662
|
+
return self;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
function ScrollContain(viewSize, contentSize, snapsAligned, containScroll, pixelTolerance) {
|
|
666
|
+
const scrollBounds = Limit(-contentSize + viewSize, 0);
|
|
667
|
+
const snapsBounded = measureBounded();
|
|
668
|
+
const scrollContainLimit = findScrollContainLimit();
|
|
669
|
+
const snapsContained = measureContained();
|
|
670
|
+
function usePixelTolerance(bound, snap) {
|
|
671
|
+
return deltaAbs(bound, snap) <= 1;
|
|
672
|
+
}
|
|
673
|
+
function findScrollContainLimit() {
|
|
674
|
+
const startSnap = snapsBounded[0];
|
|
675
|
+
const endSnap = arrayLast(snapsBounded);
|
|
676
|
+
const min = snapsBounded.lastIndexOf(startSnap);
|
|
677
|
+
const max = snapsBounded.indexOf(endSnap) + 1;
|
|
678
|
+
return Limit(min, max);
|
|
679
|
+
}
|
|
680
|
+
function measureBounded() {
|
|
681
|
+
return snapsAligned.map((snapAligned, index) => {
|
|
682
|
+
const {
|
|
683
|
+
min,
|
|
684
|
+
max
|
|
685
|
+
} = scrollBounds;
|
|
686
|
+
const snap = scrollBounds.constrain(snapAligned);
|
|
687
|
+
const isFirst = !index;
|
|
688
|
+
const isLast = arrayIsLastIndex(snapsAligned, index);
|
|
689
|
+
if (isFirst) return max;
|
|
690
|
+
if (isLast) return min;
|
|
691
|
+
if (usePixelTolerance(min, snap)) return min;
|
|
692
|
+
if (usePixelTolerance(max, snap)) return max;
|
|
693
|
+
return snap;
|
|
694
|
+
}).map(scrollBound => parseFloat(scrollBound.toFixed(3)));
|
|
695
|
+
}
|
|
696
|
+
function measureContained() {
|
|
697
|
+
if (contentSize <= viewSize + pixelTolerance) return [scrollBounds.max];
|
|
698
|
+
if (containScroll === 'keepSnaps') return snapsBounded;
|
|
699
|
+
const {
|
|
700
|
+
min,
|
|
701
|
+
max
|
|
702
|
+
} = scrollContainLimit;
|
|
703
|
+
return snapsBounded.slice(min, max);
|
|
704
|
+
}
|
|
705
|
+
const self = {
|
|
706
|
+
snapsContained,
|
|
707
|
+
scrollContainLimit
|
|
708
|
+
};
|
|
709
|
+
return self;
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
function ScrollLimit(contentSize, scrollSnaps, loop) {
|
|
713
|
+
const max = scrollSnaps[0];
|
|
714
|
+
const min = loop ? max - contentSize : arrayLast(scrollSnaps);
|
|
715
|
+
const limit = Limit(min, max);
|
|
716
|
+
const self = {
|
|
717
|
+
limit
|
|
718
|
+
};
|
|
719
|
+
return self;
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
function ScrollLooper(contentSize, limit, location, vectors) {
|
|
723
|
+
const jointSafety = 0.1;
|
|
724
|
+
const min = limit.min + jointSafety;
|
|
725
|
+
const max = limit.max + jointSafety;
|
|
726
|
+
const {
|
|
727
|
+
reachedMin,
|
|
728
|
+
reachedMax
|
|
729
|
+
} = Limit(min, max);
|
|
730
|
+
function shouldLoop(direction) {
|
|
731
|
+
if (direction === 1) return reachedMax(location.get());
|
|
732
|
+
if (direction === -1) return reachedMin(location.get());
|
|
733
|
+
return false;
|
|
734
|
+
}
|
|
735
|
+
function loop(direction) {
|
|
736
|
+
if (!shouldLoop(direction)) return;
|
|
737
|
+
const loopDistance = contentSize * (direction * -1);
|
|
738
|
+
vectors.forEach(v => v.add(loopDistance));
|
|
739
|
+
}
|
|
740
|
+
const self = {
|
|
741
|
+
loop
|
|
742
|
+
};
|
|
743
|
+
return self;
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
function ScrollProgress(limit) {
|
|
747
|
+
const {
|
|
748
|
+
max,
|
|
749
|
+
length
|
|
750
|
+
} = limit;
|
|
751
|
+
function get(n) {
|
|
752
|
+
const currentLocation = n - max;
|
|
753
|
+
return length ? currentLocation / -length : 0;
|
|
754
|
+
}
|
|
755
|
+
const self = {
|
|
756
|
+
get
|
|
757
|
+
};
|
|
758
|
+
return self;
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
function ScrollSnaps(axis, alignment, containerRect, slideRects, slidesToScroll) {
|
|
762
|
+
const {
|
|
763
|
+
startEdge,
|
|
764
|
+
endEdge
|
|
765
|
+
} = axis;
|
|
766
|
+
const {
|
|
767
|
+
groupSlides
|
|
768
|
+
} = slidesToScroll;
|
|
769
|
+
const alignments = measureSizes().map(alignment.measure);
|
|
770
|
+
const snaps = measureUnaligned();
|
|
771
|
+
const snapsAligned = measureAligned();
|
|
772
|
+
function measureSizes() {
|
|
773
|
+
return groupSlides(slideRects).map(rects => arrayLast(rects)[endEdge] - rects[0][startEdge]).map(mathAbs);
|
|
774
|
+
}
|
|
775
|
+
function measureUnaligned() {
|
|
776
|
+
return slideRects.map(rect => containerRect[startEdge] - rect[startEdge]).map(snap => -mathAbs(snap));
|
|
777
|
+
}
|
|
778
|
+
function measureAligned() {
|
|
779
|
+
return groupSlides(snaps).map(g => g[0]).map((snap, index) => snap + alignments[index]);
|
|
780
|
+
}
|
|
781
|
+
const self = {
|
|
782
|
+
snaps,
|
|
783
|
+
snapsAligned
|
|
784
|
+
};
|
|
785
|
+
return self;
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
function SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes) {
|
|
789
|
+
const {
|
|
790
|
+
groupSlides
|
|
791
|
+
} = slidesToScroll;
|
|
792
|
+
const {
|
|
793
|
+
min,
|
|
794
|
+
max
|
|
795
|
+
} = scrollContainLimit;
|
|
796
|
+
const slideRegistry = createSlideRegistry();
|
|
797
|
+
function createSlideRegistry() {
|
|
798
|
+
const groupedSlideIndexes = groupSlides(slideIndexes);
|
|
799
|
+
const doNotContain = !containSnaps || containScroll === 'keepSnaps';
|
|
800
|
+
if (scrollSnaps.length === 1) return [slideIndexes];
|
|
801
|
+
if (doNotContain) return groupedSlideIndexes;
|
|
802
|
+
return groupedSlideIndexes.slice(min, max).map((group, index, groups) => {
|
|
803
|
+
const isFirst = !index;
|
|
804
|
+
const isLast = arrayIsLastIndex(groups, index);
|
|
805
|
+
if (isFirst) {
|
|
806
|
+
const range = arrayLast(groups[0]) + 1;
|
|
807
|
+
return arrayFromNumber(range);
|
|
808
|
+
}
|
|
809
|
+
if (isLast) {
|
|
810
|
+
const range = arrayLastIndex(slideIndexes) - arrayLast(groups)[0] + 1;
|
|
811
|
+
return arrayFromNumber(range, arrayLast(groups)[0]);
|
|
812
|
+
}
|
|
813
|
+
return group;
|
|
814
|
+
});
|
|
815
|
+
}
|
|
816
|
+
const self = {
|
|
817
|
+
slideRegistry
|
|
818
|
+
};
|
|
819
|
+
return self;
|
|
820
|
+
}
|
|
821
|
+
|
|
822
|
+
function ScrollTarget(loop, scrollSnaps, contentSize, limit, targetVector) {
|
|
823
|
+
const {
|
|
824
|
+
reachedAny,
|
|
825
|
+
removeOffset,
|
|
826
|
+
constrain
|
|
827
|
+
} = limit;
|
|
828
|
+
function minDistance(distances) {
|
|
829
|
+
return distances.concat().sort((a, b) => mathAbs(a) - mathAbs(b))[0];
|
|
830
|
+
}
|
|
831
|
+
function findTargetSnap(target) {
|
|
832
|
+
const distance = loop ? removeOffset(target) : constrain(target);
|
|
833
|
+
const ascDiffsToSnaps = scrollSnaps.map((snap, index) => ({
|
|
834
|
+
diff: shortcut(snap - distance, 0),
|
|
835
|
+
index
|
|
836
|
+
})).sort((d1, d2) => mathAbs(d1.diff) - mathAbs(d2.diff));
|
|
837
|
+
const {
|
|
838
|
+
index
|
|
839
|
+
} = ascDiffsToSnaps[0];
|
|
840
|
+
return {
|
|
841
|
+
index,
|
|
842
|
+
distance
|
|
843
|
+
};
|
|
844
|
+
}
|
|
845
|
+
function shortcut(target, direction) {
|
|
846
|
+
const targets = [target, target + contentSize, target - contentSize];
|
|
847
|
+
if (!loop) return target;
|
|
848
|
+
if (!direction) return minDistance(targets);
|
|
849
|
+
const matchingTargets = targets.filter(t => mathSign(t) === direction);
|
|
850
|
+
if (matchingTargets.length) return minDistance(matchingTargets);
|
|
851
|
+
return arrayLast(targets) - contentSize;
|
|
852
|
+
}
|
|
853
|
+
function byIndex(index, direction) {
|
|
854
|
+
const diffToSnap = scrollSnaps[index] - targetVector.get();
|
|
855
|
+
const distance = shortcut(diffToSnap, direction);
|
|
856
|
+
return {
|
|
857
|
+
index,
|
|
858
|
+
distance
|
|
859
|
+
};
|
|
860
|
+
}
|
|
861
|
+
function byDistance(distance, snap) {
|
|
862
|
+
const target = targetVector.get() + distance;
|
|
863
|
+
const {
|
|
864
|
+
index,
|
|
865
|
+
distance: targetSnapDistance
|
|
866
|
+
} = findTargetSnap(target);
|
|
867
|
+
const reachedBound = !loop && reachedAny(target);
|
|
868
|
+
if (!snap || reachedBound) return {
|
|
869
|
+
index,
|
|
870
|
+
distance
|
|
871
|
+
};
|
|
872
|
+
const diffToSnap = scrollSnaps[index] - targetSnapDistance;
|
|
873
|
+
const snapDistance = distance + shortcut(diffToSnap, 0);
|
|
874
|
+
return {
|
|
875
|
+
index,
|
|
876
|
+
distance: snapDistance
|
|
877
|
+
};
|
|
878
|
+
}
|
|
879
|
+
const self = {
|
|
880
|
+
byDistance,
|
|
881
|
+
byIndex,
|
|
882
|
+
shortcut
|
|
883
|
+
};
|
|
884
|
+
return self;
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
function ScrollTo(animation, indexCurrent, indexPrevious, scrollBody, scrollTarget, targetVector, eventHandler) {
|
|
888
|
+
function scrollTo(target) {
|
|
889
|
+
const distanceDiff = target.distance;
|
|
890
|
+
const indexDiff = target.index !== indexCurrent.get();
|
|
891
|
+
targetVector.add(distanceDiff);
|
|
892
|
+
if (distanceDiff) {
|
|
893
|
+
if (scrollBody.duration()) {
|
|
894
|
+
animation.start();
|
|
895
|
+
} else {
|
|
896
|
+
animation.update();
|
|
897
|
+
animation.render(1);
|
|
898
|
+
animation.update();
|
|
899
|
+
}
|
|
900
|
+
}
|
|
901
|
+
if (indexDiff) {
|
|
902
|
+
indexPrevious.set(indexCurrent.get());
|
|
903
|
+
indexCurrent.set(target.index);
|
|
904
|
+
eventHandler.emit('select');
|
|
905
|
+
}
|
|
906
|
+
}
|
|
907
|
+
function distance(n, snap) {
|
|
908
|
+
const target = scrollTarget.byDistance(n, snap);
|
|
909
|
+
scrollTo(target);
|
|
910
|
+
}
|
|
911
|
+
function index(n, direction) {
|
|
912
|
+
const targetIndex = indexCurrent.clone().set(n);
|
|
913
|
+
const target = scrollTarget.byIndex(targetIndex.get(), direction);
|
|
914
|
+
scrollTo(target);
|
|
915
|
+
}
|
|
916
|
+
const self = {
|
|
917
|
+
distance,
|
|
918
|
+
index
|
|
919
|
+
};
|
|
920
|
+
return self;
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
function SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus) {
|
|
924
|
+
const focusListenerOptions = {
|
|
925
|
+
passive: true,
|
|
926
|
+
capture: true
|
|
927
|
+
};
|
|
928
|
+
let lastTabPressTime = 0;
|
|
929
|
+
function init(emblaApi) {
|
|
930
|
+
if (!watchFocus) return;
|
|
931
|
+
function defaultCallback(index) {
|
|
932
|
+
const nowTime = new Date().getTime();
|
|
933
|
+
const diffTime = nowTime - lastTabPressTime;
|
|
934
|
+
if (diffTime > 10) return;
|
|
935
|
+
eventHandler.emit('slideFocusStart');
|
|
936
|
+
root.scrollLeft = 0;
|
|
937
|
+
const group = slideRegistry.findIndex(group => group.includes(index));
|
|
938
|
+
if (!isNumber(group)) return;
|
|
939
|
+
scrollBody.useDuration(0);
|
|
940
|
+
scrollTo.index(group, 0);
|
|
941
|
+
eventHandler.emit('slideFocus');
|
|
942
|
+
}
|
|
943
|
+
eventStore.add(document, 'keydown', registerTabPress, false);
|
|
944
|
+
slides.forEach((slide, slideIndex) => {
|
|
945
|
+
eventStore.add(slide, 'focus', evt => {
|
|
946
|
+
if (isBoolean(watchFocus) || watchFocus(emblaApi, evt)) {
|
|
947
|
+
defaultCallback(slideIndex);
|
|
948
|
+
}
|
|
949
|
+
}, focusListenerOptions);
|
|
950
|
+
});
|
|
951
|
+
}
|
|
952
|
+
function registerTabPress(event) {
|
|
953
|
+
if (event.code === 'Tab') lastTabPressTime = new Date().getTime();
|
|
954
|
+
}
|
|
955
|
+
const self = {
|
|
956
|
+
init
|
|
957
|
+
};
|
|
958
|
+
return self;
|
|
959
|
+
}
|
|
960
|
+
|
|
961
|
+
function Vector1D(initialValue) {
|
|
962
|
+
let value = initialValue;
|
|
963
|
+
function get() {
|
|
964
|
+
return value;
|
|
965
|
+
}
|
|
966
|
+
function set(n) {
|
|
967
|
+
value = normalizeInput(n);
|
|
968
|
+
}
|
|
969
|
+
function add(n) {
|
|
970
|
+
value += normalizeInput(n);
|
|
971
|
+
}
|
|
972
|
+
function subtract(n) {
|
|
973
|
+
value -= normalizeInput(n);
|
|
974
|
+
}
|
|
975
|
+
function normalizeInput(n) {
|
|
976
|
+
return isNumber(n) ? n : n.get();
|
|
977
|
+
}
|
|
978
|
+
const self = {
|
|
979
|
+
get,
|
|
980
|
+
set,
|
|
981
|
+
add,
|
|
982
|
+
subtract
|
|
983
|
+
};
|
|
984
|
+
return self;
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
function Translate(axis, container) {
|
|
988
|
+
const translate = axis.scroll === 'x' ? x : y;
|
|
989
|
+
const containerStyle = container.style;
|
|
990
|
+
let previousTarget = null;
|
|
991
|
+
let disabled = false;
|
|
992
|
+
function x(n) {
|
|
993
|
+
return `translate3d(${n}px,0px,0px)`;
|
|
994
|
+
}
|
|
995
|
+
function y(n) {
|
|
996
|
+
return `translate3d(0px,${n}px,0px)`;
|
|
997
|
+
}
|
|
998
|
+
function to(target) {
|
|
999
|
+
if (disabled) return;
|
|
1000
|
+
const newTarget = roundToTwoDecimals(axis.direction(target));
|
|
1001
|
+
if (newTarget === previousTarget) return;
|
|
1002
|
+
containerStyle.transform = translate(newTarget);
|
|
1003
|
+
previousTarget = newTarget;
|
|
1004
|
+
}
|
|
1005
|
+
function toggleActive(active) {
|
|
1006
|
+
disabled = !active;
|
|
1007
|
+
}
|
|
1008
|
+
function clear() {
|
|
1009
|
+
if (disabled) return;
|
|
1010
|
+
containerStyle.transform = '';
|
|
1011
|
+
if (!container.getAttribute('style')) container.removeAttribute('style');
|
|
1012
|
+
}
|
|
1013
|
+
const self = {
|
|
1014
|
+
clear,
|
|
1015
|
+
to,
|
|
1016
|
+
toggleActive
|
|
1017
|
+
};
|
|
1018
|
+
return self;
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
function SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, location, slides) {
|
|
1022
|
+
const roundingSafety = 0.5;
|
|
1023
|
+
const ascItems = arrayKeys(slideSizesWithGaps);
|
|
1024
|
+
const descItems = arrayKeys(slideSizesWithGaps).reverse();
|
|
1025
|
+
const loopPoints = startPoints().concat(endPoints());
|
|
1026
|
+
function removeSlideSizes(indexes, from) {
|
|
1027
|
+
return indexes.reduce((a, i) => {
|
|
1028
|
+
return a - slideSizesWithGaps[i];
|
|
1029
|
+
}, from);
|
|
1030
|
+
}
|
|
1031
|
+
function slidesInGap(indexes, gap) {
|
|
1032
|
+
return indexes.reduce((a, i) => {
|
|
1033
|
+
const remainingGap = removeSlideSizes(a, gap);
|
|
1034
|
+
return remainingGap > 0 ? a.concat([i]) : a;
|
|
1035
|
+
}, []);
|
|
1036
|
+
}
|
|
1037
|
+
function findSlideBounds(offset) {
|
|
1038
|
+
return snaps.map((snap, index) => ({
|
|
1039
|
+
start: snap - slideSizes[index] + roundingSafety + offset,
|
|
1040
|
+
end: snap + viewSize - roundingSafety + offset
|
|
1041
|
+
}));
|
|
1042
|
+
}
|
|
1043
|
+
function findLoopPoints(indexes, offset, isEndEdge) {
|
|
1044
|
+
const slideBounds = findSlideBounds(offset);
|
|
1045
|
+
return indexes.map(index => {
|
|
1046
|
+
const initial = isEndEdge ? 0 : -contentSize;
|
|
1047
|
+
const altered = isEndEdge ? contentSize : 0;
|
|
1048
|
+
const boundEdge = isEndEdge ? 'end' : 'start';
|
|
1049
|
+
const loopPoint = slideBounds[index][boundEdge];
|
|
1050
|
+
return {
|
|
1051
|
+
index,
|
|
1052
|
+
loopPoint,
|
|
1053
|
+
slideLocation: Vector1D(-1),
|
|
1054
|
+
translate: Translate(axis, slides[index]),
|
|
1055
|
+
target: () => location.get() > loopPoint ? initial : altered
|
|
1056
|
+
};
|
|
1057
|
+
});
|
|
1058
|
+
}
|
|
1059
|
+
function startPoints() {
|
|
1060
|
+
const gap = scrollSnaps[0];
|
|
1061
|
+
const indexes = slidesInGap(descItems, gap);
|
|
1062
|
+
return findLoopPoints(indexes, contentSize, false);
|
|
1063
|
+
}
|
|
1064
|
+
function endPoints() {
|
|
1065
|
+
const gap = viewSize - scrollSnaps[0] - 1;
|
|
1066
|
+
const indexes = slidesInGap(ascItems, gap);
|
|
1067
|
+
return findLoopPoints(indexes, -contentSize, true);
|
|
1068
|
+
}
|
|
1069
|
+
function canLoop() {
|
|
1070
|
+
return loopPoints.every(({
|
|
1071
|
+
index
|
|
1072
|
+
}) => {
|
|
1073
|
+
const otherIndexes = ascItems.filter(i => i !== index);
|
|
1074
|
+
return removeSlideSizes(otherIndexes, viewSize) <= 0.1;
|
|
1075
|
+
});
|
|
1076
|
+
}
|
|
1077
|
+
function loop() {
|
|
1078
|
+
loopPoints.forEach(loopPoint => {
|
|
1079
|
+
const {
|
|
1080
|
+
target,
|
|
1081
|
+
translate,
|
|
1082
|
+
slideLocation
|
|
1083
|
+
} = loopPoint;
|
|
1084
|
+
const shiftLocation = target();
|
|
1085
|
+
if (shiftLocation === slideLocation.get()) return;
|
|
1086
|
+
translate.to(shiftLocation);
|
|
1087
|
+
slideLocation.set(shiftLocation);
|
|
1088
|
+
});
|
|
1089
|
+
}
|
|
1090
|
+
function clear() {
|
|
1091
|
+
loopPoints.forEach(loopPoint => loopPoint.translate.clear());
|
|
1092
|
+
}
|
|
1093
|
+
const self = {
|
|
1094
|
+
canLoop,
|
|
1095
|
+
clear,
|
|
1096
|
+
loop,
|
|
1097
|
+
loopPoints
|
|
1098
|
+
};
|
|
1099
|
+
return self;
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
function SlidesHandler(container, eventHandler, watchSlides) {
|
|
1103
|
+
let mutationObserver;
|
|
1104
|
+
let destroyed = false;
|
|
1105
|
+
function init(emblaApi) {
|
|
1106
|
+
if (!watchSlides) return;
|
|
1107
|
+
function defaultCallback(mutations) {
|
|
1108
|
+
for (const mutation of mutations) {
|
|
1109
|
+
if (mutation.type === 'childList') {
|
|
1110
|
+
emblaApi.reInit();
|
|
1111
|
+
eventHandler.emit('slidesChanged');
|
|
1112
|
+
break;
|
|
1113
|
+
}
|
|
1114
|
+
}
|
|
1115
|
+
}
|
|
1116
|
+
mutationObserver = new MutationObserver(mutations => {
|
|
1117
|
+
if (destroyed) return;
|
|
1118
|
+
if (isBoolean(watchSlides) || watchSlides(emblaApi, mutations)) {
|
|
1119
|
+
defaultCallback(mutations);
|
|
1120
|
+
}
|
|
1121
|
+
});
|
|
1122
|
+
mutationObserver.observe(container, {
|
|
1123
|
+
childList: true
|
|
1124
|
+
});
|
|
1125
|
+
}
|
|
1126
|
+
function destroy() {
|
|
1127
|
+
if (mutationObserver) mutationObserver.disconnect();
|
|
1128
|
+
destroyed = true;
|
|
1129
|
+
}
|
|
1130
|
+
const self = {
|
|
1131
|
+
init,
|
|
1132
|
+
destroy
|
|
1133
|
+
};
|
|
1134
|
+
return self;
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
function SlidesInView(container, slides, eventHandler, threshold) {
|
|
1138
|
+
const intersectionEntryMap = {};
|
|
1139
|
+
let inViewCache = null;
|
|
1140
|
+
let notInViewCache = null;
|
|
1141
|
+
let intersectionObserver;
|
|
1142
|
+
let destroyed = false;
|
|
1143
|
+
function init() {
|
|
1144
|
+
intersectionObserver = new IntersectionObserver(entries => {
|
|
1145
|
+
if (destroyed) return;
|
|
1146
|
+
entries.forEach(entry => {
|
|
1147
|
+
const index = slides.indexOf(entry.target);
|
|
1148
|
+
intersectionEntryMap[index] = entry;
|
|
1149
|
+
});
|
|
1150
|
+
inViewCache = null;
|
|
1151
|
+
notInViewCache = null;
|
|
1152
|
+
eventHandler.emit('slidesInView');
|
|
1153
|
+
}, {
|
|
1154
|
+
root: container.parentElement,
|
|
1155
|
+
threshold
|
|
1156
|
+
});
|
|
1157
|
+
slides.forEach(slide => intersectionObserver.observe(slide));
|
|
1158
|
+
}
|
|
1159
|
+
function destroy() {
|
|
1160
|
+
if (intersectionObserver) intersectionObserver.disconnect();
|
|
1161
|
+
destroyed = true;
|
|
1162
|
+
}
|
|
1163
|
+
function createInViewList(inView) {
|
|
1164
|
+
return objectKeys(intersectionEntryMap).reduce((list, slideIndex) => {
|
|
1165
|
+
const index = parseInt(slideIndex);
|
|
1166
|
+
const {
|
|
1167
|
+
isIntersecting
|
|
1168
|
+
} = intersectionEntryMap[index];
|
|
1169
|
+
const inViewMatch = inView && isIntersecting;
|
|
1170
|
+
const notInViewMatch = !inView && !isIntersecting;
|
|
1171
|
+
if (inViewMatch || notInViewMatch) list.push(index);
|
|
1172
|
+
return list;
|
|
1173
|
+
}, []);
|
|
1174
|
+
}
|
|
1175
|
+
function get(inView = true) {
|
|
1176
|
+
if (inView && inViewCache) return inViewCache;
|
|
1177
|
+
if (!inView && notInViewCache) return notInViewCache;
|
|
1178
|
+
const slideIndexes = createInViewList(inView);
|
|
1179
|
+
if (inView) inViewCache = slideIndexes;
|
|
1180
|
+
if (!inView) notInViewCache = slideIndexes;
|
|
1181
|
+
return slideIndexes;
|
|
1182
|
+
}
|
|
1183
|
+
const self = {
|
|
1184
|
+
init,
|
|
1185
|
+
destroy,
|
|
1186
|
+
get
|
|
1187
|
+
};
|
|
1188
|
+
return self;
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
function SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow) {
|
|
1192
|
+
const {
|
|
1193
|
+
measureSize,
|
|
1194
|
+
startEdge,
|
|
1195
|
+
endEdge
|
|
1196
|
+
} = axis;
|
|
1197
|
+
const withEdgeGap = slideRects[0] && readEdgeGap;
|
|
1198
|
+
const startGap = measureStartGap();
|
|
1199
|
+
const endGap = measureEndGap();
|
|
1200
|
+
const slideSizes = slideRects.map(measureSize);
|
|
1201
|
+
const slideSizesWithGaps = measureWithGaps();
|
|
1202
|
+
function measureStartGap() {
|
|
1203
|
+
if (!withEdgeGap) return 0;
|
|
1204
|
+
const slideRect = slideRects[0];
|
|
1205
|
+
return mathAbs(containerRect[startEdge] - slideRect[startEdge]);
|
|
1206
|
+
}
|
|
1207
|
+
function measureEndGap() {
|
|
1208
|
+
if (!withEdgeGap) return 0;
|
|
1209
|
+
const style = ownerWindow.getComputedStyle(arrayLast(slides));
|
|
1210
|
+
return parseFloat(style.getPropertyValue(`margin-${endEdge}`));
|
|
1211
|
+
}
|
|
1212
|
+
function measureWithGaps() {
|
|
1213
|
+
return slideRects.map((rect, index, rects) => {
|
|
1214
|
+
const isFirst = !index;
|
|
1215
|
+
const isLast = arrayIsLastIndex(rects, index);
|
|
1216
|
+
if (isFirst) return slideSizes[index] + startGap;
|
|
1217
|
+
if (isLast) return slideSizes[index] + endGap;
|
|
1218
|
+
return rects[index + 1][startEdge] - rect[startEdge];
|
|
1219
|
+
}).map(mathAbs);
|
|
1220
|
+
}
|
|
1221
|
+
const self = {
|
|
1222
|
+
slideSizes,
|
|
1223
|
+
slideSizesWithGaps,
|
|
1224
|
+
startGap,
|
|
1225
|
+
endGap
|
|
1226
|
+
};
|
|
1227
|
+
return self;
|
|
1228
|
+
}
|
|
1229
|
+
|
|
1230
|
+
function SlidesToScroll(axis, viewSize, slidesToScroll, loop, containerRect, slideRects, startGap, endGap, pixelTolerance) {
|
|
1231
|
+
const {
|
|
1232
|
+
startEdge,
|
|
1233
|
+
endEdge,
|
|
1234
|
+
direction
|
|
1235
|
+
} = axis;
|
|
1236
|
+
const groupByNumber = isNumber(slidesToScroll);
|
|
1237
|
+
function byNumber(array, groupSize) {
|
|
1238
|
+
return arrayKeys(array).filter(i => i % groupSize === 0).map(i => array.slice(i, i + groupSize));
|
|
1239
|
+
}
|
|
1240
|
+
function bySize(array) {
|
|
1241
|
+
if (!array.length) return [];
|
|
1242
|
+
return arrayKeys(array).reduce((groups, rectB, index) => {
|
|
1243
|
+
const rectA = arrayLast(groups) || 0;
|
|
1244
|
+
const isFirst = rectA === 0;
|
|
1245
|
+
const isLast = rectB === arrayLastIndex(array);
|
|
1246
|
+
const edgeA = containerRect[startEdge] - slideRects[rectA][startEdge];
|
|
1247
|
+
const edgeB = containerRect[startEdge] - slideRects[rectB][endEdge];
|
|
1248
|
+
const gapA = !loop && isFirst ? direction(startGap) : 0;
|
|
1249
|
+
const gapB = !loop && isLast ? direction(endGap) : 0;
|
|
1250
|
+
const chunkSize = mathAbs(edgeB - gapB - (edgeA + gapA));
|
|
1251
|
+
if (index && chunkSize > viewSize + pixelTolerance) groups.push(rectB);
|
|
1252
|
+
if (isLast) groups.push(array.length);
|
|
1253
|
+
return groups;
|
|
1254
|
+
}, []).map((currentSize, index, groups) => {
|
|
1255
|
+
const previousSize = Math.max(groups[index - 1] || 0);
|
|
1256
|
+
return array.slice(previousSize, currentSize);
|
|
1257
|
+
});
|
|
1258
|
+
}
|
|
1259
|
+
function groupSlides(array) {
|
|
1260
|
+
return groupByNumber ? byNumber(array, slidesToScroll) : bySize(array);
|
|
1261
|
+
}
|
|
1262
|
+
const self = {
|
|
1263
|
+
groupSlides
|
|
1264
|
+
};
|
|
1265
|
+
return self;
|
|
1266
|
+
}
|
|
1267
|
+
|
|
1268
|
+
function Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler) {
|
|
1269
|
+
// Options
|
|
1270
|
+
const {
|
|
1271
|
+
align,
|
|
1272
|
+
axis: scrollAxis,
|
|
1273
|
+
direction,
|
|
1274
|
+
startIndex,
|
|
1275
|
+
loop,
|
|
1276
|
+
duration,
|
|
1277
|
+
dragFree,
|
|
1278
|
+
dragThreshold,
|
|
1279
|
+
inViewThreshold,
|
|
1280
|
+
slidesToScroll: groupSlides,
|
|
1281
|
+
skipSnaps,
|
|
1282
|
+
containScroll,
|
|
1283
|
+
watchResize,
|
|
1284
|
+
watchSlides,
|
|
1285
|
+
watchDrag,
|
|
1286
|
+
watchFocus
|
|
1287
|
+
} = options;
|
|
1288
|
+
// Measurements
|
|
1289
|
+
const pixelTolerance = 2;
|
|
1290
|
+
const nodeRects = NodeRects();
|
|
1291
|
+
const containerRect = nodeRects.measure(container);
|
|
1292
|
+
const slideRects = slides.map(nodeRects.measure);
|
|
1293
|
+
const axis = Axis(scrollAxis, direction);
|
|
1294
|
+
const viewSize = axis.measureSize(containerRect);
|
|
1295
|
+
const percentOfView = PercentOfView(viewSize);
|
|
1296
|
+
const alignment = Alignment(align, viewSize);
|
|
1297
|
+
const containSnaps = !loop && !!containScroll;
|
|
1298
|
+
const readEdgeGap = loop || !!containScroll;
|
|
1299
|
+
const {
|
|
1300
|
+
slideSizes,
|
|
1301
|
+
slideSizesWithGaps,
|
|
1302
|
+
startGap,
|
|
1303
|
+
endGap
|
|
1304
|
+
} = SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow);
|
|
1305
|
+
const slidesToScroll = SlidesToScroll(axis, viewSize, groupSlides, loop, containerRect, slideRects, startGap, endGap, pixelTolerance);
|
|
1306
|
+
const {
|
|
1307
|
+
snaps,
|
|
1308
|
+
snapsAligned
|
|
1309
|
+
} = ScrollSnaps(axis, alignment, containerRect, slideRects, slidesToScroll);
|
|
1310
|
+
const contentSize = -arrayLast(snaps) + arrayLast(slideSizesWithGaps);
|
|
1311
|
+
const {
|
|
1312
|
+
snapsContained,
|
|
1313
|
+
scrollContainLimit
|
|
1314
|
+
} = ScrollContain(viewSize, contentSize, snapsAligned, containScroll, pixelTolerance);
|
|
1315
|
+
const scrollSnaps = containSnaps ? snapsContained : snapsAligned;
|
|
1316
|
+
const {
|
|
1317
|
+
limit
|
|
1318
|
+
} = ScrollLimit(contentSize, scrollSnaps, loop);
|
|
1319
|
+
// Indexes
|
|
1320
|
+
const index = Counter(arrayLastIndex(scrollSnaps), startIndex, loop);
|
|
1321
|
+
const indexPrevious = index.clone();
|
|
1322
|
+
const slideIndexes = arrayKeys(slides);
|
|
1323
|
+
// Animation
|
|
1324
|
+
const update = ({
|
|
1325
|
+
dragHandler,
|
|
1326
|
+
scrollBody,
|
|
1327
|
+
scrollBounds,
|
|
1328
|
+
options: {
|
|
1329
|
+
loop
|
|
1330
|
+
}
|
|
1331
|
+
}) => {
|
|
1332
|
+
if (!loop) scrollBounds.constrain(dragHandler.pointerDown());
|
|
1333
|
+
scrollBody.seek();
|
|
1334
|
+
};
|
|
1335
|
+
const render = ({
|
|
1336
|
+
scrollBody,
|
|
1337
|
+
translate,
|
|
1338
|
+
location,
|
|
1339
|
+
offsetLocation,
|
|
1340
|
+
previousLocation,
|
|
1341
|
+
scrollLooper,
|
|
1342
|
+
slideLooper,
|
|
1343
|
+
dragHandler,
|
|
1344
|
+
animation,
|
|
1345
|
+
eventHandler,
|
|
1346
|
+
scrollBounds,
|
|
1347
|
+
options: {
|
|
1348
|
+
loop
|
|
1349
|
+
}
|
|
1350
|
+
}, alpha) => {
|
|
1351
|
+
const shouldSettle = scrollBody.settled();
|
|
1352
|
+
const withinBounds = !scrollBounds.shouldConstrain();
|
|
1353
|
+
const hasSettled = loop ? shouldSettle : shouldSettle && withinBounds;
|
|
1354
|
+
const hasSettledAndIdle = hasSettled && !dragHandler.pointerDown();
|
|
1355
|
+
if (hasSettledAndIdle) animation.stop();
|
|
1356
|
+
const interpolatedLocation = location.get() * alpha + previousLocation.get() * (1 - alpha);
|
|
1357
|
+
offsetLocation.set(interpolatedLocation);
|
|
1358
|
+
if (loop) {
|
|
1359
|
+
scrollLooper.loop(scrollBody.direction());
|
|
1360
|
+
slideLooper.loop();
|
|
1361
|
+
}
|
|
1362
|
+
translate.to(offsetLocation.get());
|
|
1363
|
+
if (hasSettledAndIdle) eventHandler.emit('settle');
|
|
1364
|
+
if (!hasSettled) eventHandler.emit('scroll');
|
|
1365
|
+
};
|
|
1366
|
+
const animation = Animations(ownerDocument, ownerWindow, () => update(engine), alpha => render(engine, alpha));
|
|
1367
|
+
// Shared
|
|
1368
|
+
const friction = 0.68;
|
|
1369
|
+
const startLocation = scrollSnaps[index.get()];
|
|
1370
|
+
const location = Vector1D(startLocation);
|
|
1371
|
+
const previousLocation = Vector1D(startLocation);
|
|
1372
|
+
const offsetLocation = Vector1D(startLocation);
|
|
1373
|
+
const target = Vector1D(startLocation);
|
|
1374
|
+
const scrollBody = ScrollBody(location, offsetLocation, previousLocation, target, duration, friction);
|
|
1375
|
+
const scrollTarget = ScrollTarget(loop, scrollSnaps, contentSize, limit, target);
|
|
1376
|
+
const scrollTo = ScrollTo(animation, index, indexPrevious, scrollBody, scrollTarget, target, eventHandler);
|
|
1377
|
+
const scrollProgress = ScrollProgress(limit);
|
|
1378
|
+
const eventStore = EventStore();
|
|
1379
|
+
const slidesInView = SlidesInView(container, slides, eventHandler, inViewThreshold);
|
|
1380
|
+
const {
|
|
1381
|
+
slideRegistry
|
|
1382
|
+
} = SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes);
|
|
1383
|
+
const slideFocus = SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus);
|
|
1384
|
+
// Engine
|
|
1385
|
+
const engine = {
|
|
1386
|
+
ownerDocument,
|
|
1387
|
+
ownerWindow,
|
|
1388
|
+
eventHandler,
|
|
1389
|
+
containerRect,
|
|
1390
|
+
slideRects,
|
|
1391
|
+
animation,
|
|
1392
|
+
axis,
|
|
1393
|
+
dragHandler: DragHandler(axis, root, ownerDocument, ownerWindow, target, DragTracker(axis, ownerWindow), location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, friction, watchDrag),
|
|
1394
|
+
eventStore,
|
|
1395
|
+
percentOfView,
|
|
1396
|
+
index,
|
|
1397
|
+
indexPrevious,
|
|
1398
|
+
limit,
|
|
1399
|
+
location,
|
|
1400
|
+
offsetLocation,
|
|
1401
|
+
previousLocation,
|
|
1402
|
+
options,
|
|
1403
|
+
resizeHandler: ResizeHandler(container, eventHandler, ownerWindow, slides, axis, watchResize, nodeRects),
|
|
1404
|
+
scrollBody,
|
|
1405
|
+
scrollBounds: ScrollBounds(limit, offsetLocation, target, scrollBody, percentOfView),
|
|
1406
|
+
scrollLooper: ScrollLooper(contentSize, limit, offsetLocation, [location, offsetLocation, previousLocation, target]),
|
|
1407
|
+
scrollProgress,
|
|
1408
|
+
scrollSnapList: scrollSnaps.map(scrollProgress.get),
|
|
1409
|
+
scrollSnaps,
|
|
1410
|
+
scrollTarget,
|
|
1411
|
+
scrollTo,
|
|
1412
|
+
slideLooper: SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, offsetLocation, slides),
|
|
1413
|
+
slideFocus,
|
|
1414
|
+
slidesHandler: SlidesHandler(container, eventHandler, watchSlides),
|
|
1415
|
+
slidesInView,
|
|
1416
|
+
slideIndexes,
|
|
1417
|
+
slideRegistry,
|
|
1418
|
+
slidesToScroll,
|
|
1419
|
+
target,
|
|
1420
|
+
translate: Translate(axis, container)
|
|
1421
|
+
};
|
|
1422
|
+
return engine;
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
function EventHandler() {
|
|
1426
|
+
let listeners = {};
|
|
1427
|
+
let api;
|
|
1428
|
+
function init(emblaApi) {
|
|
1429
|
+
api = emblaApi;
|
|
1430
|
+
}
|
|
1431
|
+
function getListeners(evt) {
|
|
1432
|
+
return listeners[evt] || [];
|
|
1433
|
+
}
|
|
1434
|
+
function emit(evt) {
|
|
1435
|
+
getListeners(evt).forEach(e => e(api, evt));
|
|
1436
|
+
return self;
|
|
1437
|
+
}
|
|
1438
|
+
function on(evt, cb) {
|
|
1439
|
+
listeners[evt] = getListeners(evt).concat([cb]);
|
|
1440
|
+
return self;
|
|
1441
|
+
}
|
|
1442
|
+
function off(evt, cb) {
|
|
1443
|
+
listeners[evt] = getListeners(evt).filter(e => e !== cb);
|
|
1444
|
+
return self;
|
|
1445
|
+
}
|
|
1446
|
+
function clear() {
|
|
1447
|
+
listeners = {};
|
|
1448
|
+
}
|
|
1449
|
+
const self = {
|
|
1450
|
+
init,
|
|
1451
|
+
emit,
|
|
1452
|
+
off,
|
|
1453
|
+
on,
|
|
1454
|
+
clear
|
|
1455
|
+
};
|
|
1456
|
+
return self;
|
|
1457
|
+
}
|
|
1458
|
+
|
|
1459
|
+
const defaultOptions$3 = {
|
|
1460
|
+
align: 'center',
|
|
1461
|
+
axis: 'x',
|
|
1462
|
+
container: null,
|
|
1463
|
+
slides: null,
|
|
1464
|
+
containScroll: 'trimSnaps',
|
|
1465
|
+
direction: 'ltr',
|
|
1466
|
+
slidesToScroll: 1,
|
|
1467
|
+
inViewThreshold: 0,
|
|
1468
|
+
breakpoints: {},
|
|
1469
|
+
dragFree: false,
|
|
1470
|
+
dragThreshold: 10,
|
|
1471
|
+
loop: false,
|
|
1472
|
+
skipSnaps: false,
|
|
1473
|
+
duration: 25,
|
|
1474
|
+
startIndex: 0,
|
|
1475
|
+
active: true,
|
|
1476
|
+
watchDrag: true,
|
|
1477
|
+
watchResize: true,
|
|
1478
|
+
watchSlides: true,
|
|
1479
|
+
watchFocus: true
|
|
1480
|
+
};
|
|
1481
|
+
|
|
1482
|
+
function OptionsHandler(ownerWindow) {
|
|
1483
|
+
function mergeOptions(optionsA, optionsB) {
|
|
1484
|
+
return objectsMergeDeep(optionsA, optionsB || {});
|
|
1485
|
+
}
|
|
1486
|
+
function optionsAtMedia(options) {
|
|
1487
|
+
const optionsAtMedia = options.breakpoints || {};
|
|
1488
|
+
const matchedMediaOptions = objectKeys(optionsAtMedia).filter(media => ownerWindow.matchMedia(media).matches).map(media => optionsAtMedia[media]).reduce((a, mediaOption) => mergeOptions(a, mediaOption), {});
|
|
1489
|
+
return mergeOptions(options, matchedMediaOptions);
|
|
1490
|
+
}
|
|
1491
|
+
function optionsMediaQueries(optionsList) {
|
|
1492
|
+
return optionsList.map(options => objectKeys(options.breakpoints || {})).reduce((acc, mediaQueries) => acc.concat(mediaQueries), []).map(ownerWindow.matchMedia);
|
|
1493
|
+
}
|
|
1494
|
+
const self = {
|
|
1495
|
+
mergeOptions,
|
|
1496
|
+
optionsAtMedia,
|
|
1497
|
+
optionsMediaQueries
|
|
1498
|
+
};
|
|
1499
|
+
return self;
|
|
1500
|
+
}
|
|
1501
|
+
|
|
1502
|
+
function PluginsHandler(optionsHandler) {
|
|
1503
|
+
let activePlugins = [];
|
|
1504
|
+
function init(emblaApi, plugins) {
|
|
1505
|
+
activePlugins = plugins.filter(({
|
|
1506
|
+
options
|
|
1507
|
+
}) => optionsHandler.optionsAtMedia(options).active !== false);
|
|
1508
|
+
activePlugins.forEach(plugin => plugin.init(emblaApi, optionsHandler));
|
|
1509
|
+
return plugins.reduce((map, plugin) => Object.assign(map, {
|
|
1510
|
+
[plugin.name]: plugin
|
|
1511
|
+
}), {});
|
|
1512
|
+
}
|
|
1513
|
+
function destroy() {
|
|
1514
|
+
activePlugins = activePlugins.filter(plugin => plugin.destroy());
|
|
1515
|
+
}
|
|
1516
|
+
const self = {
|
|
1517
|
+
init,
|
|
1518
|
+
destroy
|
|
1519
|
+
};
|
|
1520
|
+
return self;
|
|
1521
|
+
}
|
|
1522
|
+
|
|
1523
|
+
function EmblaCarousel(root, userOptions, userPlugins) {
|
|
1524
|
+
const ownerDocument = root.ownerDocument;
|
|
1525
|
+
const ownerWindow = ownerDocument.defaultView;
|
|
1526
|
+
const optionsHandler = OptionsHandler(ownerWindow);
|
|
1527
|
+
const pluginsHandler = PluginsHandler(optionsHandler);
|
|
1528
|
+
const mediaHandlers = EventStore();
|
|
1529
|
+
const eventHandler = EventHandler();
|
|
1530
|
+
const {
|
|
1531
|
+
mergeOptions,
|
|
1532
|
+
optionsAtMedia,
|
|
1533
|
+
optionsMediaQueries
|
|
1534
|
+
} = optionsHandler;
|
|
1535
|
+
const {
|
|
1536
|
+
on,
|
|
1537
|
+
off,
|
|
1538
|
+
emit
|
|
1539
|
+
} = eventHandler;
|
|
1540
|
+
const reInit = reActivate;
|
|
1541
|
+
let destroyed = false;
|
|
1542
|
+
let engine;
|
|
1543
|
+
let optionsBase = mergeOptions(defaultOptions$3, EmblaCarousel.globalOptions);
|
|
1544
|
+
let options = mergeOptions(optionsBase);
|
|
1545
|
+
let pluginList = [];
|
|
1546
|
+
let pluginApis;
|
|
1547
|
+
let container;
|
|
1548
|
+
let slides;
|
|
1549
|
+
function storeElements() {
|
|
1550
|
+
const {
|
|
1551
|
+
container: userContainer,
|
|
1552
|
+
slides: userSlides
|
|
1553
|
+
} = options;
|
|
1554
|
+
const customContainer = isString(userContainer) ? root.querySelector(userContainer) : userContainer;
|
|
1555
|
+
container = customContainer || root.children[0];
|
|
1556
|
+
const customSlides = isString(userSlides) ? container.querySelectorAll(userSlides) : userSlides;
|
|
1557
|
+
slides = [].slice.call(customSlides || container.children);
|
|
1558
|
+
}
|
|
1559
|
+
function createEngine(options) {
|
|
1560
|
+
const engine = Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler);
|
|
1561
|
+
if (options.loop && !engine.slideLooper.canLoop()) {
|
|
1562
|
+
const optionsWithoutLoop = Object.assign({}, options, {
|
|
1563
|
+
loop: false
|
|
1564
|
+
});
|
|
1565
|
+
return createEngine(optionsWithoutLoop);
|
|
1566
|
+
}
|
|
1567
|
+
return engine;
|
|
1568
|
+
}
|
|
1569
|
+
function activate(withOptions, withPlugins) {
|
|
1570
|
+
if (destroyed) return;
|
|
1571
|
+
optionsBase = mergeOptions(optionsBase, withOptions);
|
|
1572
|
+
options = optionsAtMedia(optionsBase);
|
|
1573
|
+
pluginList = withPlugins || pluginList;
|
|
1574
|
+
storeElements();
|
|
1575
|
+
engine = createEngine(options);
|
|
1576
|
+
optionsMediaQueries([optionsBase, ...pluginList.map(({
|
|
1577
|
+
options
|
|
1578
|
+
}) => options)]).forEach(query => mediaHandlers.add(query, 'change', reActivate));
|
|
1579
|
+
if (!options.active) return;
|
|
1580
|
+
engine.translate.to(engine.location.get());
|
|
1581
|
+
engine.animation.init();
|
|
1582
|
+
engine.slidesInView.init();
|
|
1583
|
+
engine.slideFocus.init(self);
|
|
1584
|
+
engine.eventHandler.init(self);
|
|
1585
|
+
engine.resizeHandler.init(self);
|
|
1586
|
+
engine.slidesHandler.init(self);
|
|
1587
|
+
if (engine.options.loop) engine.slideLooper.loop();
|
|
1588
|
+
if (container.offsetParent && slides.length) engine.dragHandler.init(self);
|
|
1589
|
+
pluginApis = pluginsHandler.init(self, pluginList);
|
|
1590
|
+
}
|
|
1591
|
+
function reActivate(withOptions, withPlugins) {
|
|
1592
|
+
const startIndex = selectedScrollSnap();
|
|
1593
|
+
deActivate();
|
|
1594
|
+
activate(mergeOptions({
|
|
1595
|
+
startIndex
|
|
1596
|
+
}, withOptions), withPlugins);
|
|
1597
|
+
eventHandler.emit('reInit');
|
|
1598
|
+
}
|
|
1599
|
+
function deActivate() {
|
|
1600
|
+
engine.dragHandler.destroy();
|
|
1601
|
+
engine.eventStore.clear();
|
|
1602
|
+
engine.translate.clear();
|
|
1603
|
+
engine.slideLooper.clear();
|
|
1604
|
+
engine.resizeHandler.destroy();
|
|
1605
|
+
engine.slidesHandler.destroy();
|
|
1606
|
+
engine.slidesInView.destroy();
|
|
1607
|
+
engine.animation.destroy();
|
|
1608
|
+
pluginsHandler.destroy();
|
|
1609
|
+
mediaHandlers.clear();
|
|
1610
|
+
}
|
|
1611
|
+
function destroy() {
|
|
1612
|
+
if (destroyed) return;
|
|
1613
|
+
destroyed = true;
|
|
1614
|
+
mediaHandlers.clear();
|
|
1615
|
+
deActivate();
|
|
1616
|
+
eventHandler.emit('destroy');
|
|
1617
|
+
eventHandler.clear();
|
|
1618
|
+
}
|
|
1619
|
+
function scrollTo(index, jump, direction) {
|
|
1620
|
+
if (!options.active || destroyed) return;
|
|
1621
|
+
engine.scrollBody.useBaseFriction().useDuration(jump === true ? 0 : options.duration);
|
|
1622
|
+
engine.scrollTo.index(index, direction || 0);
|
|
1623
|
+
}
|
|
1624
|
+
function scrollNext(jump) {
|
|
1625
|
+
const next = engine.index.add(1).get();
|
|
1626
|
+
scrollTo(next, jump, -1);
|
|
1627
|
+
}
|
|
1628
|
+
function scrollPrev(jump) {
|
|
1629
|
+
const prev = engine.index.add(-1).get();
|
|
1630
|
+
scrollTo(prev, jump, 1);
|
|
1631
|
+
}
|
|
1632
|
+
function canScrollNext() {
|
|
1633
|
+
const next = engine.index.add(1).get();
|
|
1634
|
+
return next !== selectedScrollSnap();
|
|
1635
|
+
}
|
|
1636
|
+
function canScrollPrev() {
|
|
1637
|
+
const prev = engine.index.add(-1).get();
|
|
1638
|
+
return prev !== selectedScrollSnap();
|
|
1639
|
+
}
|
|
1640
|
+
function scrollSnapList() {
|
|
1641
|
+
return engine.scrollSnapList;
|
|
1642
|
+
}
|
|
1643
|
+
function scrollProgress() {
|
|
1644
|
+
return engine.scrollProgress.get(engine.offsetLocation.get());
|
|
1645
|
+
}
|
|
1646
|
+
function selectedScrollSnap() {
|
|
1647
|
+
return engine.index.get();
|
|
1648
|
+
}
|
|
1649
|
+
function previousScrollSnap() {
|
|
1650
|
+
return engine.indexPrevious.get();
|
|
1651
|
+
}
|
|
1652
|
+
function slidesInView() {
|
|
1653
|
+
return engine.slidesInView.get();
|
|
1654
|
+
}
|
|
1655
|
+
function slidesNotInView() {
|
|
1656
|
+
return engine.slidesInView.get(false);
|
|
1657
|
+
}
|
|
1658
|
+
function plugins() {
|
|
1659
|
+
return pluginApis;
|
|
1660
|
+
}
|
|
1661
|
+
function internalEngine() {
|
|
1662
|
+
return engine;
|
|
1663
|
+
}
|
|
1664
|
+
function rootNode() {
|
|
1665
|
+
return root;
|
|
1666
|
+
}
|
|
1667
|
+
function containerNode() {
|
|
1668
|
+
return container;
|
|
1669
|
+
}
|
|
1670
|
+
function slideNodes() {
|
|
1671
|
+
return slides;
|
|
1672
|
+
}
|
|
1673
|
+
const self = {
|
|
1674
|
+
canScrollNext,
|
|
1675
|
+
canScrollPrev,
|
|
1676
|
+
containerNode,
|
|
1677
|
+
internalEngine,
|
|
1678
|
+
destroy,
|
|
1679
|
+
off,
|
|
1680
|
+
on,
|
|
1681
|
+
emit,
|
|
1682
|
+
plugins,
|
|
1683
|
+
previousScrollSnap,
|
|
1684
|
+
reInit,
|
|
1685
|
+
rootNode,
|
|
1686
|
+
scrollNext,
|
|
1687
|
+
scrollPrev,
|
|
1688
|
+
scrollProgress,
|
|
1689
|
+
scrollSnapList,
|
|
1690
|
+
scrollTo,
|
|
1691
|
+
selectedScrollSnap,
|
|
1692
|
+
slideNodes,
|
|
1693
|
+
slidesInView,
|
|
1694
|
+
slidesNotInView
|
|
1695
|
+
};
|
|
1696
|
+
activate(userOptions, userPlugins);
|
|
1697
|
+
setTimeout(() => eventHandler.emit('init'), 0);
|
|
1698
|
+
return self;
|
|
1699
|
+
}
|
|
1700
|
+
EmblaCarousel.globalOptions = undefined;
|
|
1701
|
+
|
|
1702
|
+
const defaultOptions$2 = {
|
|
1703
|
+
direction: 'forward',
|
|
1704
|
+
speed: 2,
|
|
1705
|
+
startDelay: 1000,
|
|
1706
|
+
active: true,
|
|
1707
|
+
breakpoints: {},
|
|
1708
|
+
playOnInit: true,
|
|
1709
|
+
stopOnFocusIn: true,
|
|
1710
|
+
stopOnInteraction: true,
|
|
1711
|
+
stopOnMouseEnter: false,
|
|
1712
|
+
rootNode: null
|
|
1713
|
+
};
|
|
1714
|
+
|
|
1715
|
+
function getAutoScrollRootNode(emblaApi, rootNode) {
|
|
1716
|
+
const emblaRootNode = emblaApi.rootNode();
|
|
1717
|
+
return rootNode && rootNode(emblaRootNode) || emblaRootNode;
|
|
1718
|
+
}
|
|
1719
|
+
|
|
1720
|
+
function AutoScroll(userOptions = {}) {
|
|
1721
|
+
let options;
|
|
1722
|
+
let emblaApi;
|
|
1723
|
+
let destroyed;
|
|
1724
|
+
let startDelay;
|
|
1725
|
+
let timerId = 0;
|
|
1726
|
+
let autoScrollActive = false;
|
|
1727
|
+
let mouseIsOver = false;
|
|
1728
|
+
let defaultScrollBehaviour;
|
|
1729
|
+
function init(emblaApiInstance, optionsHandler) {
|
|
1730
|
+
emblaApi = emblaApiInstance;
|
|
1731
|
+
const {
|
|
1732
|
+
mergeOptions,
|
|
1733
|
+
optionsAtMedia
|
|
1734
|
+
} = optionsHandler;
|
|
1735
|
+
const optionsBase = mergeOptions(defaultOptions$2, AutoScroll.globalOptions);
|
|
1736
|
+
const allOptions = mergeOptions(optionsBase, userOptions);
|
|
1737
|
+
options = optionsAtMedia(allOptions);
|
|
1738
|
+
if (emblaApi.scrollSnapList().length <= 1) return;
|
|
1739
|
+
startDelay = options.startDelay;
|
|
1740
|
+
destroyed = false;
|
|
1741
|
+
defaultScrollBehaviour = emblaApi.internalEngine().scrollBody;
|
|
1742
|
+
const {
|
|
1743
|
+
eventStore
|
|
1744
|
+
} = emblaApi.internalEngine();
|
|
1745
|
+
const isDraggable = !!emblaApi.internalEngine().options.watchDrag;
|
|
1746
|
+
const root = getAutoScrollRootNode(emblaApi, options.rootNode);
|
|
1747
|
+
if (isDraggable) {
|
|
1748
|
+
emblaApi.on('pointerDown', pointerDown);
|
|
1749
|
+
}
|
|
1750
|
+
if (isDraggable && !options.stopOnInteraction) {
|
|
1751
|
+
emblaApi.on('pointerUp', pointerUp);
|
|
1752
|
+
}
|
|
1753
|
+
if (options.stopOnMouseEnter) {
|
|
1754
|
+
eventStore.add(root, 'mouseenter', mouseEnter);
|
|
1755
|
+
}
|
|
1756
|
+
if (options.stopOnMouseEnter && !options.stopOnInteraction) {
|
|
1757
|
+
eventStore.add(root, 'mouseleave', mouseLeave);
|
|
1758
|
+
}
|
|
1759
|
+
if (options.stopOnFocusIn) {
|
|
1760
|
+
emblaApi.on('slideFocusStart', stopAutoScroll);
|
|
1761
|
+
}
|
|
1762
|
+
if (options.stopOnFocusIn && !options.stopOnInteraction) {
|
|
1763
|
+
eventStore.add(emblaApi.containerNode(), 'focusout', startAutoScroll);
|
|
1764
|
+
}
|
|
1765
|
+
if (options.playOnInit) startAutoScroll();
|
|
1766
|
+
}
|
|
1767
|
+
function destroy() {
|
|
1768
|
+
emblaApi.off('pointerDown', pointerDown).off('pointerUp', pointerUp).off('slideFocusStart', stopAutoScroll).off('settle', settle);
|
|
1769
|
+
stopAutoScroll();
|
|
1770
|
+
destroyed = true;
|
|
1771
|
+
autoScrollActive = false;
|
|
1772
|
+
}
|
|
1773
|
+
function startAutoScroll() {
|
|
1774
|
+
if (destroyed) return;
|
|
1775
|
+
if (autoScrollActive) return;
|
|
1776
|
+
emblaApi.emit('autoScroll:play');
|
|
1777
|
+
const engine = emblaApi.internalEngine();
|
|
1778
|
+
const {
|
|
1779
|
+
ownerWindow
|
|
1780
|
+
} = engine;
|
|
1781
|
+
timerId = ownerWindow.setTimeout(() => {
|
|
1782
|
+
engine.scrollBody = createAutoScrollBehaviour(engine);
|
|
1783
|
+
engine.animation.start();
|
|
1784
|
+
}, startDelay);
|
|
1785
|
+
autoScrollActive = true;
|
|
1786
|
+
}
|
|
1787
|
+
function stopAutoScroll() {
|
|
1788
|
+
if (destroyed) return;
|
|
1789
|
+
if (!autoScrollActive) return;
|
|
1790
|
+
emblaApi.emit('autoScroll:stop');
|
|
1791
|
+
const engine = emblaApi.internalEngine();
|
|
1792
|
+
const {
|
|
1793
|
+
ownerWindow
|
|
1794
|
+
} = engine;
|
|
1795
|
+
engine.scrollBody = defaultScrollBehaviour;
|
|
1796
|
+
ownerWindow.clearTimeout(timerId);
|
|
1797
|
+
timerId = 0;
|
|
1798
|
+
autoScrollActive = false;
|
|
1799
|
+
}
|
|
1800
|
+
function createAutoScrollBehaviour(engine) {
|
|
1801
|
+
const {
|
|
1802
|
+
location,
|
|
1803
|
+
previousLocation,
|
|
1804
|
+
offsetLocation,
|
|
1805
|
+
target,
|
|
1806
|
+
scrollTarget,
|
|
1807
|
+
index,
|
|
1808
|
+
indexPrevious,
|
|
1809
|
+
limit: {
|
|
1810
|
+
reachedMin,
|
|
1811
|
+
reachedMax,
|
|
1812
|
+
constrain
|
|
1813
|
+
},
|
|
1814
|
+
options: {
|
|
1815
|
+
loop
|
|
1816
|
+
}
|
|
1817
|
+
} = engine;
|
|
1818
|
+
const directionSign = options.direction === 'forward' ? -1 : 1;
|
|
1819
|
+
const noop = () => self;
|
|
1820
|
+
let bodyVelocity = 0;
|
|
1821
|
+
let scrollDirection = 0;
|
|
1822
|
+
let rawLocation = location.get();
|
|
1823
|
+
let rawLocationPrevious = 0;
|
|
1824
|
+
let hasSettled = false;
|
|
1825
|
+
function seek() {
|
|
1826
|
+
let directionDiff = 0;
|
|
1827
|
+
previousLocation.set(location);
|
|
1828
|
+
bodyVelocity = directionSign * options.speed;
|
|
1829
|
+
rawLocation += bodyVelocity;
|
|
1830
|
+
location.add(bodyVelocity);
|
|
1831
|
+
target.set(location);
|
|
1832
|
+
directionDiff = rawLocation - rawLocationPrevious;
|
|
1833
|
+
scrollDirection = Math.sign(directionDiff);
|
|
1834
|
+
rawLocationPrevious = rawLocation;
|
|
1835
|
+
const currentIndex = scrollTarget.byDistance(0, false).index;
|
|
1836
|
+
if (index.get() !== currentIndex) {
|
|
1837
|
+
indexPrevious.set(index.get());
|
|
1838
|
+
index.set(currentIndex);
|
|
1839
|
+
emblaApi.emit('select');
|
|
1840
|
+
}
|
|
1841
|
+
const reachedEnd = options.direction === 'forward' ? reachedMin(offsetLocation.get()) : reachedMax(offsetLocation.get());
|
|
1842
|
+
if (!loop && reachedEnd) {
|
|
1843
|
+
hasSettled = true;
|
|
1844
|
+
const constrainedLocation = constrain(location.get());
|
|
1845
|
+
location.set(constrainedLocation);
|
|
1846
|
+
target.set(location);
|
|
1847
|
+
stopAutoScroll();
|
|
1848
|
+
}
|
|
1849
|
+
return self;
|
|
1850
|
+
}
|
|
1851
|
+
const self = {
|
|
1852
|
+
direction: () => scrollDirection,
|
|
1853
|
+
duration: () => -1,
|
|
1854
|
+
velocity: () => bodyVelocity,
|
|
1855
|
+
settled: () => hasSettled,
|
|
1856
|
+
seek,
|
|
1857
|
+
useBaseFriction: noop,
|
|
1858
|
+
useBaseDuration: noop,
|
|
1859
|
+
useFriction: noop,
|
|
1860
|
+
useDuration: noop
|
|
1861
|
+
};
|
|
1862
|
+
return self;
|
|
1863
|
+
}
|
|
1864
|
+
function pointerDown() {
|
|
1865
|
+
if (!mouseIsOver) stopAutoScroll();
|
|
1866
|
+
}
|
|
1867
|
+
function pointerUp() {
|
|
1868
|
+
if (!mouseIsOver) startAutoScrollOnSettle();
|
|
1869
|
+
}
|
|
1870
|
+
function mouseEnter() {
|
|
1871
|
+
mouseIsOver = true;
|
|
1872
|
+
stopAutoScroll();
|
|
1873
|
+
}
|
|
1874
|
+
function mouseLeave() {
|
|
1875
|
+
mouseIsOver = false;
|
|
1876
|
+
startAutoScroll();
|
|
1877
|
+
}
|
|
1878
|
+
function settle() {
|
|
1879
|
+
emblaApi.off('settle', settle);
|
|
1880
|
+
startAutoScroll();
|
|
1881
|
+
}
|
|
1882
|
+
function startAutoScrollOnSettle() {
|
|
1883
|
+
emblaApi.on('settle', settle);
|
|
1884
|
+
}
|
|
1885
|
+
function play(startDelayOverride) {
|
|
1886
|
+
if (typeof startDelayOverride !== 'undefined') {
|
|
1887
|
+
startDelay = startDelayOverride;
|
|
1888
|
+
}
|
|
1889
|
+
startAutoScroll();
|
|
1890
|
+
}
|
|
1891
|
+
function stop() {
|
|
1892
|
+
if (autoScrollActive) stopAutoScroll();
|
|
1893
|
+
}
|
|
1894
|
+
function reset() {
|
|
1895
|
+
if (autoScrollActive) {
|
|
1896
|
+
stopAutoScroll();
|
|
1897
|
+
startAutoScrollOnSettle();
|
|
1898
|
+
}
|
|
1899
|
+
}
|
|
1900
|
+
function isPlaying() {
|
|
1901
|
+
return autoScrollActive;
|
|
1902
|
+
}
|
|
1903
|
+
const self = {
|
|
1904
|
+
name: 'autoScroll',
|
|
1905
|
+
options: userOptions,
|
|
1906
|
+
init,
|
|
1907
|
+
destroy,
|
|
1908
|
+
play,
|
|
1909
|
+
stop,
|
|
1910
|
+
reset,
|
|
1911
|
+
isPlaying
|
|
1912
|
+
};
|
|
1913
|
+
return self;
|
|
1914
|
+
}
|
|
1915
|
+
AutoScroll.globalOptions = undefined;
|
|
1916
|
+
|
|
1917
|
+
const defaultOptions$1 = {
|
|
1918
|
+
active: true,
|
|
1919
|
+
breakpoints: {},
|
|
1920
|
+
delay: 4000,
|
|
1921
|
+
jump: false,
|
|
1922
|
+
playOnInit: true,
|
|
1923
|
+
stopOnFocusIn: true,
|
|
1924
|
+
stopOnInteraction: true,
|
|
1925
|
+
stopOnMouseEnter: false,
|
|
1926
|
+
stopOnLastSnap: false,
|
|
1927
|
+
rootNode: null
|
|
1928
|
+
};
|
|
1929
|
+
|
|
1930
|
+
function normalizeDelay(emblaApi, delay) {
|
|
1931
|
+
const scrollSnaps = emblaApi.scrollSnapList();
|
|
1932
|
+
if (typeof delay === 'number') {
|
|
1933
|
+
return scrollSnaps.map(() => delay);
|
|
1934
|
+
}
|
|
1935
|
+
return delay(scrollSnaps, emblaApi);
|
|
1936
|
+
}
|
|
1937
|
+
function getAutoplayRootNode(emblaApi, rootNode) {
|
|
1938
|
+
const emblaRootNode = emblaApi.rootNode();
|
|
1939
|
+
return rootNode && rootNode(emblaRootNode) || emblaRootNode;
|
|
1940
|
+
}
|
|
1941
|
+
|
|
1942
|
+
function Autoplay(userOptions = {}) {
|
|
1943
|
+
let options;
|
|
1944
|
+
let emblaApi;
|
|
1945
|
+
let destroyed;
|
|
1946
|
+
let delay;
|
|
1947
|
+
let timerStartTime = null;
|
|
1948
|
+
let timerId = 0;
|
|
1949
|
+
let autoplayActive = false;
|
|
1950
|
+
let mouseIsOver = false;
|
|
1951
|
+
let playOnDocumentVisible = false;
|
|
1952
|
+
let jump = false;
|
|
1953
|
+
function init(emblaApiInstance, optionsHandler) {
|
|
1954
|
+
emblaApi = emblaApiInstance;
|
|
1955
|
+
const {
|
|
1956
|
+
mergeOptions,
|
|
1957
|
+
optionsAtMedia
|
|
1958
|
+
} = optionsHandler;
|
|
1959
|
+
const optionsBase = mergeOptions(defaultOptions$1, Autoplay.globalOptions);
|
|
1960
|
+
const allOptions = mergeOptions(optionsBase, userOptions);
|
|
1961
|
+
options = optionsAtMedia(allOptions);
|
|
1962
|
+
if (emblaApi.scrollSnapList().length <= 1) return;
|
|
1963
|
+
jump = options.jump;
|
|
1964
|
+
destroyed = false;
|
|
1965
|
+
delay = normalizeDelay(emblaApi, options.delay);
|
|
1966
|
+
const {
|
|
1967
|
+
eventStore,
|
|
1968
|
+
ownerDocument
|
|
1969
|
+
} = emblaApi.internalEngine();
|
|
1970
|
+
const isDraggable = !!emblaApi.internalEngine().options.watchDrag;
|
|
1971
|
+
const root = getAutoplayRootNode(emblaApi, options.rootNode);
|
|
1972
|
+
eventStore.add(ownerDocument, 'visibilitychange', visibilityChange);
|
|
1973
|
+
if (isDraggable) {
|
|
1974
|
+
emblaApi.on('pointerDown', pointerDown);
|
|
1975
|
+
}
|
|
1976
|
+
if (isDraggable && !options.stopOnInteraction) {
|
|
1977
|
+
emblaApi.on('pointerUp', pointerUp);
|
|
1978
|
+
}
|
|
1979
|
+
if (options.stopOnMouseEnter) {
|
|
1980
|
+
eventStore.add(root, 'mouseenter', mouseEnter);
|
|
1981
|
+
}
|
|
1982
|
+
if (options.stopOnMouseEnter && !options.stopOnInteraction) {
|
|
1983
|
+
eventStore.add(root, 'mouseleave', mouseLeave);
|
|
1984
|
+
}
|
|
1985
|
+
if (options.stopOnFocusIn) {
|
|
1986
|
+
emblaApi.on('slideFocusStart', stopAutoplay);
|
|
1987
|
+
}
|
|
1988
|
+
if (options.stopOnFocusIn && !options.stopOnInteraction) {
|
|
1989
|
+
eventStore.add(emblaApi.containerNode(), 'focusout', startAutoplay);
|
|
1990
|
+
}
|
|
1991
|
+
if (options.playOnInit) startAutoplay();
|
|
1992
|
+
}
|
|
1993
|
+
function destroy() {
|
|
1994
|
+
emblaApi.off('pointerDown', pointerDown).off('pointerUp', pointerUp).off('slideFocusStart', stopAutoplay);
|
|
1995
|
+
stopAutoplay();
|
|
1996
|
+
destroyed = true;
|
|
1997
|
+
autoplayActive = false;
|
|
1998
|
+
}
|
|
1999
|
+
function setTimer() {
|
|
2000
|
+
const {
|
|
2001
|
+
ownerWindow
|
|
2002
|
+
} = emblaApi.internalEngine();
|
|
2003
|
+
ownerWindow.clearTimeout(timerId);
|
|
2004
|
+
timerId = ownerWindow.setTimeout(next, delay[emblaApi.selectedScrollSnap()]);
|
|
2005
|
+
timerStartTime = new Date().getTime();
|
|
2006
|
+
emblaApi.emit('autoplay:timerset');
|
|
2007
|
+
}
|
|
2008
|
+
function clearTimer() {
|
|
2009
|
+
const {
|
|
2010
|
+
ownerWindow
|
|
2011
|
+
} = emblaApi.internalEngine();
|
|
2012
|
+
ownerWindow.clearTimeout(timerId);
|
|
2013
|
+
timerId = 0;
|
|
2014
|
+
timerStartTime = null;
|
|
2015
|
+
emblaApi.emit('autoplay:timerstopped');
|
|
2016
|
+
}
|
|
2017
|
+
function startAutoplay() {
|
|
2018
|
+
if (destroyed) return;
|
|
2019
|
+
if (documentIsHidden()) {
|
|
2020
|
+
playOnDocumentVisible = true;
|
|
2021
|
+
return;
|
|
2022
|
+
}
|
|
2023
|
+
if (!autoplayActive) emblaApi.emit('autoplay:play');
|
|
2024
|
+
setTimer();
|
|
2025
|
+
autoplayActive = true;
|
|
2026
|
+
}
|
|
2027
|
+
function stopAutoplay() {
|
|
2028
|
+
if (destroyed) return;
|
|
2029
|
+
if (autoplayActive) emblaApi.emit('autoplay:stop');
|
|
2030
|
+
clearTimer();
|
|
2031
|
+
autoplayActive = false;
|
|
2032
|
+
}
|
|
2033
|
+
function visibilityChange() {
|
|
2034
|
+
if (documentIsHidden()) {
|
|
2035
|
+
playOnDocumentVisible = autoplayActive;
|
|
2036
|
+
return stopAutoplay();
|
|
2037
|
+
}
|
|
2038
|
+
if (playOnDocumentVisible) startAutoplay();
|
|
2039
|
+
}
|
|
2040
|
+
function documentIsHidden() {
|
|
2041
|
+
const {
|
|
2042
|
+
ownerDocument
|
|
2043
|
+
} = emblaApi.internalEngine();
|
|
2044
|
+
return ownerDocument.visibilityState === 'hidden';
|
|
2045
|
+
}
|
|
2046
|
+
function pointerDown() {
|
|
2047
|
+
if (!mouseIsOver) stopAutoplay();
|
|
2048
|
+
}
|
|
2049
|
+
function pointerUp() {
|
|
2050
|
+
if (!mouseIsOver) startAutoplay();
|
|
2051
|
+
}
|
|
2052
|
+
function mouseEnter() {
|
|
2053
|
+
mouseIsOver = true;
|
|
2054
|
+
stopAutoplay();
|
|
2055
|
+
}
|
|
2056
|
+
function mouseLeave() {
|
|
2057
|
+
mouseIsOver = false;
|
|
2058
|
+
startAutoplay();
|
|
2059
|
+
}
|
|
2060
|
+
function play(jumpOverride) {
|
|
2061
|
+
if (typeof jumpOverride !== 'undefined') jump = jumpOverride;
|
|
2062
|
+
startAutoplay();
|
|
2063
|
+
}
|
|
2064
|
+
function stop() {
|
|
2065
|
+
if (autoplayActive) stopAutoplay();
|
|
2066
|
+
}
|
|
2067
|
+
function reset() {
|
|
2068
|
+
if (autoplayActive) startAutoplay();
|
|
2069
|
+
}
|
|
2070
|
+
function isPlaying() {
|
|
2071
|
+
return autoplayActive;
|
|
2072
|
+
}
|
|
2073
|
+
function next() {
|
|
2074
|
+
const {
|
|
2075
|
+
index
|
|
2076
|
+
} = emblaApi.internalEngine();
|
|
2077
|
+
const nextIndex = index.clone().add(1).get();
|
|
2078
|
+
const lastIndex = emblaApi.scrollSnapList().length - 1;
|
|
2079
|
+
const kill = options.stopOnLastSnap && nextIndex === lastIndex;
|
|
2080
|
+
if (emblaApi.canScrollNext()) {
|
|
2081
|
+
emblaApi.scrollNext(jump);
|
|
2082
|
+
} else {
|
|
2083
|
+
emblaApi.scrollTo(0, jump);
|
|
2084
|
+
}
|
|
2085
|
+
emblaApi.emit('autoplay:select');
|
|
2086
|
+
if (kill) return stopAutoplay();
|
|
2087
|
+
startAutoplay();
|
|
2088
|
+
}
|
|
2089
|
+
function timeUntilNext() {
|
|
2090
|
+
if (!timerStartTime) return null;
|
|
2091
|
+
const currentDelay = delay[emblaApi.selectedScrollSnap()];
|
|
2092
|
+
const timePastSinceStart = new Date().getTime() - timerStartTime;
|
|
2093
|
+
return currentDelay - timePastSinceStart;
|
|
2094
|
+
}
|
|
2095
|
+
const self = {
|
|
2096
|
+
name: 'autoplay',
|
|
2097
|
+
options: userOptions,
|
|
2098
|
+
init,
|
|
2099
|
+
destroy,
|
|
2100
|
+
play,
|
|
2101
|
+
stop,
|
|
2102
|
+
reset,
|
|
2103
|
+
isPlaying,
|
|
2104
|
+
timeUntilNext
|
|
2105
|
+
};
|
|
2106
|
+
return self;
|
|
2107
|
+
}
|
|
2108
|
+
Autoplay.globalOptions = undefined;
|
|
2109
|
+
|
|
2110
|
+
const defaultOptions = {
|
|
2111
|
+
active: true,
|
|
2112
|
+
breakpoints: {},
|
|
2113
|
+
snapped: 'is-snapped',
|
|
2114
|
+
inView: 'is-in-view',
|
|
2115
|
+
draggable: 'is-draggable',
|
|
2116
|
+
dragging: 'is-dragging',
|
|
2117
|
+
loop: 'is-loop'
|
|
2118
|
+
};
|
|
2119
|
+
|
|
2120
|
+
function normalizeClassNames(classNames) {
|
|
2121
|
+
const normalized = Array.isArray(classNames) ? classNames : [classNames];
|
|
2122
|
+
return normalized.filter(Boolean);
|
|
2123
|
+
}
|
|
2124
|
+
function removeClass(node, classNames) {
|
|
2125
|
+
if (!node || !classNames.length) return;
|
|
2126
|
+
node.classList.remove(...classNames);
|
|
2127
|
+
}
|
|
2128
|
+
function addClass(node, classNames) {
|
|
2129
|
+
if (!node || !classNames.length) return;
|
|
2130
|
+
node.classList.add(...classNames);
|
|
2131
|
+
}
|
|
2132
|
+
|
|
2133
|
+
function ClassNames(userOptions = {}) {
|
|
2134
|
+
let options;
|
|
2135
|
+
let emblaApi;
|
|
2136
|
+
let root;
|
|
2137
|
+
let slides;
|
|
2138
|
+
let snappedIndexes = [];
|
|
2139
|
+
let inViewIndexes = [];
|
|
2140
|
+
const selectedEvents = ['select'];
|
|
2141
|
+
const draggingEvents = ['pointerDown', 'pointerUp'];
|
|
2142
|
+
const inViewEvents = ['slidesInView'];
|
|
2143
|
+
const classNames = {
|
|
2144
|
+
snapped: [],
|
|
2145
|
+
inView: [],
|
|
2146
|
+
draggable: [],
|
|
2147
|
+
dragging: [],
|
|
2148
|
+
loop: []
|
|
2149
|
+
};
|
|
2150
|
+
function init(emblaApiInstance, optionsHandler) {
|
|
2151
|
+
emblaApi = emblaApiInstance;
|
|
2152
|
+
const {
|
|
2153
|
+
mergeOptions,
|
|
2154
|
+
optionsAtMedia
|
|
2155
|
+
} = optionsHandler;
|
|
2156
|
+
const optionsBase = mergeOptions(defaultOptions, ClassNames.globalOptions);
|
|
2157
|
+
const allOptions = mergeOptions(optionsBase, userOptions);
|
|
2158
|
+
options = optionsAtMedia(allOptions);
|
|
2159
|
+
root = emblaApi.rootNode();
|
|
2160
|
+
slides = emblaApi.slideNodes();
|
|
2161
|
+
const {
|
|
2162
|
+
watchDrag,
|
|
2163
|
+
loop
|
|
2164
|
+
} = emblaApi.internalEngine().options;
|
|
2165
|
+
const isDraggable = !!watchDrag;
|
|
2166
|
+
if (options.loop && loop) {
|
|
2167
|
+
classNames.loop = normalizeClassNames(options.loop);
|
|
2168
|
+
addClass(root, classNames.loop);
|
|
2169
|
+
}
|
|
2170
|
+
if (options.draggable && isDraggable) {
|
|
2171
|
+
classNames.draggable = normalizeClassNames(options.draggable);
|
|
2172
|
+
addClass(root, classNames.draggable);
|
|
2173
|
+
}
|
|
2174
|
+
if (options.dragging) {
|
|
2175
|
+
classNames.dragging = normalizeClassNames(options.dragging);
|
|
2176
|
+
draggingEvents.forEach(evt => emblaApi.on(evt, toggleDraggingClass));
|
|
2177
|
+
}
|
|
2178
|
+
if (options.snapped) {
|
|
2179
|
+
classNames.snapped = normalizeClassNames(options.snapped);
|
|
2180
|
+
selectedEvents.forEach(evt => emblaApi.on(evt, toggleSnappedClasses));
|
|
2181
|
+
toggleSnappedClasses();
|
|
2182
|
+
}
|
|
2183
|
+
if (options.inView) {
|
|
2184
|
+
classNames.inView = normalizeClassNames(options.inView);
|
|
2185
|
+
inViewEvents.forEach(evt => emblaApi.on(evt, toggleInViewClasses));
|
|
2186
|
+
toggleInViewClasses();
|
|
2187
|
+
}
|
|
2188
|
+
}
|
|
2189
|
+
function destroy() {
|
|
2190
|
+
draggingEvents.forEach(evt => emblaApi.off(evt, toggleDraggingClass));
|
|
2191
|
+
selectedEvents.forEach(evt => emblaApi.off(evt, toggleSnappedClasses));
|
|
2192
|
+
inViewEvents.forEach(evt => emblaApi.off(evt, toggleInViewClasses));
|
|
2193
|
+
removeClass(root, classNames.loop);
|
|
2194
|
+
removeClass(root, classNames.draggable);
|
|
2195
|
+
removeClass(root, classNames.dragging);
|
|
2196
|
+
toggleSlideClasses([], snappedIndexes, classNames.snapped);
|
|
2197
|
+
toggleSlideClasses([], inViewIndexes, classNames.inView);
|
|
2198
|
+
Object.keys(classNames).forEach(classNameKey => {
|
|
2199
|
+
const key = classNameKey;
|
|
2200
|
+
classNames[key] = [];
|
|
2201
|
+
});
|
|
2202
|
+
}
|
|
2203
|
+
function toggleDraggingClass(_, evt) {
|
|
2204
|
+
const toggleClass = evt === 'pointerDown' ? addClass : removeClass;
|
|
2205
|
+
toggleClass(root, classNames.dragging);
|
|
2206
|
+
}
|
|
2207
|
+
function toggleSlideClasses(addClassIndexes = [], removeClassIndexes = [], classNames) {
|
|
2208
|
+
const removeClassSlides = removeClassIndexes.map(index => slides[index]);
|
|
2209
|
+
const addClassSlides = addClassIndexes.map(index => slides[index]);
|
|
2210
|
+
removeClassSlides.forEach(slide => removeClass(slide, classNames));
|
|
2211
|
+
addClassSlides.forEach(slide => addClass(slide, classNames));
|
|
2212
|
+
return addClassIndexes;
|
|
2213
|
+
}
|
|
2214
|
+
function toggleSnappedClasses() {
|
|
2215
|
+
const {
|
|
2216
|
+
slideRegistry
|
|
2217
|
+
} = emblaApi.internalEngine();
|
|
2218
|
+
const newSnappedIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
|
|
2219
|
+
snappedIndexes = toggleSlideClasses(newSnappedIndexes, snappedIndexes, classNames.snapped);
|
|
2220
|
+
}
|
|
2221
|
+
function toggleInViewClasses() {
|
|
2222
|
+
const newInViewIndexes = emblaApi.slidesInView();
|
|
2223
|
+
inViewIndexes = toggleSlideClasses(newInViewIndexes, inViewIndexes, classNames.inView);
|
|
2224
|
+
}
|
|
2225
|
+
const self = {
|
|
2226
|
+
name: 'classNames',
|
|
2227
|
+
options: userOptions,
|
|
2228
|
+
init,
|
|
2229
|
+
destroy
|
|
2230
|
+
};
|
|
2231
|
+
return self;
|
|
2232
|
+
}
|
|
2233
|
+
ClassNames.globalOptions = undefined;
|
|
2234
|
+
|
|
2235
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
2236
|
+
// See LICENSE in the project root for license information.
|
|
2237
|
+
|
|
2238
|
+
|
|
2239
|
+
class AuroDependencyVersioning {
|
|
2240
|
+
|
|
2241
|
+
/**
|
|
2242
|
+
* Generates a unique string to be used for child auro element naming.
|
|
2243
|
+
* @private
|
|
2244
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
2245
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
2246
|
+
* @returns {string} - Unique string to be used for naming.
|
|
2247
|
+
*/
|
|
2248
|
+
generateElementName(baseName, version) {
|
|
2249
|
+
let result = baseName;
|
|
2250
|
+
|
|
2251
|
+
result += '-';
|
|
2252
|
+
result += version.replace(/[.]/g, '_');
|
|
2253
|
+
|
|
2254
|
+
return result;
|
|
2255
|
+
}
|
|
2256
|
+
|
|
2257
|
+
/**
|
|
2258
|
+
* Generates a unique string to be used for child auro element naming.
|
|
2259
|
+
* @param {string} baseName - Defines the first part of the unique element name.
|
|
2260
|
+
* @param {string} version - Version of the component that will be appended to the baseName.
|
|
2261
|
+
* @returns {string} - Unique string to be used for naming.
|
|
2262
|
+
*/
|
|
2263
|
+
generateTag(baseName, version, tagClass) {
|
|
2264
|
+
const elementName = this.generateElementName(baseName, version);
|
|
2265
|
+
const tag = i$1`${s(elementName)}`;
|
|
2266
|
+
|
|
2267
|
+
if (!customElements.get(elementName)) {
|
|
2268
|
+
customElements.define(elementName, class extends tagClass {});
|
|
2269
|
+
}
|
|
2270
|
+
|
|
2271
|
+
return tag;
|
|
2272
|
+
}
|
|
2273
|
+
}
|
|
2274
|
+
|
|
2275
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
2276
|
+
// See LICENSE in the project root for license information.
|
|
2277
|
+
|
|
2278
|
+
// ---------------------------------------------------------------------
|
|
2279
|
+
|
|
2280
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
2281
|
+
|
|
2282
|
+
class AuroLibraryRuntimeUtils {
|
|
2283
|
+
|
|
2284
|
+
/* eslint-disable jsdoc/require-param */
|
|
2285
|
+
|
|
2286
|
+
/**
|
|
2287
|
+
* This will register a new custom element with the browser.
|
|
2288
|
+
* @param {String} name - The name of the custom element.
|
|
2289
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
2290
|
+
* @returns {void}
|
|
2291
|
+
*/
|
|
2292
|
+
registerComponent(name, componentClass) {
|
|
2293
|
+
if (!customElements.get(name)) {
|
|
2294
|
+
customElements.define(name, class extends componentClass {});
|
|
2295
|
+
}
|
|
2296
|
+
}
|
|
2297
|
+
|
|
2298
|
+
/**
|
|
2299
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
2300
|
+
* @returns {void}
|
|
2301
|
+
*/
|
|
2302
|
+
closestElement(
|
|
2303
|
+
selector, // selector like in .closest()
|
|
2304
|
+
base = this, // extra functionality to skip a parent
|
|
2305
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
2306
|
+
!el || el === document || el === window
|
|
2307
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
2308
|
+
: found
|
|
2309
|
+
? found // found a selector INside this element
|
|
2310
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
2311
|
+
) {
|
|
2312
|
+
return __Closest(base);
|
|
2313
|
+
}
|
|
2314
|
+
/* eslint-enable jsdoc/require-param */
|
|
2315
|
+
|
|
2316
|
+
/**
|
|
2317
|
+
* 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.
|
|
2318
|
+
* @param {Object} elem - The element to check.
|
|
2319
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
2320
|
+
* @returns {void}
|
|
2321
|
+
*/
|
|
2322
|
+
handleComponentTagRename(elem, tagName) {
|
|
2323
|
+
const tag = tagName.toLowerCase();
|
|
2324
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
2325
|
+
|
|
2326
|
+
if (elemTag !== tag) {
|
|
2327
|
+
elem.setAttribute(tag, true);
|
|
2328
|
+
}
|
|
2329
|
+
}
|
|
2330
|
+
|
|
2331
|
+
/**
|
|
2332
|
+
* Validates if an element is a specific Auro component.
|
|
2333
|
+
* @param {Object} elem - The element to validate.
|
|
2334
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
2335
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
2336
|
+
*/
|
|
2337
|
+
elementMatch(elem, tagName) {
|
|
2338
|
+
const tag = tagName.toLowerCase();
|
|
2339
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
2340
|
+
|
|
2341
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
2342
|
+
}
|
|
2343
|
+
|
|
2344
|
+
/**
|
|
2345
|
+
* Gets the text content of a named slot.
|
|
2346
|
+
* @returns {String}
|
|
2347
|
+
* @private
|
|
2348
|
+
*/
|
|
2349
|
+
getSlotText(elem, name) {
|
|
2350
|
+
const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
|
|
2351
|
+
const nodes = slot?.assignedNodes({ flatten: true }) || [];
|
|
2352
|
+
const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
|
|
2353
|
+
|
|
2354
|
+
return text || null;
|
|
2355
|
+
}
|
|
2356
|
+
}
|
|
2357
|
+
|
|
2358
|
+
/**
|
|
2359
|
+
* @license
|
|
2360
|
+
* Copyright 2017 Google LLC
|
|
2361
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
2362
|
+
*/
|
|
2363
|
+
const t={ATTRIBUTE:1},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)}}
|
|
2364
|
+
|
|
2365
|
+
/**
|
|
2366
|
+
* @license
|
|
2367
|
+
* Copyright 2018 Google LLC
|
|
2368
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
2369
|
+
*/const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.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}});
|
|
2370
|
+
|
|
2371
|
+
/**
|
|
2372
|
+
* @license
|
|
2373
|
+
* Copyright 2018 Google LLC
|
|
2374
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
2375
|
+
*/const o=o=>o??E;
|
|
2376
|
+
|
|
2377
|
+
class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s$1,a){const r=this.generateElementName(o,s$1),i=i$1`${s(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}}class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return (o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}}var c=i$5`: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-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}: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}
|
|
2378
|
+
`,u$1=i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}: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: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .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:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.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(0)}to{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{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{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%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
2379
|
+
`,p$1=i$5`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}
|
|
2380
|
+
`;class b extends i$2{constructor(){super(),this.keys=[0,1,2,3,4,5,6,7,8,9],this.mdCount=3,this.smCount=2,this.runtimeUtils=new h,this.orbit=false,this.ringworm=false,this.laser=false,this.pulse=false;}static get properties(){return {laser:{type:Boolean,reflect:true},orbit:{type:Boolean,reflect:true},pulse:{type:Boolean,reflect:true},ringworm:{type:Boolean,reflect:true}}}static get styles(){return [u$1,c,p$1]}static register(t="auro-loader"){h.prototype.registerComponent(t,b);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-loader");}connectedCallback(){super.connectedCallback();}defineTemplate(){let t=Array.from(Array(this.mdCount).keys());return this.orbit||this.laser?t=Array.from(Array(this.smCount).keys()):this.ringworm&&(t=Array.from(Array(0).keys())),t}render(){return x$2`
|
|
2381
|
+
${this.defineTemplate().map(t=>x$2`
|
|
2382
|
+
<span part="element" class="loader node-${t}"></span>
|
|
2383
|
+
`)}
|
|
2384
|
+
|
|
2385
|
+
<div class="no-animation body-default">Loading...</div>
|
|
2386
|
+
|
|
2387
|
+
${this.ringworm?x$2`
|
|
2388
|
+
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
2389
|
+
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
2390
|
+
</svg>`:""}
|
|
2391
|
+
`}}const v=new WeakMap,m$1=new WeakMap,x$1=({host:t,target:e,matcher:o,removeOriginal:s=true})=>{m$1.has(t)||m$1.set(t,{matchers:new Set,targets:new Map});const a=m$1.get(t);return a.matchers.add(o),a.targets.has(e)||a.targets.set(e,new Map),a.targets.get(e).set(o,{removeOriginal:s,currentAttributes:new Map}),f$1({host:t,target:e,matcher:o,removeOriginal:s}),y$1(t),{cleanup:()=>g$1(t,e,o),getObservedAttributes:()=>A(t,e,o),getObservedAttribute:s=>S(t,e,o,s)}},g$1=(t,e,o)=>{const s=m$1.get(t);if(!s)return;const a=s.targets.get(e);a&&(a.delete(o),0===a.size&&s.targets.delete(e));let r=false;for(const t of s.targets.values())if(t.has(o)){r=true;break}r||s.matchers.delete(o),0!==s.targets.size&&0!==s.matchers.size||w$1(t);},f$1=({host:t,target:e,matcher:o,removeOriginal:s=true})=>{const a=t.getAttributeNames().filter(t=>o(t)).reduce((e,o)=>(e[o]=t.getAttribute(o),e),{});Object.entries(a).forEach(([a,r])=>{k$1(t,e,o,a,r),e.setAttribute(a,r),s&&t.removeAttribute(a);});},y$1=t=>{if(v.has(t))return v.get(t);const e=new MutationObserver(e=>{const o=m$1.get(t);o&&e.filter(t=>"attributes"===t.type).forEach(e=>{const s=e.attributeName;for(const e of o.matchers)if(e(s))for(const[s,a]of o.targets.entries())if(a.has(e)){const{removeOriginal:o}=a.get(e);f$1({host:t,target:s,matcher:e,removeOriginal:o});}});});return e.observe(t,{attributes:true}),v.set(t,e),e},w$1=t=>{if(v.has(t)){v.get(t).disconnect(),v.delete(t);}m$1.has(t)&&m$1.delete(t);},z$1=(t,e,o)=>{const s=m$1.get(t);if(!s)return;const a=s.targets.get(e);return a?a.get(o):void 0},k$1=(t,e,o,s,a)=>{const r=z$1(t,e,o);r&&r.currentAttributes.set(s,a);},S=(t,e,o,s)=>{const a=z$1(t,e,o);if(a)return a.currentAttributes.get(s)},A=(t,e,o)=>{const s=z$1(t,e,o);return s?Array.from(s.currentAttributes.entries()):[]},q={"aria-":t=>t.startsWith("aria-"),role:t=>t.match(/^role$/)},B=({host:t,target:e,removeOriginal:o=true})=>(({host:t,target:e,match:o,removeOriginal:s=true})=>{if("object"!=typeof t||!(t instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');if("object"!=typeof e||!(e instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');if("function"!=typeof o)throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');if("boolean"!=typeof s)throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');return x$1({host:t,target:e,matcher:o,removeOriginal:s})})({host:t,target:e,match:t=>{for(const e in q)if(q[e](t))return true;return false},removeOriginal:o});class C extends i$2{attributeWatcher;static get properties(){return {layout:{type:String,attribute:"layout",reflect:true},shape:{type:String,attribute:"shape",reflect:true},size:{type:String,attribute:"size",reflect:true},appearance:{type:String,reflect:true},onDark:{type:Boolean,attribute:"ondark",reflect:true},wrapper:{attribute:false,reflect:false}}}constructor(){super(),this.onDark=false,this.appearance="default";}resetShapeClasses(){this.shape&&this.size&&this.wrapper&&(this.wrapper.classList.forEach(t=>{t.startsWith("shape-")&&this.wrapper.classList.remove(t);}),this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`));}resetLayoutClasses(){this.layout&&this.wrapper&&(this.wrapper.classList.forEach(t=>{t.startsWith("layout-")&&this.wrapper.classList.remove(t);}),this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`));}updateComponentArchitecture(){this.resetLayoutClasses(),this.resetShapeClasses();}updated(t){(t.has("layout")||t.has("shape")||t.has("size"))&&this.updateComponentArchitecture();}firstUpdated(){super.firstUpdated(),this.wrapper=this.shadowRoot.querySelector(".wrapper"),this.attributeWatcher=B({host:this,target:this.shadowRoot.querySelector(".wrapper")});}disconnectedCallback(){super.disconnectedCallback(),this.attributeWatcher&&(this.attributeWatcher.cleanup(),this.attributeWatcher=null);}render(){try{return this.renderLayout()}catch(t){return console.error("Failed to get the defined layout - using the default layout",t),this.getLayout("default")}}}var U=i$5`[auro-loader]{color:var(--ds-auro-button-loader-color, #ffffff)}.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)}:host(:focus-within) .auro-button{outline-color:var(--ds-auro-button-border-inset-color)}:host(:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-hover, #00274a)}:host([disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}:host([variant=secondary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text, #01426a)}:host([variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-hover, #00274a)}:host([variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=secondary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text, #01426a)}:host([variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-border-color: transparent}:host([variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=tertiary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text, #01426a)}:host([variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent}:host([variant=ghost]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=ghost][disabled]){--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:active:not(:disabled),:host([variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a)}:host([ondark]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}:host([ondark]:focus-within),:host([appearance=inverse]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=secondary]),:host([appearance=inverse][variant=secondary]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}:host([ondark][variant=secondary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=secondary]:focus-within),:host([appearance=inverse][variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=secondary][disabled]),:host([appearance=inverse][variant=secondary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}:host([ondark][variant=tertiary]),:host([appearance=inverse][variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}:host([ondark][variant=tertiary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=tertiary]:focus-within),:host([appearance=inverse][variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=tertiary][disabled]),:host([appearance=inverse][variant=tertiary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=ghost]),:host([appearance=inverse][variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}:host([ondark][variant=ghost]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent}:host([ondark][variant=ghost]:focus-within),:host([appearance=inverse][variant=ghost]:focus-within){border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=ghost][disabled]),:host([appearance=inverse][variant=ghost][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=flat]) .auro-button,:host([appearance=inverse][variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:active:not(:disabled),:host([ondark][variant=flat]) .auro-button:hover:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:active:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:disabled,:host([appearance=inverse][variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]:focus-within),:host([appearance=inverse][variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}
|
|
2392
|
+
`,H=i$5`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-rounded-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-circle-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:50%;min-width:72px;max-width:72px;padding:0}.shape-circle-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-circle-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-circle-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-square-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px;min-width:72px;max-width:72px;padding:0}.shape-square-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-square-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-square-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px}.shape-pill-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px 0 0 28px}.shape-pill-left-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-left-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-left-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:0 28px 28px 0}.shape-pill-right-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-right-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-right-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-circle-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:50%;min-width:56px;max-width:56px;padding:0}.shape-circle-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-circle-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-circle-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-square-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px;min-width:56px;max-width:56px;padding:0}.shape-square-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-square-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-square-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-rounded-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-rounded-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px 0 0 24px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:0 24px 24px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-circle-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:50%;min-width:48px;max-width:48px;padding:0}.shape-circle-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-circle-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-circle-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-square-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px;min-width:48px;max-width:48px;padding:0}.shape-square-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-square-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-square-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-rounded-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-rounded-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px}.shape-pill-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px 0 0 18px}.shape-pill-left-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-left-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-left-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:0 18px 18px 0}.shape-pill-right-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-right-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-right-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-circle-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:50%;min-width:36px;max-width:36px;padding:0}.shape-circle-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-circle-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-circle-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-square-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px;min-width:36px;max-width:36px;padding:0}.shape-square-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-square-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-square-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:4px}.shape-rounded-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-rounded-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-rounded-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px}.shape-pill-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px 0 0 12px}.shape-pill-left-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-left-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-left-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:0 12px 12px 0}.shape-pill-right-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-right-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-right-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-circle-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:50%;min-width:24px;max-width:24px;padding:0}.shape-circle-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-circle-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-circle-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-square-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:6px;min-width:24px;max-width:24px;padding:0}.shape-square-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-square-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-square-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}
|
|
2393
|
+
`,M=i$5`: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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([size=xs][shape=rounded]) ::slotted(auro-icon),:host([size=xs][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill]) ::slotted(auro-icon),:host([size=xs][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left]) ::slotted(auro-icon),:host([size=xs][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right]) ::slotted(auro-icon),:host([size=xs][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle]) ::slotted(auro-icon),:host([size=xs][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=flat]) .auro-button:focus,:host([size=xs][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square]) ::slotted(auro-icon),:host([size=xs][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=square][variant=secondary]) .auro-button:focus,:host([size=xs][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=flat]) .auro-button:focus,:host([size=xs][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=ghost]) .auro-button:focus,:host([size=xs][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded]) ::slotted(auro-icon),:host([size=sm][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill]) ::slotted(auro-icon),:host([size=sm][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left]) ::slotted(auro-icon),:host([size=sm][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right]) ::slotted(auro-icon),:host([size=sm][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle]) ::slotted(auro-icon),:host([size=sm][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus,:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=flat]) .auro-button:focus,:host([size=sm][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus,:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square]) ::slotted(auro-icon),:host([size=sm][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=square][variant=secondary]) .auro-button:focus,:host([size=sm][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=flat]) .auro-button:focus,:host([size=sm][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=ghost]) .auro-button:focus,:host([size=sm][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded]) ::slotted(auro-icon),:host([size=md][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill]) ::slotted(auro-icon),:host([size=md][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left]) ::slotted(auro-icon),:host([size=md][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right]) ::slotted(auro-icon),:host([size=md][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle]) ::slotted(auro-icon),:host([size=md][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=circle][variant=secondary]) .auro-button:focus,:host([size=md][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=flat]) .auro-button:focus,:host([size=md][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=ghost]) .auro-button:focus,:host([size=md][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square]) ::slotted(auro-icon),:host([size=md][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=square][variant=primary]) .auro-button:focus,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=primary]) .auro-button:focus:after,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=square][variant=secondary]) .auro-button:focus,:host([size=md][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=tertiary]) .auro-button:focus,:host([size=md][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=flat]) .auro-button:focus,:host([size=md][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=ghost]) .auro-button:focus,:host([size=md][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded]) ::slotted(auro-icon),:host([size=lg][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill]) ::slotted(auro-icon),:host([size=lg][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left]) ::slotted(auro-icon),:host([size=lg][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right]) ::slotted(auro-icon),:host([size=lg][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle]) ::slotted(auro-icon),:host([size=lg][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, .25rem))}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus,:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=flat]) .auro-button:focus,:host([size=lg][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus,:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square]) ::slotted(auro-icon),:host([size=lg][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, .25rem))}:host([size=lg][shape=square][variant=primary]) .auro-button:focus,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=square][variant=secondary]) .auro-button:focus,:host([size=lg][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=flat]) .auro-button:focus,:host([size=lg][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=ghost]) .auro-button:focus,:host([size=lg][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded]) ::slotted(auro-icon),:host([size=xl][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill]) ::slotted(auro-icon),:host([size=xl][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left]) ::slotted(auro-icon),:host([size=xl][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right]) ::slotted(auro-icon),:host([size=xl][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle]) ::slotted(auro-icon),:host([size=xl][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, .25rem))}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=flat]) .auro-button:focus,:host([size=xl][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square]) ::slotted(auro-icon),:host([size=xl][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, .25rem))}:host([size=xl][shape=square][variant=primary]) .auro-button:focus,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=square][variant=secondary]) .auro-button:focus,:host([size=xl][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=flat]) .auro-button:focus,:host([size=xl][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=ghost]) .auro-button:focus,:host([size=xl][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-150, .75rem)}:host([size=sm]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-200, 1rem)}:host([size=md]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-300, 1.5rem)}:host([size=lg]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-400, 2rem)}:host([size=xl]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-500, 2.5rem)}:host([shape=circle]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([shape=square]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([variant=flat]){display:inline-block}::slotted(svg){vertical-align:middle}.textSlot{display:inline-flex;align-items:center;gap:var(--ds-size-100, .5rem)}.contentWrapper{font-size:0}slot{pointer-events:none}:host{display:inline-block;overflow:hidden}.auro-button{position:relative;cursor:pointer;padding:0 var(--ds-size-300, 1.5rem);padding-inline:unset;padding-block:unset;box-sizing:content-box;overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;outline:none;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, .5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding .3s ease-out}.auro-button:focus,.auro-button:focus-visible{outline:none}.auro-button:active{transform:scale(.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}:host([fluid]){display:block}:host([fluid]) .auro-button:not(.thin):not(.simple){width:calc(100% - 4px)}:host([fluid]) .auro-button.thin{width:calc(100% - 2px)}:host([fluid]) .auro-button.simple{width:100%}:host([static]) .auro-button{pointer-events:none;cursor:default;display:inline-flex}:host([static]) .auro-button .contentWrapper{display:inline-flex}
|
|
2394
|
+
`,R=i$5`:host{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text, #ffffff)}
|
|
2395
|
+
`;const N=["circle","square"];class T extends C{static get formAssociated(){return true}constructor(){super(),this.autofocus=false,this.disabled=false,this.loading=false,this.static=false,this.size="md",this.shape="rounded",this.fluid=false,this.loadingText=this.loadingText||"Loading...",this.variant="primary",this.runtimeUtils=new d,"function"==typeof this.attachInternals?this.internals=this.attachInternals():(this.internals=null,console.warn("This browser does not support form association features. Some form-related functionality may not work as expected. Consider using a polyfill or handling click events manually."));const t=new l;this.loaderTag=t.generateTag("auro-loader","6.0.0",b),this.buttonHref=void 0,this.buttonTarget=void 0,this.buttonRel=void 0;}static get styles(){return [R,M,U,H]}static get properties(){return {...C.properties,layout:{type:Boolean,attribute:false,reflect:false},autofocus:{type:Boolean,reflect:true},disabled:{type:Boolean,reflect:true},fluid:{type:Boolean,reflect:true},loading:{type:Boolean,reflect:true},loadingText:{type:String},tIndex:{type:String,reflect:true},tabindex:{type:String,reflect:false},title:{type:String,reflect:true},type:{type:String,reflect:true},value:{type:String,reflect:true},variant:{type:String,reflect:true},buttonHref:{type:String},buttonTarget:{type:String},buttonRel:{type:String},static:{type:Boolean,reflect:true},onHover:{attribute:"data-hover",type:Boolean,reflect:true},onActive:{attribute:"data-active",type:Boolean,reflect:true}}}static register(t="auro-button"){d.prototype.registerComponent(t,T);}focus(){this.renderRoot.querySelector("button").focus();}surfaceSubmitEvent(){this.form&&this.form.requestSubmit();}get form(){return this.internals?this.internals.form:null}get showText(){return !N.includes(this.shape)}get currentAriaLabel(){if(!this.attributeWatcher)return;return this.attributeWatcher.getObservedAttribute("aria-label")||void 0}get currentAriaLabelledBy(){if(!this.attributeWatcher)return;return this.attributeWatcher.getObservedAttribute("aria-labelledby")||void 0}get iconOnly(){return N.includes(this.shape)}getFontSize(){return (this.iconOnly?{xs:"heading-xs",sm:"heading-sm",md:"heading-sm",lg:"heading-md",xl:"heading-lg"}:{xs:"body-xs",sm:"body-sm",md:"body-default",lg:"body-lg",xl:"body-lg"})[this.size]||"body-default"}get _renderTag(){return this.static?i$1`span`:this.buttonHref?i$1`a`:i$1`button`}firstUpdated(){super.firstUpdated(),this.runtimeUtils.handleComponentTagRename(this,"auro-button");}generateAriaLabel(){return this.loading?this.runtimeUtils.getSlotText(this,"ariaLabel.loading")||this.loadingText:this.runtimeUtils.getSlotText(this,"ariaLabel")||this.currentAriaLabel}onPointerEvent(t){switch(t.type){case "pointerenter":this.onHover=true;break;case "pointerleave":this.onHover=false;break;case "pointerdown":this.onActive=true;break;case "pointerup":case "blur":this.onActive=false;}}renderLayoutDefault(){const t=this.getFontSize(),e$1=this.buttonHref?"link":"button",s={"auro-button":true,inset:this.showText,wrapper:true,loading:this.loading,simple:!["secondary"].includes(this.variant),thin:["secondary"].includes(this.variant)},a={contentWrapper:true,util_displayHiddenVisually:this.loading},r={textSlot:true,[t]:this.showText},l=this.tIndex||this.tabindex;return u$2`
|
|
2396
|
+
<!-- Hidden slots for aria labels -->
|
|
2397
|
+
<slot name="ariaLabel" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
2398
|
+
<slot name="ariaLabel.loading" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
2399
|
+
|
|
2400
|
+
<${this._renderTag}
|
|
2401
|
+
part="${e$1}"
|
|
2402
|
+
aria-label="${o(this.generateAriaLabel())}"
|
|
2403
|
+
aria-labelledby="${o(this.loading?void 0:this.currentAriaLabelledBy||void 0)}"
|
|
2404
|
+
tabindex="${o(this.static?-1:l)}"
|
|
2405
|
+
?autofocus="${this.autofocus}"
|
|
2406
|
+
class=${e(s)}
|
|
2407
|
+
?disabled="${this.disabled||this.loading}"
|
|
2408
|
+
?onDark="${this.onDark}"
|
|
2409
|
+
title="${o(this.title?this.title:void 0)}"
|
|
2410
|
+
name="${o(this.name?this.name:void 0)}"
|
|
2411
|
+
type="${o(this.type?this.type:void 0)}"
|
|
2412
|
+
variant="${o(this.variant?this.variant:void 0)}"
|
|
2413
|
+
.value="${o(this.value?this.value:void 0)}"
|
|
2414
|
+
@click="${this.static||"submit"!==this.type?void 0:this.surfaceSubmitEvent}"
|
|
2415
|
+
@pointerenter="${this.onPointerEvent}"
|
|
2416
|
+
@pointerleave="${this.onPointerEvent}"
|
|
2417
|
+
@pointerdown="${this.onPointerEvent}"
|
|
2418
|
+
@pointerup="${this.onPointerEvent}"
|
|
2419
|
+
@blur="${this.onPointerEvent}"
|
|
2420
|
+
href="${o(this.buttonHref||void 0)}"
|
|
2421
|
+
target="${o(this.buttonTarget||void 0)}"
|
|
2422
|
+
rel="${o(this.buttonRel||void 0)}"
|
|
2423
|
+
>
|
|
2424
|
+
${o(this.loading?u$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>`:void 0)}
|
|
2425
|
+
|
|
2426
|
+
<span class="${e(a)}" part="contentWrapper">
|
|
2427
|
+
<span class="${e(r)}" part="text">
|
|
2428
|
+
<slot></slot>
|
|
2429
|
+
</span>
|
|
2430
|
+
</span>
|
|
2431
|
+
</${this._renderTag}>
|
|
2432
|
+
`}renderLayout(){return this.renderLayoutDefault()}}
|
|
2433
|
+
|
|
2434
|
+
var buttonVersion = '12.3.0';
|
|
2435
|
+
|
|
2436
|
+
var chevronLeft = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-left__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-left__desc\">Directional indicator; left.</desc><path d=\"m14.395 6.345.084.073a.75.75 0 0 1 .072.977l-.072.084-4.47 4.47 4.47 4.47a.75.75 0 0 1 .072.976l-.072.084a.75.75 0 0 1-.977.072l-.084-.072-4.823-4.823a1 1 0 0 1 0-1.415l4.823-4.823a.75.75 0 0 1 .977-.073\"/></svg>"};
|
|
2437
|
+
|
|
2438
|
+
var chevronRight = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-right__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-right__desc\">Directional indicator; right.</desc><path d=\"m9.605 17.551-.084-.072a.75.75 0 0 1-.072-.977l.072-.084 4.47-4.47-4.47-4.47a.75.75 0 0 1-.072-.976l.072-.084a.75.75 0 0 1 .977-.073l.084.073 4.823 4.823a1 1 0 0 1 0 1.415l-4.823 4.823a.75.75 0 0 1-.977.072\"/></svg>"};
|
|
2439
|
+
|
|
2440
|
+
var pause = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"pause__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"pause__desc\">two vertical parallel lines</desc><path fill-rule=\"evenodd\" d=\"M6 .5A1.5 1.5 0 0 1 7.5 2v20a1.5 1.5 0 0 1-3 0V2A1.5 1.5 0 0 1 6 .5m12 0A1.5 1.5 0 0 1 19.5 2v20a1.5 1.5 0 0 1-3 0V2A1.5 1.5 0 0 1 18 .5\" clip-rule=\"evenodd\"/></svg>"};
|
|
2441
|
+
|
|
2442
|
+
var play = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"play-filled__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"play-filled__desc\">solid triangle pointing right</desc><path fill-rule=\"evenodd\" d=\"m6.977 1.02.348.163 15.555 8.889c1.369.782 1.483 2.656.342 3.62l-.342.239-15.555 8.888c-1.368.782-3.044-.07-3.293-1.547L4 20.89V3.112C4 1.537 5.57.505 6.977 1.021\" clip-rule=\"evenodd\"/></svg>"};
|
|
2443
|
+
|
|
2444
|
+
class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=i$5`: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, .75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, .25rem);line-height:1.8}
|
|
2445
|
+
`;class z extends m{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}i$5`.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}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
2446
|
+
`;var y=i$5`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
2447
|
+
`;var k=i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
2448
|
+
`;class x extends z{constructor(){super(),this.variant=void 0,this.privateDefaults();}privateDefaults(){this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...z.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [z.styles,y,w,k]}static register(t="auro-icon"){p.prototype.registerComponent(t,x);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return x$2`
|
|
2449
|
+
<div class="componentWrapper">
|
|
2450
|
+
<div
|
|
2451
|
+
class="${e({svgWrapper:true})}"
|
|
2452
|
+
title="${o(this.title||void 0)}">
|
|
2453
|
+
<span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
|
|
2454
|
+
${this.customSvg?x$2`
|
|
2455
|
+
<slot name="svg"></slot>
|
|
2456
|
+
`:x$2`
|
|
2457
|
+
${this.svg}
|
|
2458
|
+
`}
|
|
2459
|
+
</span>
|
|
2460
|
+
</div>
|
|
2461
|
+
|
|
2462
|
+
<div class="${e(t)}" part="label">
|
|
2463
|
+
<slot></slot>
|
|
2464
|
+
</div>
|
|
2465
|
+
</div>
|
|
2466
|
+
`}}
|
|
2467
|
+
|
|
2468
|
+
var iconVersion = '9.1.0';
|
|
2469
|
+
|
|
2470
|
+
var styleCss = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{--border-size: 6px;--border-radius: 24px;--dot-animation-time: .3s}.container{display:flex;width:100%;flex-direction:column;align-items:flex-start}.slideshow-wrapper{position:relative;display:flex;width:100%;overflow:hidden;align-items:center;justify-content:start;padding:var(--border-size);box-sizing:border-box}.embla{max-width:100%;margin:0;--slide-size: 100%;--slide-spacing: 1rem}.embla__container{display:flex;gap:var(--slide-spacing)}.embla__slide{transform:translateZ(0);min-width:0;flex:0 0 var(--slide-size);border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden;filter:brightness(100%);transition:filter .5s ease-in-out}.embla__slide:focus-visible{outline:unset;box-shadow:0 0 0 2px var(--ds-advanced-color-state-focused-inverse, #ffffff),0 0 0 var(--border-size) var(--ds-advanced-color-state-focused, #01426a)}.embla__slide:not(.in-view){filter:brightness(65%)}:host([autoScroll]) .embla__slide{filter:unset}.scroll-prev,.scroll-next{position:absolute;display:none;top:50%;transform:translateY(-50%);z-index:10}.scroll-prev{left:8px}.scroll-next{right:8px}.slideshow-wrapper:hover .scroll-prev:not([disabled]),.slideshow-wrapper:hover .scroll-next:not([disabled]){display:block}.pagination-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:100%;margin-top:40px;gap:14px;padding-inline:var(--border-size);box-sizing:border-box}.embla__dots{display:flex;gap:16px}.embla__dot{width:12px;height:12px;border-radius:50%;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);mix-blend-mode:multiply;position:relative;cursor:pointer;transition:all var(--dot-animation-time) ease-in-out}.embla__dot:hover:not(.embla__dot--selected){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__dot:before{content:"";width:24px;height:24px;position:absolute;cursor:pointer;top:50%;left:50%;transform:translate(-50%,-50%)}.embla__dot--selected{width:52px;height:12px;border-radius:1.8rem;background-color:var(--ds-advanced-color-button-primary-background, #01426a)}.embla__dot--selected:before{width:64px}.embla__progress{width:52px;height:12px;border-radius:1.8rem;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);mix-blend-mode:multiply;position:relative;overflow:hidden;cursor:pointer;align-self:center;justify-self:center;transition:all var(--dot-animation-time) ease-in-out}.embla__progress:hover:not(.stopped){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__progress__bar{border-radius:inherit;background-color:var(--ds-advanced-color-button-primary-background, #01426a);position:absolute;width:100%;top:0;bottom:0;left:-100%;animation-delay:var(--dot-animation-time);animation-name:autoplay-progress;animation-timing-function:linear;animation-iteration-count:1;animation-play-state:running}.embla__progress--paused .embla__progress__bar{animation-play-state:paused}.stopped{background-color:var(--ds-advanced-color-button-primary-background, #01426a)}@keyframes autoplay-progress{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}:host([loop]) .embla__container{gap:unset}:host([loop]) .embla__slide{margin-right:var(--slide-spacing)}:host([fullBleed]) .slideshow-wrapper{overflow:visible}:host([fullBleed]) .embla{width:100vw;position:relative;left:50%;transform:translate(-50%);max-width:none}:host([fullBleed]) .embla__slide{max-width:calc(var(--slideshow-width) - var(--border-size) * 2)}:host([fullBleed]:not([autoscroll])) .embla__slide:not(.active){filter:brightness(65%)}
|
|
2471
|
+
`;
|
|
2472
|
+
|
|
2473
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2474
|
+
// See LICENSE in the project root for license information.
|
|
2475
|
+
|
|
2476
|
+
|
|
2477
|
+
/**
|
|
2478
|
+
* The auro-slideshow component is a customizable slideshow that displays a series of slides
|
|
2479
|
+
* with several options such as autoplay, navigation controls, and pagination dots.
|
|
2480
|
+
*
|
|
2481
|
+
* @slot - Default slot for the slides. Each child element will be treated as a slide.
|
|
2482
|
+
* @csspart prev-button - Use to style the previous button control.
|
|
2483
|
+
* @csspart next-button - Use to style the next button control.
|
|
2484
|
+
* @csspart play-pause-button - Use to style the play/pause button control.
|
|
2485
|
+
*/
|
|
2486
|
+
class AuroSlideshow extends i$2 {
|
|
2487
|
+
constructor() {
|
|
2488
|
+
super();
|
|
2489
|
+
|
|
2490
|
+
this.autoplay = false;
|
|
2491
|
+
this.delay = 7000;
|
|
2492
|
+
|
|
2493
|
+
this.autoScroll = false;
|
|
2494
|
+
this.scrollSpeed = 0.75;
|
|
2495
|
+
this.startDelay = 1000;
|
|
2496
|
+
|
|
2497
|
+
this.playOnInit = false;
|
|
2498
|
+
this.loop = false;
|
|
2499
|
+
this.navigation = false;
|
|
2500
|
+
this.pagination = false;
|
|
2501
|
+
|
|
2502
|
+
this.playLabel = "Play slideshow";
|
|
2503
|
+
this.pauseLabel = "Pause slideshow";
|
|
2504
|
+
|
|
2505
|
+
this.fullBleed = false;
|
|
2506
|
+
|
|
2507
|
+
/** @private */
|
|
2508
|
+
this.playBtnLabel = this.playLabel;
|
|
2509
|
+
|
|
2510
|
+
/** @private */
|
|
2511
|
+
this.isPlaying = false;
|
|
2512
|
+
|
|
2513
|
+
/** @private */
|
|
2514
|
+
this.embla = null;
|
|
2515
|
+
|
|
2516
|
+
/** @private */
|
|
2517
|
+
this.slides = [];
|
|
2518
|
+
|
|
2519
|
+
/** @private */
|
|
2520
|
+
this.isHovered = false;
|
|
2521
|
+
|
|
2522
|
+
/**
|
|
2523
|
+
* @private
|
|
2524
|
+
* The initial state or stop method has been called.
|
|
2525
|
+
*/
|
|
2526
|
+
this.isStopped = true;
|
|
2527
|
+
|
|
2528
|
+
const versioning = new AuroDependencyVersioning();
|
|
2529
|
+
|
|
2530
|
+
/** @private */
|
|
2531
|
+
this.buttonTag = versioning.generateTag(
|
|
2532
|
+
"auro-button",
|
|
2533
|
+
buttonVersion,
|
|
2534
|
+
T,
|
|
2535
|
+
);
|
|
2536
|
+
|
|
2537
|
+
/** @private */
|
|
2538
|
+
this.iconTag = versioning.generateTag("auro-icon", iconVersion, x);
|
|
2539
|
+
}
|
|
2540
|
+
|
|
2541
|
+
/**
|
|
2542
|
+
* Registers the custom element with the browser.
|
|
2543
|
+
* @param {string} [name="auro-slideshow"] - Custom element name to register.
|
|
2544
|
+
* @example
|
|
2545
|
+
* AuroSlideshow.register("custom-slideshow") // registers <custom-slideshow/>
|
|
2546
|
+
*/
|
|
2547
|
+
static register(name = "auro-slideshow") {
|
|
2548
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroSlideshow);
|
|
2549
|
+
}
|
|
2550
|
+
|
|
2551
|
+
static get styles() {
|
|
2552
|
+
return [styleCss];
|
|
2553
|
+
}
|
|
2554
|
+
|
|
2555
|
+
static get properties() {
|
|
2556
|
+
return {
|
|
2557
|
+
/**
|
|
2558
|
+
* If true, the slideshow will play automatically.
|
|
2559
|
+
*/
|
|
2560
|
+
autoplay: {
|
|
2561
|
+
type: Boolean,
|
|
2562
|
+
reflect: true,
|
|
2563
|
+
},
|
|
2564
|
+
/**
|
|
2565
|
+
* If true, the slideshow will scroll continuously.
|
|
2566
|
+
*/
|
|
2567
|
+
autoScroll: {
|
|
2568
|
+
type: Boolean,
|
|
2569
|
+
reflect: true,
|
|
2570
|
+
},
|
|
2571
|
+
/**
|
|
2572
|
+
* If true, the slideshow will start playing automatically on page load when `autoplay` or `autoScroll` are on.
|
|
2573
|
+
*/
|
|
2574
|
+
playOnInit: {
|
|
2575
|
+
type: Boolean,
|
|
2576
|
+
reflect: true,
|
|
2577
|
+
},
|
|
2578
|
+
/**
|
|
2579
|
+
* Slide duration in milliseconds. (Only used with `autoplay`)
|
|
2580
|
+
*/
|
|
2581
|
+
delay: {
|
|
2582
|
+
type: Number,
|
|
2583
|
+
reflect: true,
|
|
2584
|
+
},
|
|
2585
|
+
/**
|
|
2586
|
+
* Number of pixels auto scroll should advance per frame. (Only used with `autoScroll`)
|
|
2587
|
+
*/
|
|
2588
|
+
scrollSpeed: {
|
|
2589
|
+
type: Number,
|
|
2590
|
+
reflect: true,
|
|
2591
|
+
},
|
|
2592
|
+
/**
|
|
2593
|
+
* Delay in milliseconds before the auto scroll starts. (Only used with `autoScroll`)
|
|
2594
|
+
*/
|
|
2595
|
+
startDelay: {
|
|
2596
|
+
type: Number,
|
|
2597
|
+
reflect: true,
|
|
2598
|
+
},
|
|
2599
|
+
/**
|
|
2600
|
+
* The aria-label for the play button.
|
|
2601
|
+
* @default Play slideshow
|
|
2602
|
+
*/
|
|
2603
|
+
playLabel: {
|
|
2604
|
+
type: String,
|
|
2605
|
+
reflect: true,
|
|
2606
|
+
},
|
|
2607
|
+
/**
|
|
2608
|
+
* The aria-label for the pause button.
|
|
2609
|
+
* @default Pause slideshow
|
|
2610
|
+
*/
|
|
2611
|
+
pauseLabel: {
|
|
2612
|
+
type: String,
|
|
2613
|
+
reflect: true,
|
|
2614
|
+
},
|
|
2615
|
+
/**
|
|
2616
|
+
* If true, the slideshow will loop back to the first slide after reaching the last slide.
|
|
2617
|
+
*/
|
|
2618
|
+
loop: {
|
|
2619
|
+
type: Boolean,
|
|
2620
|
+
reflect: true,
|
|
2621
|
+
},
|
|
2622
|
+
/**
|
|
2623
|
+
* If true, the slideshow will display navigation arrows for previous and next slides when the slide container is hovered.
|
|
2624
|
+
*/
|
|
2625
|
+
navigation: {
|
|
2626
|
+
type: Boolean,
|
|
2627
|
+
reflect: true,
|
|
2628
|
+
},
|
|
2629
|
+
/**
|
|
2630
|
+
* If true, the slideshow will display pagination dots for each slide. If autoplay is on, the active dot will also show a progress bar.
|
|
2631
|
+
*/
|
|
2632
|
+
pagination: {
|
|
2633
|
+
type: Boolean,
|
|
2634
|
+
reflect: true,
|
|
2635
|
+
},
|
|
2636
|
+
/**
|
|
2637
|
+
* @private
|
|
2638
|
+
*/
|
|
2639
|
+
isPlaying: {
|
|
2640
|
+
type: Boolean,
|
|
2641
|
+
},
|
|
2642
|
+
/**
|
|
2643
|
+
* If set, the slideshow will take up the width of its parent container showing previous and next slides. **Note:** a parent container must have `overflow-x: hidden` to prevent horizontal scrolling.
|
|
2644
|
+
*/
|
|
2645
|
+
fullBleed: {
|
|
2646
|
+
type: Boolean,
|
|
2647
|
+
reflect: true,
|
|
2648
|
+
},
|
|
2649
|
+
};
|
|
2650
|
+
}
|
|
2651
|
+
|
|
2652
|
+
get _slot() {
|
|
2653
|
+
return this.shadowRoot.querySelector("slot:not([name])");
|
|
2654
|
+
}
|
|
2655
|
+
|
|
2656
|
+
get _playBtn() {
|
|
2657
|
+
return this.shadowRoot.querySelector(".play-pause");
|
|
2658
|
+
}
|
|
2659
|
+
|
|
2660
|
+
get _prevBtn() {
|
|
2661
|
+
return this.shadowRoot.querySelector(".scroll-prev");
|
|
2662
|
+
}
|
|
2663
|
+
|
|
2664
|
+
get _nextBtn() {
|
|
2665
|
+
return this.shadowRoot.querySelector(".scroll-next");
|
|
2666
|
+
}
|
|
2667
|
+
|
|
2668
|
+
get _dotsNode() {
|
|
2669
|
+
return this.shadowRoot.querySelector(".embla__dots");
|
|
2670
|
+
}
|
|
2671
|
+
|
|
2672
|
+
get _progressNode() {
|
|
2673
|
+
return this.shadowRoot.querySelector(".embla__progress");
|
|
2674
|
+
}
|
|
2675
|
+
|
|
2676
|
+
get _slideshowWrapperNode() {
|
|
2677
|
+
return this.shadowRoot.querySelector(".slideshow-wrapper");
|
|
2678
|
+
}
|
|
2679
|
+
|
|
2680
|
+
get _slideshowPaddingSize() {
|
|
2681
|
+
return (
|
|
2682
|
+
Number.parseFloat(
|
|
2683
|
+
getComputedStyle(this._slideshowWrapperNode).paddingLeft,
|
|
2684
|
+
) || 0
|
|
2685
|
+
);
|
|
2686
|
+
}
|
|
2687
|
+
|
|
2688
|
+
// ========== PUBLIC METHODS =================
|
|
2689
|
+
|
|
2690
|
+
/**
|
|
2691
|
+
* Starts the slideshow playback.
|
|
2692
|
+
* @returns {void}
|
|
2693
|
+
*/
|
|
2694
|
+
play() {
|
|
2695
|
+
if (this.autoplay) {
|
|
2696
|
+
this.embla?.plugins()?.autoplay.play();
|
|
2697
|
+
} else if (this.autoScroll) {
|
|
2698
|
+
this.embla?.plugins()?.autoScroll.play();
|
|
2699
|
+
}
|
|
2700
|
+
}
|
|
2701
|
+
|
|
2702
|
+
/**
|
|
2703
|
+
* Stops the slideshow playback.
|
|
2704
|
+
* @returns {void}
|
|
2705
|
+
*/
|
|
2706
|
+
stop() {
|
|
2707
|
+
if (this.autoplay) {
|
|
2708
|
+
this.embla?.plugins()?.autoplay.stop();
|
|
2709
|
+
} else if (this.autoScroll) {
|
|
2710
|
+
this.embla?.plugins()?.autoScroll.stop();
|
|
2711
|
+
}
|
|
2712
|
+
}
|
|
2713
|
+
|
|
2714
|
+
/**
|
|
2715
|
+
* Scrolls to the previous slide.
|
|
2716
|
+
* @returns {void}
|
|
2717
|
+
*/
|
|
2718
|
+
scrollPrev() {
|
|
2719
|
+
this.embla.scrollPrev();
|
|
2720
|
+
}
|
|
2721
|
+
|
|
2722
|
+
/**
|
|
2723
|
+
* Scrolls to the next slide.
|
|
2724
|
+
* @returns {void}
|
|
2725
|
+
*/
|
|
2726
|
+
scrollNext() {
|
|
2727
|
+
this.embla.scrollNext();
|
|
2728
|
+
}
|
|
2729
|
+
|
|
2730
|
+
// ========== PRIVATE METHODS =================
|
|
2731
|
+
|
|
2732
|
+
/**
|
|
2733
|
+
* Calculate the difference between the left edge of the slideshow-wrapper and the embla container
|
|
2734
|
+
* @returns a callback function that returns the offset in pixels
|
|
2735
|
+
*/
|
|
2736
|
+
get _customAlign() {
|
|
2737
|
+
if (!this.fullBleed) return () => 0;
|
|
2738
|
+
|
|
2739
|
+
if (this._slideshowWrapperNode) {
|
|
2740
|
+
return () =>
|
|
2741
|
+
this._slideshowWrapperNode.getBoundingClientRect().left +
|
|
2742
|
+
this._slideshowPaddingSize;
|
|
2743
|
+
}
|
|
2744
|
+
|
|
2745
|
+
return () => 0;
|
|
2746
|
+
}
|
|
2747
|
+
|
|
2748
|
+
/**
|
|
2749
|
+
* Calculate the width of the slideshow-wrapper and attach a css property to the host element '--slideshow-width'
|
|
2750
|
+
* @returns {void}
|
|
2751
|
+
*/
|
|
2752
|
+
_createWidthProp = () => {
|
|
2753
|
+
if (this._slideshowWrapperNode) {
|
|
2754
|
+
const { width } = this._slideshowWrapperNode.getBoundingClientRect();
|
|
2755
|
+
|
|
2756
|
+
this.style.setProperty("--slideshow-width", `${width}px`);
|
|
2757
|
+
}
|
|
2758
|
+
};
|
|
2759
|
+
|
|
2760
|
+
/**
|
|
2761
|
+
* @private
|
|
2762
|
+
* Initializes the Embla carousel with the provided options and plugins.
|
|
2763
|
+
*/
|
|
2764
|
+
initializeEmbla() {
|
|
2765
|
+
const emblaNode = this.shadowRoot.querySelector(".embla");
|
|
2766
|
+
const options = {
|
|
2767
|
+
loop: this.loop,
|
|
2768
|
+
align: this.fullBleed ? this._customAlign : "start",
|
|
2769
|
+
inViewThreshold: 0.5
|
|
2770
|
+
};
|
|
2771
|
+
|
|
2772
|
+
const classNamesOptions = {
|
|
2773
|
+
snapped: "active",
|
|
2774
|
+
inView: "in-view",
|
|
2775
|
+
loop: "",
|
|
2776
|
+
draggable: "",
|
|
2777
|
+
dragging: "",
|
|
2778
|
+
};
|
|
2779
|
+
|
|
2780
|
+
const autoplayOptions = {
|
|
2781
|
+
playOnInit: this.playOnInit,
|
|
2782
|
+
delay: this.delay,
|
|
2783
|
+
stopOnLastSnap: !this.loop,
|
|
2784
|
+
};
|
|
2785
|
+
|
|
2786
|
+
const autoscrollOptions = {
|
|
2787
|
+
playOnInit: this.playOnInit,
|
|
2788
|
+
speed: this.scrollSpeed,
|
|
2789
|
+
startDelay: this.startDelay,
|
|
2790
|
+
};
|
|
2791
|
+
|
|
2792
|
+
const plugins = [ClassNames(classNamesOptions)];
|
|
2793
|
+
|
|
2794
|
+
// Prevent both autoplay and autoScroll from being used simultaneously.
|
|
2795
|
+
if (this.autoplay && this.autoScroll) {
|
|
2796
|
+
console.warn(
|
|
2797
|
+
"Autoplay and AutoScroll are not meant to be used together. AutoScroll has been disabled.",
|
|
2798
|
+
);
|
|
2799
|
+
this.autoScroll = false;
|
|
2800
|
+
}
|
|
2801
|
+
if (this.autoplay) {
|
|
2802
|
+
plugins.push(Autoplay(autoplayOptions));
|
|
2803
|
+
}
|
|
2804
|
+
if (this.autoScroll && !this.isTouchDevice()) {
|
|
2805
|
+
plugins.push(AutoScroll(autoscrollOptions));
|
|
2806
|
+
}
|
|
2807
|
+
|
|
2808
|
+
// Initialize Embla instance
|
|
2809
|
+
this.embla = EmblaCarousel(emblaNode, options, plugins);
|
|
2810
|
+
|
|
2811
|
+
if (this.pagination) {
|
|
2812
|
+
this.addDotBtnsAndClickHandlers(
|
|
2813
|
+
this.embla,
|
|
2814
|
+
this._dotsNode,
|
|
2815
|
+
this.stopOnInteraction,
|
|
2816
|
+
);
|
|
2817
|
+
}
|
|
2818
|
+
|
|
2819
|
+
if (this.navigation && !this.isTouchDevice()) {
|
|
2820
|
+
this.embla
|
|
2821
|
+
.on("select", this.toggleNavBtnsState)
|
|
2822
|
+
.on("init", this.toggleNavBtnsState)
|
|
2823
|
+
.on("reInit", this.toggleNavBtnsState);
|
|
2824
|
+
}
|
|
2825
|
+
|
|
2826
|
+
if (this.autoplay) {
|
|
2827
|
+
this.embla
|
|
2828
|
+
.on("autoplay:stop", this.togglePlayButtonOnStop)
|
|
2829
|
+
.on("autoplay:play", this.togglePlayButtonOnPlay)
|
|
2830
|
+
.on("init", this.togglePlayButtonOnStop);
|
|
2831
|
+
}
|
|
2832
|
+
|
|
2833
|
+
if (this.autoScroll && !this.isTouchDevice()) {
|
|
2834
|
+
this.embla
|
|
2835
|
+
.on("autoScroll:stop", this.togglePlayButtonOnStop)
|
|
2836
|
+
.on("autoScroll:play", this.togglePlayButtonOnPlay)
|
|
2837
|
+
.on("init", this.togglePlayButtonOnStop);
|
|
2838
|
+
}
|
|
2839
|
+
|
|
2840
|
+
if (this.fullBleed) {
|
|
2841
|
+
this.embla
|
|
2842
|
+
.on("init", this._createWidthProp)
|
|
2843
|
+
.on("resize", this._createWidthProp);
|
|
2844
|
+
}
|
|
2845
|
+
}
|
|
2846
|
+
|
|
2847
|
+
/**
|
|
2848
|
+
* @private
|
|
2849
|
+
* Gets slides from the slot, adds necessary classes and event listeners,
|
|
2850
|
+
* and updates the Embla instance with the new slides.
|
|
2851
|
+
*/
|
|
2852
|
+
updateSlides() {
|
|
2853
|
+
if (this._slot) {
|
|
2854
|
+
this.slides = Array.from(this._slot.assignedElements());
|
|
2855
|
+
|
|
2856
|
+
this.slides.forEach((element, index) => {
|
|
2857
|
+
element.classList.add("embla__slide");
|
|
2858
|
+
element.addEventListener("keydown", this.handleKeydown);
|
|
2859
|
+
if (index === 0) {
|
|
2860
|
+
element.setAttribute("tabindex", "0");
|
|
2861
|
+
} else {
|
|
2862
|
+
element.setAttribute("tabindex", "-1");
|
|
2863
|
+
}
|
|
2864
|
+
});
|
|
2865
|
+
|
|
2866
|
+
// Attach slides to the Embla instance
|
|
2867
|
+
const emblaContainer = this.shadowRoot.querySelector(".embla__container");
|
|
2868
|
+
emblaContainer.replaceChildren(...this.slides);
|
|
2869
|
+
}
|
|
2870
|
+
}
|
|
2871
|
+
|
|
2872
|
+
// ========== PRIVATE HELPER METHODS =================
|
|
2873
|
+
|
|
2874
|
+
/**
|
|
2875
|
+
* @private
|
|
2876
|
+
* Toggles the tabindex attribute on the active slide to allow keyboard navigation.
|
|
2877
|
+
*/
|
|
2878
|
+
toggleTabIndex = () => {
|
|
2879
|
+
const activeSlide = this.slides[this.embla.selectedScrollSnap()];
|
|
2880
|
+
this.slides.forEach((slide) => {
|
|
2881
|
+
slide.setAttribute("tabindex", "-1");
|
|
2882
|
+
});
|
|
2883
|
+
activeSlide.setAttribute("tabindex", "0");
|
|
2884
|
+
};
|
|
2885
|
+
|
|
2886
|
+
/**
|
|
2887
|
+
* @private
|
|
2888
|
+
* Toggles the icon and aria-label of the play button to stopped state.
|
|
2889
|
+
*/
|
|
2890
|
+
togglePlayButtonOnStop = () => {
|
|
2891
|
+
this.isPlaying = false;
|
|
2892
|
+
this.playBtnLabel = this.playLabel;
|
|
2893
|
+
};
|
|
2894
|
+
|
|
2895
|
+
/**
|
|
2896
|
+
* @private
|
|
2897
|
+
* Toggles the icon and aria-label of the play button to playing state.
|
|
2898
|
+
*/
|
|
2899
|
+
togglePlayButtonOnPlay = () => {
|
|
2900
|
+
this.isPlaying = true;
|
|
2901
|
+
this.playBtnLabel = this.pauseLabel;
|
|
2902
|
+
};
|
|
2903
|
+
|
|
2904
|
+
/**
|
|
2905
|
+
* @private
|
|
2906
|
+
* Adds and removes disabled attribute if at the beginning or end of the slideshow and loop is off.
|
|
2907
|
+
*/
|
|
2908
|
+
toggleNavBtnsState = () => {
|
|
2909
|
+
if (this.embla.canScrollPrev()) {
|
|
2910
|
+
this._prevBtn.removeAttribute("disabled");
|
|
2911
|
+
} else {
|
|
2912
|
+
this._prevBtn.setAttribute("disabled", "");
|
|
2913
|
+
}
|
|
2914
|
+
|
|
2915
|
+
if (this.embla.canScrollNext()) {
|
|
2916
|
+
this._nextBtn.removeAttribute("disabled");
|
|
2917
|
+
} else {
|
|
2918
|
+
this._nextBtn.setAttribute("disabled", "");
|
|
2919
|
+
}
|
|
2920
|
+
};
|
|
2921
|
+
|
|
2922
|
+
/**
|
|
2923
|
+
* @private
|
|
2924
|
+
* Stops autoplay when the user interacts with the navigation controls or pagination dots.
|
|
2925
|
+
*/
|
|
2926
|
+
stopOnInteraction = () => {
|
|
2927
|
+
if (this.isPlaying) {
|
|
2928
|
+
this.stop();
|
|
2929
|
+
this.togglePlayButtonOnStop();
|
|
2930
|
+
this.isStopped = true;
|
|
2931
|
+
}
|
|
2932
|
+
};
|
|
2933
|
+
|
|
2934
|
+
/**
|
|
2935
|
+
* @private
|
|
2936
|
+
* Checks to see if the user is on a touch device.
|
|
2937
|
+
* @returns {boolean} True if touch device, false otherwise.
|
|
2938
|
+
*/
|
|
2939
|
+
isTouchDevice() {
|
|
2940
|
+
return window.matchMedia("(pointer: coarse)").matches;
|
|
2941
|
+
}
|
|
2942
|
+
|
|
2943
|
+
// ========== EVENT HANDLERS =================
|
|
2944
|
+
|
|
2945
|
+
/**
|
|
2946
|
+
* @private
|
|
2947
|
+
* Handles the slot change event to update slides and initialize or reinitialize Embla.
|
|
2948
|
+
* If the slot is empty, it will not initialize Embla.
|
|
2949
|
+
*/
|
|
2950
|
+
handleSlotChange() {
|
|
2951
|
+
this.updateSlides();
|
|
2952
|
+
|
|
2953
|
+
if (this.embla) {
|
|
2954
|
+
this.embla.reInit();
|
|
2955
|
+
} else {
|
|
2956
|
+
this.initializeEmbla();
|
|
2957
|
+
}
|
|
2958
|
+
|
|
2959
|
+
// add event listener to embla instance to toggle tabindex on active slide whenever slide is changed
|
|
2960
|
+
this.embla.on("select", this.toggleTabIndex);
|
|
2961
|
+
|
|
2962
|
+
// Set isPlaying to true if autoplay or autoScroll is enabled
|
|
2963
|
+
// this ensures that the play button label is set correctly on page load
|
|
2964
|
+
if (this.autoplay || (this.autoScroll && !this.isTouchDevice())) {
|
|
2965
|
+
this.isPlaying = true;
|
|
2966
|
+
if (this.playOnInit) this.isStopped = false;
|
|
2967
|
+
}
|
|
2968
|
+
}
|
|
2969
|
+
|
|
2970
|
+
/**
|
|
2971
|
+
* @private
|
|
2972
|
+
* @param {string} direction - The direction of the navigation ("prev" or "next").
|
|
2973
|
+
* Handles click events on the previous and next buttons.
|
|
2974
|
+
*/
|
|
2975
|
+
handleNavClick(direction) {
|
|
2976
|
+
if (direction === "prev") {
|
|
2977
|
+
this.scrollPrev();
|
|
2978
|
+
}
|
|
2979
|
+
if (direction === "next") {
|
|
2980
|
+
this.scrollNext();
|
|
2981
|
+
}
|
|
2982
|
+
this.stopOnInteraction();
|
|
2983
|
+
}
|
|
2984
|
+
|
|
2985
|
+
/**
|
|
2986
|
+
* @private
|
|
2987
|
+
* @param {KeyboardEvent} event - The keydown event triggered by the user.
|
|
2988
|
+
* Allows users to navigate through the slideshow using left/right arrow keys.
|
|
2989
|
+
*/
|
|
2990
|
+
handleKeydown = (event) => {
|
|
2991
|
+
const focusActiveSlide = () => {
|
|
2992
|
+
// Timeout added for UX optimization
|
|
2993
|
+
setTimeout(() => {
|
|
2994
|
+
const activeSlide = this.slides[this.embla.selectedScrollSnap()];
|
|
2995
|
+
activeSlide.focus();
|
|
2996
|
+
}, 200);
|
|
2997
|
+
};
|
|
2998
|
+
if (event.key === "ArrowLeft") {
|
|
2999
|
+
event.preventDefault();
|
|
3000
|
+
this.scrollPrev();
|
|
3001
|
+
focusActiveSlide();
|
|
3002
|
+
} else if (event.key === "ArrowRight") {
|
|
3003
|
+
event.preventDefault();
|
|
3004
|
+
this.scrollNext();
|
|
3005
|
+
focusActiveSlide();
|
|
3006
|
+
}
|
|
3007
|
+
};
|
|
3008
|
+
|
|
3009
|
+
/**
|
|
3010
|
+
* @private
|
|
3011
|
+
* Handles click events on the play button to toggle autoplay or autoScroll.
|
|
3012
|
+
*/
|
|
3013
|
+
handlePlayClick() {
|
|
3014
|
+
if (this.isPlaying) {
|
|
3015
|
+
this.stop();
|
|
3016
|
+
this.togglePlayButtonOnStop();
|
|
3017
|
+
this.isStopped = true;
|
|
3018
|
+
} else {
|
|
3019
|
+
this.play();
|
|
3020
|
+
this.togglePlayButtonOnPlay();
|
|
3021
|
+
this.isStopped = false;
|
|
3022
|
+
}
|
|
3023
|
+
}
|
|
3024
|
+
|
|
3025
|
+
/**
|
|
3026
|
+
* @private
|
|
3027
|
+
* Handles mouse enter event on the slideshow container to stop autoplay or autoScroll.
|
|
3028
|
+
*/
|
|
3029
|
+
handleMouseEnter = () => {
|
|
3030
|
+
if (this.isPlaying) {
|
|
3031
|
+
this.stop();
|
|
3032
|
+
this.isHovered = true;
|
|
3033
|
+
}
|
|
3034
|
+
};
|
|
3035
|
+
|
|
3036
|
+
/**
|
|
3037
|
+
* @private
|
|
3038
|
+
* Handles mouse leave event on the slideshow container to start autoplay or autoScroll.
|
|
3039
|
+
* It will only start playing if the slideshow was stopped by hovering.
|
|
3040
|
+
*/
|
|
3041
|
+
handleMouseLeave = () => {
|
|
3042
|
+
if (!this.isPlaying && !this.isStopped && this.isHovered) {
|
|
3043
|
+
this.play();
|
|
3044
|
+
this.isHovered = false;
|
|
3045
|
+
}
|
|
3046
|
+
};
|
|
3047
|
+
|
|
3048
|
+
// ========== DOTS AND PROGRESS BAR METHODS =================
|
|
3049
|
+
|
|
3050
|
+
/**
|
|
3051
|
+
* @private
|
|
3052
|
+
* Adds dot buttons and click handlers for pagination.
|
|
3053
|
+
*/
|
|
3054
|
+
addDotBtnsAndClickHandlers = (emblaApi, dotsNode) => {
|
|
3055
|
+
let dotNodes = [];
|
|
3056
|
+
|
|
3057
|
+
const addDotBtnsWithClickHandlers = () => {
|
|
3058
|
+
const dots = emblaApi.scrollSnapList().map((_, index) => {
|
|
3059
|
+
const button = document.createElement("button");
|
|
3060
|
+
button.className = "embla__dot";
|
|
3061
|
+
button.type = "button";
|
|
3062
|
+
button.tabIndex = -1;
|
|
3063
|
+
button.setAttribute("aria-label", `Go to slide ${index + 1}`); // TODO: localization
|
|
3064
|
+
button.addEventListener(
|
|
3065
|
+
"click",
|
|
3066
|
+
() => {
|
|
3067
|
+
emblaApi.scrollTo(index);
|
|
3068
|
+
this.stopOnInteraction();
|
|
3069
|
+
},
|
|
3070
|
+
false,
|
|
3071
|
+
);
|
|
3072
|
+
return button;
|
|
3073
|
+
});
|
|
3074
|
+
|
|
3075
|
+
dotsNode.replaceChildren(...dots);
|
|
3076
|
+
dotNodes = dots;
|
|
3077
|
+
};
|
|
3078
|
+
|
|
3079
|
+
// 'stopped' class adds fill color to progress dot when not playing
|
|
3080
|
+
const toggleProgressStopped = () => {
|
|
3081
|
+
const selected = emblaApi.selectedScrollSnap();
|
|
3082
|
+
if (dotNodes[selected]) {
|
|
3083
|
+
dotNodes[selected].classList.toggle("stopped", !this.isPlaying);
|
|
3084
|
+
}
|
|
3085
|
+
};
|
|
3086
|
+
|
|
3087
|
+
const toggleDotBtnsActive = () => {
|
|
3088
|
+
const previous = emblaApi.previousScrollSnap();
|
|
3089
|
+
const selected = emblaApi.selectedScrollSnap();
|
|
3090
|
+
|
|
3091
|
+
if (this.autoplay) {
|
|
3092
|
+
const progressBar = document.createElement("div");
|
|
3093
|
+
progressBar.className = "embla__progress__bar";
|
|
3094
|
+
|
|
3095
|
+
if (dotNodes[previous]) {
|
|
3096
|
+
dotNodes[previous].className = "embla__dot";
|
|
3097
|
+
dotNodes[previous].replaceChildren();
|
|
3098
|
+
}
|
|
3099
|
+
|
|
3100
|
+
if (dotNodes[selected]) {
|
|
3101
|
+
dotNodes[selected].className = "embla__progress";
|
|
3102
|
+
dotNodes[selected].replaceChildren(progressBar);
|
|
3103
|
+
if (!this.isPlaying) {
|
|
3104
|
+
dotNodes[selected].classList.add("stopped");
|
|
3105
|
+
}
|
|
3106
|
+
}
|
|
3107
|
+
|
|
3108
|
+
this.addAutoplayProgressListeners(this.embla, this._progressNode);
|
|
3109
|
+
|
|
3110
|
+
emblaApi
|
|
3111
|
+
.on("autoplay:play", toggleProgressStopped) // Removes fill color when autoplay starts
|
|
3112
|
+
.on("autoplay:stop", toggleProgressStopped); // Adds fill color when autoplay stops (temp solution until paused state is implemented)
|
|
3113
|
+
} else {
|
|
3114
|
+
if (dotNodes[previous]) {
|
|
3115
|
+
dotNodes[previous].classList.remove("embla__dot--selected");
|
|
3116
|
+
}
|
|
3117
|
+
if (dotNodes[selected]) {
|
|
3118
|
+
dotNodes[selected].classList.add("embla__dot--selected");
|
|
3119
|
+
}
|
|
3120
|
+
}
|
|
3121
|
+
};
|
|
3122
|
+
|
|
3123
|
+
emblaApi
|
|
3124
|
+
.on("init", addDotBtnsWithClickHandlers)
|
|
3125
|
+
.on("reInit", addDotBtnsWithClickHandlers)
|
|
3126
|
+
.on("init", toggleDotBtnsActive)
|
|
3127
|
+
.on("reInit", toggleDotBtnsActive)
|
|
3128
|
+
.on("select", toggleDotBtnsActive);
|
|
3129
|
+
|
|
3130
|
+
return () => {
|
|
3131
|
+
dotsNode.replaceChildren();
|
|
3132
|
+
};
|
|
3133
|
+
};
|
|
3134
|
+
|
|
3135
|
+
/**
|
|
3136
|
+
* @private
|
|
3137
|
+
* Adds autoplay progress listeners to the progress bar.
|
|
3138
|
+
* This function updates the progress bar animation based on the autoplay timer.
|
|
3139
|
+
*/
|
|
3140
|
+
addAutoplayProgressListeners = (emblaApi, progressNode) => {
|
|
3141
|
+
const progressBarNode = progressNode.querySelector(".embla__progress__bar");
|
|
3142
|
+
|
|
3143
|
+
let animationName = "";
|
|
3144
|
+
|
|
3145
|
+
const startProgress = (emblaApi) => {
|
|
3146
|
+
this._progressNode.classList.remove("embla__progress--paused");
|
|
3147
|
+
const autoplay = emblaApi?.plugins()?.autoplay;
|
|
3148
|
+
if (!autoplay) return;
|
|
3149
|
+
|
|
3150
|
+
const timeUntilNext = autoplay.timeUntilNext();
|
|
3151
|
+
if (timeUntilNext === null) return;
|
|
3152
|
+
|
|
3153
|
+
if (!animationName) {
|
|
3154
|
+
const style = window.getComputedStyle(progressBarNode);
|
|
3155
|
+
animationName = style.animationName;
|
|
3156
|
+
}
|
|
3157
|
+
|
|
3158
|
+
progressBarNode.style.animationName = "none";
|
|
3159
|
+
progressBarNode.style.transform = "translate3d(0,0,0)";
|
|
3160
|
+
|
|
3161
|
+
window.requestAnimationFrame(() => {
|
|
3162
|
+
window.setTimeout(() => {
|
|
3163
|
+
progressBarNode.style.animationName = animationName;
|
|
3164
|
+
progressBarNode.style.animationDuration = `${timeUntilNext}ms`;
|
|
3165
|
+
}, 0);
|
|
3166
|
+
});
|
|
3167
|
+
};
|
|
3168
|
+
|
|
3169
|
+
const stopProgress = (emblaApi) => {
|
|
3170
|
+
this._progressNode.classList.add("embla__progress--paused");
|
|
3171
|
+
const autoplay = emblaApi?.plugins()?.autoplay;
|
|
3172
|
+
if (!autoplay) return;
|
|
3173
|
+
};
|
|
3174
|
+
|
|
3175
|
+
emblaApi
|
|
3176
|
+
.on("autoplay:timerset", startProgress)
|
|
3177
|
+
.on("autoplay:timerstopped", stopProgress)
|
|
3178
|
+
.emit("autoplay:timerset"); // starts progress animation for playOnInit
|
|
3179
|
+
|
|
3180
|
+
return () => {
|
|
3181
|
+
emblaApi
|
|
3182
|
+
.off("autoplay:timerset", startProgress)
|
|
3183
|
+
.off("autoplay:timerstopped", stopProgress);
|
|
3184
|
+
};
|
|
3185
|
+
};
|
|
3186
|
+
|
|
3187
|
+
// ========== LIFECYCLE METHODS =================
|
|
3188
|
+
|
|
3189
|
+
disconnectedCallback() {
|
|
3190
|
+
super.disconnectedCallback();
|
|
3191
|
+
|
|
3192
|
+
// Clean up event listeners and Embla instance
|
|
3193
|
+
if (this.embla) {
|
|
3194
|
+
this.embla.off("select", this.toggleTabIndex);
|
|
3195
|
+
|
|
3196
|
+
if (this.navigation && !this.isTouchDevice()) {
|
|
3197
|
+
this.embla
|
|
3198
|
+
.off("select", this.toggleNavBtnsState)
|
|
3199
|
+
.off("init", this.toggleNavBtnsState)
|
|
3200
|
+
.off("reInit", this.toggleNavBtnsState);
|
|
3201
|
+
}
|
|
3202
|
+
|
|
3203
|
+
if (this.autoplay) {
|
|
3204
|
+
this.embla
|
|
3205
|
+
.off("autoplay:stop", this.togglePlayButtonOnStop)
|
|
3206
|
+
.off("autoplay:play", this.togglePlayButtonOnPlay);
|
|
3207
|
+
}
|
|
3208
|
+
|
|
3209
|
+
if (this.autoScroll && !this.isTouchDevice()) {
|
|
3210
|
+
this.embla
|
|
3211
|
+
.off("autoScroll:stop", this.togglePlayButtonOnStop)
|
|
3212
|
+
.off("autoScroll:play", this.togglePlayButtonOnPlay);
|
|
3213
|
+
}
|
|
3214
|
+
|
|
3215
|
+
this.embla.destroy();
|
|
3216
|
+
this.embla = null;
|
|
3217
|
+
}
|
|
3218
|
+
|
|
3219
|
+
// Remove all slides
|
|
3220
|
+
this.slides.forEach((slide) => {
|
|
3221
|
+
slide.removeEventListener("keydown", this.handleKeydown);
|
|
3222
|
+
});
|
|
3223
|
+
this.slides = [];
|
|
3224
|
+
}
|
|
3225
|
+
|
|
3226
|
+
// ========== RENDER METHODS =================
|
|
3227
|
+
|
|
3228
|
+
/**
|
|
3229
|
+
* Internal function to generate the HTML for the icon to use.
|
|
3230
|
+
* @private
|
|
3231
|
+
* @param {string} svgContent - The SVG content to be embedded.
|
|
3232
|
+
* @param {boolean} hideIcon - Whether the icon should be hidden
|
|
3233
|
+
* @returns {Element} The HTML element containing the SVG icon.
|
|
3234
|
+
*/
|
|
3235
|
+
generateIconHtml(svgContent, hideIcon) {
|
|
3236
|
+
const dom = new DOMParser().parseFromString(svgContent, "text/html");
|
|
3237
|
+
const svg = dom.body.firstChild;
|
|
3238
|
+
svg.setAttribute("slot", "svg");
|
|
3239
|
+
|
|
3240
|
+
return u$2`<${this.iconTag} style="--ds-auro-icon-size: inherit" customColor customSvg ?hidden="${hideIcon}">${svg}</${this.iconTag}>`;
|
|
3241
|
+
}
|
|
3242
|
+
|
|
3243
|
+
/**
|
|
3244
|
+
* Generates the HTML for the navigation controls (previous and next buttons).
|
|
3245
|
+
* @private
|
|
3246
|
+
* @returns {Element} The HTML element containing the navigation controls.
|
|
3247
|
+
*/
|
|
3248
|
+
renderNavigationControls() {
|
|
3249
|
+
return u$2`
|
|
3250
|
+
<${this.buttonTag}
|
|
3251
|
+
aria-label="Previous slide"
|
|
3252
|
+
class="scroll-prev"
|
|
3253
|
+
shape="circle"
|
|
3254
|
+
onDark
|
|
3255
|
+
size="lg"
|
|
3256
|
+
@click=${() => this.handleNavClick("prev")}
|
|
3257
|
+
part="prev-button">
|
|
3258
|
+
${this.generateIconHtml(chevronLeft.svg)}
|
|
3259
|
+
</${this.buttonTag}>
|
|
3260
|
+
<${this.buttonTag}
|
|
3261
|
+
aria-label="Next slide"
|
|
3262
|
+
class="scroll-next"
|
|
3263
|
+
shape="circle"
|
|
3264
|
+
onDark
|
|
3265
|
+
size="lg"
|
|
3266
|
+
@click=${() => this.handleNavClick("next")}
|
|
3267
|
+
part="next-button">
|
|
3268
|
+
${this.generateIconHtml(chevronRight.svg)}
|
|
3269
|
+
</${this.buttonTag}>`;
|
|
3270
|
+
}
|
|
3271
|
+
|
|
3272
|
+
/** @private */
|
|
3273
|
+
renderPlayButton() {
|
|
3274
|
+
return u$2`
|
|
3275
|
+
<${this.buttonTag}
|
|
3276
|
+
aria-label="${this.playBtnLabel}"
|
|
3277
|
+
class="play-pause"
|
|
3278
|
+
shape="circle"
|
|
3279
|
+
@click=${() => this.handlePlayClick()}
|
|
3280
|
+
part="play-pause-button"
|
|
3281
|
+
>
|
|
3282
|
+
${this.generateIconHtml(play.svg, this.isPlaying)}
|
|
3283
|
+
${this.generateIconHtml(pause.svg, !this.isPlaying)}
|
|
3284
|
+
</${this.buttonTag}>
|
|
3285
|
+
`;
|
|
3286
|
+
}
|
|
3287
|
+
|
|
3288
|
+
/**
|
|
3289
|
+
* Generates the HTML for the pagination container, which includes the play button and pagination dots.
|
|
3290
|
+
* If autoplay or autoScroll is enabled, it will render the play button.
|
|
3291
|
+
* If pagination is enabled, it will render the dots.
|
|
3292
|
+
* @private
|
|
3293
|
+
*/
|
|
3294
|
+
renderPaginationContainer() {
|
|
3295
|
+
return u$2`
|
|
3296
|
+
<div class="pagination-container">
|
|
3297
|
+
${this.autoplay || (this.autoScroll && !this.isTouchDevice()) ? this.renderPlayButton() : E}
|
|
3298
|
+
${this.pagination ? u$2`<div class="embla__dots"></div>` : E}
|
|
3299
|
+
</div>
|
|
3300
|
+
`;
|
|
3301
|
+
}
|
|
3302
|
+
|
|
3303
|
+
render() {
|
|
3304
|
+
console.warn("Random console log to test CI pipeline");
|
|
3305
|
+
return u$2`
|
|
3306
|
+
<div class="container">
|
|
3307
|
+
<div class="slideshow-wrapper">
|
|
3308
|
+
${this.navigation && !this.isTouchDevice() ? this.renderNavigationControls() : E}
|
|
3309
|
+
<div class="embla">
|
|
3310
|
+
<div class="embla__container" @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave}>
|
|
3311
|
+
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
3312
|
+
</div>
|
|
3313
|
+
</div>
|
|
3314
|
+
</div>
|
|
3315
|
+
${
|
|
3316
|
+
this.pagination ||
|
|
3317
|
+
this.autoplay ||
|
|
3318
|
+
(this.autoScroll && !this.isTouchDevice())
|
|
3319
|
+
? this.renderPaginationContainer()
|
|
3320
|
+
: E
|
|
3321
|
+
}
|
|
3322
|
+
</div>
|
|
3323
|
+
`;
|
|
3324
|
+
}
|
|
3325
|
+
}
|
|
3326
|
+
|
|
3327
|
+
export { AuroSlideshow as A };
|