vendor: 5,663 bytes, lines 1-2
1/*! For license information please see 3.js.LICENSE.txt */ 2"use strict";(self.webpackChunkslick=self.webpackChunkslick||[]).push([[3],{1762(t,e,i){i.d(e,["i",0,(t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i)])},6505(t,e,i){i.d(e,["E",0,t=>(e,i)=>{void 0!==i?i.addInitializer(()=>{customElements.define(t,e)}):customElements.define(t,e)}])},5694(t,e,i){i.d(e,{M:()=>a});var o=i(842);const r={attribute:!0,type:String,converter:o.W3,reflect:!1,hasChanged:o.Ec},s=(t=r,e,i)=>{const{kind:o,metadata:s}=i;let a=globalThis.litPropertyMetadata.get(s);if(void 0===a&&globalThis.litPropertyMetadata.set(s,a=new Map),"setter"===o&&((t=Object.create(t)).wrapped=!0),a.set(i.name,t),"accessor"===o){const{name:o}=i;return{set(i){const r=e.get.call(this);e.set.call(this,i),this.requestUpdate(o,r,t,!0,i)},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===o){const{name:o}=i;return function(i){const r=this[o];e.call(this,i),this.requestUpdate(o,r,t,!0,i)}}throw Error("Unsupported decorator location: "+o)};function a(t){return(e,i)=>"object"==typeof i?s(t,e,i):((t,e,i)=>{const o=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),o?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}},1124(t,e,i){i.d(e,{K:()=>r});var o=i(1762);function r(t){return(e,i)=>{const{slot:r,selector:s}=t??{},a="slot"+(r?`[name=${r}]`:":not([name])");return(0,o.i)(e,i,{get(){const e=this.renderRoot?.querySelector(a),i=e?.assignedElements(t)??[];return void 0===s?i:i.filter(t=>t.matches(s))}})}}},1895(t,e,i){i.d(e,{P:()=>r});var o=i(1762);function r(t,e){return(i,r,s)=>{const a=e=>e.renderRoot?.querySelector(t)??null;if(e){const{get:t,set:e}="object"==typeof r?i:s??(()=>{const t=Symbol();return{get(){return this[t]},set(e){this[t]=e}}})();return(0,o.i)(i,r,{get(){let i=t.call(this);return void 0===i&&(i=a(this),(null!==i||this.hasUpdated)&&e.call(this,i)),i}})}return(0,o.i)(i,r,{get(){return a(this)}})}}},4290(t,e,i){i.d(e,{w:()=>r});var o=i(5694);function r(t){return(0,o.M)({...t,state:!0,attribute:!1})}},842(t,e,i){i.d(e,{mN:()=>$,AH:()=>l,W3:()=>x,Ec:()=>C});const o=globalThis,r=o.ShadowRoot&&(void 0===o.ShadyCSS||o.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),a=new WeakMap;class n{constructor(t,e,i){if(this._$cssResult$=!0,i!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(r&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=a.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&a.set(e,t))}return t}toString(){return this.cssText}}const l=(t,...e)=>{const i=1===t.length?t[0]:e.reduce((e,i,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[o+1],t[0]);return new n(i,t,s)},d=(t,e)=>{if(r)t.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const i of e){const e=document.createElement("style"),r=o.litNonce;void 0!==r&&e.setAttribute("nonce",r),e.textContent=i.cssText,t.appendChild(e)}},c=r?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new n("string"==typeof t?t:t+"",void 0,s))(e)})(t):t,{is:u,defineProperty:m,getOwnPropertyDescriptor:h,getOwnPropertyNames:p,getOwnPropertySymbols:g,getPrototypeOf:b}=Object,v=globalThis,y=v.trustedTypes,f=y?y.emptyScript:"",_=v.reactiveElementPolyfillSupport,w=(t,e)=>t,x={toAttribute(t,e){switch(e){case Boolean:t=t?f:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){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}},C=(t,e)=>!u(t,e),k={attribute:!0,type:String,converter:x,reflect:!1,useDefault:!1,hasChanged:C};Symbol.metadata??=Symbol("metadata"),v.litPropertyMetadata??=new WeakMap;class $ 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,e=k){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(t,i,e);void 0!==o&&m(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:r}=h(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:o,set(e){const s=o?.call(this);r?.call(this,e),this.requestUpdate(t,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??k}static _$Ei(){if(this.hasOwnProperty(w("elementProperties")))return;const t=b(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(w("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(w("properties"))){const t=this.properties,e=[...p(t),...g(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];
2if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(c(t))}else void 0!==t&&e.push(c(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.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 d(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(void 0!==o&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:x).toAttribute(e,i.type);this._$Em=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$Em=null}}_$AK(t,e){const i=this.constructor,o=i._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=i.getPropertyOptions(o),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:x;this._$Em=o;const s=r.fromAttribute(e,t.type);this[o]=s??this._$Ej?.get(o)??s,this._$Em=null}}requestUpdate(t,e,i,o=!1,r){if(void 0!==t){const s=this.constructor;if(!1===o&&(r=this[t]),i??=s.getPropertyOptions(t),!((i.hasChanged??C)(r,e)||i.useDefault&&i.reflect&&r===this._$Ej?.get(t)&&!this.hasAttribute(s._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:o,wrapped:r},s){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,s??e??this[t]),!0!==r||void 0!==s)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===o&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,o=this[e];!0!==t||this._$AL.has(e)||void 0===o||this.C(e,void 0,i,o)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}}$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[w("elementProperties")]=new Map,$[w("finalized")]=new Map,_?.({ReactiveElement:$}),(v.reactiveElementVersions??=[]).push("2.1.2")},7313(t,e,i){function o(t,e,i,o){var r,s=arguments.length,a=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var n=t.length-1;n>=0;n--)(r=t[n])&&(a=(s<3?r(a):s>3?r(e,i,a):r(e,i))||a);return s>3&&a&&Object.defineProperty(e,i,a),a}"function"==typeof SuppressedError&&SuppressedError;var r=i(2618),s=i(6505),a=i(9563),n=i(7509),l=i(7621),d=i(3720),c=i(1145),u=i(31),m=i(6752);const{I:h}=m.ge;var p=i(7804);const g=(t,e)=>{const i=t._$AN;if(void 0===i)return!1;for(const t of i)t._$AO?.(e,!1),g(t,e);return!0},b=t=>{let e,i;do{if(void 0===(e=t._$AM))break;i=e._$AN,i.delete(t),t=e}while(0===i?.size)},v=t=>{for(let e;e=t._$AM;t=e){let i=e._$AN;if(void 0===i)e._$AN=i=new Set;else if(i.has(t))break;i.add(t),_(e)}};function y(t){void 0!==this._$AN?(b(this),this._$AM=t,v(this)):this._$AM=t}function f(t,e=!1,i=0){const o=this._$AH,r=this._$AN;if(void 0!==r&&0!==r.size)if(e)if(Array.isArray(o))for(let t=i;t<o.length;t++)g(o[t],!1),b(o[t]);else null!=o&&(g(o,!1),b(o));else g(this,t)}const _=t=>{t.type==p.OA.CHILD&&(t._$AP??=f,t._$AQ??=y)};class w extends p.WL{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,i){super._$AT(t,e,i),v(this),this.isConnected=t._$AU}_$AO(t,e=!0){t!==this.isConnected&&(this.isConnected=t,t?this.reconnected?.():this.disconnected?.()),e&&(g(this,t),b(this))}setValue(t){if((t=>void 0===t.strings)(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}class x{constructor(t){this.G=t}disconnect(){this.G=void 0}reconnect(t){this.G=t}deref(){return this.G}}class C{constructor(){this.Y=void 0,this.Z=void 0}get(){return this.Y}pause(){this.Y??=new Promise(t=>this.Z=t)}resume(){this.Z?.(),this.Y=this.Z=void 0}}const k=t=>!(t=>null===t||"object"!=typeof t&&"function"!=typeof t)(t)&&"function"==typeof t.then,$=1073741823;const M=(0,p.u$)(class extends w{constructor(){super(...arguments),this._$Cwt=$,this._$Cbt=[],this._$CK=new x(this),this._$CX=new C}render(...t){return t.find(t=>!k(t))??m.c0}update(t,e){const i=this._$Cbt;let o=i.length;this._$Cbt=e;const r=this._$CK,s=this._$CX;this.isConnected||this.disconnected();for(let t=0;t<e.length&&!(t>this._$Cwt);t++){const a=e[t];if(!k(a))return this._$Cwt=t,a;t<o&&a===i[t]||(this._$Cwt=$,o=0,Promise.resolve(a).then(async t=>{for(;s.get();)await s.get();const e=r.deref();if(void 0!==e){const i=e._$Cbt.indexOf(a);i>-1&&i<e._$Cwt&&(e._$Cwt=i,e.setValue(t))}}))}return m.c0}disconnected(){this._$CK.disconnect(),this._$CX.pause()}reconnected(){this._$CK.reconnect(this),this._$CX.resume()}}),S=r.AH` 3 4 /* Box sizing */ 5 *, *:before, *:after { 6 box-sizing: border-box; 7 } 8 9 /* Font family type groups */ 10 h1,h2,h3,h4,h5,h6 { 11 font-family: var(--umg-font-heading-family, 'Roboto Serif', Times, 'Times New Roman', Georgia, serif); 12 } 13 14 p { 15 font-family: var(--umg-font-body-family, Roboto, Arial, Helvetica, sans-serif); 16 } 17 18 /* Hidden elements */ 19 *[hidden="true" i] { display: none } 20 21 /* Browser native features */ 22 summary { 23 -webkit-tap-highlight-color: transparent; 24 } 25 26 /* Accessibilty states */ 27 *:focus-visible:not(umg-button-icon) { 28 outline: 0.125rem solid rgba(var(--umg-color-base-background, 0,0,0), 0.5); 29 outline-offset: 0.1875rem; 30 box-shadow: 0 0 0 0.15rem rgb(var(--umg-color-base-text, 255,255,255)),0 0 0.25rem 0.2rem rgba(var(--umg-color-base-background, 0,0,0), 0.5); 31 } 32 @supports (color: rgb(from white r g b)) { 33 *:focus-visible:not(umg-button-icon) { 34 outline: 0.125rem solid rgb(from var(--umg-color-base-background, rgb(0,0,0)) r g b / alpha); 35 outline-offset: 0.1875rem; 36 box-shadow: 0 0 0 0.15rem rgb(from var(--umg-color-base-text, rgb(255,255,255)) r g b / alpha), 0 0 0.25rem 0.2rem rgb(from var(--umg-color-base-background, rgb(0,0,0)) r g b / alpha); 37 } 38 } 39`;var A=i(6040);class z{constructor(t){this.listeners=new Map,this.target=t}addEventListener(t,e,i){const o=this.listeners.get(t)||new Set;return this.listeners.set(t,o),o.add(e),this.target.addEventListener(t,e,i),()=>{this.removeEventListener(t,e,i)}}removeEventListener(t,e,i){const o=this.listeners.get(t);o&&(o.delete(e),0===o.size&&this.listeners.delete(t)),this.target.removeEventListener(t,e,i)}dispatchCustomEvent(t,e,i){this.target.dispatchEvent(new CustomEvent(t,{detail:e,...i}))}}const{prefix:H}={prefix:"umgs"};let E=class extends r.WF{constructor(){super(...arguments),this.labels={contents:"Your cart contents:",empty:"Your cart is empty.",adding:"Adding item",add:"Items added to your cart.",removing:"Removing items",remove:"Item removed from cart.",updatedCart:"Item updated.",checkout:"Checkout now",continue:"Continue shopping"},this.drawerType="drop-down",this.drawerWidth="28",this.checkoutType="checkout",this.open=!1,this._region="default",this._init=!1,this._currentMessage="empty",this._updatedCartMessage=!1,this._maxQuantities={},this._cartErrors={},this._clientValidationErrorResult={},this.cart={id:"",totalQuantity:0,cost:{totalAmount:{amount:0,currencyCode:"GBP"},subtotalAmount:{amount:0,currencyCode:"GBP"}},checkoutUrl:"",lines:[],userErrors:""},this.cartEventManager=new z(this),this.windowEventManager=new z(window),this._eventsHandler=t=>{const e=t;if("umg-disclosure:opened"===t.type&&this._cartOverlay?.classList.remove("hidden"),"umg-disclosure:closed"===t.type&&(this._cartOverlay?.classList.add("hidden"),this._clearUpdatedCartMessage(),this._cartErrors={},this._clientValidationErrorResult={},this.cart.userErrors=""),e.detail&&("click"===t.type&&"umgs-cart:add"===e.detail.eventName&&this._addTocart(t),"change"===t.type&&"line-item-quantity[]"===e.detail.fieldName&&e.detail.fieldId&&this._updateCart(t),"umgs-cart:error"===t.type&&"umgs-cart:error"===e.detail.eventName)){if(this._cartErrors={},e.detail.errors&&Array.isArray(e.detail.errors))if(e.detail.errors.length>0&&e.detail.errors[0].lineItemId)this._clientValidationErrorResult={}
39,e.detail.errors.forEach(t=>{t.lineItemId&&(this._clientValidationErrorResult[t.lineItemId]=t.message)}),this._cartErrors={};else{this._cartErrors={};const i=e.detail.errors[0]?.message||"An unknown error occurred.";try{const t=JSON.parse(i);if(Array.isArray(t)&&t.length>0&&(t[0].error||t[0].variants&&t[0].variants.length>0&&t[0].variants[0].error)){const e=this._findBundleLineItemIdByComponentProductId("gid://shopify/Product/"+t[0].id,this.cart.lines),i=e||"gid://shopify/Product/"+t[0].id;let o=t[0].error;!o&&t[0].variants&&t[0].variants.length>0&&(o=t[0].variants[0].error),this._cartErrors[i]=o}else this._cartErrors.general_api_error=i}catch(t){this._cartErrors.general_api_error=i}this._clientValidationErrorResult={}}this._openCart()}"umg-store:region-change"===t.type&&this._regionChangeHandler(e)}}connectedCallback(){super.connectedCallback(),this.initCart(),this.windowEventManager.addEventListener("click",this._eventsHandler),this.windowEventManager.addEventListener("change",this._eventsHandler),this.windowEventManager.addEventListener("umgs-cart:error",this._eventsHandler),this.cartEventManager.addEventListener("umg-disclosure:opened",this._eventsHandler),this.cartEventManager.addEventListener("umg-disclosure:closed",this._eventsHandler),this.windowEventManager.addEventListener("umg-store:region-change",this._eventsHandler)}disconnectedCallback(){this.windowEventManager.removeEventListener("click",this._eventsHandler),this.windowEventManager.removeEventListener("change",this._eventsHandler),this.windowEventManager.removeEventListener("umgs-cart:error",this._eventsHandler),this.cartEventManager.removeEventListener("umg-disclosure:opened",this._eventsHandler),this.cartEventManager.removeEventListener("umg-disclosure:closed",this._eventsHandler),super.disconnectedCallback()}_validateBundleComponentLimits(t,e,i,o){const r=[];if(e<=0||!i||0===i.length||!t)return r;const s=o.find(e=>e.id===t);let a=100;if(s){const i=s.merchandise?.product;if(i&&i.purchaseLimit){a=parseInt(i.purchaseLimit.value);if((s.quantity||0)+e>a)return r.push({lineItemId:t,message:`${i.title} has a maximum purchasable quantity of ${a}`}),r}}for(const s of i){const i=s.id;let a=100;if(s.product.variants?.edges[0]?.node?.purchaseLimit?a=s.product.variants.edges[0].node.purchaseLimit.value:s.product.purchaseLimit?a=s.product.purchaseLimit.value:s.product.variants?.edges[0]?.node?.quantityAvailable&&(a=s.product.variants.edges[0].node.quantityAvailable),i&&a&&!isNaN(a)&&a>0){let n=0;o.forEach(t=>{t.merchandise?.id===i&&(n+=t.quantity||0),t.merchandise?.umgBundlesDetails&&t.merchandise.umgBundlesDetails.forEach(e=>{e.id===i&&(n+=t.quantity||0)})});if(n+e>a){const e=s.product?.title||"component";r.push({lineItemId:t,message:`${e} has a maximum purchasable quantity of ${a}`});break}}}return r}_validateSimpleProductLimits(t,e,i,o){const r=[];if(i<=0)return r;const s=o.find(e=>e.id===t);if(!s||!s.merchandise||s.merchandise.id!==e)return console.warn("Could not find matching line item for validation:",{lineItemId:t,variantId:e}),r;const a=(s.quantity||0)+i,n=s.merchandise,l=n?.product?.title||"Item",d="Default Title"===n?.title?"":n?.title,c=d?`${l} - ${d}`:l;let u;const m=n?.product?.variants?.edges?.[0]?.node,h=m?.purchaseLimit?.value;if(h){const t=parseInt(h);!isNaN(t)&&t>=0&&(u=t)}
39if(void 0===u){const t=n?.product?.purchaseLimit?.value;if(t){const e=parseInt(t);!isNaN(e)&&e>=0&&(u=e)}}if(void 0===u){const t=m?.quantityAvailable;null!=t&&t>=0&&(u=t)}return void 0===u&&(u=100),a>u&&r.push({lineItemId:t,message:`${c} has a maximum purchasable quantity of ${u}`}),r}_revertNumberFieldValue(t,e){void 0!==e&&requestAnimationFrame(()=>{const i=this.shadowRoot?.querySelector(`umg-number-field[id="${t}"]`);if(i){let t=i.shadowRoot?.querySelector('input[part="text-field"]');if(t||(t=i.shadowRoot?.querySelector(".input-container input")),t||(t=i.shadowRoot?.querySelector("input")),t){t.value=e.toString(),i.setAttribute("value",e.toString());const o=new CustomEvent("input",{bubbles:!0});t.dispatchEvent(o)}}})}_regionChangeHandler(t){const e=t.detail.region;e!==this._region&&(this._region=e,this.apiClient?.clearCart(),this.cart={id:"",totalQuantity:0,cost:{totalAmount:{amount:0,currencyCode:""},subtotalAmount:{amount:0,currencyCode:""}},checkoutUrl:"",lines:[],userErrors:""})}async _getItemShippingInfo(t){try{return window.UMGGR_Store&&"function"==typeof window.UMGGR_Store.getShipDate?await window.UMGGR_Store.getShipDate(t):null}catch(t){return console.error("Error getting shipping info for cart item:",t),null}}updated(t){(!1===this._init&&t.has("storefrontDomain")&&t.has("storefrontApiKey")||t.has("storefrontDomain")&&t.has("storefrontApiKey")&&"storefrontDomain"in t&&"storefrontApiKey"in t&&(t.storefrontDomain!==this.storefrontApiKey||t.storefrontApiKey!==this.storefrontApiKey)&&this.storefrontDomain&&this.storefrontApiKey)&&this.initCart()}async initCart(){if(this.storefrontDomain&&this.storefrontApiKey){this.apiClient=new A.A(this.storefrontDomain,this.storefrontApiKey),this._init=!0;const t=await this.apiClient.getCart();if(t){if("lines"in t&&Array.isArray(t.lines))for(const e in t.lines)if("object"==typeof t.lines[e]&&"merchandise"in t.lines[e]&&t.lines[e].merchandise&&"object"==typeof t.lines[e].merchandise&&"umgBundles"in t.lines[e].merchandise&&t.lines[e].merchandise.umgBundles&&"value"in t.lines[e].merchandise.umgBundles)try{const i=JSON.parse(t.lines[e].merchandise.umgBundles.value).map(t=>`gid://shopify/ProductVariant/${t.component_variant_id}`),o=await this.apiClient.getBundleProductCart(i);o&&(t.lines[e].merchandise.umgBundlesDetails=o)}catch(t){console.log(t)}this.cart=t,t.lines.length?this._updateCartMessage("contents"):t.lines.length||this._updateCartMessage("empty")}}}_updateCartMessage(t){this._currentMessage=t}_clearUpdatedCartMessage(){this._updatedCartMessage&&this.cart.lines.length?(this._updateCartMessage("contents"),this._updatedCartMessage=!1):this._updatedCartMessage&&!this.cart.lines.length&&(this._updateCartMessage("empty"),this._updatedCartMessage=!1)}getCartDetails(){return this.cart}async _addTocart(t){const e=t.detail.variant,i=parseInt(t.detail.quantity)||1,o=e?.id;if(!o){console.error("Add to cart failed: Missing variant ID.");const t={bubbles:!0,composed:!0},e={eventName:"umgs-cart:error",errors:[{message:"Cannot add item: Missing variant ID."}]};return void this.windowEventManager.dispatchCustomEvent("umgs-cart:error",e,t)}const r=this.cart.lines.find(t=>t.merchandise?.id===o);let s,a=o;r&&(a=r.id);try{if(e.umgBundles&&this.apiClient){const t=e.umgBundles.map(t=>`gid://shopify/ProductVariant/${t.component_variant_id}`);s=await this.apiClient.getBundleProductCart(t)}}catch(t){console.log(t)}if(s&&s.length>0){const t=this._validateBundleComponentLimits(a,i,s,this.cart.lines);if(t.length>0){const e={bubbles:!0,composed:!0},i={eventName:"umgs-cart:error",errors:t};return void this.windowEventManager.dispatchCustomEvent("umgs-cart:error",i,e)}}if(this.apiClient){this._updateCartMessage("adding");const e=await this.apiClient.addToCart([{quantity:i,merchandiseId:o,attributes:t.detail.properties}]);if(!e){console.error("Add to cart failed: No response from API.");const t={bubbles:!0,composed:!0},e={eventName:"umgs-cart:error",errors:[{message:"An unknown error occurred. Please try again."}]};return void this.windowEventManager.dispatchCustomEvent("umgs-cart:error",e,t)}if(e.errors&&0!==e.errors.length){const t={bubbles:!0,composed:!0},i={eventName:"umgs-cart:error",errors:e.errors};this._updateCartMessage("contents"),this.windowEventManager.dispatchCustomEvent("umgs-cart:error",i,t)}else{if("lines"in e&&Array.isArray(e.lines))for(const t in e.lines)if("object"==typeof e.lines[t]&&"merchandise"in e.lines[t]&&e.lines[t].merchandise&&"object"==typeof e.lines[t].merchandise&&"umgBundles"in e.lines[t].merchandise&&e.lines[t].merchandise.umgBundles&&"value"in e.lines[t].merchandise.umgBundles)try{const i=JSON.parse(e.lines[t].merchandise.umgBundles.value).map(t=>`gid://shopify/ProductVariant/${t.component_variant_id}`),o=await this.apiClient.getBundleProductCart(i);o&&(e.lines[t].merchandise.umgBundlesDetails=o)}catch(t){console.log(t)}this.cart=e,this._updateCartMessage("add"),this._openCart()}}}
39async _removeFromCart(t){if(this._updateCartMessage("removing"),this.apiClient){const e=[];this.cart.lines.forEach(i=>{if(i.id===t&&i.merchandise?.id){const t={id:i.id,quantity:0,merchandiseId:i.merchandise?.id};e.push(t)}else if(i.id&&i.merchandise?.id&&i.quantity){const t={id:i.id,quantity:i.quantity,merchandiseId:i.merchandise?.id};e.push(t)}});const i=await this.apiClient.updateItemsInCart(this.cart.id,e);if(i){if("lines"in i&&Array.isArray(i.lines))for(const t in i.lines)if("object"==typeof i.lines[t]&&"merchandise"in i.lines[t]&&i.lines[t].merchandise&&"object"==typeof i.lines[t].merchandise&&"umgBundles"in i.lines[t].merchandise&&i.lines[t].merchandise.umgBundles&&"value"in i.lines[t].merchandise.umgBundles)try{const e=JSON.parse(i.lines[t].merchandise.umgBundles.value).map(t=>`gid://shopify/ProductVariant/${t.component_variant_id}`),o=await this.apiClient.getBundleProductCart(e);o&&(i.lines[t].merchandise.umgBundlesDetails=o)}catch(t){console.log(t)}this.cart=i,this.cart.lines.length||this._updateCartMessage("empty")}this._updateCartMessage("remove")}}async _updateCart(t){if(this.apiClient){const e=t.detail.fieldId,i=parseInt(t.detail.value),o=this.cart.lines.find(t=>t.id===e);if(!o)return void console.error("Could not find line item to update:",e);const r=o.quantity||0,s=i-r;let a=[];if(o?.merchandise?.umgBundlesDetails?a=this._validateBundleComponentLimits(o.id,s,o.merchandise.umgBundlesDetails,this.cart.lines):o?.merchandise?.id&&(a=this._validateSimpleProductLimits(o.id,o.merchandise.id,s,this.cart.lines)),a.length>0){const t={bubbles:!0,composed:!0},i={eventName:"umgs-cart:error",errors:a};return this.windowEventManager.dispatchCustomEvent("umgs-cart:error",i,t),void this._revertNumberFieldValue(e,r)}const n={[e]:r},l=[];this.cart.lines.forEach(e=>{if(e.id===t.detail.fieldId&&e.merchandise?.id){const i={id:e.id,quantity:parseInt(t.detail.value),merchandiseId:e.merchandise?.id};l.push(i)}else if(e.id&&e.merchandise?.id&&e.quantity){const t={id:e.id,quantity:e.quantity,merchandiseId:e.merchandise?.id};l.push(t)}});const d=await this.apiClient.updateItemsInCart(this.cart.id,l);if(d&&(d.userErrors&&d.userErrors.length>0||d.cart&&d.cart.userErrors&&d.cart.userErrors.length>0)){const t=n[e];this._revertNumberFieldValue(e,t);const i={bubbles:!0,composed:!0},o={eventName:"umgs-cart:error",errors:d.userErrors};this.windowEventManager.dispatchCustomEvent("umgs-cart:error",o,i)}else this._cartErrors={},this._clientValidationErrorResult={},this._maxQuantities={};if(d){if("lines"in d&&Array.isArray(d.lines))for(const t in d.lines)if("object"==typeof d.lines[t]&&"merchandise"in d.lines[t]&&d.lines[t].merchandise&&"object"==typeof d.lines[t].merchandise&&"umgBundles"in d.lines[t].merchandise&&d.lines[t].merchandise.umgBundles&&"value"in d.lines[t].merchandise.umgBundles)try{const e=JSON.parse(d.lines[t].merchandise.umgBundles.value).map(t=>`gid://shopify/ProductVariant/${t.component_variant_id}`),i=await this.apiClient.getBundleProductCart(e);i&&(d.lines[t].merchandise.umgBundlesDetails=i)}catch(t){console.log(t)}this.cart=d}else this._currentMessage="empty"}}_checkoutAction(){if("cart"===this.checkoutType){const{hostname:t}=new URL(this.cart.checkoutUrl),e=this.generateUtmURL(`https://${t}/cart/clear?`,!1)+"&return_to=/cart/update?";let i="";this.cart.lines.forEach((t,e)=>{e>0&&(i=`${i}%26`),t&&"merchandise"in t&&t.merchandise&&"id"in t.merchandise&&(i=`${i}updates[${t.merchandise.id.replace("gid://shopify/ProductVariant/","")}]=${t.quantity}`)}),window.location.href=`${e}${i}`}else window.location.href=this.generateUtmURL(this.cart.checkoutUrl,!0)}_openCart(){this._disclosure?.disclosureOpen(),this._cartOverlay?.classList.remove("hidden")}_closeCart(){this._disclosure?.disclosureClose(),this._cartOverlay?.classList.add("hidden")}_openDirection(){return"drop-down"===this.drawerType?"down":"from-right"}zeroPad(t,e="GBP"){return Intl.NumberFormat("en-GB",{style:"currency",currency:e}).format(t)}generateUtmURL(t,e){let i="";return 1==e&&(i=t.includes("?")?"&":""),i+=""!==this.checkoutUtmSource?`utm_source=${this.checkoutUtmSource}&`:"",i+=""!==this.checkoutUtmCampaign?`utm_campaign=${this.checkoutUtmCampaign}&`:"",i+=""!==this.checkoutUtmMedium?`utm_medium=${this.checkoutUtmMedium}`:"",t+i}_cartMessage(){switch(this._currentMessage){case"contents":return r.qy` 40 <umg-text part="cart-message" as="span" variant="bodySm"> 41 ${this.labels.contents} 42 </umg-text> 43 `;case"adding":return this._updatedCartMessage=!0,r.qy` 44 <umg-icon 45 class="spinner" 46 icon="spinner" 47 size="small" 48 ></umg-icon> 49 <umg-text 50 part="cart-message" 51 as="span" 52 variant="bodySm" 53 color="subdued" 54 > 55 ${this.labels.adding} 56 </umg-text> 57 `;case"add":return this._updatedCartMessage=!0,r.qy` 58 <umg-icon 59 part="cart-check" 60 icon="check" 61 size="small" 62 ></umg-icon> 63 <umg-text part="cart-message" as="span" variant="bodySm"> 64 ${this.labels.add} 65 </umg-text> 66 `;case"removing":return this._updatedCartMessage=!0,r.qy` 67 <umg-icon 68 class="spinner" 69 icon="spinner" 70 size="small" 71 ></umg-icon> 72 <umg-text 73 part="cart-message" 74 as="span" 75 variant="bodySm" 76 color="subdued" 77 > 78 ${this.labels.removing} 79 </umg-text> 80 `;case"remove":return this._updatedCartMessage=!0,r.qy` 81 <umg-icon 82 part="cart-check" 83 icon="check" 84 size="small" 85 ></umg-icon> 86 <umg-text part="cart-message" as="span" variant="bodySm"> 87 ${this.labels.remove} 88 </umg-text> 89 `;default:return r.qy` 90 <umg-text part="cart-message" as="span" variant="bodySm"> 91 ${this.labels.empty} 92 </umg-text> 93 `}}_cartBundleItems(t){if(t&&t.merchandise?.umgBundlesDetails&&Array(t.merchandise?.umgBundlesDetails)&&t.merchandise?.umgBundlesDetails.length)return r.qy` 94 <umg-accordion 95 class="subitems-accordion" 96 justify="start" 97 iconSize="xsmall" 98 iconAnimation="flip" 99 open="true" 100 > 101 <umg-text 102 slot="header" 103 as="p" 104 variant="bodyXs" 105 alignment="left" 106 withoutMargin 107 > 108 Show ${t.merchandise?.umgBundlesDetails.length} 109 items 110 </umg-text> 111 <umg-box slot="content" padding="10, 0, 10, 0"> 112 ${t.merchandise?.umgBundlesDetails.map(t=>r.qy` 113 <div 114 part="subitem-container" 115 class="subitem-container sub-items" 116 > 117 <div 118 part="subitem-image" 119 class="subitem__image" 120 > 121 <umg-image 122 src="${(0,u.J)(t.product.featuredImage?.smallSrc)}" 123 width="100" 124 height="100" 125 > 126 </umg-image> 127 </div> 128 <div 129 part="subitem-content" 130 class="subitem__content" 131 > 132 <umg-text 133 class="subitem__title" 134 as="h4" 135 variant="bodySm" 136 withoutMargin 137 > 138 ${t.product.title} 139 </umg-text> 140 ${t.product.variants?.edges&&t.product.variants.edges.length>1?r.qy` 141 <umg-text 142 class="subitem__subtitle" 143 as="span" 144 variant="bodyXs" 145 withoutMargin 146 > 147 ${t.title} 148 </umg-text> 149 `:r.s6} 150 </div> 151 </div> 152 `)} 153 </umg-box> 154 </umg-accordion> 155 `}_cartItems(){if(Array.isArray(this.cart.lines)){const t={},e={};if(void 0!==this.cart.userErrors&&Array.isArray(this.cart.userErrors)&&this.cart.userErrors.length>
1550){this.cart.userErrors.forEach(i=>{JSON.parse(i.message).forEach(i=>{t["gid://shopify/Product/"+i.id]=i.error,e["gid://shopify/Product/"+i.id]=i.productLevelLimit})})}return r.qy` 156 ${this.cart.lines.map(i=>{const o=i.merchandise?.product.id,s=i.id;let a;s&&(a=this._clientValidationErrorResult[s]),!a&&o&&(a=t[o]),!a&&s&&this._cartErrors&&this._cartErrors[s]&&(a=this._cartErrors[s]),!a&&o&&this._cartErrors&&this._cartErrors[o]&&(a=this._cartErrors[o]),!a&&this._cartErrors&&this._cartErrors.general_api_error&&(a=this._cartErrors.general_api_error);const n=void 0!==a?1:0,l=i.merchandise?.product&&i.merchandise?.product.featuredImage?i.merchandise.product.featuredImage.smallSrc:void 0,d=0===this._maxQuantities[i.id],c=i.cost?.totalAmount?.amount?i.cost?.totalAmount?.amount:0,m=this.cart.cost.totalAmount?this.cart.cost.totalAmount?.currencyCode:"",h=i.merchandise?i.merchandise.id:"",p=o?e[o]??this._maxQuantities[h]??9999:this._maxQuantities[h]??9999,g=i.quantity;return r.qy` 157 <div part="item-container" class="item-container"> 158 <div class="item"> 159 <div part="item-image" class="item__image"> 160 <umg-image 161 src="${(0,u.J)(l)}" 162 width="100" 163 height="100" 164 ></umg-image> 165 </div> 166 <div part="item-content" class="item__content"> 167 <div class="item__meta"> 168 <umg-text 169 class="item__title" 170 as="h3" 171 variant="bodyMd" 172 fontWeight="bold" 173 withoutMargin 174 > 175 ${i.merchandise?.product.title} 176 </umg-text> 177 <div class="item__details"> 178 <div class="item__details-row"> 179 ${i.merchandise?.product.variants?.edges&&i.merchandise.product.variants.edges.length>1?r.qy` 180 <umg-text 181 class="item__subtitle" 182 as="span" 183 variant="bodySm" 184 withoutMargin 185 > 186 ${i.merchandise?.title} 187 </umg-text> 188 `:r.s6} 189 <umg-text 190 class="item__price" 191 as="span" 192 variant="bodySm" 193 fontWeight="medium" 194 withoutMargin 195 > 196 ${this.zeroPad(c,m)} 197 </umg-text> 198 </div> 199 ${M(this._getItemShippingInfo(i).then(t=>{if(!t)return r.s6;const e=t.split(":"),i=e[0]?.trim(),o=e[1]?.trim();return r.qy` 200 <div class="item__details-row"> 201 <umg-text 202 class="item__shipping-label" 203 as="span" 204 variant="bodySm" 205 fontWeight="700" 206 withoutMargin 207 > 208 ${i}: 209 </umg-text> 210 <umg-text 211 class="item__shipping-date" 212 as="span" 213 variant="bodySm" 214 withoutMargin 215 > 216 ${o?r.qy` ${o}`:r.s6} 217 </umg-text> 218 </div> 219 `}),r.s6)} 220 </div> 221 </div>
222 ${this._cartBundleItems(i)} 223 <div 224 part="item-update" 225 class="item-update" 226 > 227 <div class="quantity"> 228 <umg-number-field 229 id="${i.id}" 230 type="number" 231 name="line-item-quantity[]" 232 value="${(0,u.J)(g)}" 233 max=${p} 234 spinnerType="symbols" 235 hideLabel 236 ?disabled=${d} 237 data-error-state=${n} 238 > 239 </umg-number-field> 240 </div> 241 <umg-button-icon 242 @click=${()=>this._removeFromCart(i.id)} 243 data-shopify-remove-from-cart 244 part="remove-icon" 245 class="remove-icon" 246 icon="bin-x-solid" 247 size="small" 248 padding="0" 249 > 250 </umg-button-icon> 251 </div> 252 <div part="item-error"> 253 <small style="color:red;" 254 >${a||""}</small 255 > 256 </div> 257 </div> 258 </div> 259 </div> 260 `})} 261 `}return r.s6}_cartPrice(){if(this.cart.cost.totalAmount&&this.cart.cost.totalAmount.amount){const t=this.cart.cost.totalAmount.amount,e=this.cart.cost.totalAmount.currencyCode?this.cart.cost.totalAmount.currencyCode:"";return this.zeroPad(t,e)}return r.s6}cartDrawerClasses(){const t={};return"side"===this.drawerType&&(t["cart-drawer--side"]=!0),t}cartDrawerStyles(){return{"--size-cart-drawer-width":this.drawerWidth+"rem"}}render(){const t=this.cart.cost?.subtotalAmount?.amount?this.cart.cost?.subtotalAmount?.amount:0,e=this.cart.cost.subtotalAmount?.currencyCode?this.cart.cost.subtotalAmount?.currencyCode:"";return r.qy` 262 <div 263 part="cart" 264 class="cart${(0,d.H)(this.cartDrawerClasses())}" 265 style="${(0,c.W)(this.cartDrawerStyles())}" 266 > 267 <umg-disclosure 268 class="cart-drawer" 269 justify="end" 270 direction="${this._openDirection()}" 271 iconPosition="left" 272 iconAnimation="none" 273 overlay 274 > 275 <span 276 slot="cart-drawer-summary" 277 class="cart-drawer__summary" 278 > 279 <umg-text as="span" variant="bodyXs"> 280 ${this._cartPrice()} 281 </umg-text> 282 </span> 283 <umg-button 284 slot="icon" 285 class="cart-button" 286 buttonStyle="plain" 287 data-shopify-open-cart 288 > 289 <span 290 part="cart-button-amount" 291 class="cart-button__amount" 292 > 293 ${this.cart.totalQuantity} 294 </span> 295 <umg-icon 296 part="cart-button-icon" 297 class="cart-button__icon" 298 icon="bag-shopping-thin" 299 size="2xlarge" 300 > 301 </umg-icon> 302 </umg-button>
303 <div slot="content" class="cart-drawer__content"> 304 <div class="cart-drawer__content-inner"> 305 <div class="cart-message"> 306 ${this._cartMessage()} 307 </div> 308 <div class="cart-items">${this._cartItems()}</div> 309 <div class="cart-subtotal-container"> 310 <div class="cart-subtotal"> 311 <umg-text 312 variant="bodyMd" 313 fontWeight="semibold" 314 fontSize="bodyMd" 315 withoutMargin 316 > 317 Subtotal: 318 </umg-text> 319 320 <umg-text 321 variant="bodyMd" 322 fontWeight="semibold" 323 fontSize="bodyMd" 324 withoutMargin 325 > 326 ${this.zeroPad(t,e)} 327 </umg-text> 328 </div> 329 <umg-text 330 variant="bodySm" 331 fontWeight="regular" 332 fontSize="bodySm" 333 withoutMargin 334 > 335 Shipping will be calculated at checkout 336 </umg-text> 337 </div> 338 <div part="cart-buttons" class="cart-buttons"> 339 <umg-button-group stack> 340 <umg-button 341 part="primary-button" 342 class="primary-button" 343 size="large" 344 fullWidth 345 borderRadius="full" 346 @click=${this._checkoutAction} 347 ?disabled=${!this.cart.lines.length} 348 > 349 ${this.labels.checkout} 350 </umg-button> 351 <umg-button 352 part="secondary-button" 353 class="secondary-button" 354 @click=${()=>this._closeCart()} 355 fullWidth 356 buttonStyle="outline" 357 > 358 ${this.labels.continue} 359 </umg-button> 360 </umg-button-group> 361 </div> 362 </div> 363 </div> 364 </umg-disclosure> 365 </div> 366 <div id="cart-overlay" class="cart-overlay hidden" @click=${()=>this._closeCart()}></div> 367 `}_findBundleLineItemIdByComponentProductId(t,e){if(!t||!e||0===e.length)return null;for(const i of e){const e=i.merchandise?.umgBundlesDetails;if(e&&Array.isArray(e)&&e.length>0){if(e.some(e=>e?.product?.id===t))return i.id}}return null}};E.styles=[S,r.AH` 368 /* Cart */ 369 .cart { 370 max-width: fit-content; 371 } 372 .cart-drawer { 373 position: initial; 374 } 375 376 .cart-drawer__content { 377 height: max-content; 378 } 379 .cart-drawer__content-inner { 380 display: flex; 381 flex-direction: column; 382 gap: var(--umg-space-24); 383 } 384 385 .cart-drawer ::part(disclosure-content), 386 .cart-drawer--side ::part(disclosure-content) { 387 height: 100%; 388 padding: var(--umg-space-24) var(--umg-space-24); 389 390 --umg-space-summary-padding: 0 1rem; 391 --umg-color-summary-border: transparent; 392 --umg-color-details-text: var( 393 --umg-color-cart-text, 394 rgb(0, 0, 0) 395 ); 396 --umg-color-details-background: var( 397 --umg-color-cart-background, 398 rgb(255, 255, 255) 399 ); 400 --umg-color-icon-text: var(--umg-color-cart-text, rgb(0, 0, 0)); 401 --umg-color-icon-background: var( 402 --umg-color-cart-background, 403 rgb(255, 255, 255) 404 ); 405 --umg-border-input-corner-radius: 0.25rem; 406 } 407 408 @media screen and (max-width: 48rem) { 409 .cart-drawer--side ::part(disclosure-content) { 410 padding: var(--umg-space-24) var(--umg-space-40); 411 } 412 } 413 414 /* Cart drawer display options */ 415 /* Drop down */ 416 .cart-drawer ::part(disclosure-drawer) { 417 position: absolute; 418 top: var(--umg-size-header-inner-height); 419 left: unset; 420 right: unset; 421 z-index: 510; /* over overlay z-index */ 422 min-width: max-content; 423 } 424 425 /* Side panel */ 426 .cart-drawer--side ::part(disclosure-drawer) { 427 position: fixed; 428 top: var(--umg-size-header-inner-height); 429 right: 0; 430 left: unset; 431 bottom: 0; 432 min-width: var(--size-cart-drawer-width, 20rem); 433 z-index: 510; /* over overlay z-index */
434 margin-top: 1px; 435 } 436 @media screen and (max-width: 48rem) { 437 .cart-drawer--side ::part(disclosure-drawer) { 438 min-width: 100vw; 439 } 440 } 441 442 /* Cart subtotal */ 443 .cart-subtotal { 444 width: 100%; 445 display: flex; 446 justify-content: space-between; 447 align-items: center; 448 } 449 450 .cart-subtotal-container { 451 width: 100%; 452 display: flex; 453 flex-direction: column; 454 align-items: start; 455 gap: var(--umg-space-12); 456 } 457 458 /* Cart button */ 459 .cart-button { 460 position: relative; 461 --umg-color-button-background: var(--umg-color-base-text); 462 } 463 464 .cart-button__amount { 465 font-size: var(--umg-font-body-size-xs); 466 position: absolute; 467 left: 0; 468 right: 0; 469 top: 52%; 470 width: 100%; 471 line-height: 0; 472 } 473 474 .primary-button, 475 .secondary-button { 476 --umg-border-button-corner-radius: 0.25rem; 477 } 478 479 /* Cart message */ 480 .cart-message { 481 display: flex; 482 align-items: center; 483 gap: var(--umg-space-8); 484 } 485 .cart-message .spinner { 486 opacity: 0.5; 487 } 488 489 /* Cart items */ 490 .item-container:not(:last-child) { 491 margin-bottom: var(--umg-space-24); 492 padding-bottom: var(--umg-space-24); 493 border-bottom: 0.0625rem solid 494 rgb( 495 from var(--umg-color-base-border, rgb(0, 0, 0, 0.5)) r g 496 b 497 ); 498 } 499 .item-container:last-child { 500 margin-bottom: 0; 501 } 502 .item-container > *:not(:last-child) { 503 margin-bottom: var(--umg-space-12); 504 } 505 .item-container .sub-items > *:not(:last-child) { 506 margin-bottom: var(--umg-space-8); 507 } 508 .item, 509 .subitem-container { 510 display: flex; 511 gap: var(--umg-space-12); 512 align-items: start; 513 } 514 .subitem-container { 515 align-items: center; 516 } 517 .item__image { 518 width: 25%; 519 } 520 .subitem__image { 521 width: 20%; 522 } 523 .item__image > * { 524 border: 0.0625rem solid rgb(255, 255, 255); 525 height: auto; 526 width: 100%; 527 } 528 .item__content { 529 display: flex; 530 justify-content: space-between; 531 flex-direction: column; 532 gap: var(--umg-space-8); 533 padding-bottom: var(--umg-space-8); 534 } 535 .item__content > * { 536 display: block; 537 } 538 .item__content { 539 width: 65%; 540 } 541 .item__meta { 542 display: flex; 543 flex-direction: column; 544 } 545 .item__details { 546 display: flex; 547 flex-direction: column; 548 gap: var(--umg-space-4); 549 } 550 .item__details-row { 551 display: flex; 552 justify-content: space-between; 553 align-items: center; 554 } 555 556 .item__options { 557 margin-bottom: var(--umg-space-8); 558 } 559 .item__options > *:not(:last-child)::after { 560 content: '|'; 561 opacity: 0.5; 562 padding: 0 0.125rem; 563 } 564 .item-update { 565 display: flex; 566 justify-content: space-between; 567 gap: var(--umg-space-12); 568 } 569 570 /* Cart sub items */ 571 .sub-items { 572 flex: 1 0 100%; 573 position: relative; 574 } 575 .subitems-accordion { 576 --umg-color-header-border: transparent; 577 --umg-color-drawer-border: transparent; 578 --umg-space-header-padding: 0rem; 579 --umg-space-drawer-padding: 0rem; 580 --umg-space-padding: 1rem 0.5rem; 581 } 582 583 /* Cart overlay */ 584 .cart-overlay { 585 position: fixed; 586 inset: 0; 587 top: var(--umg-size-header-inner-height); 588 z-index: 0; 589 background-color: var( 590 --umg-color-cart-overlay-background, 591 rgb(0, 0, 0, 0.7) 592 ); 593 } 594 @supports (color: rgb(from white r g b)) { 595 .cart-overlay { 596 background-color: rgb( 597 from 598 var( 599 --umg-color-cart-overlay-background, 600 var(--umg-color-cart-text, rgb(0, 0, 0, 0.7)) 601 ) 602 r g b / 0.7 603 ); 604 } 605 } 606 607 .cart-overlay.hidden { 608 display: none; 609 } 610 `],o([(0,a.M)({type:Object})],E.prototype,"labels",void 0),o([(0,a.M)()],E.prototype,"drawerType",void 0),o([(0,a.M)()],E.prototype,"drawerWidth",void 0),o([(0,a.M)()],E.prototype,"storefrontApiKey",void 0),o([(0,a.M)()],E.prototype,"storefrontDomain",void 0),o([(0,a.M)()],E.prototype,"checkoutType",void 0),o([(0,a.M)()],E.prototype,"open",void 0),o([(0,a.M)()],E.prototype,"checkoutUtmSource",void 0),o([(0,a.M)()],E.prototype,"checkoutUtmCampaign",void 0),o([(0,a.M)()],E.prototype,"checkoutUtmMedium",void 0),o([(0,l.P)("umg-disclosure")],E.prototype,"_disclosure",void 0),o([(0,l.P)("#cart-overlay")],E.prototype,"_cartOverlay",void 0),o([(0,n.w)()],E.prototype,"_region",void 0),o([(0,n.w)()],E.prototype,"_init",void 0),o([(0,n.w)()],E.prototype,"_currentMessage",void 0),o([(0,n.w)()],E.prototype,"_updatedCartMessage",void 0),o([(0,n.w)()],E.prototype,"_maxQuantities",void 0),o([(0,n.w)()],E.prototype,"_cartErrors",void 0),o([(0,n.w)()],E.prototype,"_clientValidationErrorResult",void 0),o([(0,n.w)()],E.prototype,"cart",void 0),E=o([(0,s.E)(`${H}-cart-drawer`)],E)},1088(t,e,i){i.d(e,{E:()=>o});class o{constructor(t){this.listeners=new Map,this.target=t}addEventListener(t,e,i){const o=this.listeners.get(t)||new Set;return this.listeners.set(t,o),o.add(e),this.target.addEventListener(t,e,i),()=>{this.removeEventListener(t,e,i)}}removeEventListener(t,e,i){const o=this.listeners.get(t);o&&(o.delete(e),0===o.size&&this.listeners.delete(t)),this.target.removeEventListener(t,e,i)}dispatchCustomEvent(t,e,i){this.target.dispatchEvent(new CustomEvent(t,{detail:e,...i}))}}},5438(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(8698),n=i(7621);const{prefix:l}=a.W;let d=class extends r.WF{constructor(){super(),this._clickHandler=t=>{if("summary-click"===t.type){const e=[...this._accordions],i=t.detail.target;e&&e.length>0&&e.filter(t=>t!==i).map(t=>{t.closeAccordion()})}},this.addEventListener("summary-click",this._clickHandler)}render(){return r.qy` 611 <div 612 part="accordion-group" 613 class="accordion-group" 614 @click="${this._clickHandler}" 615 > 616 <slot name="accordion"></slot> 617 </div> 618 `}};(0,o.C)([(0,n.KN)({slot:"accordion"})],d.prototype,"_accordions",void 0),d=(0,o.C)([(0,s.E)(`${l}-accordion-group`)],d)},7802(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9924),n=i(8698),l=i(2609),d=i(7621),c=i(3720);i(4630);const{prefix:u}=n.W;let m=class extends r.WF{constructor(){super(...arguments),this.icon="chevron-down",this.iconSize="xsmall",this.iconAnimation="flip",this.iconPosition="right",this.open=!1,this._open=!1,this.justify="space-between",this.closeAccordion=()=>{this._open=!1,this._accordion.removeAttribute("open"),setTimeout(()=>
618{this._accordionDetails.classList.remove("opening")})},this.openAccordion=()=>{this._open=!0,this._accordion.setAttribute("open",""),setTimeout(()=>{this._accordionDetails.classList.add("opening")})},this._handleAccordionBlock=t=>{"accordion"===t.type&&("closeAccordion"===t.detail.eventName&&this.closeAccordion(),"openAccordion"===t.detail.eventName&&this.openAccordion())}}connectedCallback(){super.connectedCallback(),window.addEventListener("accordion",this._handleAccordionBlock)}disconnectedCallback(){window.removeEventListener("accordion",this._handleAccordionBlock),super.disconnectedCallback()}updated(t){t.has("open")&&(this.open?(this._open=!0,this.openAccordion()):this.open||(this._open=!1,this.closeAccordion()))}_handleSummaryClick(){const t=this._open?"closeAccordion":"openAccordion";this._open?(setTimeout(()=>{this._accordionDetails.classList.remove("opening")}),window.removeEventListener("accordion",this._handleAccordionBlock)):(setTimeout(()=>{this._accordionDetails.classList.add("opening")}),window.addEventListener("accordion",this._handleAccordionBlock)),this._open=!this._open,this.dispatchEvent(new CustomEvent("summary-click",{detail:{eventName:t,target:this},bubbles:!0,composed:!0}))}summaryClasses(){const t={};return t["accordion__summary--icon-"+this.iconAnimation]=!0,t["accordion__summary--icon-position-"+this.iconPosition]=!0,t["accordion__summary--justify-"+this.justify]=!0,t}render(){return r.qy` 619 <details 620 part="accordion" 621 class="accordion" 622 > 623 <summary 624 part="accordion-summary" 625 class="accordion__summary${(0,c.H)(this.summaryClasses())}" 626 aria-label="Accordion block summary" 627 role="button" 628 aria-expanded=${this._open} 629 @click=${this._handleSummaryClick} 630 > 631 <slot name="header"></slot> 632 <umg-icon 633 part="accordion-icon" 634 exportparts="icon,icon-svg" 635 class="accordion__icon" 636 icon="${this.icon}" 637 size="${this.iconSize}" 638 > 639 </umg-icon> 640 </summary> 641 <div 642 part="accordion-details" 643 class="accordion__details" 644 aria-hidden=${!this._open} 645 > 646 <slot name="content"></slot> 647 </div> 648 </details> 649 `}};m.styles=(0,l.Z)([a.S,r.AH` 650 :host{ 651 display: block; 652 } 653 ::slotted(*[slot=header]) { 654 flex: 0 1 auto; 655 } 656 657 .accordion { 658 font-family: var(--umg-font-body-family); 659 overflow: hidden; 660 border-radius: var(--umg-border-header-corner-radius, var(--umg-border-base-corner-radius, 0)) var(--umg-border-header-corner-radius, var(--umg-border-base-corner-radius, 0)) 0 0; 661 } 662 663 .accordion__icon { 664 transition: all 0.2s; 665 } 666 667 .accordion[open] .accordion__summary--icon-flip .accordion__icon { 668 transition: all 0.2s; 669 transform: rotate(180deg); 670 } 671 672 /** Summary */ 673 details summary::-webkit-details-marker { 674 display:none; 675 } 676 677 .accordion__summary { 678 cursor: pointer; 679 list-style: none; 680 681 display: flex; 682 align-items: center; 683 justify-content: space-between; 684 gap: var(--umg-space-8, 0.5rem); 685 686 position: relative; 687 z-index: 2; 688 689 height: 2.5rem; 690 width: 100%; 691 padding: var(--umg-space-header-padding, 2rem 0rem); 692 693 color: var(--umg-color-accordion-header-text, var(--umg-color-base-text, rgb(0,0,0))); 694 background-color: var(--umg-color-accordion-header-background, var(--umg-color-base-background, rgb(255, 255, 255))); 695 696 border-bottom: 0.0625rem solid var(--umg-color-accordion-header-border, var(--umg-color-base-border, rgb(180,180,180,1))); 697 border-radius: var(--umg-border-accordion-header-corner-radius, var(--umg-border-base-corner-radius, 0)) var(--umg-border-accordion-header-corner-radius, var(--umg-border-base-corner-radius, 0)) 0 0; 698 } 699 700 @supports (color: rgb(from white r g b)) { 701 .accordion__summary { 702 border-color: rgb(from var(--umg-color-accordion-header-border, var(--umg-color-base-border, rgb(180,180,180))) r g b / alpha); 703 color: var(--umg-color-accordion-header-text, var(--umg-color-base-text, rgb(0,0,0))); 704 background-color: var(--umg-color-accordion-header-background, var(--umg-color-base-background, rgb(255, 255, 255))); 705 } 706 } 707 708 /** Flip icon if .accordion__summary--icon-flip */ 709 .accordion__summary > * { 710 transition: transform 0.2s ease; 711 --umg-color-icon-text: var(--umg-color-accordion-header-text, var(--umg-color-base-text, rgb(0,0,0))); 712 } 713 .accordion[open] .accordion__summary--icon-flip > * { 714 transform: rotate(180deg); 715 } 716 717 /** Summary justify content */ 718 .accordion__summary--justify-center { 719 justify-content: center; 720 } 721 .accordion__summary--justify-end { 722 justify-content: end; 723 } 724 .accordion__summary--justify-start { 725 justify-content: start; 726 } 727 728 /** Summary icon position */ 729 .accordion__summary--icon-position-left { 730 flex-direction: row-reverse; 731 } 732 733 /** Details */ 734 .accordion__details { 735 visibility: hidden; 736 opacity: 0; 737 overflow: hidden; 738 overflow-y: auto; 739 width: 100%; 740 741 transform: translateY(-100%); 742 position: relative; 743 z-index: 1; 744 745 border-radius: 0 0 var(--umg-border-drawer-corner-radius, var(--umg-border-base-corner-radius, 0)) var(--umg-border-drawer-corner-radius, var(--umg-border-base-corner-radius, 0)); 746 border-bottom: 0.0625rem solid var(--umg-color-drawer-border, var(--umg-color-base-border, rgb(180,180,180,1))); 747 748 padding: var(--umg-space-drawer-padding, 2rem 0rem); 749 750 color: var(--umg-color-drawer-text, var(--umg-color-base-text, rgb(0,0,0))); 751 background-color: var(--umg-color-drawer-background, var(--umg-color-base-background, rgb(255, 255, 255))); 752 753 754 --umg-color-base-text: var(--umg-color-drawer-text); 755 --umg-color-base-background: var(--umg-color-drawer-background); 756 } 757 758 @supports (color: rgb(from white r g b)) { 759 .accordion__details { 760 color: rgb(from var(--umg-color-drawer-text, var(--umg-color-base-text, rgb(0,0,0))) r g b); 761 background-color: rgb(from var(--umg-color-drawer-background, var(--umg-color-base-background, rgb(255, 255, 255))) r g b); 762 border-color: rgb(from var(--umg-color-drawer-border, var(--umg-color-base-border, rgb(0,0,0,0))) r g b / alpha); 763 } 764 } 765 766 /* Open state */ 767 .accordion[open] .accordion__details.opening { 768 visibility: visible; 769 transform: translateY(0); 770 opacity: 1; 771 transition: transform 0.2s ease, opacity 0.2s ease; 772 } 773 774 /* Scroll */ 775 .accordion__details::-webkit-scrollbar {
776 width: 0.125rem; 777 } 778 .accordion__details::-webkit-scrollbar-track { 779 background: var(--umg-color-base-text, rgb(0,0,0,0.05)); 780 border-radius: var(--umg-border-radius-30); 781 } 782 .accordion__details::-webkit-scrollbar-thumb { 783 background: var(--umg-color-base-text, rgb(0,0,0,0.1)); 784 border-radius: var(--umg-border-radius-30); 785 } 786 @supports (color: rgb(from white r g b)) { 787 .accordion__details::-webkit-scrollbar-track { 788 background: rgb(from var(--umg-color-base-text, rgb(0,0,0,0.05)) r g b / 0.05); 789 } 790 .accordion__details::-webkit-scrollbar-thumb { 791 background: rgb(from var(--umg-color-base-text, rgb(0,0,0,0.1)) r g b / 0.1); 792 } 793 } 794 `]),(0,o.C)([(0,d.MZ)()],m.prototype,"icon",void 0),(0,o.C)([(0,d.MZ)()],m.prototype,"iconSize",void 0),(0,o.C)([(0,d.MZ)()],m.prototype,"iconAnimation",void 0),(0,o.C)([(0,d.MZ)()],m.prototype,"iconPosition",void 0),(0,o.C)([(0,d.MZ)({type:Boolean})],m.prototype,"open",void 0),(0,o.C)([(0,d.wk)()],m.prototype,"_open",void 0),(0,o.C)([(0,d.MZ)()],m.prototype,"justify",void 0),(0,o.C)([(0,d.P)("summary")],m.prototype,"_summary",void 0),(0,o.C)([(0,d.P)("details")],m.prototype,"_accordion",void 0),(0,o.C)([(0,d.P)(".accordion__details")],m.prototype,"_accordionDetails",void 0),m=(0,o.C)([(0,s.E)(`${u}-accordion`)],m)},3212(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(3720),l=i(31),d=i(9924),c=i(4379),u=i(8698),m=i(2609);const{prefix:h}=u.W;let p=class extends r.WF{constructor(){super(...arguments),this.imgAlt="",this.width=100,this.height=100,this.mobileHeight=this.width,this.mobileWidth=this.height,this.load="lazy"}dispatchEvents(){const t=this.width/this.height,e=this.mobileWidth/this.mobileHeight,i=new CustomEvent("media-details",{detail:{mediaAspectRatio:t,mobileMediaAspectRatio:e},bubbles:!0,composed:!0});this.dispatchEvent(i)}imageClasses(){const t={};return t["without-mobile"]=!this.mobileSrc,t}mobileImage(){return this.mobileSrc?r.qy` 795 <img 796 part="banner-image" 797 class="image image--mobile" 798 width="${this.mobileWidth}" 799 height="${this.mobileHeight}" 800 src="${(0,l.J)(this.mobileSrc)}" 801 srcset="${(0,l.J)(this.mobileSrcSet)}" 802 sizes="${(0,l.J)(this.mobileSizes)}" 803 alt="${this.imgAlt}" 804 loading="${this.load}" 805 > 806 `:r.s6}desktopImage(){return this.src?r.qy` 807 <img 808 part="banner-image" 809 class="image image--desktop${(0,n.H)(this.imageClasses())}" 810 width="${this.width}" 811 height="${this.height}" 812 src="${(0,l.J)(this.src)}" 813 srcset="${(0,l.J)(this.imgSrcSet)}" 814 sizes="${(0,l.J)(this.sizes)}" 815 alt="${this.imgAlt}" 816 loading="${this.load}" 817 > 818 `:r.qy` 819 <div class="placeholder image image--desktop${(0,n.H)(this.imageClasses())}" style="aspect-ratio: ${this.width/this.height}"> 820 <div class="placeholder-inner"> 821 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512" fill="currentcolor"> 822 <path d="M70.5 138.1C31 172.2 16 219.1 16 272c0 52 18.4 91.6 46.9 118.3C91.6 417.2 131.5 432 176 432h8.4c18.2 0 34.8-10.3 42.9-26.5l23.2-46.3C257.6 345 272.1 336 288 336s30.4 9 37.5 23.2l23.2 46.3c8.1 16.3 24.8 26.5 42.9 26.5H400c44.5 0 84.4-14.8 113.1-41.7C541.6 363.6 560 324 560 272c0-52.9-15-99.8-54.5-133.9C465.6 103.6 398.1 80 288 80s-177.6 23.6-217.5 58.1zM0 272C0 160 64 64 288 64s288 96 288 208s-80 176-176 176h-8.4c-24.2 0-46.4-13.7-57.2-35.4l-23.2-46.3c-4.4-8.8-13.3-14.3-23.2-14.3s-18.8 5.5-23.2 14.3l-23.2 46.3c-10.8 21.7-33 35.4-57.2 35.4H176C80 448 0 384 0 272zm160 32a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm0-112a64 64 0 1 1 0 128 64 64 0 1 1 0-128zm304 64a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm-112 0a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/> 823 </svg> 824 </div> 825 </div> 826 `}getImage(){return r.qy` 827 ${this.desktopImage()} 828 ${this.mobileImage()} 829 `}render(){return this.dispatchEvents(),r.qy` 830 ${this.getImage()} 831 `}};p.styles=(0,m.Z)([d.S,c.o,r.AH` 832 .image { 833 object-fit: cover; 834 height: 100%; 835 width: 100%; 836 max-width: 100%; 837 } 838 839 /* Art directed images */ 840 .image--desktop { 841 display: block; 842 } 843 .image--mobile { 844 display: none; 845 } 846 847 @media only screen and (max-width: 48rem) { 848 .image--desktop { 849 display: none; 850 } 851 .image--mobile { 852 display: block; 853 } 854 .without-mobile.image--desktop { 855 display: block; 856 } 857 } 858 `]),(0,o.C)([(0,a.M)()],p.prototype,"imgAlt",void 0),(0,o.C)([(0,a.M)()],p.prototype,"src",void 0),(0,o.C)([(0,a.M)({type:String})],p.prototype,"imgSrcSet",void 0),(0,o.C)([(0,a.M)({type:String})],p.prototype,"sizes",void 0),(0,o.C)([(0,a.M)({type:Number})],p.prototype,"width",void 0),(0,o.C)([(0,a.M)({type:Number})],p.prototype,"height",void 0),(0,o.C)([(0,a.M)()],p.prototype,"mobileSrc",void 0),(0,o.C)([(0,a.M)({type:String})],p.prototype,"mobileSrcSet",void 0),(0,o.C)([(0,a.M)({type:String})],p.prototype,"mobileSizes",void 0),(0,o.C)([(0,a.M)({type:Number})],p.prototype,"mobileHeight",void 0),(0,o.C)([(0,a.M)({type:Number})],p.prototype,"mobileWidth",void 0),(0,o.C)([(0,a.M)()],p.prototype,"load",void 0),p=(0,o.C)([(0,s.E)(`${h}-banner-image`)],p)},4316(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(7509),l=i(31),d=i(3720),c=i(1145),u=i(9924),m=i(8698),h=i(2609);i(3919),i(1682);const{prefix:p}=m.W;let g=class extends r.WF{constructor(){super(),this.height="medium",this.mobileAdapt=!1,this.contentPosition="over",this.contentFullWidth=!1,this.contentAlign="center",this.contentJustify="center",this.contentAdaptivePadding=!1,this.mobilePadding="16",this._headerHeight="",this._withoutContent=!0,this.addEventListener("media-details",this.eventNotifications)}connectedCallback(){super.connectedCallback(),window.addEventListener("header-details",this.eventNotifications.bind(this))}disconnectedCallback(){window.removeEventListener("header-details",this.eventNotifications.bind(this)),super.disconnectedCallback()}async eventNotifications(t){"media-details"===t.type&&(t.detail.mediaAspectRatio&&(this._mediaAspectRatio=t.detail.mediaAspectRatio.toString()),t.detail.mobileMediaAspectRatio?this._mobileMediaAspectRatio=t.detail.mobileMediaAspectRatio.toString():t.detail.mediaAspectRatio&&(this._mediaAspectRatio=t.detail.mediaAspectRatio.toString())),"header-details"===t.type&&(this._headerHeight=t.detail.height)}handleSlotchange(t){t.target&&"content"===t.target.getAttribute("name")&&(this._withoutContent=!1)}bannerClasses(){const t={};return t["media-height--"+this.height]=!0,t["media-mobile-adapt"]=this.mobileAdapt,"under"!==this.contentPosition&&"above"!==this.contentPosition&&"side"!==this.contentPosition||(t["content--inline"]=!0,t["content-position--"+this.contentPosition]=!0),t}bannerStyles(){let t={};return this._mediaAspectRatio&&(t={...t,"--umg-aspect-ratio":this._mediaAspectRatio}),this._mobileMediaAspectRatio?t={...t,"--umg-mobile-aspect-ratio":this._mobileMediaAspectRatio}:this._mediaAspectRatio&&(t={...t,"--umg-mobile-aspect-ratio":this._mediaAspectRatio}),this._headerHeight&&"stretch"===this.height&&(t={...t,"--umg-size-header-outer-height":this._headerHeight+"px"}),t}bannercontentClasses(){const t={};return t["content-align--"+this.contentAlign]=!0,t["content-justify--"+this.contentJustify]=!0,t["content--without-content"]=this._withoutContent,t}bannercontentStyles(){let t={};return t={...t,"--umg-size-width":this.contentFullWidth?"100%":"auto"},t}render(){return r.qy` 859 <div 860 part="banner" 861 class="banner${(0,d.H)(this.bannerClasses())}" 862 style="${(0,c.W)(this.bannerStyles())}" 863 > 864 <div 865 part="banner-container" 866 class="banner__container" 867 > 868 <div 869 part="banner-media" 870 class="banner__media" 871 > 872 <slot name="media"></slot> 873 </div> 874 <div 875 part="banner-content" 876 class="banner__content${(0,d.H)(this.bannercontentClasses())}" 877 style="${(0,c.W)(this.bannercontentStyles())}" 878 > 879 ${"over"===this.contentPosition||"side"===this.contentPosition?r.qy` 880 <umg-box 881 part="banner-content-box" 882 exportparts="box,box-content" 883 class="banner__content-inner" 884 padding=${"over"===this.contentPosition?(0,l.J)(this.contentOuterPadding):"0"} 885 mobilePadding='0' 886 > 887 <umg-box 888 part="banner-caption" 889 exportparts="box:box--caption,box-content:box-content--caption" 890 class="banner__content-caption" 891 ?adaptivePadding=${this.contentAdaptivePadding} 892 padding=${(0,l.J)(this.contentInnerPadding)} 893 mobilePadding=${this.mobilePadding} 894 width="${this.contentFullWidth?"fill":"fit-content"}" 895 > 896 <umg-vertical-stack 897 exportparts="vertical-stack" 898 class="caption-inner" 899 align=${this.contentJustify} 900 mobileAlign=${this.mobileContentJustify?this.mobileContentJustify:this.contentJustify} 901 spacing="${(0,l.J)(this.contentSpacing)}" 902 > 903 <slot name="content" @slotchange=${this.handleSlotchange}></slot> 904 </umg-vertical-stack> 905 </umg-box> 906 </umg-box> 907 `:r.qy` 908 <umg-box 909 part="banner-caption" 910 exportparts="box,box-content" 911 class="banner__content-caption" 912 ?adaptivePadding=${this.contentAdaptivePadding} 913 padding=${(0,l.J)(this.contentInnerPadding)} 914 mobilePadding=${this.mobilePadding} 915 width="${this.contentFullWidth?"fill":"fit-content"}" 916 > 917 <umg-vertical-stack 918 part="banner-caption-inner" 919 exportparts="vertical-stack" 920 class="caption-inner" 921 align=${this.contentJustify} 922 mobileAlign=${this.mobileContentJustify?this.mobileContentJustify:this.contentJustify} 923 spacing="${(0,l.J)(this.contentSpacing)}" 924 > 925 <slot name="content" @slotchange=${this.handleSlotchange}></slot> 926 </umg-vertical-stack> 927 </umg-box> 928 `} 929 </div> 930 </div> 931 </div> 932 `}};g.styles=(0,h.Z)([u.S,r.AH` 933 :host { 934 position: relative; 935 display: block; 936 width: 100%; 937 overflow: hidden; 938 } 939 940 /* Media overlay */ 941 .banner__container { 942 position: relative; 943 } 944 945 @media only screen and (min-width: 48.06rem) { 946 .banner:not(.content--inline) .banner__container::after { 947 content: ''; 948 display: block; 949 position: absolute; 950 top: 0; 951 left: 0; 952 height: 100%; 953 width: 100%; 954 z-index: 1; 955 background-color: var(--umg-color-overlay-background, 255,255,255,0); 956 } 957 @supports (color: rgb(from white r g b)) { 958 .banner:not(.content--inline) .banner__container::after { 959 background-color: rgb(from var(--umg-color-overlay-background, 255,255,255,0) r g b / alpha); 960 } 961 } 962 } 963 964 /* Caption color */ 965 .banner__content-caption { 966 --umg-color-base-text: var(--umg-color-caption-text); 967 --umg-color-base-background: rgb(from var(--umg-color-caption-background) r g b / calc(alpha * var(--umg-opacity-caption-background, 1))); 968 } 969 @media only screen and (max-width: 48rem) { 970 .banner__content-caption { 971 --umg-color-base-background: rgb(from var(--umg-color-caption-background) r g b / 1); 972 } 973 } 974 975 /* Banner media height */ 976 @media only screen and (max-width: 30rem) { 977 .media-height--xsmall .banner__media { 978 height: 10em; 979 } 980 .media-height--small .banner__media { 981 height: 15rem; 982 } 983 .media-height--medium .banner__media { 984 height: 20rem; 985 } 986 .media-height--large .banner__media { 987 height: 25rem; 988 } 989 .media-height--xlarge .banner__media { 990 height: 27rem; 991 } 992 .media-height--2xlarge .banner__media { 993 height: 30rem; 994 } 995 } 996 @media only screen and (min-width: 30.06rem) { 997 .media-height--xsmall .banner__media { 998 height: 15rem; 999 } 1000 .media-height--small .banner__media { 1001 height: 20rem; 1002 } 1003 .media-height--medium .banner__media { 1004 height: 25rem; 1005 } 1006 .media-height--large .banner__media { 1007 height: 30rem; 1008 } 1009 .media-height--xlarge .banner__media { 1010 height: 35rem; 1011 } 1012 .media-height--2xlarge .banner__media { 1013 height: 40rem; 1014 } 1015 } 1016 1017 .media-height--stretch .banner__media { 1018 height: calc(100vh - var(--umg-size-header-outer-height, 0px)); 1019 } 1020 1021 /* Adapt banner to media height */ 1022 .banner.media-height--adapt .banner__media { 1023 aspect-ratio: var(--umg-aspect-ratio); 1024 } 1025 @media only screen and (max-width: 48rem) { 1026 .banner.media-height--adapt .banner__media, 1027 .banner.media-mobile-adapt .banner__media { 1028 height: auto; 1029 aspect-ratio: var(-
1029-umg-mobile-aspect-ratio); 1030 } 1031 } 1032 1033 /* Without content? */ 1034 .content--without-content { 1035 display: none; 1036 } 1037 1038 /* Content positions */ 1039 1040 @media only screen and (max-width: 48.06rem) { 1041 /* All positions - mobile content box is full width */ 1042 .banner__content-caption { 1043 width: 100%; 1044 } 1045 } 1046 1047 /* Desktop content over media */ 1048 @media only screen and (min-width: 48.06rem) { 1049 .banner:not(.content--inline) .banner__content { 1050 position: absolute; 1051 top: 0; 1052 left: 0; 1053 height: 100%; 1054 width: 100%; 1055 z-index: 10; 1056 } 1057 } 1058 1059 /* Desktop content to side of media */ 1060 .content-position--side .banner__content { 1061 position: relative; 1062 } 1063 .content-position--side .banner__content-inner { 1064 position: relative; 1065 z-index: 10; 1066 } 1067 .content-position--side .banner__content-caption::part(box-content) { 1068 background-color: transparent; 1069 } 1070 .content-position--side .banner__content:after { 1071 content: ''; 1072 position: absolute; 1073 inset: 0; 1074 z-index: 0; 1075 background-color: var(--umg-color-caption-background); 1076 } 1077 @supports (color: rgb(from white r g b)) { 1078 .content-position--side .banner__content:after { 1079 background-color: rgb(from var(--umg-color-caption-background) r g b / alpha); 1080 } 1081 } 1082 .content-position--side .banner__container { 1083 background-color: var(--umg-color-base-background); 1084 } 1085 @supports (color: rgb(from white r g b)) { 1086 .content-position--side .banner__container { 1087 background-color: rgb(from var(--umg-color-base-background) r g b / alpha); 1088 } 1089 } 1090 1091 @media only screen and (min-width: 48.06rem) { 1092 .content--inline.content-position--side .banner__container { 1093 flex-direction: row-reverse 1094 } 1095 .content--inline.content-position--side .banner__media { 1096 flex: 1 0 auto; 1097 width: 70%; 1098 } 1099 .content--inline.content-position--side .banner__content ::slotted(*) { 1100 height: 100%; 1101 } 1102 } 1103 1104 /* Inline with media, side/above/under*/ 1105 .content--inline .banner__container { 1106 display: flex; 1107 flex-direction: column; 1108 } 1109 1110 .content-position--above .banner__media { 1111 order: 2; 1112 } 1113 .content-position--above .banner__content { 1114 order: 1; 1115 } 1116 .content-position--under .banner__media { 1117 order: 1; 1118 } 1119 .content-position--under .banner__content { 1120 order: 2; 1121 } 1122 1123 /* Content over media box alignments */ 1124 .banner__content-inner { 1125 height: 100%; 1126 } 1127 .banner__content-inner::part(box-content) { 1128 background-color: transparent; 1129 display: flex; 1130 } 1131 .banner__content-caption::part(box-content) { 1132 height: auto; 1133 } 1134 1135 .content-justify--start .banner__content-inner::part(box-content) { 1136 justify-content: start; 1137 } 1138 .content-justify--center .banner__content-inner::part(box-content) { 1139 justify-content: center; 1140 } 1141 .content-justify--end .banner__content-inner::part(box-content) { 1142 justify-content: end; 1143 } 1144 .content-align--start .banner__content-inner::part(box-content) { 1145 align-items: start; 1146 } 1147 .content-align--center .banner__content-inner::part(box-content) { 1148 align-items: center; 1149 } 1150 .content-align--end .banner__content-inner::part(box-content) { 1151 align-items: end; 1152 } 1153 `]),(0,o.C)([(0,a.M)()],g.prototype,"height",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"mobileAdapt",void 0),(0,o.C)([(0,a.M)()],g.prototype,"contentPosition",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"contentFullWidth",void 0),(0,o.C)([(0,a.M)()],g.prototype,"contentAlign",void 0),(0,o.C)([(0,a.M)()],g.prototype,"contentJustify",void 0),(0,o.C)([(0,a.M)()],g.prototype,"mobileContentJustify",void 0),(0,o.C)([(0,a.M)()],g.prototype,"contentSpacing",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"contentAdaptivePadding",void 0),(0,o.C)([(0,a.M)()],g.prototype,"contentInnerPadding",void 0),(0,o.C)([(0,a.M)()],g.prototype,"contentOuterPadding",void 0),(0,o.C)([(0,a.M)()],g.prototype,"mobilePadding",void 0),(0,o.C)([(0,n.w)()],g.prototype,"_mediaAspectRatio",void 0),(0,o.C)([(0,n.w)()],g.prototype,"_mobileMediaAspectRatio",void 0),(0,o.C)([(0,n.w)()],g.prototype,"_headerHeight",void 0),(0,o.C)([(0,n.w)()],g.prototype,"_withoutContent",void 0),g=(0,o.C)([(0,s.E)(`${p}-banner`)],g)},3919(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(7509),l=i(1145),d=i(3720);function c(t){let e=[];
1153if(Array.isArray(t)&&t&&t.length){t.forEach(t=>{t.map(t=>""===t?"0":t)}),e=t[0];for(let i=1;i<t.length;i++)if(Array.isArray(t[i])&&void 0!==t[i])for(let o=0;o<t[i].length;o++)""!==t[i][o]&&(e[o]=t[i][o]);const i=e.map(t=>(Number(t)/16).toString()+"rem");return{unitless:{top:e[0],right:e[1],bottom:e[2],left:e[3]},rem:{top:(Number(e[0])/16).toString()+"rem",right:(Number(e[1])/16).toString()+"rem",bottom:(Number(e[2])/16).toString()+"rem",left:(Number(e[3])/16).toString()+"rem"},cssRem:i.join(" ")}}}function u(t){if(t){return t.split(",").map(t=>"0"!==t?(Number(t)/16).toString()+"rem":"0").join(" ")}}var m=i(9924),h=i(8698),p=i(2609);const{prefix:g}=h.W;let b=class extends r.WF{constructor(){super(...arguments),this.adaptivePadding=!1,this.colorBlend=!1,this.blendDirection="to-top",this.border=!1}firstUpdated(){this._cssShorthandPadding=c(this.getShorthandPaddingArrays()),this._mobilePadding=u(this.mobilePadding)}updated(t){(t.has("padding")||t.has("paddingTop")||t.has("paddingRight")||t.has("paddingBottom")||t.has("paddingLeft")||t.has("mobilePadding"))&&(this._cssShorthandPadding=c(this.getShorthandPaddingArrays()),this._mobilePadding=u(this.mobilePadding))}getShorthandPaddingArrays(){const t=[],e=function(t){const e=t?.split(",");if(void 0!==e&&Array.isArray(e)&&e.length&&e.length<=4)return 1===e.length?Array(4).fill(e[0]).flat():2===e.length?Array(2).fill(e).flat():3===e.length?(e.push(e[1]),e):e;void 0!==e&&Array.isArray(e)&&e.length>4&&console.log("Maximum 4 values required in padding array.")}(this.padding);if(e&&t.push(...t,e),(this.paddingTop||this.paddingRight||this.paddingBottom||this.paddingLeft)&&t.push(...t,[void 0!==this.paddingTop?this.paddingTop:"",void 0!==this.paddingRight?this.paddingRight:"",void 0!==this.paddingBottom?this.paddingBottom:"",void 0!==this.paddingLeft?this.paddingLeft:""]),t.length)return t}boxStyles(){let t={};return void 0!==this.maxWidth&&this.maxWidth>0?this.style.maxWidth=this.maxWidth/16+"rem":void 0!==this.maxWidth&&this.maxWidth<=0&&(this.style.maxWidth="100%"),this._cssShorthandPadding&&(t={...t,"--umg-space-padding-top":this._cssShorthandPadding.unitless.top,"--umg-space-padding-right":this._cssShorthandPadding.unitless.right,"--umg-space-padding-bottom":this._cssShorthandPadding.unitless.bottom,"--umg-space-padding-left":this._cssShorthandPadding.unitless.left,"--umg-space-padding-top-rem":this._cssShorthandPadding.rem.top,"--umg-space-padding-right-rem":this._cssShorthandPadding.rem.right,"--umg-space-padding-bottom-rem":this._cssShorthandPadding.rem.bottom,"--umg-space-padding-left-rem":this._cssShorthandPadding.rem.left}),this._mobilePadding&&(t={...t,"--umg-space-padding-mobile":this._mobilePadding}),t}boxClasses(){const t={};return this.colorBlend&&(t["box--gradient"]=!0,t["box--gradient-"+this.blendDirection]=!0),this._cssShorthandPadding&&this.adaptivePadding?t["box--adaptive-padding"]=!0:void 0===this._cssShorthandPadding||this.adaptivePadding?t["box--token-padding"]=!0:t["box--fixed-padding"]=!0,this.border&&(t["box--border"]=!0),t}render(){return r.qy` 1154 <div 1155 part="box" 1156 class="box${(0,d.H)(this.boxClasses())}" 1157 style="${(0,l.W)(this.boxStyles())}" 1158 > 1159 <div part="box-content" class="box__content"> 1160 <slot></slot> 1161 </div> 1162 </div> 1163 `}};b.styles=(0,p.Z)([m.S,r.AH` 1164 1165 /* Box width */ 1166 :host, 1167 :host([width=fill]) { 1168 display: block; 1169 width: var(--umg-size-width, 100%); 1170 } 1171 :host([width=fit-content]) { 1172 width: fit-content; 1173 } 1174 :host([width=auto]) { 1175 width: auto; 1176 } 1177 @media only screen and (max-width: 48rem) { 1178 :host, 1179 :host([mobileWidth=fill]) { 1180 display: block; 1181 width: var(--umg-size-width, 100%); 1182 } 1183 :host([mobileWidth=fit-content]) { 1184 width: fit-content; 1185 } 1186 :host([mobileWidth=auto]) { 1187 width: auto; 1188 } 1189 } 1190 1191 .box { 1192 height: 100%; 1193 } 1194 .box__content { 1195 border-radius: var(--umg-border-base-corner-radius, 0); 1196 height: 100%; 1197 color: var(--umg-color-base-text, rgb(0,0,0)); 1198 background-color: var(--umg-color-base-background, rgb(255,255,255,0)); 1199 } 1200 .box--border .box__content { 1201 border-width: var(--umg-border-base-width, 0.0625rem); 1202 border-style: solid; 1203 border-color: var(--umg-color-base-border, rgb(0,0,0,0.3)); 1204 } 1205 1206 @supports (color: rgb(from white r g b)) { 1207 .box--border .box__content { 1208 border-color: rgb(from var(--umg-color-base-border, rgb(0,0,0,0.3)) r g b / alpha); 1209 } 1210 .box__content { 1211 color: rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b / alpha); 1212 background-color: rgb(from var(--umg-color-base-background, rgb(255,255,255,0)) r g b / alpha); 1213 } 1214 } 1215 1216 /* Gradient background */ 1217 .box--gradient .box__content { 1218 background-color: transparent; 1219 } 1220 .box--gradient.box--gradient-to-top .box__content { 1221 background-image: linear-gradient(to top, 1222 rgb(from var(--umg-color-base-background) r g b / 1) 0%, 1223 rgb(from var(--umg-color-base-background) r g b / 0.3) 50%, 1224 rgb(from var(--umg-color-base-background) r g b / 0.15) 65%, 1225 rgb(from var(--umg-color-base-background) r g b / 0.075) 75.5%, 1226 rgb(from var(--umg-color-base-background) r g b / 0.037) 82.85%, 1227 rgb(from var(--umg-color-base-background) r g b / 0.019) 88%, 1228 rgb(from var(--umg-color-base-background) r g b / 0) 100% 1229 ); 1230 } 1231 .box--gradient.box--gradient-to-bottom .box__content { 1232 background-image: linear-gradient(to bottom, 1233 rgb(from var(--umg-color-base-background) r g b / 1) 0%, 1234 rgb(from var(--umg-color-base-background) r g b / 0.3) 50%, 1235 rgb(from var(--umg-color-base-background) r g b / 0.15) 65%, 1236 rgb(from var(--umg-color-base-background) r g b / 0.075) 75.5%, 1237 rgb(from var(--umg-color-base-background) r g b / 0.037) 82.85%, 1238 rgb(from var(--umg-color-base-background) r g b / 0.019) 88%, 1239 rgb(from var(--umg-color-base-background) r g b / 0) 100% 1240 ); 1241 } 1242 .box--gradient.box--gradient-to-left .box__content { 1243 background-image: linear-gradient(to left, 1244 rgb(from var(--umg-color-base-background) r g b / 1) 0%, 1245 rgb(from var(--umg-color-base-background) r g b / 0.3) 50%, 1246 rgb(from var(--umg-color-base-background) r g b / 0.15) 65%, 1247 rgb(from var(--umg-color-base-background) r g b / 0.075) 75.5%, 1248 rgb(from var(--umg-color-base-background) r g b / 0.037) 82.85%, 1249 rgb(from var(--umg-color-base-background) r g b / 0.019) 88%, 1250 rgb(from var(--umg-color-base-background) r g b / 0) 100% 1251 ); 1252 } 1253 .box--gradient.box--gradient-to-right .box__content { 1254 background-image: linear-gradient(to right, 1255 rgb(from var(--umg-color-base-background) r g b / 1) 0%, 1256 rgb(from var(--umg-color-base-background) r g b / 0.3) 50%, 1257 rgb(from var(--umg-color-base-background) r g b / 0.15) 65%, 1258 rgb(from var(--umg-color-base-background) r g b / 0.075) 75.5%, 1259 rgb(from var(--umg-color-base-background) r g b / 0.037) 82.85%, 1260 rgb(from var(--umg-color-base-background) r g b / 0.019) 88%, 1261 rgb(from var(--umg-color-base-background) r g b / 0) 100% 1262 ); 1263 } 1264 1265 /* Adaptive padding */ 1266 .box--adaptive-padding .box__content { 1267 padding-top: clamp(1rem, 100vw * 0.04, var(--umg-space-padding-top-rem)); 1268 padding-right: clamp(1rem, 100vw * 0.04, var(--umg-space-padding-right-rem)); 1269 padding-bottom: clamp(1rem, 100vw * 0.04, var(--umg-space-padding-bottom-rem)); 1270 padding-left: clamp(1rem, 100vw * 0.04, var(--umg-space-padding-left-rem)); 1271 } 1272 1273 /* Fixed padding */ 1274 .box--fixed-padding .box__content { 1275 padding-top: var(--umg-space-padding-top-rem); 1276 padding-right: var(--umg-space-padding-right-rem); 1277 padding-bottom: var(--umg-space-padding-bottom-rem); 1278 padding-left: var(--umg-space-padding-left-rem); 1279 } 1280 .box--token-padding .box__content { 1281 padding: var(--umg-space-padding, 1.5rem); 1282 } 1283 1284 @media only screen and (max-width: 48rem) { 1285 .box__content, 1286 .box--token-padding .box__content, 1287 .box--adaptive-padding .box__content, 1288 .box--fixed-padding .box__content { 1289 padding: var(--umg-space-padding-mobile, 1rem); 1290 } 1291 } 1292 `]),(0,o.C)([(0,a.M)({type:Number})],b.prototype,"maxWidth",void 0),(0,o.C)([(0,a.M)()],b.prototype,"padding",void 0),(0,o.C)([(0,a.M)()],b.prototype,"mobilePadding",void 0),(0,o.C)([(0,a.M)()],b.prototype,"paddingTop",void 0),(0,o.C)([(0,a.M)()],b.prototype,"paddingRight",void 0),(0,o.C)([(0,a.M)()],b.prototype,"paddingBottom",void 0),(0,o.C)([(0,a.M)()],b.prototype,"paddingLeft",void 0),(0,o.C)([(0,a.M)({type:Boolean})],b.prototype,"adaptivePadding",void 0),(0,o.C)([(0,a.M)({type:Boolean})],b.prototype,"colorBlend",void 0),(0,o.C)([(0,a.M)()],b.prototype,"blendDirection",void 0),(0,o.C)([(0,a.M)({type:Boolean})],b.prototype,"border",void 0),(0,o.C)([(0,n.w)()],b.prototype,"_cssShorthandPadding",void 0),(0,o.C)([(0,n.w)()],b.prototype,"_mobilePadding",void 0),b=(0,o.C)([(0,s.E)(`${g}-box`)],b)},9976(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(3720),l=i(9924),d=i(328),c=i(8698),u=i(2609);const{prefix:m}=c.W;let h=class extends r.WF{constructor(){super(...arguments),this.spacing="normal",this.justify="start",this.mobileJustify="start",this.stack=!1,this.mobileStack=!1}buttonGroupClasses(){const t={"button-group":!0};return t["group-spacing--"+this.spacing]=!0,t["group-justify--"+this.justify]=!0,t["group-mobile-justify--"+this.mobileJustify]=!0,t["group--stack"]=this.stack,t["group--mobile-stack"]=this.mobileStack,t}render(){return r.qy` 1293 <div part="button-group" class="${(0,n.H)(this.buttonGroupClasses())}" 1294 > 1295 <slot part="button"></slot> 1296 </div> 1297 `}};h.styles=(0,u.Z)([l.S,r.AH` 1298 @media screen and (max-width: 48rem) { 1299 :host([stack]), :host([mobileStack]) { 1300 display: block; 1301 width: var(--umg-size-button-width, 100%); 1302 } 1303 } 1304 1305 .button-group { 1306 align-items: center; 1307 display: flex; 1308 flex-wrap: wrap; 1309 width: 100%; 1310 } 1311 @media screen and (max-width: 48rem) { 1312 .button-group.group--mobile-stack { 1313 flex-direction: column; 1314 } 1315 .button-group.group--mobile-stack ::slotted(*) { 1316 overflow: hidden; 1317 display: block; 1318 width: 100%; 1319 --umg-size-button-width: 100% 1320 } 1321 } 1322 @media screen and (min-width: 48.06rem) { 1323 .button-group.group--stack { 1324 flex-direction: column; 1325 } 1326 .button-group.group--stack ::slotted(*) { 1327 overflow: hidden; 1328 display: block; 1329 width: 100%; 1330 --umg-size-button-width: 100% 1331 } 1332 } 1333 `,d.Xv,d.yw,d.Oh]),(0,o.C)([(0,a.M)()],h.prototype,"spacing",void 0),(0,o.C)([(0,a.M)()],h.prototype,"justify",void 0),(0,o.C)([(0,a.M)()],h.prototype,"mobileJustify",void 0),(0,o.C)([(0,a.M)({type:Boolean})],h.prototype,"stack",void 0),(0,o.C)([(0,a.M)({type:Boolean})],h.prototype,"mobileStack",void 0),h=(0,o.C)([(0,s.E)(`${m}-button-group`)],h)}
1333,8766(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(31),l=i(3720),d=i(1145),c=i(9924),u=i(5846),m=i(8698),h=i(2609);i(4630);const{prefix:p}=m.W;let g=class extends r.WF{constructor(){super(),this.as="button",this.for=void 0,this.clickAction=void 0,this.url=void 0,this.target="_self",this.type="button",this.icon="user",this.size="xlarge",this.extendInteraction=!1,this.disabled=!1,this.loading=!1,this.border=!1,this.label="Accessible",this._extendedInteraction()}async _extendedInteraction(){await this.updateComplete,this.disabled||"link"===this.as&&void 0!==this.url&&this.extendInteraction&&this.dispatchEvent(new CustomEvent("extend-interaction",{detail:{url:this.url,target:this.target},bubbles:!0,composed:!0}))}handleClick(){if(!this.disabled&&!this.loading&&this.clickAction){const t=new CustomEvent(this.clickAction,{bubbles:!0,composed:!0});this.dispatchEvent(t)}}buttonIconClasses(){return{"btn--border":this.border,"btn--extend-interactive":this.extendInteraction}}buttonIconStyles(){let t={};return this.padding&&(t={...t,"--umg-space-padding":"var(--umg-space-"+this.padding+", 0)"}),this.size&&(t={...t,"--umg-font-size-icon":(0,u.R)(this.size)}),t}buttonIcon(){return this.loading?r.qy` 1334 <umg-icon 1335 part="icon" 1336 exportparts="icon-container,icon-svg,icon-image" 1337 class="spinner" 1338 icon="spinner" 1339 > 1340 </umg-icon> 1341 `:r.qy` 1342 <umg-icon 1343 part="icon" 1344 exportparts="icon-container,icon-svg,icon-image" 1345 icon=${this.icon} 1346 > 1347 </umg-icon> 1348 `}buttonAs(){return"button"===this.as||void 0===this.url||""===this.url?r.qy` 1349 <button 1350 part="button-icon" 1351 class="button-icon${(0,l.H)(this.buttonIconClasses())}" 1352 style="${(0,d.W)(this.buttonIconStyles())}" 1353 type=${this.type} 1354 aria-label=${this.label} 1355 aria-controls=${(0,n.J)(this.for)} 1356 clickAction=${(0,n.J)(this.clickAction)} 1357 @click=${this.handleClick} 1358 ?disabled=${this.disabled} 1359 > 1360 ${this.buttonIcon()} 1361 </button> 1362 `:this.url?r.qy` 1363 <a 1364 part="button-icon" 1365 class="button-icon${(0,l.H)(this.buttonIconClasses())}" 1366 style="${(0,d.W)(this.buttonIconStyles())}" 1367 href="${this.url}" 1368 target="${this.target}" 1369 aria-label=${this.label} 1370 ?disabled=${this.disabled} 1371 > 1372 ${this.buttonIcon()} 1373 </a> 1374 `:void 0}render(){return r.qy` 1375 ${this.buttonAs()} 1376 `}};g.shadowRootOptions={...r.WF.shadowRootOptions,delegatesFocus:!0},g.styles=(0,h.Z)([c.S,r.AH` 1377 :host { 1378 display: inline-flex; 1379 } 1380 button[disabled] { 1381 opacity: 0.3; 1382 cursor: default; 1383 } 1384 .button-icon { 1385 cursor: pointer; 1386 border: none; 1387 border-radius: var(--umg-border-icon-corner-radius, var(--umg-border-base-corner-radius, 0)); 1388 font-size: var(--umg-font-size-icon, 1.5rem); 1389 padding: 0; 1390 color: var(--umg-color-icon-text, inherit); 1391 background-color: var(--umg-color-icon-background, inherit); 1392 } 1393 @supports (color: rgb(from white r g b)) { 1394 .button-icon { 1395 color: rgb(from var(--umg-color-icon-text, inherit) r g b / alpha); 1396 background-color: rgb(from var(--umg-color-icon-background, inherit) r g b / alpha); 1397 } 1398 } 1399 a.button-icon { 1400 display: inline-block; 1401 line-height: normal 1402 } 1403 .button-icon > * { 1404 position: relative; 1405 display: block; 1406 padding: var(--umg-space-icon-padding, var(--umg-space-padding, 0.5rem)); 1407 } 1408 1409 /* States */ 1410 .button-icon:hover { 1411 opacity: 0.7; 1412 } 1413 .button-icon[disabled]:hover { 1414 opacity: 0.3; 1415 } 1416 1417 /* Behaviour */ 1418 .btn--extend-interactive::after { 1419 content: ''; 1420 position:absolute; 1421 top:0; 1422 left:0; 1423 height: 100%; 1424 width: 100%; 1425 z-index: 1; 1426 } 1427 1428 /* Shape */ 1429 .btn--border > *::after { 1430 content: ''; 1431 position: absolute; 1432 left: 0; 1433 right: 0; 1434 top: 0; 1435 bottom: 0; 1436 box-shadow: 0 0 0 var(--umg-border-icon-width, var(--umg-border-base-width, 0.0625rem)) var(--umg-color-icon-text, var(--umg-color-base-text, rgb(0,0,0,0.5))); 1437 border-radius: var(--umg-border-icon-corner-radius, var(--umg-border-base-corner-radius, 0)); 1438 } 1439 1440 @supports (color: rgb(from white r g b)) { 1441 .btn--border > *::after { 1442 box-shadow: 0 0 0 var(--umg-border-icon-width, var(--umg-border-base-width, 0.0625rem)) rgb(from var(--umg-color-icon-border, var(--umg-color-base-text, rgb(0,0,0,0.5))) r g b / var(--umg-opacity-icon-border)); 1443 } 1444 } 1445 .spinner { 1446 animation-name: spin; 1447 animation-duration: 500ms; 1448 animation-timing-function: cubic-bezier(0, 0, 1, 1); 1449 animation-iteration-count: infinite; 1450 animation-direction: both; 1451 } 1452 @keyframes spin {to{transform: rotate(1turn)}}; 1453 `]),(0,o.C)([(0,a.M)()],g.prototype,"as",void 0),(0,o.C)([(0,a.M)()],g.prototype,"for",void 0),(0,o.C)([(0,a.M)()],g.prototype,"clickAction",void 0),(0,o.C)([(0,a.M)()],g.prototype,"url",void 0),(0,o.C)([(0,a.M)()],g.prototype,"target",void 0),(0,o.C)([(0,a.M)()],g.prototype,"type",void 0),(0,o.C)([(0,a.M)()],g.prototype,"icon",void 0),(0,o.C)([(0,a.M)()],g.prototype,"size",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"extendInteraction",void 0),(0,o.C)([(0,a.M)({type:Boolean,reflect:!0})],g.prototype,"disabled",void 0),(0,o.C)([(0,a.M)({type:Boolean,reflect:!0})],g.prototype,"loading",void 0),(0,o.C)([(0,a.M)()],g.prototype,"padding",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"border",void 0),(0,o.C)([(0,a.M)()],g.prototype,"label",void 0),g=(0,o.C)([(0,s.E)(`${p}-button-icon`)],g)},3556(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(31),l=i(3720),d=i(9924);const c=r.AH` 1454 /* Base */ 1455 .button { 1456 cursor: pointer; 1457 font-family: var(--umg-font-button-family, var(--umg-font-family, var(--umg-font-body-family, inherit))); 1458 font-weight: var(--umg-font-button-weight, var(--umg-font-base-weight, 700)); 1459 font-size: var(--umg-font-button-size, var(--umg-font-size, var(--umg-font-body-size-sm, 0.875rem))); 1460 letter-spacing: 0.06rem; 1461 background-clip: padding-box; 1462 border-radius: var(--umg-border-button-corner-radius, var(--umg-border-base-corner-radius, 0)); 1463 border-width: var(--umg-border-button-width, var(--umg-border-base-width, 0.0625rem)); 1464 border-style: solid; 1465 outline: none; 1466 appearance: none; 1467 text-decoration: none; 1468 appearance: none; 1469 --webkit-appearance: none; 1470 } 1471 1472 .button { 1473 color: rgb(from var(--umg-color-button-text, var(--umg-color-base-background, rgb(255,255,255))) r g b / alpha); 1474 background-color: rgb(from var(--umg-color-button-background, var(--umg-color-base-text, rgb(0,0,0))) r g b / alpha); 1475 border-color: rgb(from var(--umg-color-button-background, var(--umg-color-base-text, rgb(0,0,0))) r g b / alpha); 1476 } 1477 .button > * { 1478 /* Child elements */ 1479 --umg-color-base-text: rgb(from var(--umg-color-button-text, var(--umg-color-base-background, rgb(255,255,255))) r g b / alpha); 1480 } 1481 .button:not(.btn--plain):not(.btn--plain-underline):not(.btn--outline):hover { 1482 box-shadow: 0 0 0 0.0625rem rgb(from var(--umg-color-button-background, var(--umg-color-base-text, rgb(0,0,0))) r g b / alpha); 1483 background-color: rgb(from var(--umg-color-button-background-hover, var(--umg-color-base-text, rgb(0,0,0,0.8))) r g b / alpha); 1484 } 1485 .button:not(.btn--plain):not(.btn--plain-underline):not(.btn--outline):focus-visible { 1486 outline: 0.125rem solid rgb(from var(--umg-color-button-background, var(--umg-color-base-text, rgb(0,0,0))) r g b / alpha); 1487 box-shadow: 0 0 0 0.15rem rgb(from var(--umg-color-button-text, var(--umg-color-base-background, rgb(255,255,255))) r g b / alpha), 0 0 0.25rem 0.2rem rgb(from var(--umg-color-button-background, var(--umg-color-base-text, rgb(0,0,0)) r g b / alpha)); 1488 background-color: rgb(from var(--umg-color-button-background-focus, var(--umg-color-base-text, rgb(0,0,0,0.8))) r g b / alpha); 1489 } 1490 1491 /* States */ 1492 .button[disabled], 1493 .button[disabled]:hover { 1494 cursor: default; 1495 color: rgb(from var(--umg-color-base-text-disabled, rgb(160, 160, 160)) r g b / alpha); 1496 } 1497 1498 .button[disabled]:not(.btn--plain):not(.btn--plain-underline):not(.btn--outline), 1499 .button[disabled]:not(.btn--plain):not(.btn--plain-underline):not(.btn--outline):hover { 1500 border: none; 1501 box-shadow: none; 1502 background-color: rgb(from var(--umg-color-base-background-disabled, rgb(220, 220, 220)) r g b / alpha); 1503 } 1504 1505 .button:active { 1506 outline: none; 1507 } 1508 1509 *:focus-visible { 1510 outline-offset: 0.1875rem; 1511 } 1512 1513 a.button { 1514 display: inline-flex; 1515 align-items: center; 1516 justify-content: center; 1517 line-height: normal; 1518 } 1519 1520`,u=r.AH` 1521 .button { 1522 line-height: 1; 1523 height: var(--umg-size-button-height, var(--umg-space-48, 2.5rem)); 1524 padding: var(--umg-space-button-padding, 0 2rem); 1525 width: var(--umg-size-button-width, auto); 1526 } 1527 1528 .button__label { 1529 display: flex; 1530 gap: 0.25rem; 1531 align-items: center; 1532 justify-content: center; 1533 } 1534 1535 /* Text alignment */ 1536 .btn--text-align-left .button__label { 1537 justify-content: start; 1538 } 1539 .btn--text-align-center .button__label { 1540 justify-content: center; 1541 } 1542 .btn--text-align-right .button__label { 1543 justify-content: end; 1544 } 1545 1546 /* Width */ 1547 .btn--fullwidth { 1548 width: 100%; 1549 } 1550 1551 /* Size */ 1552 .btn--size-large:not(.btn--plain) { 1553 --umg-size-button-height: var(--umg-space-48, 3rem); 1554 padding: 0 var(--umg-space-32, 2rem); 1555 } 1556 .btn--size-medium:not(.btn--plain) { 1557 --umg-size-button-height: 2.75rem; 1558 padding: 0 var(--umg-space-20, 1.5rem); 1559 } 1560 .btn--size-small:not(.btn--plain) { 1561 --umg-size-button-height: var(--umg-space-40, 2.5rem); 1562 padding: 0 var(--umg-space-16, 1rem); 1563 font-size: var(--umg-font-body-size-sm); 1564 font-weight: var(--umg-font-button-weight, var(--umg-font-base-weight-regular)); 1565 } 1566 .btn--size-xsmall:not(.btn--plain) { 1567 --umg-size-button-height: var(--umg-space-32, 2rem); 1568 padding: 0 var(--umg-space-12, 0.75rem); 1569 font-size: var(--umg-font-body-size-xs); 1570 font-weight: var(--umg-font-button-weight, var(--umg-font-base-weight-regular)); 1571 } 1572 .btn--size-slim:not(.btn--plain) { 1573 --umg-size-button-height: var(--umg-space-24, 1.5rem); 1574 font-weight: var(--umg-font-button-weight, var(--umg-font-base-weight-regular)); 1575 font-size: var(--umg-font-body-size-xs); 1576 padding: 0 var(--umg-space-12, 0.75rem); 1577 } 1578 .btn--size-small.btn--plain { 1579 font-size: var(--umg-font-body-size-sm); 1580 } 1581 .btn--size-slim.btn--plain { 1582 font-size: var(--umg-font-body-size-xs); 1583 } 1584 1585 /* Behaviour */ 1586 .btn--extend:not([disabled]):after, 1587 .btn--extend-hidden:not([disabled]):after { 1588 content: ''; 1589 position:absolute; 1590 top:0; 1591 left:0; 1592 height: 100%; 1593 width: 100%; 1594 z-index: 1; 1595 cursor: pointer; 1596 } 1597 1598 /* Loading state */ 1599 .btn--loading { 1600 position: relative; 1601 } 1602 .btn--loading ::slotted(*), 1603 .btn--loading .button__label { 1604 opacity: 0; 1605 } 1606 .button__spinner { 1607 animation-name: spin; 1608 animation-duration: 500ms; 1609 animation-timing-function: cubic-bezier(0, 0, 1, 1); 1610 animation-iteration-count: infinite; 1611 animation-direction: both; 1612 fill: currentColor; 1613 height: 1rem; 1614 left: 50%; 1615 margin: calc(var(--umg-space-16, 1rem) / 2 * -1) 0 0 calc(var(--umg-space-16, 1rem) / 2 * -1); 1616 position: absolute; 1617 top: 50%; 1618 width: 1rem; 1619 }
1620 @keyframes spin {to{transform: rotate(1turn)}}; 1621`,m=r.AH` 1622 .btn--outline { 1623 background-color: transparent; 1624 border-color: rgb(from var(--umg-color-button-background, var(--umg-color-base-text, rgb(0,0,0))) r g b / alpha); 1625 color: rgb(from var(--umg-color-button-background, var(--umg-color-base-text, rgb(0,0,0))) r g b / alpha); 1626 } 1627 1628 .btn--outline[disabled], 1629 .btn--outline[disabled]:hover { 1630 cursor: default; 1631 box-shadow: none; 1632 color: rgb(from var(--umg-color-base-background-disabled, rgb(220, 220, 220)) R G B / alpha); 1633 border-color: rgb(from var(--umg-color-base-background-disabled, rgb(220, 220, 220)) R G B / alpha); 1634 background-color: transparent; 1635 } 1636 1637 .btn--outline:hover { 1638 border-color: transparent; 1639 box-shadow: 0 0 0 0.0625rem rgb(from var(--umg-color-button-background, var(--umg-color-base-text, rgb(0,0,0))) r g b / alpha); 1640 } 1641 1642 .btn--outline > * { 1643 --umg-color-base-text: rgb(var(--umg-color-button-background) r g b / alpha); 1644 } 1645`,h=r.AH` 1646 .btn--plain[disabled], .btn--plain-underline[disabled] { 1647 background-color: transparent; 1648 color: var(--umg-color-base-text-disabled, rgb(160, 160, 160)); 1649 } 1650 @supports (color: rgb(from white r g b)) { 1651 .btn--plain[disabled], .btn--plain-underline[disabled] { 1652 color: rgb(from var(--umg-color-base-text-disabled, rgb(160, 160, 160)) r g b / alpha); 1653 } 1654 } 1655 .btn--plain, .btn--plain-underline { 1656 border: none; 1657 padding: 0; 1658 height: auto; 1659 background-color: transparent; 1660 color: var(--umg-color-base-text, inherit); 1661 } 1662 @supports (color: rgb(from white r g b)) { 1663 .btn--plain, .btn--plain-underline { 1664 color: rgb(from var(--umg-color-base-text, inherit) r g b / alpha); 1665 } 1666 } 1667 .btn--plain:focus-visible { 1668 outline: none; 1669 box-shadow: none; 1670 } 1671 .btn--plain:not(.btn--plain-underline):not([disabled]):hover, 1672 .btn--plain:not(.btn--plain-underline):not([disabled]):focus-visible { 1673 text-decoration: underline; 1674 text-underline-offset: 0.2rem; 1675 } 1676 .btn--plain:not(.btn--plain-underline):not([disabled]):focus-visible { 1677 text-decoration-thickness: 0.125rem; 1678 } 1679 .btn--plain-underline { 1680 text-decoration: underline; 1681 text-underline-offset: 0.2rem; 1682 transition: text-decoration-color 0.2s; 1683 } 1684 .btn--plain-underline:not([disabled]):hover { 1685 text-decoration-color: var(--umg-color-base-text, inherit); 1686 } 1687 @supports (color: rgb(from white r g b)) { 1688 .btn--plain-underline:not([disabled]):hover { 1689 text-decoration-color: rgb(from var(--umg-color-base-text, inherit) r g b / 0.5) 1690 } 1691 } 1692 .btn--plain-underline:not([disabled]):focus-visible { 1693 outline: none; 1694 box-shadow: none; 1695 text-decoration-thickness: 0.125rem; 1696 text-underline-offset: 0.25rem; 1697 } 1698`;var p=i(8698),g=i(2609);const{prefix:b}=p.W;let v=class extends r.WF{constructor(){super(),this.as="button",this.type="button",this.for=void 0,this.clickAction=void 0,this.url=void 0,this.target="_self",this.buttonStyle="solid",this.textAlign="center",this.disabled=!1,this.fullWidth=!1,this.extendInteraction=!1,this.extendInteractionHidden=!1,this.loading=!1,this._extendedInteraction()}async _extendedInteraction(){await this.updateComplete,this.disabled||"link"===this.as&&void 0!==this.url&&this.extendInteraction&&this.dispatchEvent(new CustomEvent("extend-interaction",{detail:{url:this.url,target:this.target},bubbles:!0,composed:!0}))}handleClick(){if(!this.disabled&&this.clickAction){const t=new CustomEvent(this.clickAction,{bubbles:!0,composed:!0});this.dispatchEvent(t)}}buttonClasses(){const t={"btn--plain":"plain"===this.buttonStyle,"btn--plain-underline":"plain-underline"===this.buttonStyle,"btn--outline":"outline"===this.buttonStyle,"btn--fullwidth":this.fullWidth,"btn--extend":this.extendInteraction,"btn--extend-hidden":this.extendInteractionHidden,"btn--loading":this.loading};return t["btn--size-"+this.size]=!0,t["btn--text-align-"+this.textAlign]=!0,t}buttonAs(){return"button"===this.as||void 0===this.url||""===this.url?r.qy` 1699 <button 1700 part="button"
1701 class="button${(0,l.H)(this.buttonClasses())}" 1702 type=${this.type} 1703 aria-controls="${(0,n.J)(this.for)}" 1704 clickAction="${(0,n.J)(this.clickAction)}" 1705 ?disabled=${this.disabled} 1706 @click=${this.handleClick} 1707 > 1708 ${this.buttonContent()} 1709 </button> 1710 `:this.url?r.qy` 1711 <a 1712 part="button" 1713 href="${this.url}" 1714 class="button${(0,l.H)(this.buttonClasses())}" 1715 target="${this.target}" 1716 ?disabled=${this.disabled} 1717 > 1718 ${this.buttonContent()} 1719 </a> 1720 `:void 0}buttonContent(){return this.loading?r.qy` 1721 <slot name="label"></slot> 1722 <slot> 1723 <span part="button-label" class="button__label">Label</span> 1724 </slot> 1725 <svg class="button__spinner" width="16" height="16" xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" aria-hidden="true" viewBox="0 0 512 512"> 1726 <path d="M463.9 376c7.6 4.4 17.5 1.8 21.4-6.1c17.1-34.3 26.7-73 26.7-113.9C512 120 405.9 8.8 272 .5c-8.8-.5-16 6.7-16 15.5v0c0 8.8 7.2 15.9 16 16.6C388.2 40.8 480 137.7 480 256c0 35.1-8.1 68.3-22.5 97.9c-3.9 8-1.3 17.7 6.4 22.2v0z"/> 1727 </svg> 1728 `:r.qy` 1729 <span part="button-label" class="button__label"> 1730 <slot name="label"></slot> 1731 <slot> 1732 Label 1733 </slot> 1734 </span> 1735 `}render(){return r.qy` 1736 ${this.buttonAs()} 1737 `}};v.shadowRootOptions={...r.WF.shadowRootOptions,delegatesFocus:!0},v.styles=(0,g.Z)([d.S,c,u,m,h,r.AH` 1738 /* Parent */ 1739 :host([fullwidth]) { 1740 width: 100%; 1741 } 1742 1743 :host([extendInteractionHidden]) { 1744 display: block; 1745 overflow: hidden; 1746 width: 0; 1747 height: 0!important; 1748 margin: -1px; 1749 padding: 0; 1750 border: 0; 1751 clip: rect(0 0 0 0); 1752 } 1753 1754 .btn--plain > *, 1755 .btn--plain-underline > *, 1756 .btn--outline > * { 1757 /* Child elements */ 1758 --umg-color-base-text: var(--umg-color-button-background); 1759 } 1760 1761 `]),(0,o.C)([(0,a.M)()],v.prototype,"as",void 0),(0,o.C)([(0,a.M)()],v.prototype,"type",void 0),(0,o.C)([(0,a.M)()],v.prototype,"for",void 0),(0,o.C)([(0,a.M)()],v.prototype,"clickAction",void 0),(0,o.C)([(0,a.M)()],v.prototype,"url",void 0),(0,o.C)([(0,a.M)()],v.prototype,"target",void 0),(0,o.C)([(0,a.M)()],v.prototype,"size",void 0),(0,o.C)([(0,a.M)()],v.prototype,"buttonStyle",void 0),(0,o.C)([(0,a.M)()],v.prototype,"textAlign",void 0),(0,o.C)([(0,a.M)({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),(0,o.C)([(0,a.M)({type:Boolean})],v.prototype,"fullWidth",void 0),(0,o.C)([(0,a.M)({type:Boolean})],v.prototype,"extendInteraction",void 0),(0,o.C)([(0,a.M)({type:Boolean})],v.prototype,"extendInteractionHidden",void 0),(0,o.C)([(0,a.M)({type:Boolean})],v.prototype,"loading",void 0),v=(0,o.C)([(0,s.E)(`${b}-button`)],v)},8903(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(7509),l=i(31),d=i(3720),c=i(1145),u=i(9061),m=i(1088),h=i(9924),p=i(8698),g=i(2609);i(3919),i(1682),i(5686),i(8766);const{prefix:b}=p.W;let v=class extends r.WF{constructor(){super(...arguments),this.visible=!1}_closePopover(){this.visible=!1,document.body.style.overflow=""}popoverClasses(){return{"popover--visible":this.visible}}popoverStyles(){return{visibility:this.visible?"visible":"hidden"}}closeButton(){if(this.visible)return r.qy` 1762 <umg-button-icon 1763 part="close-button" 1764 exportparts="button-icon,icon-container,icon-svg,icon-image" 1765 class="close-button" 1766 icon="close" 1767 padding="4" 1768 @click="${this._closePopover}" 1769 > 1770 </umg-button-icon> 1771 `}render(){return r.qy` 1772 <div 1773 id="popover-content" 1774 role="tooltip" 1775 class="popover color-popover${(0,d.H)(this.popoverClasses())}" 1776 style="${(0,c.W)(this.popoverStyles())}" 1777 > 1778 <div class="popover-inner"> 1779 <div 1780 class="popover-content color-popover-content" 1781 aria-labelledby="popover" 1782 role="region" 1783 > 1784 <div class="popover-title"> 1785 <slot name="title"></slot> 1786 ${this.closeButton()} 1787 </div> 1788 <slot name="content"></slot> 1789 </div> 1790 </div> 1791 </div> 1792 `}};v.styles=(0,g.Z)([h.S,r.AH` 1793 .popover { 1794 position: fixed; 1795 visibility: hidden; 1796 inset: 0; 1797 z-index: 499; // under overlay z-index 1798 flex-direction: column; 1799 justify-content: stretch; 1800 overflow: hidden; 1801 border-width: var(--umg-border-base-width, 0.0625rem); 1802 border-style: solid; 1803 background-clip: padding-box; 1804 } 1805 1806 .popover-inner { 1807 display: flex; 1808 flex-direction: column; 1809 align-items: center; 1810 justify-content: center; 1811 height: 100%; 1812 width: 100%; 1813 overflow-y: auto; 1814 } 1815 1816 .popover-content { 1817 display: flex; 1818 flex-direction: column; 1819 align-items: center; 1820 justify-content: start; 1821 gap: var(--umg-space-24); 1822 padding: var(--umg-space-24); 1823 width: 100%; 1824 } 1825 1826 .popover-inner::-webkit-scrollbar {
1827 width: 0.25rem; 1828 } 1829 .popover-inner::-webkit-scrollbar-track { 1830 background: var(--umg-color-popover-text, rgb(0,0,0,0.05)); 1831 border-radius: var(--umg-border-radius-30); 1832 } 1833 .popover-inner::-webkit-scrollbar-thumb{ 1834 background: var(--umg-color-popover-text, rgb(0,0,0,0.1)); 1835 border-radius: var(--umg-border-radius-30); 1836 } 1837 1838 @supports (color: rgb(from white r g b)) { 1839 .popover-inner::-webkit-scrollbar-track { 1840 background: rgb(from var(--umg-color-popover-text, rgb(0,0,0)) r g b / 0.05); 1841 } 1842 .popover-inner::-webkit-scrollbar-thumb{ 1843 background: rgb(from var(--umg-color-popover-text, rgb(0,0,0)) r g b / 0.1); 1844 } 1845 } 1846 1847 @media only screen and (hover: hover) { 1848 .close-button { 1849 display: none; 1850 } 1851 .popover { 1852 position: absolute; 1853 border-radius: var(--umg-border-base-corner-radius); 1854 } 1855 .popover-inner { 1856 opacity: 0; 1857 max-width: 320px; 1858 margin: 0 auto; 1859 } 1860 .popover--visible .popover-inner { 1861 opacity: 1; 1862 transition: opacity 0.3s 1863 } 1864 .popover-title { 1865 display: none; 1866 } 1867 } 1868 1869 @media screen and (hover: none) { 1870 .close-button { 1871 display: block; 1872 margin-left: auto; 1873 } 1874 .popover { 1875 border: none; 1876 transform: translateX(-100%); 1877 } 1878 .popover-inner { 1879 padding: var(--umg-space-24); 1880 transform: translateX(-100%); 1881 margin: 0 auto; 1882 } 1883 .popover--visible { 1884 transform: translateX(0); 1885 } 1886 .popover--visible .popover-inner { 1887 transform: translateX(0); 1888 transition: all 0.3s 1889 } 1890 .popover-content { 1891 border-radius: var(--umg-border-radius-30); 1892 padding: var(--umg-space-24); 1893 border-width: var(--umg-border-base-width, 0.0625rem); 1894 border-style: solid; 1895 } 1896 .popover-title { 1897 display: flex; 1898 align-items: center; 1899 justify-content: space-between; 1900 width: 100%; 1901 } 1902 } 1903 1904 /* Colour classes */ 1905 .color-popover { 1906 background-color: var(--umg-color-popover-background, rgb(255,255,255,0.9)); 1907 border-color: var(--umg-color-popover-text, rgb(240,240,240)); 1908 } 1909 .color-popover-content { 1910 color: var(--umg-color-popover-text, rgb(0,0,0)); 1911 background-color: transparent; 1912 --umg-color-base-text: var(--umg-color-popover-text); 1913 --umg-color-base-background: transparent; 1914 } 1915 1916 @supports (color: rgb(from white r g b)) { 1917 .color-popover { 1918 background-color: rgb(from var(--umg-color-popover-background, rgb(255,255,255,0.9)) r g b / alpha); 1919 border-color: rgb(from var(--umg-color-popover-text, rgb(240,240,240)) r g b / alpha); 1920 1921 } 1922 .color-popover-content { 1923 color: rgb(from var(--umg-color-popover-text, rgb(0,0,0)) r g b / 1); 1924 } 1925 } 1926 1927 @media screen and (hover: none) { 1928 .color-popover-content { 1929 background-color: var(--umg-color-popover-background, rgb(255,255,255)); 1930 border-color: var(--umg-color-popover-text, rgb(240,240,240)); 1931 } 1932 @supports (color: rgb(from white r g b)) { 1933 .color-popover-content { 1934 background-color: rgb(from var(--umg-color-popover-background, rgb(255,255,255)) r g b / 1); 1935 border-color: rgb(from var(--umg-color-popover-text, rgb(240,240,240)) r g b / 1); 1936 } 1937 } 1938 } 1939 `]),(0,o.C)([(0,a.M)({type:Boolean,reflect:!0})],v.prototype,"visible",void 0),v=(0,o.C)([(0,s.E)(`${b}-card-popover`)],v);const{prefix:y}=p.W;let f=class extends r.WF{constructor(){super(),this.position="under",this.mobilePosition="under",this.align="stretch",this.colorBlend=!1,this.border=!1,this._hasPopover=!1,this._cardPopover=null,this._tabElements=null,this.eventManager=new m.E(this),this._isDragging=!1,this._touchStartX=0,this._touchStartY=0,this._onTouchStart=t=>{1===t.touches.length&&(this._touchStartX=t.touches[0].clientX,this._touchStartY=t.touches[0].clientY,this._isDragging=!1)},this._onTouchMove=t=>{const e=t.touches[0];(Math.abs(e.clientX-this._touchStartX)>10||Math.abs(e.clientY-this._touchStartY)>10)&&(this._isDragging=!0)},this._onTouchEnd=t=>{if(!this._isDragging){const e=t.target;this._cardPopover&&!this._cardPopover.contains(e)&&this._togglePopoverMobile()}},this._onMouseEnter=()=>{this._togglePopover()},this._onMouseLeave=()=>{this._togglePopover()},this._onKeyDown=t=>{if(this._cardPopover?.hasAttribute("visible")){const e=this._cardPopover.querySelectorAll("a[href], input, button, video, iframe, umg-button, umg-link, umg-socials, umg-link-group, umg-button-icon"),i=Array.prototype.slice.call(e),o=i.indexOf(document.activeElement);if("ArrowDown"===t.key){t.preventDefault();i[(o+1)%i.length].focus()}else if("ArrowUp"===t.key){t.preventDefault();i[(o-1+i.length)%i.length].focus()}}},this._eventsHandler=t=>{if("focusin"===t.type&&this._cardPopover&&this._cardPopover.setAttribute("visible",""),"focusout"===t.type&&this._cardPopover){const e=t.currentTarget,i=t.relatedTarget;if(i&&this._cardPopover.contains(i))return;e.contains(i)||(this._cardPopover.removeAttribute("visible"),this._removeKeyboardListeners())}},this.eventManager.addEventListener("media-details",this._setMediaAspectRatio),this.eventManager.addEventListener("keyup",this._eventsHandler)}updated(){this._hasPopover?(this.eventManager.addEventListener("touchstart",this._onTouchStart),this.eventManager.addEventListener("touchmove",this._onTouchMove),this.eventManager.addEventListener("touchend",this._onTouchEnd),this.eventManager.addEventListener("focusin",this._eventsHandler),this.eventManager.addEventListener("focusout",this._eventsHandler),this.eventManager.addEventListener("keydown",this._onKeyDown),window.matchMedia("(hover: hover)").matches&&(this.eventManager.addEventListener("mouseenter",this._onMouseEnter),this.eventManager.addEventListener("mouseleave",this._onMouseLeave))):(this.eventManager.removeEventListener("touchstart",this._onTouchStart),this.eventManager.removeEventListener("touchmove",this._onTouchMove),this.eventManager.removeEventListener("touchend",this._onTouchEnd),this.eventManager.removeEventListener("focusin",this._eventsHandler),this.eventManager.removeEventListener("focusout",this._eventsHandler),this.eventManager.removeEventListener("keydown",this._onKeyDown),window.matchMedia("(hover: hover)").matches&&(this.eventManager.removeEventListener("mouseenter",this._onMouseEnter),this.eventManager.removeEventListener("mouseleave",this._onMouseLeave)))}_setMediaAspectRatio(t){"media-details"===t.type&&(t.detail.mediaAspectRatio&&(this._mediaAspectRatio=t.detail.mediaAspectRatio.toString()),t.detail.mobileMediaAspectRatio?this._mobileMediaAspectRatio=t.detail.mobileMediaAspectRatio.toString():t.detail.mediaAspectRatio&&(this._mediaAspectRatio=t.detail.mediaAspectRatio.toString()))}_addKeyboardListeners(){this._cardPopover?.addEventListener("keydown",this._onKeyDown)}_removeKeyboardListeners(){this._cardPopover?.removeEventListener("keydown",this._onKeyDown)}_togglePopoverMobile(){this._cardPopover&&(this._cardPopover.hasAttribute("visible")?(this._cardPopover.removeAttribute("visible"),document.body.style.overflow="auto"):(this._cardPopover.setAttribute("visible",""),document.body.style.overflow="hidden"))}_togglePopover(){this._cardPopover&&(this._cardPopover.hasAttribute("visible")?(this._cardPopover.removeAttribute("visible"),this._removeKeyboardListeners()):(this._cardPopover.setAttribute("visible",""),this._addKeyboardListeners()))}
1939_handleSlotChange(t){this._hasPopover=(0,u.Y)(t,"popover"),this._cardPopover=this.querySelector("umg-card-popover"),this._tabElements=this.querySelectorAll("a[href], input, button, video, iframe, umg-button, umg-link, umg-socials, umg-link-group, umg-button-icon"),this._tabElements.forEach(t=>{t.setAttribute("tabindex","-1")}),this.setAttribute("tabindex","0"),this.setAttribute("aria-describedby","popover-content")}cardClasses(){const t={"caption-card--border":this.border};return"under"===this.position&&(t["caption--inline"]=!0,t["caption-position--"+this.position]=!0),"over"===this.position&&(t["caption-position--"+this.position]=!0),"under"===this.mobilePosition&&(t["caption-mobile--inline"]=!0,t["caption-mobile-position--"+this.mobilePosition]=!0),"over"===this.mobilePosition&&(t["caption-mobile-position--"+this.mobilePosition]=!0),t}cardStyles(){let t={};return t={"--umg-aspect-ratio":this._mediaAspectRatio,"--umg-mobile-aspect-ratio":this._mobileMediaAspectRatio},t}captionClasses(){const t={};return this.align&&(t["caption-align--"+this.align]=!0),this.justify&&(t["caption-justify--"+this.justify]=!0),t}mobileGap(){if(this.spacing)return.75*Number(this.spacing)}render(){return r.qy` 1940 <div 1941 part="caption-card" 1942 class="caption-card${(0,d.H)(this.cardClasses())}" 1943 style="${(0,c.W)(this.cardStyles())}" 1944 > 1945 <div 1946 part="caption-card-inner" 1947 class="caption-card__inner" 1948 > 1949 <div 1950 part="card-media" 1951 class="media" 1952 > 1953 <slot name="media"></slot> 1954 <div 1955 part="card-badge" 1956 class="badge" 1957 > 1958 <slot name="badge"></slot> 1959 </div> 1960 </div> 1961 <div 1962 part="card-caption" 1963 class="caption${(0,d.H)(this.captionClasses())}" 1964 > 1965 <div part="card-caption-inner" class="caption-inner"> 1966 <umg-box 1967 part="caption-content" 1968 exportparts="box,box-content" 1969 class="caption-content" 1970 blendDirection="to-top" 1971 padding=${(0,l.J)(this.padding)} 1972 mobilePadding=${(0,l.J)(this.mobilePadding)} 1973 ?colorBlend="${this.colorBlend}" 1974 fixPadding 1975 > 1976 <umg-vertical-stack 1977 part="caption-stack" 1978 exportparts="vertical-stack" 1979 class="caption-stack" 1980 spacing="${(0,l.J)(this.spacing)}" 1981 mobileSpacing="${(0,l.J)(this.mobileGap())}" 1982 justify="space-between" 1983 > 1984 <slot name="content"></slot> 1985 </umg-vertical-stack> 1986 </umg-box> 1987 </div> 1988 </div> 1989 </div> 1990 <slot name="popover" @slotchange=${this._handleSlotChange}></slot> 1991 </div> 1992 `}};f.styles=(0,g.Z)([h.S,r.AH` 1993 :host { 1994 position: relative; 1995 display: block; 1996 height: 100%; 1997 width: 100%; 1998 } 1999 2000 /** Card */ 2001 .caption-card { 2002 position: relative; 2003 height: 100%; 2004 width: 100%; 2005 overflow: hidden; 2006 } 2007 .caption-card__inner { 2008 height: 100%; 2009 position: relative; 2010 overflow: hidden; 2011 border-radius: var(--umg-border-base-corner-radius); 2012 } 2013 2014 /* Card overlay */ 2015 .caption-card__inner .media::after { 2016 content: ''; 2017 display: block; 2018 height: 100%; 2019 left: 0; 2020 position: absolute; 2021 top: 0; 2022 width: 100%; 2023 z-index: 1; 2024 pointer-events: none; 2025 background-color: var(--umg-color-overlay-background); 2026 border-radius: var(--umg-border-base-corner-radius) var(--umg-border-base-corner-radius) 0 0; 2027 } 2028 2029 /* Standard border */ 2030 .caption-card__inner { 2031 border-width: var(--umg-border-base-width, 0); 2032 border-style: solid; 2033 border-color: var(--umg-color-base-border, rgb(0,0,0,0)); 2034 --umg-color-base-text: var(--umg-color-card-text); 2035 --umg-color-base-background: var(--umg-color-card-background); 2036 } 2037 2038 /* Card padded border */ 2039 .caption-card--border .caption-card__inner { 2040 padding: var(--umg-space-padding, 1rem); 2041 background-color: var(--umg-color-card-background, rgb(240,240,240)); 2042 } 2043 2044 @media screen and (min-width: 30.06rem) { 2045 .caption-card--border.caption-position--over .caption { 2046 padding: var(--umg-space-padding, 1rem); 2047 } 2048 } 2049 @media screen and (max-width: 30rem) { 2050 .caption-card--border.caption-mobile-position--over .caption { 2051 padding: var(--umg-space-padding, 1rem); 2052 } 2053 } 2054 2055 @supports (color: rgb(from white r g b)) { 2056 .caption-card__inner { 2057 border-color: rgb(from var(--umg-color-base-border, rgb(0,0,0)) r g b / alpha); 2058 } 2059 .caption-card__inner .media::after { 2060 background-color: rgb(from var(--umg-color-overlay-background) r g b / calc(alpha * var(--umg-opacity-overlay-background))); 2061 } 2062 .caption-card--border .caption-card__inner { 2063 background-color: rgb(from var(--umg-color-card-background, rgb(240,240,240)) r g b / alpha); 2064 --umg-color-base-background: transparent; 2065 } 2066 } 2067 2068 /** Caption content */ 2069 .caption { 2070 flex: 1; 2071 z-index: 20; 2072 } 2073 .caption umg-vertical-stack ::slotted(umg-button) { 2074 margin-top: auto; 2075 } 2076 2077 /* Card badge */ 2078 .badge { 2079 position: absolute; 2080 top: 1rem; 2081 left: 1rem; 2082 z-index: 1; 2083 letter-spacing: 0.07rem; 2084 pointer-events: none; 2085 } 2086 2087 /** Media content */ 2088 .media { 2089 position: relative; 2090 aspect-ratio: var(--umg-mobile-aspect-ratio); 2091 flex-shrink: 1; 2092 padding: var(--umg-space-caption-card-media-padding); 2093 height: auto; 2094 background-color: rgb(from var(--umg-color-card-background, transparent) r g b / alpha); 2095 } 2096 2097 @media only screen and (min-width: 30.06rem) { 2098 .media { 2099 aspect-ratio: var(--umg-aspect-ratio); 2100 } 2101 } 2102 2103 /* Border corner radius */ 2104 .media { 2105 border-radius: calc(var(--umg-border-base-corner-radius) * 0.7) calc(var(--umg-border-base-corner-radius) * 0.7) 0 0; 2106 overflow: hidden; 2107 } 2108 @media only screen and (min-width: 30.06rem) { 2109 .caption-position--over .caption-inner, 2110 .caption-position--over .media { 2111 border-radius: calc(var(--umg-border-base-corner-radius) * 0.7); 2112 overflow: hidden; 2113 } 2114 } 2115 @media only screen and (max-width: 30rem) { 2116 .caption-mobile-position--over .caption-inner, 2117 .caption-mobile-position--over .media { 2118 border-radius: calc(var(--umg-border-base-corner-radius) * 0.7); 2119 overflow: hidden; 2120 } 2121 } 2122 .caption-inner ::part(box-content) { 2123 border-radius: 0; 2124 } 2125 2126 /* Caption positioning */ 2127 @media only screen and (min-width: 30.06rem) { 2128 .caption--inline .caption-card__inner { 2129 display: flex; 2130 flex-direction: column; 2131 } 2132 .caption-position--under .media { 2133 order: 1; 2134 } 2135 .caption-position--under .caption { 2136 order: 2; 2137 } 2138 } 2139 @media only screen and (max-width: 30rem) { 2140 .caption-mobile--inline .caption-card__inner { 2141 display: flex; 2142 flex-direction: column; 2143 } 2144 .caption-mobile-position--under .media { 2145 order: 1; 2146 } 2147 .caption-mobile-position--under .caption { 2148 order: 2; 2149 } 2150 } 2151 2152 2153 @media only screen and (min-width: 30.06rem) { 2154 .caption-card:not(.caption--inline) .caption { 2155 position: absolute; 2156 top: 0; 2157 left: 0; 2158 height: 100%; 2159 width: 100%; 2160 z-index: 10; 2161 } 2162 .caption-position--over { 2163 height: auto; 2164 aspect-ratio: var(--umg-aspect-ratio); 2165 } 2166 } 2167 @media only screen and (max-width: 30rem) { 2168 .caption-card:not(.caption-mobile--inline) .caption { 2169 position: absolute; 2170 top: 0; 2171 left: 0; 2172 height: 100%; 2173 width: 100%; 2174 z-index: 10; 2175 } 2176 .caption-mobile-position--over { 2177 height: auto; 2178 aspect-ratio: var(--umg-mobile-aspect-ratio); 2179 } 2180 } 2181 2182 /* Caption alignment */ 2183 .caption-card .caption-inner { 2184 display: flex; 2185 height: 100%; 2186 width: 100%; 2187 } 2188 .caption-align--start .caption-inner { 2189 align-items: start; 2190 } 2191 .caption-align--center .caption-inner { 2192 align-items: center; 2193 } 2194 .caption-align--end .caption-inner { 2195 align-items: end; 2196 } 2197 .caption-align--stretch .caption-inner { 2198 align-items: stretch; 2199 } 2200 2201 /* Caption text alignment */ 2202 .caption-justify--start .caption-inner { 2203 justify-content: start; 2204 text-align: left; 2205 } 2206 .caption-justify--center .caption-inner { 2207 justify-content: center; 2208 text-align: center; 2209 } 2210 .caption-justify--end .caption-inner { 2211 justify-content: end; 2212 text-align: right; 2213 } 2214 2215 /* Extended interaction */ 2216 .caption-card.is-button .media { 2217 position: relative; 2218 } 2219 .caption-card.is-button .media::after { 2220 content: ''; 2221 position: absolute; 2222 inset: 0; 2223 z-index: 10; 2224 cursor: pointer; 2225 } 2226 `]),(0,o.C)([(0,a.M)()],f.prototype,"position",void 0),(0,o.C)([(0,a.M)()],f.prototype,"mobilePosition",void 0),(0,o.C)([(0,a.M)()],f.prototype,"align",void 0),(0,o.C)([(0,a.M)()],f.prototype,"justify",void 0),(0,o.C)([(0,a.M)()],f.prototype,"padding",void 0),(0,o.C)([(0,a.M)()],f.prototype,"mobilePadding",void 0),(0,o.C)([(0,a.M)()],f.prototype,"spacing",void 0),(0,o.C)([(0,a.M)({type:Boolean})],f.prototype,"colorBlend",void 0),(0,o.C)([(0,a.M)({type:Boolean})],f.prototype,"border",void 0),(0,o.C)([(0,n.w)()],f.prototype,"_mediaAspectRatio",void 0),(0,o.C)([(0,n.w)()],f.prototype,"_mobileMediaAspectRatio",void 0),(0,o.C)([(0,n.w)()],f.prototype,"_hasPopover",void 0),(0,o.C)([(0,n.w)()],f.prototype,"_cardPopover",void 0),(0,o.C)([(0,n.w)()],f.prototype,"_tabElements",void 0),f=(0,o.C)([(0,s.E)(`${y}-caption-card`)],f)},6235(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(7509),l=i(3720),d=i(1145),c=i(9924),u=i(8698),m=i(2609),h=i(31);i(5421),i(4565);const p=r.AH` 2227 .modal { 2228 display: none; 2229 position: fixed; 2230 top: 0; 2231 left: 0; 2232 bottom: 0; 2233 width: 100%; 2234 z-index: 502; /* over sticky header option and overlay z-index */ 2235 color: var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0))); 2236 background-color: var(--umg-color-modal-background, var(--umg-color-base-background, rgb(255,255,255))); 2237 background-image: var(--umg-image-modal-background); 2238 background-size: cover; 2239 background-repeat: no-repeat; 2240 } 2241 .modal::after { 2242 content: ''; 2243 position: absolute; 2244 inset: 0; 2245 z-index: -1; 2246 background-color: rgb(from var(--umg-color-modal-background) r g b / calc(alpha * var(--umg-opacity-modal-background, 1))); 2247 } 2248 2249 @supports (color: rgb(from white r g b)) { 2250 .modal { 2251 color: rgb(from var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0))) r g b); 2252 background-color: rgb(from var(--umg-color-modal-background, var(--umg-color-base-background, rgb(255,255,255))) r g b / calc(alpha * var(--umg-opacity-modal-background, 1))); 2253 } 2254 } 2255
2256 .modal--visible { 2257 display: block; 2258 } 2259 2260 .modal__inner { 2261 display: flex; 2262 flex-direction: column; 2263 height: 100svh; 2264 overflow-y: scroll; 2265 overflow-x: hidden; 2266 } 2267 2268 @media screen and (min-width: 48.06) { 2269 .modal__inner::-webkit-scrollbar { 2270 width: 0.5rem; 2271 } 2272 .modal__inner::-webkit-scrollbar-track { 2273 background: var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0,0.2))); 2274 } 2275 .modal__inner::-webkit-scrollbar-thumb{ 2276 background: var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0,0.5))); 2277 } 2278 @supports (color: rgb(from white r g b)) { 2279 .modal__inner::-webkit-scrollbar-track { 2280 background: rgb(from var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0))) r g b / 0.2); 2281 } 2282 .modal__inner::-webkit-scrollbar-thumb{ 2283 background: rgb(from var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0))) r g b / 0.5); 2284 } 2285 } 2286 } 2287`,g=r.AH` 2288 .section__header { 2289 position: relative; 2290 display: flex; 2291 align-items: center; 2292 padding: var(--umg-space-16, 1rem) var(--umg-space-24, 1.5rem); 2293 line-height: 1; 2294 } 2295 2296 /* Sticky option */ 2297 .modal-header--sticky .section__header { 2298 position: sticky; 2299 top: 0; 2300 left: 0; 2301 z-index: 100; 2302 width: 100%; 2303 } 2304 2305 /* Center title */ 2306 .section__header .col { 2307 flex: 1; 2308 } 2309 .section__header .col:first-child { 2310 margin-right: auto; 2311 } 2312 .section__header .title { 2313 margin-left: auto; 2314 text-align: center; 2315 } 2316 .section__header .close-button { 2317 margin-left: auto; 2318 text-align: right; 2319 } 2320 2321 /* Icon position */ 2322 .modal-header-icon--left .section__header { 2323 flex-direction: row-reverse; 2324 } 2325 .modal-header-icon--left .section__header .col:first-child { 2326 margin-left: auto; 2327 } 2328 .modal-header-icon--left .section__header .col:last-child { 2329 margin-right: auto; 2330 text-align: left; 2331 } 2332 @media screen and (max-width: 48rem) { 2333 .section__header .title { 2334 text-align: left; 2335 }
2336 .modal-header-icon--left .section__header .title { 2337 text-align: right; 2338 } 2339 } 2340 2341 /* Mobile header */ 2342 @media screen and (max-width: 48rem) { 2343 .modal-header--sticky.modal-header-sticky--bottom .section__header { 2344 position: fixed; 2345 top: initial; 2346 bottom: 0; 2347 z-index: 100; 2348 width: 100%; 2349 } 2350 .section__header { 2351 padding: var(--umg-space-16); 2352 } 2353 .section__header .close-button { 2354 flex: 0; 2355 } 2356 .section__header .title { 2357 --umg-font-heading-scale: 0.6; 2358 } 2359 .section__header .col:first-child { 2360 display: none; 2361 } 2362 } 2363 2364 /** Header colour */ 2365 .section__header { 2366 color: var(--umg-color-modal-text, var(--umg-color-base-text)); 2367 background-color: var(--umg-color-modal-background, var(--umg-color-base-background)); 2368 --umg-color-base-text: var(--umg-color-modal-header-text, var(--umg-color-modal-text)); 2369 --umg-color-button-text: var(--umg-color-modal-header-background, var(--umg-color-base-background)); 2370 --umg-color-button-background: var(--umg-color-modal-header-text, var(--umg-color-modal-text, var(--umg-color-base-text))); 2371 --umg-color-icon-text: var(--umg-color-modal-header-text, , var(--umg-color-modal-text, var(--umg-color-base-text))); 2372 --umg-color-icon-border: var(--umg-color-modal-header-text, var(--umg-color-modal-text, var(--umg-color-base-text))); 2373 --umg-color-icon-background: transparent; 2374 } 2375 2376 @supports (color: rgb(from white r g b)) { 2377 .section__header { 2378 color: rgb(from var(--umg-color-modal-header-text, var(--umg-color-modal-text, var(--umg-color-base-text))) r g b); 2379 background-color: rgb(from var(--umg-color-modal-header-background, var(--umg-color-modal-background, var(--umg-color-base-background))) r g b / alpha); 2380 } 2381 } 2382`,b=r.AH` 2383.section { 2384 display: flex; 2385 flex: 1; 2386 flex-direction: column; 2387 margin: 0 auto; 2388 width: 100%; 2389} 2390 2391.section__inner { 2392 display: flex; 2393 flex-direction: column; 2394 justify-content: center; 2395 align-items: stretch; 2396 width: 100%; 2397 --umg-color-base-text: var(--umg-color-modal-text); 2398 --umg-color-section-background: transparent; 2399 --umg-color-button-text: var(--umg-color-modal-background, var(--umg-color-base-background)); 2400 --umg-color-button-background: var(--umg-color-modal-text, var(--umg-color-base-text)); 2401 --umg-color-icon-text: var(--umg-color-modal-text, var(--umg-color-base-text)); 2402 --umg-color-icon-border: var(--umg-color-modal-text, var(--umg-color-base-text)); 2403 --umg-color-icon-background: transparent; 2404} 2405 2406/* Vertical alignment */ 2407.content-justify--start { 2408 justify-content: start; 2409} 2410.content-justify--center { 2411 justify-content: center; 2412} 2413.content-justify--end { 2414 justify-content: end; 2415} 2416`,v=r.AH` 2417 2418 @media screen and (min-width: 48.06rem) { 2419 .desktop-title { 2420 display: block; 2421 } 2422 .mobile-title { 2423 display: none; 2424 } 2425 2426 } 2427 @media screen and (max-width: 48rem) { 2428 .desktop-title { 2429 display: none; 2430 } 2431 .mobile-title { 2432 display: block; 2433 } 2434 } 2435 2436 /* Maintain centred title */ 2437 .desktop-title, 2438 .mobile-title { 2439 text-align: center; 2440 } 2441`;i(8766);const{prefix:y}=u.W;let f=class extends r.WF{constructor(){super(...arguments),this.visible=!1,this.stickyHeader=!1,this.mobileStickyBottom=!1,this.contentWidth="page-width",this.paddingType="full-bleed",this.mobilePaddingType="full-bleed",this.icon="close",this.buttonPosition="right",this._ownsHistoryEntry=!1,this._ignorePopState=!1,this._handlePopState=()=>{this._ignorePopState?this._ignorePopState=!1:this.visible&&this._ownsHistoryEntry&&(this._ownsHistoryEntry=!1,this._closeModalUI())},this._handleKeyUp=t=>{"Escape"===t.key&&this._closeModal()},this.openModal=()=>{this._openModal()},this.closeModal=()=>{this._closeModal()},this._isNumeric=t=>("number"==typeof t||"string"==typeof t&&""!==t.trim())&&!isNaN(t)}connectedCallback(){window.addEventListener("keyup",this._handleKeyUp),window.addEventListener("popstate",this._handlePopState),super.connectedCallback()}disconnectedCallback(){window.removeEventListener("keyup",this._handleKeyUp),window.removeEventListener("popstate",this._handlePopState),super.disconnectedCallback()}_pushHistoryEntry(){this._ownsHistoryEntry||(window.history.pushState(window.history.state,""),this._ownsHistoryEntry=!0)}_closeModal(){if(!this.visible)return;const t=this._ownsHistoryEntry;this._ownsHistoryEntry=!1,this._closeModalUI(),t&&(this._ignorePopState=!0,window.history.back())}_closeModalUI(){if(!this.visible)return;this._releaseFocus(),this.visible=!1,document.body.removeAttribute("style");const t=new CustomEvent("close-modal",{bubbles:!0,composed:!0});this.dispatchEvent(t)}_openModal(){this.visible||(this._setTabbableElements(),this._setlastActiveElement(),this._trapFocus(),document.body.style.overflow="hidden",this.visible=!0,this._pushHistoryEntry())}_setTabbableElements(){this._tabbableElements||(this._tabbableElements=document.querySelectorAll("umg-header, umg-footer, umg-page, main"))}_setlastActiveElement(){const t=document.activeElement;t&&(this._lastActiveElement=t)}_trapFocus(){this._tabbableElements&&this._tabbableElements.length&&this._tabbableElements.forEac
2441h(t=>{t.setAttribute("inert","")})}_releaseFocus(){this._tabbableElements&&this._tabbableElements.length&&this._tabbableElements.forEach(t=>{t.removeAttribute("inert")}),this._lastActiveElement instanceof HTMLElement&&this._lastActiveElement.focus()}modalClasses(){let t={"modal--visible":this.visible,"modal-header--sticky":this.stickyHeader,"modal-header-sticky--bottom":this.mobileStickyBottom};return"left"===this.buttonPosition&&(t={...t,"modal-header-icon--left":!0}),t}sectionClasses(){let t={};return this.contentWidth&&!this._isNumeric(this.contentWidth)&&(t={...t,["section-inner--"+this.contentWidth]:!0}),this.justifyContent&&(t={...t,["content-justify--"+this.justifyContent]:!0}),t}sectionInnerStyles(){let t={};return this.contentWidth&&this._isNumeric(this.contentWidth)&&(t={...t,"--umg-size-content-max-width":Number(this.contentWidth)/16+"rem"}),this.maxScreenWidth&&(t={...t,"--umg-size-max-width":Number(this.maxScreenWidth)/16+"rem"}),t}render(){return r.qy` 2442 <div 2443 part="modal" 2444 class="modal${(0,l.H)(this.modalClasses())}" 2445 role="dialog" 2446 aria-labelledby="dialog-title" 2447 aria-modal="true" 2448 > 2449 <div part="modal-inner" class="modal__inner"> 2450 <header 2451 part="modal-header" 2452 class="section__header" 2453 > 2454 <div class="col"></div> 2455 <div 2456 part="modal-title" 2457 class="title col" 2458 > 2459 <slot name="title"></slot> 2460 </div> 2461 <div 2462 part="modal-close-button" 2463 class="close-button col" 2464 > 2465 <slot name="close-button"> 2466 <umg-button-icon 2467 part="modal-close-icon" 2468 exportparts="button-icon,icon-container,icon-svg,icon-image" 2469 class="close-modal" 2470 icon="${this.icon}" 2471 size="xlarge" 2472 padding="0" 2473 extendInteraction 2474 @click=${()=>{this._closeModal()}} 2475 > 2476 </umg-button-icon> 2477 </slot> 2478 </div> 2479 </header> 2480 <umg-section 2481 part="modal-section" 2482 exportparts="section" 2483 class="section${(0,l.H)(this.sectionClasses())}" 2484 > 2485 <umg-section-block 2486 part="modal-section-block" 2487 exportparts="section-block" 2488 class="section__inner" 2489 style="${(0,d.W)(this.sectionInnerStyles())}" 2490 paddingTop=${(0,h.J)(this.paddingTop)} 2491 paddingBottom=${(0,h.J)(this.paddingBottom)} 2492 mobilePaddingTop=${(0,h.J)(this.mobilePaddingTop)} 2493 mobilePaddingBottom=${(0,h.J)(this.mobilePaddingBottom)} 2494 paddingType=${this.paddingType} 2495 mobilePaddingType=${this.mobilePaddingType} 2496 width=${this.contentWidth} 2497 > 2498 <slot name="content"></slot> 2499 </umg-section-block> 2500 </umg-section> 2501 </div> 2502 </div> 2503 `}};f.styles=[c.S,p,g,b,v,r.AH` 2504 :host { 2505 display: block; 2506 } 2507 `],(0,o.C)([(0,a.M)({type:Boolean,reflect:!0})],f.prototype,"visible",void 0),(0,o.C)([(0,a.M)({reflect:!0,type:Boolean})],f.prototype,"stickyHeader",void 0),(0,o.C)([(0,a.M)({reflect:!0,type:Boolean})],f.prototype,"mobileStickyBottom",void 0),(0,o.C)([(0,a.M)()],f.prototype,"contentWidth",void 0),(0,o.C)([(0,a.M)({type:Number})],f.prototype,"maxScreenWidth",void 0),(0,o.C)([(0,a.M)()],f.prototype,"justifyContent",void 0),(0,o.C)([(0,a.M)()],f.prototype,"paddingType",void 0),(0,o.C)([(0,a.M)()],f.prototype,"mobilePaddingType",void 0),(0,o.C)([(0,a.M)()],f.prototype,"paddingTop",void 0),(0,o.C)([(0,a.M)()],f.prototype,"paddingBottom",void 0),(0,o.C)([(0,a.M)()],f.prototype,"mobilePaddingTop",void 0),(0,o.C)([(0,a.M)()],f.prototype,"mobilePaddingBottom",void 0),(0,o.C)([(0,a.M)()],f.prototype,"icon",void 0),(0,o.C)([(0,a.M)()],f.prototype,"buttonPosition",void 0),f=(0,o.C)([(0,s.E)(`${y}-media-modal`)],f);const{prefix:_}=u.W;let w=class extends r.WF{constructor(){super(),this.source="",this.title="",this.enableModal=!1,this.showButtonOnHover=!1,this._videoPlaying=!1,this._modalOpen=!1,this.addEventListener("open-modal",this.handleButtonClick),this.addEventListener("close-modal",this.handleButtonClick),this.addEventListener("media-details",this.eventNotifications)}async eventNotifications(t){"media-details"===t.type&&(t.detail.mediaAspectRatio&&(this._mediaAspectRatio=t.detail.mediaAspectRatio.toString()),(t.detail.mobileMediaAspectRatio||t.detail.mediaAspectRatio)&&(this._mobileMediaAspectRatio=t.detail.mobileMediaAspectRatio.toString()))}handleButtonClick(t){"open-modal"===t.type&&(this.enableModal?this._modalOpen=!0:this._videoPlaying=!0),"close-modal"===t.type&&(this._videoPlaying=!1,this._modalOpen=!1)}deferredMediaClasses(){return{"deferred-media":!0,"deferred-media--button-hover":this.showButtonOnHover}}deferredMediaStyles(){let t={};return this._mediaAspectRatio&&(t={...t,"--umg-aspect-ratio":this._mediaAspectRatio}),this._mobileMediaAspectRatio?t={...t,"--umg-mobile-aspect-ratio":this._mobileMediaAspectRatio}:this._mediaAspectRatio&&(t={...t,"--umg-mobile-aspect-ratio":this._mediaAspectRatio}),t}coverTemplate(){return r.qy` 2508 <slot name="image"></slot> 2509 <div class="deferred-media__play"> 2510 <slot name="media-play"> 2511 <umg-button-icon 2512 part="deferred-play-button" 2513 exportparts="button-icon,icon-container,icon-svg,icon-image" 2514 clickAction="open-modal" 2515 type="button" 2516 icon="play" 2517 size="3xlarge" 2518 label="Click to play a video" 2519 extendInteraction 2520 ?border=${!0} 2521 > 2522 </umg-button-icon> 2523 </slot> 2524 </div> 2525 `}createModal(){if(this.enableModal)return r.qy` 2526 <umg-media-modal 2527 part="media-modal" 2528 layout="single" 2529 ?visible=${this._modalOpen} 2530 > 2531 ${this.renderVideoInPopup()} 2532 </umg-media-modal> 2533 `}videoTemplate(){return r.qy` 2534 <div 2535 part="video-container" 2536 class="video-container" 2537 slot="content" 2538 > 2539 <iframe 2540 class="video-holder__item" 2541 src="${this.source}" 2542 title="${this.title}" 2543 allow="autoplay; fullscreen; picture-in-picture;" 2544 allowfullscreen 2545 ></iframe> 2546 </div> 2547 `}renderVideoInPopup(){if(this._modalOpen)return r.qy` 2548 ${this.videoTemplate()} 2549 `}renderVideoInBlock(){return r.qy` 2550 ${this._videoPlaying?this.videoTemplate():this.coverTemplate()} 2551 `}render(){return r.qy` 2552 <div 2553 part="deferred-media" 2554 class="${(0,l.H)(this.deferredMediaClasses())}" 2555 style="${(0,d.W)(this.deferredMediaStyles())}" 2556 ?enableModal=${this.enableModal} 2557 > 2558 <div class="deferred-media__image"> 2559 ${this.renderVideoInBlock()} 2560 </div> 2561 ${this.createModal()} 2562 </div> 2563 `}};w.styles=(0,m.Z)([c.S,r.AH` 2564 .deferred-media { 2565 width: 100%; 2566 } 2567 2568 /* Adapt banner to media height */ 2569 .deferred-media__image { 2570 position: relative; 2571 width: 100%; 2572 aspect-ratio: var(--umg-mobile-aspect-ratio); 2573 height: auto; 2574 } 2575 2576 @media only screen and (min-width: 30.06rem) { 2577 .deferred-media__image { 2578 aspect-ratio: var(--umg-aspect-ratio); 2579 } 2580 } 2581 2582 .deferred-media__play { 2583 position: absolute; 2584 inset: 0; 2585 display: flex; 2586 align-items: center; 2587 justify-content: center; 2588 z-index: 100; 2589 --umg-space-padding: 1.5rem; 2590 --umg-border-base-corner-radius: 3rem; 2591 } 2592 .video-container { 2593 height: 0; 2594 padding-bottom: 56.25%; 2595 position: relative; 2596 width: 100%; 2597 } 2598 .video-holder__item { 2599 border: 0; 2600 height: 100%; 2601 inset: 0; 2602 position: absolute; 2603 width: 100%; 2604 } 2605 .deferred-media--button-hover .deferred-media__play { 2606 opacity: 0; 2607 background-color: rgb(0,0,0,0.2); 2608 transition: opacity 0.3s; 2609 } 2610 .deferred-media--button-hover .deferred-media__play:hover { 2611 opacity: 1; 2612 } 2613 `]),(0,o.C)([(0,a.M)({type:String})],w.prototype,"source",void 0),(0,o.C)([(0,a.M)({type:String})],w.prototype,"title",void 0),(0,o.C)([(0,a.M)({type:Boolean})],w.prototype,"enableModal",void 0),(0,o.C)([(0,a.M)({type:Boolean})],w.prototype,"showButtonOnHover",void 0),(0,o.C)([(0,n.w)()],w.prototype,"_mediaAspectRatio",void 0),(0,o.C)([(0,n.w)()],w.prototype,"_mobileMediaAspectRatio",void 0),(0,o.C)([(0,n.w)()],w.prototype,"_videoPlaying",void 0),(0,o.C)([(0,n.w)()],w.prototype,"_modalOpen",void 0),w=(0,o.C)([(0,s.E)(`${_}-deferred-media`)],w)},5840(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(3720),n=i(1145),l=i(9563),d=i(1895);function c(t,e,i){return new Promise(o=>{if(i?.duration===1/0)throw new Error("Promise-based animations must be finite.");const r=t.animate(e,{...i,duration:u()?0:i.duration});r.addEventListener("cancel",o,{once:!0}),r.addEventListener("finish",o,{once:!0})})}function u(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function m(t){return Promise.all(t.getAnimations().map(t=>new Promise(e=>{t.cancel(),requestAnimationFrame(e)})))}var h=i(9924),p=i(8698),g=i(2609);class b{constructor(){this.groups=new Map,this.hosts=new Set,this.groupsWithOpenDisclosures=new Set,this.outsideClickHandler=null}static getInstance(){return b.instance||(b.instance=new b),b.instance}hostConnected(){1===this.hosts.size&&this.setupGlobalListeners()}hostDisconnected(){1===this.hosts.size&&this.cleanupGlobalListeners()}addHost(t){this.hosts.add(t),t.addController(this)}removeHost(t){this.hosts.delete(t),t.removeController?.(this)}registerDisclosure(t,e){let i=this.groups.get(e);i||(i={disclosures:new Set,policy:{mode:"exclusive"}},this.groups.set(e,i)),i.disclosures.add(t),this.requestUpdateAll()}unregisterDisclosure(t,e){const i=this.groups.get(e);i&&(i.disclosures.delete(t),0===i.disclosures.size&&(this.groups.delete(e),this.groupsWithOpenDisclosures.delete(e)),this.requestUpdateAll())}async notifyDisclosureOpening(t,e){const i=this.groups.get(e);if(!i)return;const o=[];
2613if("exclusive"===i.policy.mode)i.disclosures.forEach(e=>{e!==t&&e.getDisclosureOpenState()&&o.push(e.disclosureClose())});else if("multi-select"===i.policy.mode&&i.policy.maxOpen){const t=Array.from(i.disclosures).filter(t=>t.getDisclosureOpenState());t.length>=i.policy.maxOpen&&o.push(t[0].disclosureClose())}await Promise.all(o),this.setupOutsideClickListener(e),this.requestUpdateAll()}notifyDisclosureClosing(t,e){const i=this.groups.get(e);if(!i)return;Array.from(i.disclosures).some(t=>t.getDisclosureOpenState())||this.cleanupOutsideClickListener(e),this.requestUpdateAll()}setGroupPolicy(t,e){const i=this.groups.get(t);i?i.policy=e:this.groups.set(t,{disclosures:new Set,policy:e}),this.requestUpdateAll()}getGroupDisclosures(t){return this.groups.get(t)?.disclosures}closeAllInGroup(t){const e=this.groups.get(t);e&&(e.disclosures.forEach(t=>{t.getDisclosureOpenState()&&t.disclosureClose()}),this.cleanupOutsideClickListener(t),this.requestUpdateAll())}getGroupStats(t){const e=this.groups.get(t);if(!e)return null;return{total:e.disclosures.size,open:Array.from(e.disclosures).filter(t=>t.getDisclosureOpenState()).length}}hasGroup(t){return this.groups.has(t)}requestUpdateAll(){this.hosts.forEach(t=>{t.requestUpdate()})}setupOutsideClickListener(t){this.groupsWithOpenDisclosures.has(t)||(this.groupsWithOpenDisclosures.add(t),1!==this.groupsWithOpenDisclosures.size||this.outsideClickHandler||(this.outsideClickHandler=this._handleOutsideClick.bind(this),window.addEventListener("click",this.outsideClickHandler,!0)))}cleanupOutsideClickListener(t){this.groupsWithOpenDisclosures.delete(t),0===this.groupsWithOpenDisclosures.size&&this.outsideClickHandler&&(window.removeEventListener("click",this.outsideClickHandler,!0),this.outsideClickHandler=null)}_handleOutsideClick(t){this.groupsWithOpenDisclosures.forEach(e=>{const i=this.groups.get(e);if(i){Array.from(i.disclosures).some(e=>t.composedPath().includes(e)||e.contains(t.target))||this.closeAllInGroup(e)}})}setupGlobalListeners(){}cleanupGlobalListeners(){this.outsideClickHandler&&(window.removeEventListener("click",this.outsideClickHandler,!0),this.outsideClickHandler=null),this.groupsWithOpenDisclosures.clear()}}const{prefix:v}=p.W;let y=class extends r.WF{constructor(){super(...arguments),this.direction="down",this.mobileDirectionInverse=!1,this.overlay=!1,this.summaryWidth="fit-content",this.detailsWidth="fit-content",this.justify="start",this.iconPosition="right",this.iconAnimation="flip",this.border=!1,this.open=!1,this.controller=b.getInstance(),this.isAnimating=!1,this.lastInteractionWasKeyboard=!1,this.disclosureOpen=async()=>{for(this.open=!0,await new Promise(t=>{requestAnimationFrame(()=>t())});this.isAnimating;)await new Promise(t=>{requestAnimationFrame(()=>t())})},this.disclosureClose=async()=>{for(this.open=!1,await new Promise(t=>{requestAnimationFrame(()=>t())});this.isAnimating;)await new Promise(t=>{requestAnimationFrame(()=>t())})},this.getDisclosureOpenState=()=>this.open,this._handleKeyDown=()=>{this.lastInteractionWasKeyboard=!0},this._handleMouseDown=()=>{this.lastInteractionWasKeyboard=!1},this._handleTouchStart=()=>{this.lastInteractionWasKeyboard=!1}}connectedCallback(){super.connectedCallback(),this.groupId&&(this.controller.addHost(this),this._registerWithGroup()),document.addEventListener("keydown",this._handleKeyDown,!0),document.addEventListener("mousedown",this._handleMouseDown,!0),document.addEventListener("touchstart",this._handleTouchStart,!0)}disconnectedCallback(){super.disconnectedCallback(),this.currentGroupId&&this.controller.unregisterDisclosure(this,this.currentGroupId),this.groupId&&this.controller.removeHost(this),document.removeEventListener("keydown",this._handleKeyDown,!0),document.removeEventListener("mousedown",this._handleMouseDown,!0),document.removeEventListener("touchstart",this._handleTouchStart,!0),this.currentGroupId=void 0}_registerWithGroup(){this.groupId&&(this.currentGroupId=this.groupId,this.controller.registerDisclosure(this,this.groupId))}_handleGroupIdChange(){this.currentGroupId&&(this.controller.unregisterDisclosure(this,this.currentGroupId),this.currentGroupId=void 0),this.groupId?(this.controller.addHost(this),this._registerWithGroup()):this.controller.removeHost(this)}async firstUpdated(){this.open&&this._detailsContent?(this._detailsContent.style.height="0",this._detailsContent.style.overflowY="hidden",await new Promise(t=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{t()})})}),this.open&&this._detailsContent&&await this._startOpeningAnimation()):this._detailsContent&&(this._detailsContent.style.overflowY="hidden")}async _startOpeningAnimation(){if(!this._drawer||!this._detailsContent)return;if(await m(this._detailsContent),this._details.setAttribute("open",""),this._detailsContent.style.height="0",this._detailsContent.style.opacity="0",this._detailsContent.style.overflowY="hidden",await new Promise(t=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{t()})})}),!this.open||!this._detailsContent)return void(this.isAnimating=!1);const t=[{height:"0",opacity:"0"},{height:`${this._detailsContent.scrollHeight}px`,opacity:"1"}];await c(this._detailsContent,t,{duration:100,easing:"linear"}),this._detailsContent.style.height="auto",this._detailsContent.style.opacity="1",this._detailsContent.style.overflowY="auto",this.isAnimating=!1}async _startClosingAnimation(){if(!this._drawer||!this._detailsContent)return;await m(this._detailsContent);const t=this._detailsContent.scrollHeight;this._detailsContent.style.height=`${t}px`,this._detailsContent.style.overflowY="auto",await new Promise(t=>{requestAnimationFrame(()=>t())});const e=[{height:`${t}px`,opacity:"1"},{height:"0",opacity:"0"}];await c(this._detailsContent,e,{duration:200,easing:"linear"}),this._detailsContent.style.height="0",this._detailsContent.style.opacity="0",this._detailsContent.style.overflowY="hidden",this._details.removeAttribute("open"),this.isAnimating=!1}updated(t){if(t.has("groupId")&&this._handleGroupIdChange(),t.has("open"))if(this.open?this._details.setAttribute("open",""):this._details.removeAttribute("open"),!0===this.open){if(this.isAnimating)return;this.isAnimating=!0,this.currentGroupId?this.controller.notifyDisclosureOpening(this,this.currentGroupId).then(()=>{this.open?this._startOpeningAnimation():this.isAnimating=!1}):this._startOpeningAnimation(),this.dispatchEvent(new CustomEvent("umg-disclosure:opened",{detail:{target:this},bubbles:!0,composed:!0}))}else if(!1===this.open){if(this.isAnimating)return;this.isAnimating=!0,this.currentGroupId&&this.controller.notifyDisclosureClosing(this,this.currentGroupId),this._startClosingAnimation(),this.dispatchEvent(new CustomEvent("umg-disclosure:closed",{detail:{target:this},bubbles:!0,composed:!0}))}}_summaryClick(t){t.preventDefault(),this.open=!this.open}summaryClasses(){const t={};
2613return t["disclosure__summary--icon-"+this.iconAnimation]=!0,t["disclosure__summary--justify-"+this.justify]=!0,t["disclosure__summary--"+this.summaryWidth]=!0,t["disclosure__summary--icon-position-"+this.iconPosition]=!0,t}drawerClasses(){const t={};return t["disclosure__drawer--overlay"]=this.overlay,t["disclosure__drawer--"+this.detailsWidth]=!0,this.align&&(t[`disclosure__drawer--align-${this.align}`]=!0),t}drawerStyles(){let t={},e=100;return"down"!==this.direction&&"from-left"!==this.direction||(e=-100),t={...t,"--umg-animation-disclosure-origin":e+"%"},t=this.mobileDirectionInverse?{...t,"--umg-animation-disclosure-origin-mobile":-1*e+"%"}:{...t,"--umg-animation-disclosure-origin-mobile":e+"%"},t}contentClasses(){const t={};return t["disclosure__content--border"]=this.border,"from-left"===this.direction||"from-right"===this.direction?t["open--horizontal"]=!0:"up"!==this.direction&&"down"!==this.direction||(t["open--vertical"]=!0),t}_handleFocusIn(t){if(this.lastInteractionWasKeyboard){t.composedPath()[1].classList.add("focus-visible")}}_handleFocusOut(t){t.composedPath()[1].classList.remove("focus-visible")}render(){const t="pin-left"===this.iconPosition&&"center"===this.justify||"pin-right"===this.iconPosition&&"center"===this.justify?r.qy`<div class="summary-centering-pin"></div>`:r.s6;return r.qy` 2614 <details 2615 part="disclosure" 2616 class="disclosure__details" 2617 @focusin=${this._handleFocusIn} 2618 @focusout=${this._handleFocusOut} 2619 > 2620 <summary 2621 part="disclosure-summary" 2622 class="disclosure__summary${(0,a.H)(this.summaryClasses())}" 2623 aria-label="Main Menu" 2624 role="button" 2625 aria-expanded=${this.open} 2626 @click=${this._summaryClick} 2627 > 2628 <div class="disclosure__summary-content"> 2629 ${t} 2630 <div class="summary__content"> 2631 <slot name="summary"></slot> 2632 </div> 2633 <div class="summary__icon"> 2634 <slot name="icon"></slot> 2635 </div> 2636 </div> 2637 </summary> 2638 <div 2639 part="disclosure-drawer" 2640 class="disclosure__drawer${(0,a.H)(this.drawerClasses())}" 2641 style="${(0,n.W)(this.drawerStyles())}" 2642 aria-hidden=${!this.open} 2643 > 2644 <div 2645 part="disclosure-content" 2646 class="disclosure__content${(0,a.H)(this.contentClasses())}" 2647 aria-hidden=${!this.open} 2648 > 2649 <slot name="content"></slot> 2650 </div> 2651 </div> 2652 </details> 2653 `}};y.styles=(0,g.Z)([h.S,r.AH` 2654 :host { 2655 display: block; 2656 } 2657 2658 :host([overlay]) { 2659 position: relative; 2660 } 2661 2662 ::slotted(*[slot=summary]) { 2663 flex: 0 1 auto; 2664 } 2665 2666 ::slotted(*[slot=icon]) { 2667 transition: transform 0.2s ease; 2668 } 2669 2670 .disclosure__details { 2671 overflow: hidden; 2672 border-style: solid; 2673 border-radius: var(--umg-border-disclosure-corner-radius, 0); 2674 border-width: var(--umg-border-disclosure-width, 0.0625em); 2675 border-color: rgb(from var(--umg-color-disclosure-border, rgb(0, 0, 0, 0)) r g b / alpha); 2676 padding: var(--umg-space-disclosure-padding, 0.5rem); 2677 } 2678 2679 /** Summary */ 2680 .disclosure__details summary::-webkit-details-marker { 2681 display:none; 2682 } 2683 2684 .disclosure__summary { 2685 cursor: pointer; 2686 list-style: none; 2687 padding: var(--umg-space-summary-padding, 0.5rem); 2688 color: rgb(from var(--umg-color-summary-text, var(--umg-color-base-text, rgb(0,0,0))) r g b); 2689 background-color: rgb(from var(--umg-color-summary-background, var(--umg-color-base-background, rgb(255, 255, 255))) r g b / alpha); 2690 border-style: solid; 2691 border-width: var(--umg-border-summary-width, 0.0625em); 2692 border-color: rgb(from var(--umg-color-summary-border, rgb(0,0,0,0)) r g b / alpha); 2693 border-radius: var(--umg-border-base-corner-radius, 0); 2694 --umg-color-base-text: var(--umg-color-summary-text, inherit); 2695 } 2696 2697 .disclosure__summary-content { 2698 display: flex; 2699 align-items: center; 2700 justify-content: start; 2701 gap: var(--umg-space-8, 0.5rem); 2702 } 2703 2704 /** Summary width */ 2705 .disclosure__summary--fit-content { 2706 width: fit-content; 2707 } 2708 2709 .disclosure__summary--fill { 2710 width: 100%; 2711 } 2712 2713 /** Summary content alignment */ 2714 .disclosure__summary--justify-start .disclosure__summary-content { 2715 justify-content: start; 2716 } 2717 2718 .disclosure__summary--justify-center .disclosure__summary-content { 2719 justify-content: center; 2720 } 2721 2722 .disclosure__summary--justify-end .disclosure__summary-content { 2723 justify-content: end; 2724 } 2725 2726 /* Summary icon position */ 2727 .disclosure__summary--icon-position-left .disclosure__summary-content, 2728 .disclosure__summary--icon-position-pin-left .disclosure__summary-content { 2729 flex-direction: row-reverse; 2730 } 2731 2732 .disclosure__summary--icon-position-pin-right .summary-centering-pin { 2733 flex: 1; 2734 margin-right: auto; 2735 } 2736 2737 .disclosure__summary--icon-position-pin-left .summary-centering-pin { 2738 flex: 1; 2739 margin-left: auto; 2740 } 2741 2742 /* Icon pinned Left */ 2743 .disclosure__summary--icon-position-pin-left .summary__icon { 2744 flex: 1; 2745 margin-right: auto; 2746 } 2747 2748 .disclosure__summary--icon-position-pin-left.disclosure__summary--justify-start .summary__icon { 2749 flex: 0; 2750 margin-right: unset; 2751 } 2752 2753 .disclosure__summary--icon-position-pin-left.disclosure__summary--justify-center .summary__content, 2754 .disclosure__summary--icon-position-pin-right.disclosure__summary--justify-center .summary__content { 2755 flex: 0 0 auto; 2756 margin-left: auto; 2757 margin-right: auto; 2758 } 2759 2760 /* Icon pinned Right */ 2761 .disclosure__summary--icon-position-pin-right .disclosure__summary-content .summary__icon { 2762 flex: 1; 2763 margin-left: auto; 2764 } 2765 2766 .disclosure__summary--icon-position-pin-right .disclosure__summary-content .summary__icon ::slotted(*[slot=icon]) { 2767 display: block; 2768 width: fit-content; 2769 margin-left: auto; 2770 } 2771 2772 .disclosure__summary--icon-position-pin-right.disclosure__summary--justify-end .summary__icon { 2773 flex: 0 0 auto; 2774 margin-left: unset; 2775 } 2776 2777 /** Drawer */ 2778 .disclosure__drawer { 2779 min-width: fit-content; 2780 overflow: hidden; 2781 } 2782
2783 .disclosure__drawer:not(.disclosure__drawer--overlay) { 2784 margin-top: var(--umg-space-disclosure-distance, 1rem) 2785 } 2786 2787 .disclosure__drawer--overlay { 2788 position: absolute; 2789 top: var(--umg-space-disclosure-distance, 2.5rem); 2790 left: 0; 2791 z-index: 200; 2792 } 2793 2794 .disclosure__drawer--overlay.disclosure__drawer--align-left { 2795 left: -0.5rem 2796 } 2797 2798 .disclosure__drawer--overlay.disclosure__drawer--align-right { 2799 left: auto; 2800 right: -0.5rem 2801 } 2802 2803 @media screen and (min-width: 48.06rem) { 2804 .disclosure__drawer--overlay.disclosure__drawer--align-right:not(.disclosure__drawer--fill) .disclosure__content { 2805 box-shadow: -0.250rem 0.250rem 0.5rem 0 rgb(from var(--umg-color-base-shadow, rgb(0,0,0,0)) r g b / alpha); 2806 margin: 0 0 0.750rem 0.750rem; 2807 } 2808 } 2809 2810 @media screen and (min-width: 48.06rem) { 2811 .disclosure__drawer--overlay.disclosure__drawer--align-left:not(.disclosure__drawer--fill) .disclosure__content { 2812 box-shadow: 0.250rem 0.250rem 0.5rem 0 rgb(from var(--umg-color-base-sh
2812adow, rgb(0,0,0,0)) r g b / alpha); 2813 margin: 0 0.750rem 0.750rem 0; 2814 } 2815 } 2816 2817 .disclosure__drawer--fill.disclosure__drawer--overlay { 2818 right: 0; 2819 } 2820 2821 .disclosure__drawer--fit-content { 2822 width: fit-content; 2823 } 2824 .disclosure__drawer--fill { 2825 width: 100%; 2826 } 2827 .disclosure__drawer--auto { 2828 width: auto; 2829 } 2830 2831 /* Disclosure content */ 2832 .disclosure__content { 2833 border-radius: var(--umg-border-base-corner-radius); 2834 overflow: hidden; 2835 border-style: solid; 2836 border-width: var(--umg-border-details-width, 0.0625em); 2837 border-color: rgb(from var(--umg-color-details-border, var(--umg-color-base-border, rgb(0,0,0,0))) r g b / alpha); 2838 padding: var(--umg-space-details-padding, 0.5rem); 2839 color: rgb(from var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0))) r g b); 2840 background-color: rgb(from var(--umg-color-details-background, var(--umg-color-base-background, rgb(255, 255, 255))) r g b); 2841 height: 0; 2842 min-height: 0; 2843 2844 --umg-color-base-text: var(--umg-color-details-text); 2845 --umg-color-base-background: var(--umg-color-details-background); 2846 } 2847 2848 2849 /* Toggle state */ 2850 .disclosure__details[open] .disclosure__summary--icon-flip ::slotted(*[slot=icon]) { 2851 transform: rotate(180deg); 2852 } 2853 2854 /* Content overflow scrollbar */ 2855 .disclosure__content::-webkit-scrollbar {
2856 width: 0.125rem; 2857 } 2858 .disclosure__content::-webkit-scrollbar-track { 2859 background: var(--umg-color-base-text, rgb(0,0,0,0.05)); 2860 border-radius: var(--umg-border-radius-30); 2861 } 2862 .disclosure__content::-webkit-scrollbar-thumb { 2863 background: var(--umg-color-base-text, rgb(0,0,0,0.1)); 2864 border-radius: var(--umg-border-radius-30); 2865 } 2866 @supports (color: rgb(from white r g b)) { 2867 .disclosure__content::-webkit-scrollbar-track { 2868 background: rgb(from var(--umg-color-base-text, rgb(0,0,0,0.05)) r g b / 0.05); 2869 } 2870 .disclosure__content::-webkit-scrollbar-thumb { 2871 background: rgb(from var(--umg-color-base-text, rgb(0,0,0,0.1)) r g b / 0.1); 2872 } 2873 } 2874 `]),(0,o.C)([(0,l.M)()],y.prototype,"direction",void 0),(0,o.C)([(0,l.M)({type:Boolean})],y.prototype,"mobileDirectionInverse",void 0),(0,o.C)([(0,l.M)({type:Boolean})],y.prototype,"overlay",void 0),(0,o.C)([(0,l.M)()],y.prototype,"summaryWidth",void 0),(0,o.C)([(0,l.M)()],y.prototype,"detailsWidth",void 0),(0,o.C)([(0,l.M)()],y.prototype,"justify",void 0),(0,o.C)([(0,l.M)()],y.prototype,"iconPosition",void 0),(0,o.C)([(0,l.M)()],y.prototype,"iconAnimation",void 0),(0,o.C)([(0,l.M)({type:Boolean})],y.prototype,"border",void 0),(0,o.C)([(0,l.M)()],y.prototype,"align",void 0),(0,o.C)([(0,l.M)({type:Boolean,reflect:!0})],y.prototype,"open",void 0),(0,o.C)([(0,l.M)()],y.prototype,"groupId",void 0),(0,o.C)([(0,d.P)("summary")],y.prototype,"_summary",void 0),(0,o.C)([(0,d.P)("details")],y.prototype,"_details",void 0),(0,o.C)([(0,d.P)(".disclosure__content")],y.prototype,"_detailsContent",void 0),(0,o.C)([(0,d.P)(".disclosure__drawer")],y.prototype,"_drawer",void 0),y=(0,o.C)([(0,s.E)(`${v}-disclosure`)],y)},1849(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(3720),l=i(1145),d=i(31),c=i(9924),u=i(8698),m=i(2609),h=i(7621);class p{constructor(t,...e){this.slotNames=[],this.handleSlotChange=t=>{const e=t.target;(this.slotNames.includes("[default]")&&!e.name||e.name&&this.slotNames.includes(e.name))&&this.host.requestUpdate()},(this.host=t).addController(this),this.slotNames=e}hasDefaultSlot(){return[...this.host.childNodes].some(t=>
2874{if(t.nodeType===t.TEXT_NODE&&""!==t.textContent.trim())return!0;if(t.nodeType===t.ELEMENT_NODE){const e=t;if("umg-visually-hidden"===e.tagName.toLowerCase())return!1;if(!e.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(t){return null!==this.host.querySelector(`:scope > [slot="${t}"]`)}test(t){return"[default]"===t?this.hasDefaultSlot():this.hasNamedSlot(t)}hostConnected(){this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange)}}i(9976),i(5840),i(4630);const{prefix:g}=u.W;let b=class extends r.WF{constructor(){super(...arguments),this.as="table",this.ticketsAs="list",this.ticketsLabel="Tickets",this.divider=!1,this.centerContent=!1,this.mobileCenterContent=!1,this.hasSlotController=new p(this,"ticket-links","link","rsvp-link")}itemClasses(){return{"event-table__item--divider":this.divider,"event-table--grid":"grid"===this.as,"event-table--center-content":this.centerContent,"event-table-center-content":this.mobileCenterContent}}ticketDropdownClasses(){return{"event-table__ticket-dropdown":!0,"event-table__ticket-dropdown--floating":"floating-dropdown"===this.ticketsAs,"event-table__ticket-dropdown--inline":"inline-dropdown"===this.ticketsAs}}render(){const t=this.hasSlotController.test("link"),e=this.hasSlotController.test("ticket-links"),i=this.hasSlotController.test("rsvp-link");return r.qy` 2875 <div 2876 part="event-item" 2877 class="event-table__item${(0,n.H)(this.itemClasses())}" 2878 role="row" 2879 > 2880 <div 2881 part="event-date" 2882 class="event-table__date" 2883 > 2884 <slot name="date"></slot> 2885 </div> 2886 <div 2887 part="event-content" 2888 class="event-table__content" 2889 > 2890 <slot name="content"></slot> 2891 </div> 2892 ${t?r.qy` 2893 <div part="event-link" class="event-table__single-link"> 2894 <slot name="link"></slot> 2895 </div> 2896 `:r.s6} 2897 ${i?r.qy` 2898 <div part="event-rsvp" class="event-table__rsvp-link"> 2899 <slot name="rsvp-link"></slot> 2900 </div> 2901 `:r.s6} 2902 ${e?r.qy` 2903 <div part="event-links" class="event-table__ticket-list"> 2904 ${"list"===this.ticketsAs?r.qy` 2905 <umg-button-group 2906 part="event-links" 2907 exportparts="link-group" 2908 class="event-table__ticket-list" 2909 spacing="none" 2910 justify="${this.centerContent?"center":""}" 2911 > 2912 <slot name="ticket-links"></slot> 2913 </umg-button-group> 2914 `:"floating-dropdown"===this.ticketsAs||"inline-dropdown"===this.ticketsAs?r.qy` 2915 <umg-disclosure 2916 part="event-ticket-dropdown" 2917 class=${(0,n.H)(this.ticketDropdownClasses())} 2918 groupId="event-table-ticket-dropdown" 2919 summaryWidth="match-details" 2920 detailsWidth="fill" 2921 justify="center" 2922 iconPosition="pin-right" 2923 > 2924 <div slot="summary"> 2925 <umg-text 2926 as="span" 2927 variant="bodySm" 2928 fontWeight="medium" 2929 spacing="loose" 2930 > 2931 ${this.ticketsLabel} 2932 </umg-text> 2933 </div> 2934 <umg-icon 2935 slot="icon" 2936 icon="chevron-down" 2937 size="xsmall" 2938 > 2939 </umg-icon> 2940 <umg-button-group slot="content" spacing="none" stack> 2941 <slot name="ticket-links"></slot> 2942 </umg-button-group> 2943 </umg-disclosure> 2944 `:r.s6} 2945 </div> 2946 `:r.s6} 2947 </div> 2948 `}};b.styles=(0,m.Z)([c.S,r.AH` 2949 .event-table__item { 2950 display: flex; 2951 gap: var(--umg-space-event-table-gap, 1rem); 2952 width: 100%; 2953 height: 100%; 2954 } 2955 @media only screen and (max-width: 48rem) { 2956 .event-table__item { 2957 flex-direction: column; 2958 gap: var(--umg-space-event-table-mobile-gap, 0.5rem); 2959 } 2960 } 2961 2962 /* Grid layout */ 2963 .event-table__item.event-table--grid { 2964 gap: var(--umg-space-event-table-grid-gap, 0.75rem); 2965 flex-direction: column; 2966 justify-content: stretch; 2967 } 2968 2969 .event-table--grid.event-table--center-content { 2970 text-align: center; 2971 } 2972 2973 /* Content */ 2974 .event-table__content { 2975 flex: 1 0 auto; 2976 } 2977 2978 .event-table__rsvp-link { 2979 flex: 0; 2980 min-width: var(--umg-size-buttons-width, 12rem); 2981 } 2982 2983 .event-table__single-link { 2984 display: flex; 2985 flex: 0; 2986 gap: var(--umg-space-event-links-gap, 1rem); 2987 } 2988 2989 .event-table__ticket-list { 2990 flex: 0; 2991 position: relative; 2992 min-width: var(--umg-size-buttons-width, 12rem); 2993 } 2994 2995 .event-table__ticket-dropdown { 2996 --umg-space-disclosure-distance: 0; 2997 --umg-color-base-border: transparent; 2998 min-width: var(--umg-size-buttons-width, 12rem); 2999 } 3000 3001 .event-table--grid .event-table__rsvp-link, 3002 .event-table--grid .event-table__ticket-list, 3003 .event-table__ticket-dropdown { 3004 min-width: 100%; 3005 } 3006 3007 .event-table__item.event-table--grid .event-table__ticket-dropdown--floating { 3008 position: absolute; 3009 top: 0; 3010 right: 0; 3011 left: 0; 3012 z-index: 1; 3013 } 3014 .event-table__item.event-table--grid .event-table__ticket-dropdown--floating[open] { 3015 z-index: 2; 3016 } 3017 3018 @media (min-width: 48rem) { 3019 .event-table__ticket-dropdown--floating { 3020 position: absolute; 3021 top: 0; 3022 right: 0; 3023 left: 0; 3024 z-index: 1; 3025 } 3026 .event-table__ticket-dropdown--floating[open] { 3027 z-index: 2; 3028 } 3029 } 3030 3031 @media (max-width: 47.99rem) { 3032 .event-table__rsvp-link { 3033 margin-top: var(--umg-space-16, 1rem); 3034 } 3035 } 3036 3037 /* Divider */ 3038 .event-table__item--divider { 3039 border-bottom: 1px solid var(--umg-color-event-divider, var(--umg-color-section-text, rgb(180,180,180, var(--umg-opacity-divider-bg, 1)))); 3040 padding-bottom: var(--umg-space-grid-vertical-desktop, 1.5rem); 3041 } 3042 3043 .event-table__item--divider.event-table__grid { 3044 border-left: 1px solid var(--umg-color-event-divider, var(--umg-color-section-text, rgb(180,180,180, var(--umg-opacity-divider-bg, 1)))); 3045 padding-left: var(--umg-space-20, 1.25rem); 3046 } 3047 @media only screen and (max-width: 48rem) { 3048 .event-table__item--divider { 3049 padding-bottom: var(--umg-space-grid-vertical-mobile, 0.5rem); 3050 } 3051 } 3052 `]),(0,o.C)([(0,h.MZ)()],b.prototype,"as",void 0),(0,o.C)([(0,h.MZ)()],b.prototype,"ticketsAs",void 0),(0,o.C)([(0,h.MZ)()],b.prototype,"ticketsLabel",void 0),(0,o.C)([(0,h.MZ)({type:Boolean})],b.prototype,"divider",void 0),(0,o.C)([(0,h.MZ)({type:Boolean})],b.prototype,"centerContent",void 0),(0,o.C)([(0,h.MZ)({type:Boolean})],b.prototype,"mobileCenterContent",void 0),b=(0,o.C)([(0,s.E)(`${g}-event`)],b);i(4742);const{prefix:v}=u.W;let y=class extends r.WF{constructor(){super(...arguments),this.as="table",this.divider=!1,this.gridColumns=4,this.mobileGridColumns=1,this.fill=!1}tableClasses(){return{"event-table--divider":this.divider}}tableStyles(){let t={};return this.spacing&&(t={...t,"--umg-space-grid-horizontal-desktop":Number(this.spacing)/16+"rem","--umg-space-grid-vertical-desktop":Number(this.spacing)/16+"rem"}),this.mobileSpacing?t={...t,"--umg-space-grid-horizontal-mobile":Number(this.mobileSpacing)/16+"rem","--umg-space-grid-vertical-mobile":Number(this.mobileSpacing)/16+"rem"}:this.spacing&&(t={...t,"--umg-space-grid-horizontal-mobile":Number(this.spacing)/16+"rem","--umg-space-grid-vertical-mobile":Number(this.spacing)/16+"rem"}),t}tableAs(){return"grid"===this.as?r.qy` 3053 <umg-grid 3054 part="event-table" 3055 exportparts="grid" 3056 class="event-table${(0,n.H)(this.tableClasses())}" 3057 role="table" 3058 aria-label="Events" 3059 columns=${this.gridColumns} 3060 mobileColumns=${this.mobileGridColumns} 3061 spacing=${(0,d.J)(this.spacing)} 3062 mobileSpacing=${(0,d.J)(this.mobileSpacing)} 3063 ?fill=${this.fill} 3064 > 3065 <slot name="event"></slot> 3066 </umg-grid> 3067 `:"table"===this.as?r.qy` 3068 <umg-grid 3069 part="event-table" 3070 exportparts="grid" 3071 class="event-table${(0,n.H)(this.tableClasses())}" 3072 style="${(0,l.W)(this.tableStyles())}" 3073 role="table" 3074 aria-label="Events" 3075 columns=${1} 3076 mobileColumns=${1} 3077 ?fill=${!1} 3078 spacing=${(0,d.J)(this.spacing)} 3079 mobileSpacing=${(0,d.J)(this.mobileSpacing)} 3080 > 3081 <slot name="event"></slot> 3082 </umg-grid> 3083 `:void 0}render(){return r.qy` 3084 ${this.tableAs()} 3085 `}};y.styles=(0,m.Z)([c.S,r.AH` 3086 :host { 3087 display: block; 3088 width: 100%; 3089 3090 --umg-space-group: var(--umg-button-group-gap-y, 0.0625rem); 3091 --umg-size-buttons-width: var(--umg-dropdown-width 12rem); 3092 --umg-color-summary-background: var(--umg-dropdown-button-background, rgb(0, 0, 0)); 3093 --umg-color-summary-text: var(--umg-dropdown-button-color, rgb(255, 255, 255)); 3094 --umg-color-disclosure-border: var(--umg-dropdown-border-color, rgb(0, 0, 0)); 3095 --umg-border-disclosure-corner-radius: var(--umg-dropdown-border-radius, 0); 3096 --umg-space-disclosure-padding: var(--umg-dropdown-container-padding, 0); 3097 --umg-space-summary-padding: var(--umg-dropdown-button-padding, 0.5rem 1rem); 3098 --umg-space-details-padding: var(--umg-dropdown-content-padding, 0.0625rem 0 0 0); 3099 --umg-border-details-width: var(--umg-dropdown-content-border-width, 0); 3100 3101 } 3102 .event-table--divider { 3103 border-top: 1px solid var(--umg-color-event-divider, var(--umg-color-section-text, rgb(180,180,180, var(--umg-opacity-divider-bg, 1)))); 3104 padding-top: var(--umg-space-grid-vertical-desktop, 1rem); 3105 } 3106 3107 /* Rows */ 3108 .event-table { 3109 color: inherit; 3110 width: 100%; 3111 } 3112 3113 `]),(0,o.C)([(0,a.M)()],y.prototype,"as",void 0),(0,o.C)([(0,a.M)({type:Boolean})],y.prototype,"divider",void 0),(0,o.C)([(0,a.M)({type:Number})],y.prototype,"gridColumns",void 0),(0,o.C)([(0,a.M)({type:Number})],y.prototype,"mobileGridColumns",void 0),(0,o.C)([(0,a.M)({type:Boolean})],y.prototype,"fill",void 0),(0,o.C)([(0,a.M)()],y.prototype,"spacing",void 0),(0,o.C)([(0,a.M)()],y.prototype,"mobileSpacing",void 0),y=(0,o.C)([(0,s.E)(`${v}-event-table`)],y)}
3113,706(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(7509),l=i(3720),d=i(1145),c=i(9061),u=i(9924),m=i(8698),h=i(2609);const{prefix:p}=m.W;let g=class extends r.WF{constructor(){super(...arguments),this.width="page-width",this.paddingTop="",this.paddingBottom="",this.socialsHidden=!1,this.centerContent=!1,this._slotHasChildren=!1,this._optionalSlotChildren="socials"}_handleSlotChange(t){this._slotHasChildren=(0,c.Y)(t,this._optionalSlotChildren)}footerClasses(){return{footer:!0,"footer--socials-hidden":this.socialsHidden,"footer--center":this.centerContent,"footer--socials-show":this._slotHasChildren}}footerStyles(){let t={};return this.paddingTop&&(t={...t,"--umg-space-footer-padding-top":"var(--umg-space-"+this.paddingTop+")"}),this.paddingBottom&&(t={...t,"--umg-space-footer-padding-bottom":"var(--umg-space-"+this.paddingBottom+")"}),t}footerInnerStyles(){let t={};return"full-width"===this.width&&(t={...t,"--umg-size-content-max-width":"100%"}),t}render(){return r.qy` 3114 <footer 3115 part="footer" 3116 class="${(0,l.H)(this.footerClasses())}" 3117 style="${(0,d.W)(this.footerStyles())}" 3118 > 3119 <div 3120 part="footer-inner" 3121 class="footer__inner" 3122 style="${(0,d.W)(this.footerInnerStyles())}" 3123 > 3124 <slot part="footer-links" name="links"></slot> 3125 <slot part="footer-content"></slot> 3126 <slot part="footer-socials" name="socials" @slotchange=${this._handleSlotChange}></slot> 3127 </div> 3128 </footer> 3129 `}};g.styles=(0,h.Z)([u.S,r.AH` 3130 .footer { 3131 color: var(--umg-color-base-text, rgb(0,0,0)); 3132 background-color: var(--umg-color-base-background, rgb(240,240,240)); 3133 --umg-color-icon-text: var(--umg-color-base-text); 3134 } 3135 @supports (color: rgb(from white r g b)) { 3136 .footer { 3137 color: rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b); 3138 background-color: rgb(from var(--umg-color-base-background, rgb(240,240,240)) r g b / alpha); 3139 } 3140 } 3141 3142 .footer__inner { 3143 display: flex; 3144 flex-wrap: wrap; 3145 align-items: center; 3146 justify-content: space-between; 3147 margin: 0 auto; 3148 max-width: var(--umg-size-content-max-width, 75rem); 3149 } 3150 3151 slot[name=links], 3152 slot[name=socials] { 3153 display: block; 3154 } 3155 3156 @media screen and (max-width: 48rem) { 3157 .footer { 3158 padding-top: var(--umg-space-footer-padding-top, 3rem); 3159 padding-bottom: var(--umg-space-footer-padding-bottom, 3rem); 3160 } 3161 .footer__inner { 3162 flex-direction: column-reverse; 3163 padding-left: var(--umg-space-base-side-padding-mobile, 1rem); 3164 padding-right: var(--umg-space-base-side-padding-mobile, 1rem); 3165 gap: var(--umg-space-24, 1.5rem); 3166 } 3167 slot[name=socials] { 3168 display: block; 3169 } 3170 } 3171 @media screen and (min-width: 48.06rem) { 3172 .footer { 3173 padding-top: var(--umg-space-footer-padding-top, 3rem); 3174 padding-bottom: var(--umg-space-footer-padding-bottom, 3rem); 3175 } 3176 .footer__inner { 3177 gap: var(--umg-space-24, 1.5rem); 3178 padding-left: var(--umg-space-base-side-padding, 1.5rem); 3179 padding-right: var(--umg-space-base-side-padding, 1.5rem); 3180 } 3181 } 3182 3183 /* Show/hide socials slot by option or when empty */ 3184 slot[name=socials], 3185 .footer--socials-hidden slot[name=socials] { 3186 display: none; 3187 } 3188 3189 .footer--socials-show:not(.footer--socials-hidden) slot[name=socials] { 3190 display: block; 3191 } 3192 3193 /* Centered content */ 3194 .footer--center .footer__inner { 3195 gap: var(--umg-space-32, 2rem); 3196 justify-content: center; 3197 } 3198 `]),(0,o.C)([(0,a.M)()],g.prototype,"width",void 0),(0,o.C)([(0,a.M)({type:Number})],g.prototype,"paddingTop",void 0),(0,o.C)([(0,a.M)({type:Number})],g.prototype,"paddingBottom",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"socialsHidden",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"centerContent",void 0),(0,o.C)([(0,n.w)()],g.prototype,"_slotHasChildren",void 0),g=(0,o.C)([(0,s.E)(`${p}-footer`)],g)},4742(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(3720),l=i(1145),d=i(9924),c=i(3023),u=i(8698),m=i(2609);const{prefix:h}=u.W;let p=class extends r.WF{render(){return r.qy` 3199 <div 3200 part="grid-cell" 3201 class="grid-item" 3202 > 3203 <slot></slot> 3204 </div> 3205 `}};p.styles=(0,m.Z)([d.S,r.AH` 3206 .grid-item { 3207 height: 100%; 3208 width: 100%; 3209 } 3210 `]),p=(0,o.C)([(0,s.E)(`${h}-grid-cell`)],p);const{prefix:g}=u.W;let b=class extends r.WF{constructor(){super(...arguments),this.columns=4,this.mobileColumns="1",this.gapless=!1,this.fill=!1}gridClasses(){const t={};return t["grid--gapless"]=this.gapless,t["grid--fill"]=this.fill,t["grid--"+this.columns+"-col-tablet"]=this.columns<3,t["grid--3-col-tablet"]=this.columns>=3,t["grid--"+this.columns+"-col-desktop"]=!0,t["grid--"+this.mobileColumns+"-col-tablet-down"]=!0,t}gridStyles(){let t={};return 6===this.columns&&(t={...t,"--umg-grid-desktop-columns-width":"16.66%","--umg-grid-desktop-columns":"6","--umg-grid-desktop-gaps":"5","--umg-grid-desktop-peek":"1.5"}),5===this.columns&&(t={...t,"--umg-grid-desktop-columns-width":"20%","--umg-grid-desktop-columns":"5","--umg-grid-desktop-gaps":"4","--umg-grid-desktop-peek":"2"}),4===this.columns&&(t={...t,"--umg-grid-desktop-columns-width":"25%","--umg-grid-desktop-columns":"4","--umg-grid-desktop-gaps":"3","--umg-grid-desktop-peek":"2.5"}),3===this.columns&&(t={...t,"--umg-grid-desktop-columns-width":"33.33%","--umg-grid-desktop-columns":"3","--umg-grid-desktop-gaps":"2","--umg-grid-desktop-peek":"3"}),2===this.columns&&(t={...t,"--umg-grid-desktop-columns-width":"50%","--umg-grid-desktop-columns":"2","--umg-grid-desktop-gaps":"1","--umg-grid-desktop-peek":"4"}),1===this.columns&&(t={...t,"--umg-grid-desktop-columns-width":"100%","--umg-grid-desktop-columns":"1","--umg-grid-desktop-gaps":"0","--umg-grid-desktop-peek":"9"}),this.spacing&&(t={...t,"--umg-space-grid-horizontal-desktop":Number(this.spacing)/16+"rem","--umg-space-grid-vertical-desktop":Number(this.spacing)/16+"rem"}),this.mobileSpacing?t={...t,"--umg-space-grid-horizontal-mobile":Number(this.mobileSpacing)/16+"rem","--umg-space-grid-vertical-mobile":Number(this.mobileSpacing)/16+"rem"}:this.spacing&&(t={...t,"--umg-space-grid-horizontal-mobile":Number(this.spacing)/16+"rem","--umg-space-grid-vertical-mobile":Number(this.spacing)/16+"rem"}),t}render(){return r.qy` 3211 <div 3212 part="grid" 3213 class="grid${(0,n.H)(this.gridClasses())}" 3214 style="${(0,l.W)(this.gridStyles())}" 3215 > 3216 <slot></slot> 3217 </div> 3218 `}};b.styles=(0,m.Z)([d.S,r.AH` 3219 :host { 3220 display: block; 3221 } 3222 `,c.V]),(0,o.C)([(0,a.M)({type:Number})],b.prototype,"columns",void 0),(0,o.C)([(0,a.M)()],b.prototype,"mobileColumns",void 0),(0,o.C)([(0,a.M)()],b.prototype,"spacing",void 0),(0,o.C)([(0,a.M)()],b.prototype,"mobileSpacing",void 0),(0,o.C)([(0,a.M)({type:Boolean})],b.prototype,"gapless",void 0),(0,o.C)([(0,a.M)({type:Boolean})],b.prototype,"fill",void 0),b=(0,o.C)([(0,s.E)(`${g}-grid`)],b)},9306(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(7509),l=i(7621),d=i(3720),c=i(9061),u=i(9924),m=i(8698),h=i(2609),p=(i(5840),i(1895));const{prefix:g}=m.W;let b=class extends r.WF{constructor(){super(),this.clickOpenAction="",this.clickBackAction="",this._subN
3222avOpen=!1,this.closeDrawer=()=>{setTimeout(()=>{this._menuDrawer.classList.remove("menu-opening"),this._menuDrawer.removeAttribute("open")}),this._subNavOpen=!this._subNavOpen}}_handleSummaryClick(){setTimeout(()=>{this._menuDrawer.classList.add("menu-opening")}),this._subNavOpen=!this._subNavOpen}handleBackClick(){this._menuDrawer.removeAttribute("open"),this._menuDrawer.classList.remove("menu-opening"),this._subNavOpen=!this._subNavOpen}render(){return r.qy` 3223 <details 3224 part="menu-drawer" 3225 class="menu-drawer" 3226 > 3227 <summary 3228 part="menu-drawer-summary" 3229 class="menu-drawer__summary" 3230 aria-label="Main menu" 3231 role="button" 3232 aria-expanded=${!!this._subNavOpen} 3233 @click=${this._handleSummaryClick} 3234 > 3235 <slot name="summary"></slot> 3236 <umg-icon 3237 part="icon" 3238 class="submenu__arrow" 3239 icon="arrow-right-long" 3240 size="medium" 3241 aria-hidden="true" 3242 focusable="false" 3243 role="presentation" 3244 > 3245 </umg-icon> 3246 </summary> 3247 <div 3248 part="sub-menu" 3249 class="sub-menu" 3250 aria-hidden=${!this._subNavOpen} 3251 > 3252 <button 3253 part="sub-menu-button" 3254 class="submenu__back-btn" 3255 type="button" 3256 @click=${this.handleBackClick} 3257 > 3258 <umg-icon 3259 part="icon" 3260 class="submenu__arrow--back" 3261 icon="arrow-left-long" 3262 size="medium" 3263 aria-hidden="true" 3264 focusable="false" 3265 role="presentation" 3266 > 3267 </umg-icon> 3268 <slot name="summary-back"></slot> 3269 </button> 3270 <slot name="submenu"></slot> 3271 </div> 3272 </details> 3273 `}};b.styles=(0,h.Z)([u.S,r.AH` 3274 :host { 3275 width: 100%; 3276 } 3277 3278 details summary::-webkit-details-marker { 3279 display:none; 3280 } 3281 3282 /* menu drawer states */ 3283 .menu-drawer[open].menu-opening .sub-menu { 3284 transition: transform 0.2s ease, visibility 0.2s ease; 3285 transform: translateX(0); 3286 visibility: visible; 3287 } 3288 3289 .sub-menu { 3290 position: absolute; 3291 inset: 0; 3292 padding: var(--umg-space-32, 2rem) 0; 3293 transform: translateX(100%); 3294 visibility: hidden; 3295 background-color: var(--umg-color-menu-drawer-background, rgb(236, 236, 236)); 3296 } 3297 @supports (color: rgb(from white r g b)) { 3298 .sub-menu { 3299 background-color: rgb(from var(--umg-color-menu-drawer-background, rgb(236, 236, 236)) r g b / alpha); 3300 } 3301 } 3302 3303 /* Summary */ 3304 .menu-drawer__summary { 3305 align-items: center; 3306 color: inherit; 3307 cursor: pointer; 3308 display: flex; 3309 list-style: none; 3310 padding: var(--umg-space-12, 0.75rem) var(--umg-space-24, 1.5rem); 3311 transition: background-color var(--umg-animation-duration-04, 0.4s ease); 3312 } 3313 .menu-drawer__summary:hover { 3314 background-color: var(--umg-color-base-background); 3315 } 3316 @supports (color: rgb(from white r g b)) { 3317 .menu-drawer__summary:hover { 3318 background-color: rgb(from var(--umg-color-base-background) r g b / 0.75); 3319 } 3320 } 3321 3322 /* Submenu buttons */ 3323 .submenu__back-btn { 3324 cursor: pointer; 3325 display: flex; 3326 align-items: center; 3327 border: 0; 3328 box-shadow: none; 3329 column-gap: var(--umg-space-8, 0.5rem); 3330 font-size: var(--umg-font-body-size-sm, 0.875rem); 3331 padding: var(--umg-space-20, 1.25rem) var(--umg-space-24, 1.5rem); 3332 transition: background-color var(--umg-animation-duration-04, 0.4s ease); 3333 text-transform: uppercase; 3334 width: 100%; 3335 3336 color: var(--umg-color-menu-drawer-text, var(--umg-color-base-text, rgb(62,62,62))); 3337 background-color: transparent; 3338 } 3339 @supports (color: rgb(from white r g b)) { 3340 .submenu__back-btn { 3341 color: rgb(from var(--umg-color-menu-drawer-text, var(--umg-color-base-text, rgb(62,62,62))) r g b / alpha); 3342 } 3343 } 3344 .submenu__arrow { 3345 height: var(--umg-space-16, 1rem); 3346 margin-left: auto; 3347 width: var(--umg-space-16, 1rem); 3348 } 3349 .submenu__arrow--back { 3350 margin-left: 0; 3351 } 3352 3353 .submenu__back-btn:hover { 3354 background-color: var(--umg-color-base-background); 3355 } 3356 @supports (color: rgb(from white r g b)) { 3357 .submenu__back-btn:hover { 3358 background-color: rgb(from var(--umg-color-base-background) r g b / 0.75); 3359 } 3360 } 3361 `]),(0,o.C)([(0,a.M)({type:String})],b.prototype,"clickOpenAction",void 0),(0,o.C)([(0,a.M)({type:String})],b.prototype,"clickBackAction",void 0),(0,o.C)([(0,a.M)({state:!0,type:Boolean})],b.prototype,"_subNavOpen",void 0),(0,o.C)([(0,p.P)(".menu-drawer")],b.prototype,"_menuDrawer",void 0),b=(0,o.C)([(0,s.E)(`${g}-menu-drawer`)],b);i(4630);const{prefix:v}=m.W;let y=class extends r.WF{constructor(){super(...arguments),this.src="",this.direction="from-left",this._drawerOpen=!1,this._slotHasChildren=!1}async firstUpdated(){void 0===this.data&&this.src&&await this.fetchData()}async fetchData(){this.data=await fetch(this.src).then(t=>t.json()),this.requestUpdate()}closeDrawer(){this._drawerOpen=!1,this._drawer.disclosureClose(),document.body.removeAttribute("style"),this._closeActiveDrawers()}
3361_handleSlotChange(t){this._slotHasChildren=(0,c.Y)(t,"socials")}_openDrawer(){this._drawerOpen=!0,document.body.style.overflow="hidden"}_closeDrawer(){this._drawerOpen=!1,document.body.removeAttribute("style"),this._closeActiveDrawers()}_closeActiveDrawers(){if(!this._drawerOpen){const t=this.shadowRoot?.querySelectorAll("umg-menu-drawer");t&&t.length&&t.forEach(t=>{t.closeDrawer()})}}menuDrawerClasses(){return{"header-drawer--has-socials":this._slotHasChildren,"header-drawer--overlay":this._drawerOpen}}menuList(){if(this.data)return r.qy` 3362 <nav part="menu-nav"> 3363 <ul part="menu-list" class="menu__list"> 3364 ${this.data.map(t=>r.qy` 3365 <li part="menu-item"> 3366 ${t.subItems?r.qy` 3367 <umg-menu-drawer part="menu-drawer"> 3368 <span part="submenu-link-title" slot="summary"> 3369 ${t.linkText} 3370 </span> 3371 <span part="back-link-title" slot="summary-back"> 3372 ${t.linkText} 3373 </span> 3374 <ul part="submenu" slot="submenu" class="submenu"> 3375 ${t.subItems.map(t=>r.qy` 3376 <li part="submenu-item"> 3377 ${t.subItems?r.qy` 3378 <umg-menu-drawer part="submenu-drawer"> 3379 <span part="submenu-link-title" slot="summary"> 3380 ${t.linkText} 3381 </span> 3382 <span part="back-link-title" slot="summary-back"> 3383 ${t.linkText} 3384 </span> 3385 <ul part="submenu-list" class="submenu" slot="submenu"> 3386 ${t.subItems.map(t=>r.qy` 3387 <li part="submenu-list-item"> 3388 <a 3389 part="submenu-link" 3390 class="submenu__link" 3391 href="${t.linkUrl}" 3392 @click=${this.closeDrawer} 3393 > 3394 ${t.linkText} 3395 </a> 3396 </li> 3397 `)} 3398 </ul> 3399 </umg-menu-drawer> 3400 `:r.qy` 3401 <a 3402 part="submenu-link" 3403 class="submenu__link" 3404 href="${t.linkUrl}" 3405 @click=${this.closeDrawer} 3406 > 3407 ${t.linkText} 3408 </a> 3409 `} 3410 </li> 3411 `)} 3412 </ul> 3413 </umg-menu-drawer> 3414 `:r.qy` 3415 <a 3416 part="submenu-link" 3417 class="submenu__link" 3418 href="${t.linkUrl}" 3419 @click=${this.closeDrawer} 3420 > 3421 ${t.linkText} 3422 </a> 3423 `} 3424 </li> 3425 `)} 3426 </ul> 3427 </nav> 3428 `}render(){return r.qy` 3429 <umg-disclosure 3430 exportparts="disclosure,disclosure-summary,disclosure-drawer,disclosure-content" 3431 part="disclosure" 3432 class="header-drawer${(0,d.H)(this.menuDrawerClasses())}" 3433 direction=${this.direction} 3434 overlay 3435 >
3436 <span part='disclosure-button' slot="icon"> 3437 <umg-icon 3438 exportparts="icon-container,icon-svg,icon-image" 3439 part="menu-icon menu-icon-open" 3440 class="menu-icon icon--open" 3441 icon="bars" 3442 size="2xlarge" 3443 ?open=${this._drawerOpen} 3444 @click=${this._openDrawer} 3445 role="presentation" 3446 aria-hidden="true" 3447 focusable="false" 3448 > 3449 </umg-icon> 3450 <umg-icon 3451 exportparts="icon-container,icon-svg,icon-image" 3452 part="menu-icon menu-icon-close" 3453 class="menu-icon icon--close" 3454 icon="close" 3455 size="2xlarge" 3456 ?open=${this._drawerOpen} 3457 @click=${this._closeDrawer} 3458 role="presentation" 3459 aria-hidden="true" 3460 focusable="false" 3461 > 3462 </umg-icon> 3463 </span> 3464 <div part="menu" class="menu" slot="content"> 3465 <div 3466 part="menu-drawer" 3467 class="menu-drawer" 3468 > 3469 ${this.menuList()} 3470 </div> 3471 <div 3472 part="socials" 3473 class="socials" 3474 > 3475 <slot name="socials" @slotchange=${this._handleSlotChange}></slot> 3476 </div> 3477 </div> 3478 </umg-disclosure> 3479 `}};y.styles=(0,h.Z)([u.S,r.AH` 3480 /* Burger button */ 3481 .menu-icon[open].icon--close { 3482 display: block; 3483 } 3484 .menu-icon[open].icon--open { 3485 display: none; 3486 } 3487 .icon--close { 3488 display: none; 3489 } 3490 .icon--open { 3491 display: block; 3492 } 3493 3494 /* Header drawer */ 3495 .header-drawer { 3496 position: initial; 3497 --umg-space-summary-padding: 0; 3498 3499 } 3500 .header-drawer--overlay:after { 3501 content: ''; 3502 position: fixed; 3503 inset: 0; 3504 z-index:-1; 3505 background-color: var(--umg-color-overlay-background, rgb(0,0,0,0.4)); 3506 } 3507 3508 @supports (color: rgb(from white r g b)) { 3509 .header-drawer--overlay:after { 3510 background-color: rgb(from var(--umg-color-overlay-background, rgb(0,0,0,0.4)) r g b / alpha); 3511 } 3512 } 3513 3514 .header-drawer::part(disclosure-drawer) { 3515 --umg-color-base-border: transparent; 3516 --umg-color-base-text: var(--umg-color-menu-drawer-text); 3517 --umg-color-icon-text: var(--umg-color-menu-drawer-text); 3518 --umg-color-summary-background: transparent; 3519 --umg-color-details-background: var(--umg-color-menu-drawer-background, rgb(240,240,240)); 3520 --umg-space-disclosure-distance: var(--umg-size-header-inner-height, 0); 3521 --umg-space-details-padding: 0; 3522 width: 90%; 3523 } 3524 3525 /* Menu drawer */ 3526 .menu { 3527 display: flex; 3528 flex-direction: column; 3529 font-family: var(--umg-font-menu-family, inherit); 3530 font-size: var(--umg-font-menu-size, inherit); 3531 letter-spacing: 0.05rem; 3532 height: calc(100svh - var(--umg-size-header-outer-height)); 3533 } 3534 .menu-drawer { 3535 flex: 1; 3536 position: relative; 3537 overflow-x: hidden; 3538 } 3539 3540 .menu__list { 3541 display: flex; 3542 flex-direction: column; 3543 list-style: none; 3544 margin: 0; 3545 padding: var(--umg-space-32, 2rem) 0; 3546 color: var(--umg-color-menu-drawer-text, var(--umg-color-base-text, rgb(0,0,0))); 3547 } 3548 @supports (color: rgb(from white r g b)) { 3549 .menu__list { 3550 color: rgb(from var(--umg-color-menu-drawer-text, var(--umg-color-base-text, rgb(0,0,0))) r g b / 1); 3551 } 3552 } 3553 3554 /* Submenus */ 3555 .submenu { 3556 display: flex; 3557 flex-direction: column; 3558 list-style: none; 3559 margin: 0; 3560 padding: 0; 3561 width: 100%; 3562 } 3563 .submenu__link { 3564 display: block; 3565 color: inherit; 3566 padding: var(--umg-space-12, 0.75rem) var(--umg-space-24, 1.5rem); 3567 text-decoration: none; 3568 transition: background-color var(--umg-animation-duration-04, 0.4s) ease; 3569 } 3570 .submenu__link:hover { 3571 background-color: var(--umg-color-base-background); 3572 } 3573 @supports (color: rgb(from white r g b)) { 3574 .submenu__link:hover { 3575 background-color: rgb(from var(--umg-color-base-background) r g b / 0.7); 3576 } 3577 } 3578 3579 /* Socials */ 3580 .socials { 3581 display: none; 3582 align-items: center; 3583 justify-content: center; 3584 padding: var(--umg-space-24, 1.5rem) var(--umg-space-16, 1.5rem) var(--umg-space-48, 3rem); 3585 } 3586 .header-drawer--has-socials .socials { 3587 display: flex; 3588 } 3589 `]),(0,o.C)([(0,a.M)()],y.prototype,"src",void 0),(0,o.C)([(0,a.M)({type:Object})],y.prototype,"data",void 0),(0,o.C)([(0,a.M)({type:String})],y.prototype,"direction",void 0),(0,o.C)([(0,n.w)()],y.prototype,"_drawerOpen",void 0),(0,o.C)([(0,l.P)("umg-disclosure")],y.prototype,"_drawer",void 0),(0,o.C)([(0,n.w)()],y.prototype,"_slotHasChildren",void 0),y=(0,o.C)([(0,s.E)(`${v}-header-drawer`)],y)},7314(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(7621),l=i(7509),d=i(3720),c=i(1145),u=i(9924),m=i(8698),h=i(2609);const{prefix:p}=m.W;let g=class extends r.WF{constructor(){super(...arguments),this.width="page-width",this.paddingTop="",this.paddingBottom="",this.layout="logo-left",this.logoHidden=!1,this.menuHidden=!1,this.socialsHidden=!1,this.socialsAlwaysVisible=!1,this.signupHidden=!1,this.sticky=!1,this.stickyHideOnScroll=!1,this.transparent=!1,this._transparentScrolling=!1,this._currentScrollPosition=0,this._hasUserSlotContent=!1,this._hasSocialsSlotContent=!1,this._hasSignupSlotContent=!1,this._hasLogoSlotContent=!1,this._hasMenuSlotContent=!1,this._hasHeaderDrawerSlotContent=!1,this._isScrolling=!1,this._handleScroll=()=>{this._isScrolling||(this._isScrolling=!0,this._scrollAnimationFrame=requestAnimationFrame(()=>{this._processScroll(),this._isScrolling=!1}))}}updated(t){super.updated(t);const e=this.stickyHideOnScroll||this.sticky&&this.transparent;(t.has("stickyHideOnScroll")||t.has("transparent")||t.has("sticky"))&&(window.removeEventListener("scroll",this._handleScroll),e?window.addEventListener("scroll",this._handleScroll,{passive:!0}):(this.removeAttribute("scrolling-down"),this._transparentScrolling=!1))}disconnectedCallback(){window.removeEventListener("scroll",this._handleScroll),this._scrollAnimationFrame&&cancelAnimationFrame(this._scrollAnimationFrame),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=void 0),super.disconnectedCallback()}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{requestAnimationFrame(()=>this._initHeader())}),this._resizeObserver.observe(this)}
3589_handleSlotChange(t){const e=t.target,i=e.name,o=e.assignedElements().length>0||e.assignedNodes().filter(t=>t.nodeType===Node.TEXT_NODE&&""!==t.textContent?.trim()).length>0;switch(i){case"user":this._hasUserSlotContent=o;break;case"socials":this._hasSocialsSlotContent=o;break;case"signup":this._hasSignupSlotContent=o;break;case"logo":this._hasLogoSlotContent=o;break;case"menu":this._hasMenuSlotContent=o;break;case"header-drawer":this._hasHeaderDrawerSlotContent=o}}get _hasActionsContent(){return this._hasUserSlotContent||this._hasSocialsSlotContent||this._hasSignupSlotContent}get _hasActionsGroupContent(){return!this.socialsHidden&&this._hasSocialsSlotContent||!this.signupHidden&&this._hasSignupSlotContent}_initHeader(){this._currentScrollPosition=window.scrollY||document.documentElement.scrollTop,this._headerOuterHeight=this.getBoundingClientRect().bottom;const t=this.offsetHeight;this.style.setProperty("--umg-size-header-inner-height",t/16+"rem"),this.style.setProperty("--umg-size-header-outer-height",this._headerOuterHeight/16+"rem");const e=new CustomEvent("header-details",{detail:{height:this._headerOuterHeight},bubbles:!0,composed:!0});this.dispatchEvent(e)}_processScroll(){const t=window.scrollY;if(this.sticky&&this.transparent){const e=this._transparentScrolling;this._transparentScrolling=t>0,e!==this._transparentScrolling&&this.requestUpdate()}this.stickyHideOnScroll&&this._updateStickyVisibility(t),this._currentScrollPosition=t}_updateStickyVisibility(t){const e=this.hasAttribute("scrolling-down");let i=!1;i=!(this._headerOuterHeight&&t<=this._headerOuterHeight)&&t>this._currentScrollPosition,i!==e&&(i?this.setAttribute("scrolling-down",""):this.removeAttribute("scrolling-down"))}render(){return r.qy` 3590 <header> 3591 <div 3592 part="header" 3593 class="header${(0,d.H)({[`header--${this.layout}`]:!!this.layout,"header--actions-show":this._hasActionsContent,"header--socials-always-visible":this.socialsAlwaysVisible})}" 3594 style="${(0,c.W)({"--umg-space-header-padding-top":this.paddingTop?`var(--umg-space-${this.paddingTop})`:"","--umg-space-header-padding-bottom":this.paddingBottom?`var(--umg-space-${this.paddingBottom})`:"","--umg-color-base-background":this.transparent&&!this._transparentScrolling?"transparent":""})}" 3595 > 3596 <div 3597 part="header-inner" 3598 class="header__inner" 3599 style="${(0,c.W)({"--umg-size-header-width":"full-width"===this.width?"min(100vw, var(--umg-size-screen-max-width, 100vw))":""})}" 3600 > 3601 <div part="menu-drawer" class="header__menu-drawer" 3602 ?hidden=${!this._hasHeaderDrawerSlotContent}> 3603 <slot name="header-drawer" @slotchange=${this._handleSlotChange}></slot> 3604 </div> 3605 3606 <div part="logo" class="header__logo" 3607 ?hidden=${this.logoHidden||!this._hasLogoSlotContent}> 3608 <slot name="logo" @slotchange=${this._handleSlotChange}></slot> 3609 </div> 3610 3611 <div part="menu" class="header__menu" 3612 ?hidden=${this.menuHidden||!this._hasMenuSlotContent}> 3613 <slot name="menu" @slotchange=${this._handleSlotChange}></slot> 3614 </div> 3615 3616 <div part="actions" class="header__actions" 3617 ?hidden=${!this._hasActionsContent}> 3618 <div part="cart" class="header__cart" 3619 ?hidden=${!this._hasUserSlotContent}> 3620 <slot name="user" @slotchange=${this._handleSlotChange}></slot> 3621 </div> 3622 <div class="header__actions-group" 3623 ?hidden=${!this._hasActionsGroupContent}> 3624 <div part="socials" class="header__socials" 3625 ?hidden=${this.socialsHidden||!this._hasSocialsSlotContent}> 3626 <slot name="socials" @slotchange=${this._handleSlot
3626Change}></slot> 3627 </div> 3628 <div part="signup" class="header__signup" 3629 ?hidden=${this.signupHidden||!this._hasSignupSlotContent}> 3630 <slot name="signup" @slotchange=${this._handleSlotChange}></slot> 3631 </div> 3632 </div> 3633 </div> 3634 </div> 3635 </div> 3636 </header> 3637 `}};g.styles=(0,h.Z)([u.S,r.AH` 3638 :host { 3639 display: block; 3640 position: relative; 3641 z-index: 501; /* over overlay z-index */ 3642 } 3643 3644 /* Header base styles */ 3645 .header { 3646 transition: all var(--umg-animation, 0.4s) ease; 3647 overflow: hidden; 3648 color: var(--umg-color-base-text, rgb(0,0,0)); 3649 background-color: var(--umg-color-base-background, rgb(240,240,240)); 3650 --umg-color-icon-text: var(--umg-color-base-text); 3651 } 3652 3653 @supports (color: rgb(from white r g b)) { 3654 .header { 3655 color: rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b); 3656 background-color: rgb(from var(--umg-color-base-background, rgb(240,240,240)) r g b / alpha); 3657 } 3658 } 3659 3660 .header__inner { 3661 display: flex; 3662 align-items: center; 3663 margin: 0 auto; 3664 max-width: var(--umg-size-header-width, var(--umg-size-content-max-width, 75rem)); 3665 transition: padding var(--umg-animation, 0.4s) ease; 3666 } 3667 3668 /* Responsive padding and spacing */ 3669 @media screen and (max-width: 48rem) { 3670 .header { 3671 padding-top: calc(var(--umg-space-header-padding-top, 1rem) * 0.5); 3672 padding-bottom: calc(var(--umg-space-header-padding-bottom, 1rem) * 0.5); 3673 } 3674 .header__inner { 3675 gap: var(--umg-space-24, 1rem); 3676 padding-left: var(--umg-space-base-side-padding-mobile, 1rem); 3677 padding-right: var(--umg-space-base-side-padding-mobile, 1rem); 3678 } 3679 } 3680 3681 @media screen and (min-width: 48.06rem) { 3682 .header { 3683 padding-top: var(--umg-space-header-padding-top, 1rem); 3684 padding-bottom: var(--umg-space-header-padding-bottom, 1rem); 3685 } 3686 .header__inner { 3687 gap: var(--umg-space-24, 1.5rem); 3688 padding-left: var(--umg-space-base-side-padding, 1.5rem); 3689 padding-right: var(--umg-space-base-side-padding, 1.5rem); 3690 } 3691 } 3692 3693 /* Sticky header behavior */ 3694 :host([sticky]) { 3695 position: sticky; 3696 top: 0; 3697 z-index: 501; /* over overlay z-index */ 3698 } 3699 3700 :host([transparent]) { 3701 position: absolute; 3702 width: 100%; 3703 } 3704 3705 :host([transparent][sticky]) { 3706 position: fixed; 3707 width: 100%; 3708 } 3709 3710 :host([sticky][scrolling-down]) header { 3711 transform: translateY(-100%); 3712 } 3713 3714 header { 3715 transition: all var(--umg-animation, 0.4s) ease; 3716 } 3717 3718 /* Header content layout */ 3719 .header .header__menu { 3720 margin-right: auto; 3721 } 3722 3723 .header__actions { 3724 display: none; 3725 align-items: center; 3726 gap: var(--umg-space-32, 2rem); 3727 margin-left: auto; 3728 } 3729 3730 .header--actions-show .header__actions { 3731 display: flex; 3732 } 3733 3734 .header__actions-group { 3735 display: flex; 3736 align-items: center; 3737 gap: var(--umg-space-gap-normal, var(--umg-space-16, 1rem)); 3738 } 3739 3740 .header__signup { 3741 white-space: nowrap; 3742 } 3743 3744 /* Mobile header */ 3745 .header__menu-drawer { 3746 display: block; 3747 } 3748 3749 /* Desktop layouts */ 3750 @media only screen and (min-width: 64.06rem) { 3751 .header__menu-drawer { 3752 display: none; 3753 } 3754 3755 /* Logo center layout */ 3756 .header--logo-center .header__menu { 3757 width: 100%; 3758 } 3759 .header--logo-center .header__logo { 3760 display: flex; 3761 order: 2; 3762 justify-content: center; 3763 width: 100%; 3764 } 3765 .header--logo-center .header__actions { 3766 justify-content: flex-end; 3767 order: 3; 3768 width: 100%; 3769 } 3770 3771 /* Nav center layout */ 3772 .header--nav-center .header__menu { 3773 display: flex; 3774 flex: 1; 3775 justify-content: center; 3776 } 3777 .header--nav-center .header__logo { 3778 margin-right: auto; 3779 } 3780 .header--nav-center .header__actions { 3781 margin-left: auto; 3782 } 3783 .header--nav-center .header__logo, 3784 .header--nav-center .header__actions { 3785 flex: 1; 3786 } 3787 .header--nav-center .header__actions { 3788 display: flex; 3789 justify-content: flex-end; 3790 } 3791 3792 /* Content right layout */ 3793 .header--content-right .header__menu { 3794 display: flex; 3795 flex: 1; 3796 justify-content: right; 3797 } 3798 .header--content-right .header__logo { 3799 margin-left: auto; 3800 } 3801 } 3802 3803 /* Mobile responsive overrides */ 3804 @media only screen and (max-width: 64rem) { 3805 .header__menu, 3806 .header__socials, 3807 .header--nav-center .header__menu { 3808 display: none; 3809 } 3810 3811 /* Override mobile hiding for socials when always visible */ 3812 .header--socials-always-visible .header__socials { 3813 display: block; 3814 --umg-space-gap-normal: 0.5rem; 3815 } 3816 3817 .header__menu-drawer { 3818 display: block; 3819 margin-right: auto; 3820 width: 100%; 3821 } 3822 .header__logo { 3823 display: flex; 3824 justify-content: center; 3825 width: 100%; 3826 } 3827 .header__actions { 3828 justify-content: flex-end; 3829 width: 100%; 3830 } 3831 } 3832 3833 /* Mobile logo alignment when socials always visible */ 3834 @media only screen and (max-width: 48rem) { 3835 .header--socials-always-visible .header__logo { 3836 justify-content: flex-start; 3837 } 3838 .header--socials-always-visible .header__actions { 3839 flex: 1 0 auto; 3840 width: auto; 3841 3842 } 3843 .header--socials-always-visible .header__menu-drawer { 3844 width: auto; 3845 margin-right: 0; 3846 } 3847 } 3848 `]),(0,o.C)([(0,a.M)()],g.prototype,"width",void 0),(0,o.C)([(0,a.M)()],g.prototype,"paddingTop",void 0),(0,o.C)([(0,a.M)()],g.prototype,"paddingBottom",void 0),(0,o.C)([(0,a.M)({type:String})],g.prototype,"layout",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"logoHidden",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"menuHidden",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"socialsHidden",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"socialsAlwaysVisible",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"signupHidden",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"sticky",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"stickyHideOnScroll",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"transparent",void 0),(0,o.C)([(0,l.w)()],g.prototype,"_headerOuterHeight",void 0),(0,o.C)([(0,l.w)()],g.prototype,"_transparentScrolling",void 0),(0,o.C)([(0,l.w)()],g.prototype,"_currentScrollPosition",void 0),(0,o.C)([(0,l.w)()],g.prototype,"_hasUserSlotContent",void 0),(0,o.C)([(0,l.w)()],g.prototype,"_hasSocialsSlotContent",void 0),(0,o.C)([(0,l.w)()],g.prototype,"_hasSignupSlotContent",void 0),(0,o.C)([(0,l.w)()],g.prototype,"_hasLogoSlotContent",void 0),(0,o.C)([(0,l.w)()],g.prototype,"_hasMenuSlotContent",void 0),(0,o.C)([(0,l.w)()],g.prototype,"_hasHeaderDrawerSlotContent",void 0),(0,o.C)([(0,n.P)(".header")],g.prototype,"_header",void 0),g=(0,o.C)([(0,s.E)(`${p}-header`)],g)},5686(t,e,i){var o=i(8472),r=i(2618),s=i(1145),a=i(3720),n=i(6505),l=i(9563),d=i(8698),c=i(9924),u=i(328),m=i(2609);const{prefix:h}=d.W;let p=class extends r.WF{constructor(){super(...arguments),this.align="start",this.justify="start",this.wrap=!1}stackStyles(){let t={};return this.spacing&&(t={...t,"--umg-space-grid-horizontal-desktop":Number(this.spacing)/16+"rem"}),this.mobileSpacing?t={...t,"--umg-space-grid-horizontal-mobile":Number(this.mobileSpacing)/16+"rem"}:this.spacing&&(t={...t,"--umg-space-grid-horizontal-mobile":Number(this.spacing)/16+"rem"}),t}stackClasses(){const t={};return t["group-justify--"+this.justify]=!0,t["group-align--"+this.align]=!0,t["group-wrap"]=this.wrap,this.mobileJustify?t["group-mobile-justify--"+this.mobileJustify]=!0:t["group-mobile-justify--"+this.justify]=!0,this.mobileAlign?t["group-mobile-align--"+this.mobileAlign]=!0:t["group-mobile-align--"+this.align]=!0,t}render(){return r.qy` 3849 <div 3850 part="horizontal-stack" 3851 class="horizontal-stack${(0,a.H)(this.stackClasses())}" 3852 style="${(0,s.W)(this.stackStyles())}" 3853 > 3854 <slot></slot> 3855 </div> 3856 `}};p.styles=(0,m.Z)([c.S,r.AH` 3857 :host { 3858 display: block; 3859 width: 100%; 3860 } 3861 3862 ::slotted(*) { 3863 flex-shrink: 1; 3864 } 3865 3866 .horizontal-stack { 3867 display: flex; 3868 } 3869 @media screen and (min-width: 48.06rem) { 3870 .horizontal-stack { 3871 column-gap: var(--umg-space-grid-horizontal-desktop, 1rem); 3872 row-gap: var(--umg-space-grid-vertical-desktop, 0); 3873 } 3874 } 3875 @media screen and (max-width: 48rem) { 3876 .horizontal-stack { 3877 column-gap: var(--umg-space-grid-horizontal-mobile, 1rem); 3878 row-gap: var(--umg-space-grid-vertical-mobile, 0); 3879 } 3880 } 3881 .horizontal-stack.group-wrap { 3882 flex-wrap: wrap; 3883 } 3884 .horizontal-stack.group-justify--stretch ::slotted(*) { 3885 flex-grow: 1; 3886 flex-shrink: 0; 3887 } 3888 `,u.rw,u.Oh,u.jt,u.yw]),(0,o.C)([(0,l.M)()],p.prototype,"spacing",void 0),(0,o.C)([(0,l.M)()],p.prototype,"mobileSpacing",void 0),(0,o.C)([(0,l.M)()],p.prototype,"align",void 0),(0,o.C)([(0,l.M)()],p.prototype,"mobileAlign",void 0),(0,o.C)([(0,l.M)()],p.prototype,"justify",void 0),(0,o.C)([(0,l.M)()],p.prototype,"mobileJustify",void 0),(0,o.C)([(0,l.M)({type:Boolean})],p.prototype,"wrap",void 0),p=(0,o.C)([(0,n.E)(`${h}-horizontal-stack`)],p)},4630(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(7621),n=i(1145),l=i(3720),d=i(9924),c=i(5846),u=i(8698),m=i(2609);const{prefix:h}=u.W;let p=class extends r.WF{constructor(){super(),this.icon="user",this.size=void 0,this._blobUrl=this.dataURItoBlobUrl('<svg xmlns="http://www.w3.org/2000/svg">\n <symbol id="arrow-down" class="icon" width="1em" height="1em" viewBox="0 0 384 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M203.3 467.3L192 478.6l-11.3-11.3-168-168L1.4 288 24 265.4l11.3 11.3L176 417.4V48 32h32V48 417.4L348.7 276.7 360 265.4 382.6 288l-11.3 11.3-168 168z"/>\n </symbol>\n <symbol id="arrow-left" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M12.7 244.7L1.4 256l11.3 11.3 168 168L192 446.6 214.6 424l-11.3-11.3L62.6 272 432 272l16 0 0-32-16 0L62.6 240 203.3 99.3 214.6 88 192 65.4 180.7 76.7l-168 168z"/>\n </symbol>\n <symbol id="arrow-left-long" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M11.3 244.7L0 256l11.3 11.3 144 144 11.3 11.3L189.3 400l-11.3-11.3L61.3 272 496 272l16 0 0-32-16 0L61.3 240 177.9 123.3 189.3 112 166.6 89.4l-11.3 11.3-144 144z"/>\n </symbol>\n <symbol id="arrow-right" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M435.3 267.3L446.6 256l-11.3-11.3-168-168L256 65.4 233.4 88l11.3 11.3L385.4 240 16 240 0 240l0 32 16 0 369.4 0L244.7 412.7 233.4 424 256 446.6l11.3-11.3 168-168z"/>\n </symbol>\n <symbol id="arrow-right-long" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">
3888\n <path d="M500.7 267.3L512 256l-11.3-11.3-144-144L345.4 89.4 322.7 112l11.3 11.3L450.7 240 16 240 0 240l0 32 16 0 434.7 0L334.1 388.7 322.7 400l22.6 22.6 11.3-11.3 144-144z"/>\n </symbol>\n <symbol id="arrow-up" class="icon" width="1em" height="1em" viewBox="0 0 384 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M203.3 44.7L192 33.4 180.7 44.7l-168 168L1.4 224 24 246.6l11.3-11.3L176 94.6V464v16h32V464 94.6L348.7 235.3 360 246.6 382.6 224l-11.3-11.3-168-168z"/>\n </symbol>\n <symbol id="bag-shopping" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M160 96v32H288V96c0-35.3-28.7-64-64-64s-64 28.7-64 64zm-32 64H48c-8.8 0-16 7.2-16 16V416c0 35.3 28.7 64 64 64H352c35.3 0 64-28.7 64-64V176c0-8.8-7.2-16-16-16H320v80c0 8.8-7.2 16-16 16s-16-7.2-16-16V160H160v80c0 8.8-7.2 16-16 16s-16-7.2-16-16V160zm0-32V96c0-53 43-96 96-96s96 43 96 96v32h80c26.5 0 48 21.5 48 48V416c0 53-43 96-96 96H96c-53 0-96-43-96-96V176c0-26.5 21.5-48 48-48h80z"/>\n </symbol>\n <symbol id="bag-shopping-thin" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M144 96v32H304V96c0-44.2-35.8-80-80-80s-80 35.8-80 80zm-16 48H48c-17.7 0-32 14.3-32 32V416c0 44.2 35.8 80 80 80H352c44.2 0 80-35.8 80-80V176c0-17.7-14.3-32-32-32H320v88c0 4.4-3.6 8-8 8s-8-3.6-8-8V144H144v88c0 4.4-3.6 8-8 8s-8-3.6-8-8V144zm0-16V96c0-53 43-96 96-96s96 43 96 96v32h80c26.5 0 48 21.5 48 48V416c0 53-43 96-96 96H96c-53 0-96-43-96-96V176c0-26.5 21.5-48 48-48h80z"/>\n </symbol>\n <symbol id="bars" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M0 80c0-8.8 7.2-16 16-16H432c8.8 0 16 7.2 16 16s-7.2 16-16 16H16C7.2 96 0 88.8 0 80zM0 240c0-8.8 7.2-16 16-16H432c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16-7.2-16-16zM448 400c0 8.8-7.2 16-16 16H16c-8.8 0-16-7.2-16-16s7.2-16 16-16H432c8.8 0 16 7.2 16 16z"/>\n </symbol>\n <symbol id="bin-x-solid" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3C140.6 6.8 151.7 0 163.8 0zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zM143 239c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/>\n </symbol>\n <symbol id="carat-up" class="icon" width="1em" height="1em" viewBox="0 0 320 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M0 272L160 128 320 272v48H0V272z"/>\n </symbol>\n <symbol id="cart" class="icon" width="1em" height="1em" viewBox="0 0 576 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M16 0H0V32H16 67.2l77.2 339.5 2.8 12.5H160 496h16V352H496 172.8l-14.5-64H496L566 64l10-32H542.5 100L95.6 12.5 92.8 0H80 16zm91.3 64H532.5l-60 192H151L107.3 64zM184 432a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm0 80a56 56 0 1 0 0-112 56 56 0 1 0 0 112zm248-56a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm80 0a56 56 0 1 0 -112 0 56 56 0 1 0 112 0z"/>\n </symbol>\n <symbol id="check" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M448.1 118.2L437 129.7 173.6 404l-11.5 12-11.5-12L11.1 258.8 0 247.2l23.1-22.2 11.1 11.5L162.1 369.8 414 107.5 425 96l23.1 22.2z"/>\n </symbol>\n <symbol id="chevron-left" class="icon" width="1em" height="1em" viewBox="0 0 320 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M9.4 256l11.3-11.3 192-192L224 41.4 246.6 64 235.3 75.3 54.6 256 235.3 436.7 246.6 448 224 470.6l-11.3-11.3-192-192L9.4 256z"/>\n </symbol>\n <symbol id="chevron-right" class="icon" width="1em" height="1em" viewBox="0 0 320 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M310.6 256l-11.3 11.3-192 192L96 470.6 73.4 448l11.3-11.3L265.4 256 84.7 75.3 73.4 64 96 41.4l11.3 11.3 192 192L310.6 256z"/>\n </symbol>\n <symbol id="chevron-up" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M256 105.4l11.3 11.3 192 192L470.6 320 448 342.6l-11.3-11.3L256 150.6 75.3 331.3 64 342.6 41.4 320l11.3-11.3 192-192L256 105.4z"/>\n </symbol>\n <symbol id="chevron-down" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M256 406.6l11.3-11.3 192-192L470.6 192 448 169.4l-11.3 11.3L256 361.4 75.3 180.7 64 169.4 41.4 192l11.3 11.3 192 192L256 406.6z"/>\n </symbol>\n <symbol id="close" class="icon" width="1em" height="1em" viewBox="0 0 384 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M192 233.4L59.5 100.9 36.9 123.5 169.4 256 36.9 388.5l22.6 22.6L192 278.6 324.5 411.1l22.6-22.6L214.6 256 347.1 123.5l-22.6-22.6L192 233.4z"/>\n </symbol>\n <symbol id="crosshairs" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M256 0c13.3 0 24 10.7 24 24V65.5C366.8 76.3 435.7 145.2 446.5 232H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H446.5C435.7 366.8 366.8 435.7 280 446.5V488c0 13.3-10.7 24-24 24s-24-10.7-24-24V446.5C145.2 435.7 76.3 366.8 65.5 280H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H65.5C76.3 145.2 145.2 76.3 232 65.5V24c0-13.3 10.7-24 24-24zM112 256a144 144 0 1 0 288 0 144 144 0 1 0 -288 0zm192 0a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm-144 0a96 96 0 1 1 192 0 96 96 0 1 1 -192 0z"/>\n </symbol>\n <symbol id="ellipsis-vertical" class="icon" width="1em" height="1em" viewBox="0 0 128 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M64 384a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-160a32 32 0 1 0 0 64 32 32 0 1 0 0-64zM96 96A32 32 0 1 0 32 96a32 32 0 1 0 64 0z"/>\n </symbol>\n <symbol id="email" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M32 159.2l224 154 224-154V96H32v63.2zM480 198L256 352 32 198V416H480V198zM0 416V176 96 64H32 480h32V96v80V416v32H480 32 0V416z"/>\n </symbol>\n <symbol id="email-solid" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M0 64H512v80L256 320 0 144V64zM0 448V182.8L237.9 346.4 256 358.8l18.1-12.5L512 182.8V448H0z"/>\n </symbol>\n <symbol id="external" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M336 0H320V32h16H457.4L212.7 276.7 201.4 288 224 310.6l11.3-11.3L480 54.6V176v16h32V176 16 0H49
38886 336zM16 32H0V48 496v16H16 464h16V496 304 288H448v16V480H32V64H208h16V32H208 16z"/>\n </symbol>\n <symbol id="info" class="icon" width="1em" height="1em" viewBox="0 0 320 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M48 160c0-53 43-96 96-96h32c53 0 96 43 96 96c0 25.2-11.9 48.9-32 64l-89.6 67.2L144 296v8 48 16h32V352 312l83.2-62.4C287.4 228.4 304 195.3 304 160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160H48zM184 424H136v48h48V424z"/>\n </symbol>\n <symbol id="location" class="icon" width="1em" height="1em" viewBox="0 0 384 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M192 512s192-208 192-320C384 86 298 0 192 0S0 86 0 192C0 304 192 512 192 512zm0-384a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>\n </symbol>\n <symbol id="minus" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M432 256c0 8.8-7.2 16-16 16L32 272c-8.8 0-16-7.2-16-16s7.2-16 16-16l384 0c8.8 0 16 7.2 16 16z"/>\n </symbol>\n <symbol id="mobile-solid" class="icon" width="1em" height="1em" viewBox="0 0 384 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M80 0C44.7 0 16 28.7 16 64V448c0 35.3 28.7 64 64 64H304c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H80zm80 432h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H160c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>\n </symbol>\n <symbol id="mute" class="icon" width="1em" height="1em" viewBox="0 0 576 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M0 160V352H128L272 480h48V32H272L128 160H0zm441 23l-17-17L390.1 200l17 17 39 39-39 39-17 17L424 345.9l17-17 39-39 39 39 17 17L569.9 312l-17-17-39-39 39-39 17-17L536 166.1l-17 17-39 39-39-39z"/>\n </symbol>\n <symbol id="mute-light" class="icon" width="1em" height="1em" viewBox="0 0 576 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M149.3 328.1l-9.1-8.1H128 32V192h96 12.2l9.1-8.1L284.2 64H288V448h-3.8L149.3 328.1zM0 352H32h96L272 480h16 32V448 64 32H288 272L128 160H32 0v32V320v32zm411.3-4.7L480 278.6l68.7 68.7 22.6-22.6L502.6 256l68.7-68.7-22.6-22.6L480 233.4l-68.7-68.7-22.6 22.6L457.4 256l-68.7 68.7 22.6 22.6z"/>\n </symbol>\n <symbol id="partner" class="icon" width="1em" height="1em" viewBox="0 0 640 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M263.9 64c-33.9 0-66.7 12-92.6 33.7L144 120.7v39.1c2.7-.5 5.3-1.7 7.4-3.5l40.5-34c13.3-11.2 28.9-19 45.5-23.1L272.6 64h-8.7zM112 352.3c8.9 1 17.2 5 23.6 11.4l28.6 28.6 15.4 15.4 .1 .1 24.3 24.3c25.1 25.1 65.4 26.2 91.8 2.6c.8-.7 1.6-1.4 2.3-2.2c26.3 21.3 65.3 18.6 88.4-7.3c6-6.7 10.3-14.4 13-22.5c19.2 4 40-.8 55.7-14.8c11.3-10.1 18.2-23.2 20.6-37H528V368c0 26.5 21.5 48 48 48h16c26.5 0 48-21.5 48-48V160c0-17.7-14.3-32-32-32H560 528v32V318.8H473.1c-3.1-8.7-8.1-17-15.1-24l-85.6-85.6 8.1-7.5c6.5-6 6.9-16.1 .9-22.6s-16.1-6.9-22.6-.9l-76.1 70.2c-13.2 12.2-33.6 12.4-47 .4c-15.4-13.7-15.7-37.5-.8-51.6l79.4-75C332.2 105.4 355.8 96 380.4 96c22.7 0 44.6 8 61.9 22.6l44.8 37.7c2.5 2.1 5.6 3.4 8.8 3.7V121.8L462.9 94.1C439.8 74.6 410.6 64 380.4 64c-32.8 0-64.3 12.5-88.1 35l-79.4 75c-28.6 27-27.9 72.7 1.5 98.8c25.8 22.9 64.7 22.5 90-.8l44.5-41 86.5 86.5c13 13 12.4 34.3-1.4 46.5c-10.9 9.7-26.7 10.6-38.6 3c-5-3.3-11.4-3.4-16.6-.5s-8.3 8.6-8 14.6c.4 8.1-2.3 16.3-8.1 22.9c-12.3 13.9-33.8 14.5-46.9 1.4l-8.1-8.1c-3.6-3.6-8.7-5.3-13.7-4.5s-9.4 3.9-11.8 8.4c-1.9 3.6-4.4 6.9-7.6 9.8c-13.8 12.3-34.8 11.7-47.8-1.3l-39.9-39.8-28.6-28.6c-12.4-12.4-28.9-19.8-46.3-20.9V160 128H80 32c-17.7 0-32 14.3-32 32V368c0 26.5 21.5 48 48 48H64c26.5 0 48-21.5 48-48V352.3zM80 160V368c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V160H80zm528 0V368c0 8.8-7.2 16-16 16H576c-8.8 0-16-7.2-16-16V160h48z"/>\n </symbol>\n <symbol id="play" class="icon" width="1em" height="1em" viewBox="0 0 384 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M384 256L0 32V480L384 256z"/>\n </symbol>\n <symbol id="play-pause" class="icon" width="1em" height="1em" viewBox="0 0 384 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M32 461.3L0 480V443 69 32L32 50.7 352.2 237.5 384 256l-31.8 18.5L32 461.3zM320.5 256L32 87.7V424.3L320.5 256z"/>\n </symbol>\n <symbol id="pause" class="icon" width="1em" height="1em" viewBox="0 0 156 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M32,96.5v352H0V64.5H32Zm124,0v352H124V64.5h32Z"/>\n </symbol>\n <symbol id="phone-solid" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/>\n </symbol>\n <symbol id="plus" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M240 64c0-8.8-7.2-16-16-16s-16 7.2-16 16V240H32c-8.8 0-16 7.2-16 16s7.2 16 16 16H208V448
3888c0 8.8 7.2 16 16 16s16-7.2 16-16V272H416c8.8 0 16-7.2 16-16s-7.2-16-16-16H240V64z"/>\n </symbol>\n <symbol id="search" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M384 208A176 176 0 1 0 32 208a176 176 0 1 0 352 0zM343.3 366C307 397.2 259.7 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 51.7-18.8 99-50 135.3L507.3 484.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L343.3 366z"/>\n </symbol>\n <symbol id="spinner" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M457 372c11.5 6.6 26.3 2.7 31.8-9.3C503.7 330.2 512 294.1 512 256C512 122.7 410.1 13.2 280 1.1C266.8-.1 256 10.7 256 24s10.8 23.9 24 25.4C383.5 61.2 464 149.2 464 256c0 29.3-6.1 57.3-17 82.6c-5.3 12.2-1.5 26.8 10 33.5z"/>\n </symbol>\n <symbol id="store" class="icon" width="1em" height="1em" viewBox="0 0 640 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M515.5 48l69.8 128H54.7L124.5 48h391zM96 0L0 176v48H48 64V488v24H88 360h24V488 224H528V488v24h48V488 224h16 48V176L544 0H96zM336 224v96H112V224H336zM112 464V368H336v96H112z"/>\n </symbol>\n <symbol id="swatch" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M0 416c0 53 43 96 96 96H496h16V496 336 320H496 331.7L447.3 204.5l11.3-11.3-11.3-11.3L334.2 68.7 322.8 57.4 311.5 68.7 192 188.2V16 0H176 16 0V16 416zm480 64H171.7l128-128H480V480zM413.4 193.1L192 414.5v-181L322.8 102.6l90.5 90.5zM96 480c-35.3 0-64-28.7-64-64l0-128H160V416c0 35.3-28.7 64-64 64zM32 256V160H160v96H32zm0-128V32l128 0v96H32zM96 440a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/>\n </symbol>\n <symbol id="square-solid" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"/>\n </symbol>\n <symbol id="smile" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M480 256A224 224 0 1 0 32 256a224 224 0 1 0 448 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm129.7 71.2l28.6-14.3c8.7 17.5 41.3 55.2 97.7 55.2s88.9-37.7 97.7-55.2l28.6 14.3C369.7 352.3 327.6 400 256 400s-113.7-47.7-126.3-72.8zM152.4 208a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm184-24a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>\n </symbol>\n <symbol id="trowel" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M343.9 213.4L245.3 312l65.4 65.4c7.9 7.9 11.1 19.4 8.4 30.3s-10.8 19.6-21.5 22.9l-256 80c-11.4 3.5-23.8 .5-32.2-7.9S-2.1 481.8 1.5 470.5l80-256c3.3-10.7 12-18.9 22.9-21.5s22.4 .5 30.3 8.4L200 266.7l98.6-98.6c-14.3-14.6-14.2-38 .3-52.5l95.4-95.4c26.9-26.9 70.5-26.9 97.5 0s26.9 70.5 0 97.5l-95.4 95.4c-14.5 14.5-37.9 14.6-52.5 .3z"/>\n </symbol>\n <symbol id="unmute" class="icon" width="1em" height="1em" viewBox="0 0 576 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M32 160V352H160L304 480h48V32H304L160 160H32zM441.6 332.8C464.9 315.3 480 287.4 480 256s-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l28.8 38.4zm57.6 76.8c46.6-35 76.8-90.8 76.8-153.6s-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2s-22.6 88.9-57.6 115.2l28.8 38.4z"/>\n </symbol>\n <symbol id="unmute-light" class="icon" width="1em" height="1em" viewBox="0 0 576 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M181.3 328.1l-9.1-8.1H160 64V192h96 12.2l9.1-8.1L316.2 64H320V448h-3.8L181.3 328.1zM32 352H64h96L304 480h16 32V448 64 32H320 304L160 160H64 32v32V320v32zm409.6-19.2C464.9 315.3 480 287.4 48
38880 256s-15.1-59.3-38.4-76.8l-19.2 25.6C437.9 216.5 448 235.1 448 256s-10.1 39.5-25.6 51.2l19.2 25.6zm57.6 76.8c46.6-35 76.8-90.8 76.8-153.6s-30.2-118.6-76.8-153.6L480 128c38.9 29.2 64 75.7 64 128s-25.1 98.8-64 128l19.2 25.6z"/>\n </symbol>\n <symbol id="user" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M320 128a96 96 0 1 0 -192 0 96 96 0 1 0 192 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM32 480H416c-1.2-79.7-66.2-144-146.3-144H178.3c-80 0-145 64.3-146.3 144zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/>\n </symbol>\n <symbol id="users" class="icon" width="1em" height="1em" viewBox="0 0 640 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192l42.7 0c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0L21.3 320C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7l42.7 0C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3l-213.3 0zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352l117.3 0C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7l-330.7 0c-14.7 0-26.7-11.9-26.7-26.7z"/>\n </symbol>\n <symbol id="warning" class="icon" width="1em" height="1em" viewBox="0 0 64 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M48 48V32H16V48 352v16H48V352 48zm8 376H8v48H56V424z"/>\n </symbol>\n <symbol id="write" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M330 137.9L374.1 182 233.7 322.4l-50.4 6.3 6.3-50.4L330 137.9zM425 199l17-17 36.1-36.1L512 112 478.1 78.1 433.9 33.9 400 0 366.1 33.9 330 70 313 87l-17 17L144 256l-9.9 78.9L128 384l49.1-6.1L256 368 408 216l17-17zm-17-50.9L363.9 104 400 67.9 444.1 112 408 148.1zM24 64L0 64 0 88 0 488l0 24 24 0 400 0 24 0 0-24 0-176 0-24-48 0 0 24 0 152L48 464l0-352 152 0 24 0 0-48-24 0L24 64z"/>\n </symbol>\n <symbol id="amazon" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"/>\n </symbol>\n <symbol id="amazon-music" class="icon" width="1em" height="1em" viewBox="0 0 512 311" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M25.49,211.74C34.86,206,44.28,201.29,54.8,200c11.25-1.44,22.43-1.53,31.17,7.71,4.59,4.86,4.59,4.82,10.41,1.53,11.44-6.45,23.5-10.3,36.87-9.85,16.56.56,27.66,11.23,27.76,27.72.14,24.28.06,48.55,0,72.83,0,5.33-1,6.32-6.43,6.54-2.79.11-5.58.1-8.37,0-5.58-.19-6.65-1.27-6.66-6.92q-.06-30.92,0-61.82a43.6,43.6,0,0,0-.94-9.34c-1.58-7.29-6-11.32-13.4-11.63-10.38-.43-19.91,2.64-29,7.4C93.53,225.53,94,227.76,94,230q0,33.53,0,67.06c0,1.57,0,3.15-.08,4.72-.16,2.66-1.7,4.33-4.26,4.47-4.34.23-8.72.23-13.07.06C73.37,306.15,72,304,71.94,301c-.1-4.37-.08-8.74-.08-13.1q0-24.88,0-49.78a70.58,70.58,0,0,0-.36-8.36c-1-8.24-6-12.82-14.32-13.06-9.25-.26-17.87,2.26-26.22,6.11-3.35,1.54-4.4,3.76-4.37,7.35.13,21.83.06,43.66.06,65.49,0,10.47-.36,10.83-10.88,10.83-11.24,0-11.24,0-11.24-11.44q0-42.18,0-84.35c0-7.62.52-8.12,7.94-8.14H13C22.41,202.52,22.41,202.52,25.49,211.74ZM106.54,8.45c-.15-5.56-1.13-6.55-6.83-6.73-2.26-.07-4.53,0-6.8,0-7.71.05-8.47.76-8.48,8.32q0,34.05,0,68.09c0,2.27,0,4.54.07,6.8.1,3.15,1.68,4.83,4.91,4.82,3.67,0,7.33,0,11,0,6.48,0,7.17-.73,7.18-7.29q0-22.51,0-45a24,24,0,0,1,2-10.68c1.78-3.7,4.85-5.27,9-5s6.31,2.56,7.4,6.25a28.68,28.68,0,0,1,1.11,8.26q-.07,23.57,0,47.13c0,5.5.85,6.28,6.41,6.38,2.79.05,5.58,0,8.37,0,7.6,0,8.35-.72,8.36-8.38,0-14.31,0-28.63,0-42.94,0-3.14-.14-6.31.83-9.35a10.23,10.23,0,0,1,10.78-7.28c4.69.6,6.85,3.34,7.2,9.27.15,2.44.2,4.88.21,7.33,0,14.83,0,29.67,0,44.51,0,5.9.91,6.75,6.58,6.83,3.32.05,6.63.06,9.95,0,5.59-.1,6.43-.91,6.5-6.36.07-5.24.07-10.47.07-15.71,0-15,.22-30-.1-45C192,11.28,186.21,4.12,175.79,1.17a23.69,23.69,0,0,0-26.28,9.3c-.65.92-.83,2.33-2.33,2.47-8.71-16.6-30-17-40.64-.91C106.54,10.19,106.56,9.32,106.54,8.45ZM257.7,302.5c.49,2.6,1.52,5,4.4,5.05,4.56,0,9.44,1.85,13.58-1.55.94-.78,1.1-2.16,1.16-3.39.08-1.4.1-2.79.1-4.19q0-42.67,0-85.34c0-1.57,0-3.15-.15-4.7-.3-3.06-1.92-4.75-5.13-4.72-3.83,0-7.67,0-11.51,0-3.17,0-4.8,1.77-5.12,4.79a43.45,43.45,0,0,0-.11,4.71q0,33,0,66c0,2.17.55,4.47-2,6-10,6.05-20.7,9.17-32.41,7.48A12.17,12.17,0,0,1,210.2,284a37.6,37.6,0,0,1-2-12.31q0-30.89,0-61.78c0-5.19-1-6.16-6.07-6.29-3.32-.08-6.63,0-9.94,0-3.65,0-5.42,1.77-5.41,5.48,0,24.78-.3,49.57.19,74.34.29,14.63,9.24,24,23.41,26.59,11.84,2.2,22.83-.6,33.45-5.43,4.24-1.93,8.24-4.4,12.58-6.75C256.88,299.58,257.42,301,257.7,302.5Zm209.07-295c.14-3.76-1.7-5.56-5.26-5.65q-6-.17-12,0c-3.23.1-5.12,1.5-5.11,5.16q.09,38.74,0,77.49c0,3.85,1.86,5.34,5.47,5.29s7.33,0,11,0c6.18-.06,7-.85,7-6.94q0-21.72,0-43.46a24.53,24.53,0,0,1,3.3-13A9.24,9.24,0,0,1,481,21.72c4.08.54,5.75,3.41,6.87,
38886.94a22.3,22.3,0,0,1,.63,6.74c0,10,0,19.9,0,29.85,0,6.28,0,12.56,0,18.85,0,3.21,1.06,5.54,4.69,5.59q7.33.11,14.65,0c2.75,0,4.09-1.57,4.08-4.34-.06-21,.29-41.9-.3-62.83C511.26,10.73,504.79,3.19,494.43,1,484.32-1.21,474.57.9,468.37,11.52a5.78,5.78,0,0,1-1.15,1.08C466.3,10.84,466.7,9.09,466.77,7.45ZM320.27,200.52c-13.84,3-24.22,13.09-25.55,25.06-1.63,14.67,5.26,25.8,19.86,32,1.76.75,3.56,1.41,5.34,2.1,7.14,2.78,14.32,5.44,21.39,8.39,3.22,1.34,6.19,3.23,7.65,6.74,3.14,7.54-1.44,15.49-10.3,17.81-8.51,2.24-17,.77-25.39-.47a95.42,95.42,0,0,1-13.15-3.29c-2.05-.61-4.62-1.38-6.12,1.17-2.94,5,.22,13.49,5.66,15.58a81.77,81.77,0,0,0,26,5.15c10.95.46,21.49-1.16,31.05-7.21,17.28-10.93,19.33-40.06-2.3-50.36-4.41-2.1-8.93-3.89-13.46-5.69-6.79-2.7-13.82-4.85-20.2-8.54-4.58-2.66-6.44-6.64-5.81-11.87.59-4.95,3.75-7.69,8.09-9.3a23.91,23.91,0,0,1,7.16-1.29,78.74,78.74,0,0,1,27.33,3.4c2.18.68,4.47,1.51,6.05-1.08,2.95-4.8.05-13.3-5.25-15.19a65.77,65.77,0,0,0-24.56-4.26A57.25,57.25,0,0,0,320.27,200.52Zm134,47.21c1.35-16,6.74-30.1,31-30.18A76.68,76.68,0,0,1,505.48,220c2,.52,3.8.73,5.1-1.27,3.38-5.25.4-13.95-5.43-16.07-9.38-3.42-19.11-3.82-28.89-3.13-21.33,1.5-37.45,14.85-42.88,35.48a80.56,80.56,0,0,0-1.14,35.79c2.78,14.71,9.38,27.1,23.43,34,15.28,7.46,31.22,7.8,47.34,3.08,8.53-2.49,9-3.27,8.9-12,0-6.76-1.06-7.54-7.85-5.8a70.45,70.45,0,0,1-19.59,2.65c-17.18-.5-26.17-8.24-29.52-25.12-.83-4.18-.56-8.34-.68-12.51C454.27,252.62,454.09,250.16,454.29,247.73ZM318,27.84c-7.51,10.7-14.59,21.75-22.71,32-5.69,7.17-7,14.81-6.65,23.43.21,4.8,2,8,7.86,4.87,8.28-4.37,17.54-5.86,26.86-5.3a60.71,60.71,0,0,1,23.13,5.87c3.5,1.69,5.67.32,6-3.63.28-3.12.11-6.28.08-9.42a8.09,8.09,0,0,0-5.18-7.77,52.63,52.63,0,0,0-16-4.67c-3.17-.35-6.32-.84-9.53-1.27.62-2.61,2-4,3.12-5.53,6.91-9.85,13.67-19.81,20.88-29.43a22.05,22.05,0,0,0,4.85-15.46c-.42-6.32-.61-6.85-7-6.87-13.6,0-27.21,0-40.81,0-11.6,0-11.6,0-11.35,11.55.13,6,.76,6.63,6.64,6.66,7.28,0,14.56,0,22.92,0C319.63,25.22,318.84,26.56,318,27.84ZM239.6,148.5c25-4.27,48.59-12.2,70.09-25.88a48.62,48.62,0,0,0,5.09-3.66c1.53-1.29,2.6-2.9,1.48-5-1-1.93-2.72-2.55-4.8-2.46s-3.68,1-5.46,1.7c-42.43,16.26-86.15,21.84-131.32,16.28A272.82,272.82,0,0,1,79.53,99.69c-2.3-1.22-5.17-4.1-7.36-1s1.41,4.85,3.43,6.52c37.49,31,80.89,45.52,128,46.42A214.41,214.41,0,0,0,239.6,148.5Zm70.83-44.06c-5.95-.47-11.75,1.28-17.68,1.27-1.4,0-3,.39-3.46-1.41-.44-1.56.54-2.69,1.77-3.46a40.61,40.61,0,0,1,5.41-3.13,57.16,57.16,0,0,1,34.68-3.83c6.68,1.32,8.39,3.29,7.78,10-1.17,13-5.47,24.75-14.21,34.65a24.74,24.74,0,0,1-3.1,2.76c-1.17.94-2.59,1.37-3.86.45-1.43-1-.7-2.49-.22-3.8,2.37-6.53,5-13,6.68-19.75,2.77-11.47,1.16-13.64-10.65-13.77Zm76.31,199.18c0,6.2,1,7.17,7.37,7.25,2.44,0,4.88,0,7.32,0,7.66,0,8.73-1.08,8.74-8.79q0-45,0-90c0-.88,0-1.75,0-2.62-.3-4.22-1.62-5.62-5.76-5.78-3.48-.13-7-.07-10.46,0-6.35.07-7.17.89-7.18,7.34q0,23,0,46.05Q386.73,280.33,386.74,303.62Zm-2.1-128.48c0-8.8,4.7-13.46,13.55-13.47s14.12,5.05,14.06,13.75c-.05,8.1-5.67,13.72-13.83,13.86C390,189.41,384.62,183.89,384.64,175.14ZM73.88,78.8c-3.26,2.63-6.43,5.37-9.58,8.12-2.51,2.19-4.93,2.39-7.38,0-1.11-1.1-2.3-2.14-3.34-3.31-3.8-4.31-3.79-4.34-8.6-.71-9,6.84-19.09,8-29.71,5-7-2-11.57-6.91-13.77-13.88C-3.29,58.71,3.64,44.41,18.59,38.76,25.16,36.27,32,35.32,39,34.81c7.55-.56,9.07-3.2,6.49-10.48-1.41-4-4.23-5.72-8.3-6-5.07-.3-9.37,1-11.95,5.73-3.41,6.28-3.36,6.26-10.67,5.24-2.41-.33-4.89-.21-7.3-.59-4-.65-4.92-2.08-4-6.12,2.22-9.49,8.39-15.55,17.2-18.9a47.3,47.3,0,0,1,28.26-2c14,3.31,20.29,11.06,20.74,25.53.17,5.58,0,11.17,0,16.76h0c0,3.49.12,7,0,10.48C69.28,61,70.07,67,74.67,72.08,76.83,74.46,76.43,76.75,73.88,78.8Zm-29.55-31c-4.73-1.36-14.5,2.06-17.54,6C23,58.78,23.92,68.42,28.47,71.3c5,3.14,11.68.61,15.15-5.79a26.24,26.24,0,0,0,2.8-11.77C45.71,51.91,47.88,48.85,44.33,47.82ZM278.14,79.48c-2.94,2.48-5.95,4.86-8.81,7.42s-5.27,2.21-7.72-.42c-1.18-1.28-2.76-2.32-3.56-3.8-2.25-4.13-4.37-3-7.2-.55-8.49,7.29-18.54,8.54-29,6.17s-17.09-11.72-16.3-23.66c0-13.09,6.76-22.18,19.61-26.48,7.16-2.4,14.64-3.11,22.07-3.79,4.16-.38,4.79-2.39,4.33-5.82-.85-6.32-3.23-9.35-8.09-10.06-6.6-1-11.34,1.21-13.58,7.05-1.49,3.91-3.81,5.19-7.59,4.3-3.09-.74-6.25-.58-9.35-1-4.67-.66-5.59-2.18
3888-4.39-6.71,1.93-7.32,6.14-13,12.86-16.37,13.39-6.65,27.11-7.32,40.8-.89,7.64,3.59,11.19,10,12,18.29,1.09,11.34.56,22.68.59,34,0,5.25.95,9.91,4.33,14.14C282.3,75.29,282,76.24,278.14,79.48ZM251.7,52.94c-.49-1.95,1-4.89-2.27-5.1-6.24-.4-12.37.46-16.84,5.33a12.41,12.41,0,0,0-2.41,13.62c1.31,3.37,3.59,5.61,7.31,5.78,5.34.23,8.7-2.83,11.24-7.15C251,61.51,250.9,57.07,251.7,52.94ZM432.28,45.6c0,8.85-1.67,17.35-5.93,25.17-7,12.81-17.75,19.57-32.4,18.88-14.31-.67-24.33-8.36-29.45-21.5-7.44-19.1-7.28-38.14,5.1-55.25,12.89-17.8,40.92-16.92,53.67,1C429.14,22.17,432.27,33.21,432.28,45.6ZM407.8,44.3a60.09,60.09,0,0,0-2.27-19.25c-1.3-4.24-4.08-6.87-8.54-7.39-4.09-.48-7.79,1.92-10,6.27a23.68,23.68,0,0,0-1.94,6.48,77.08,77.08,0,0,0-.87,18.26c.38,5.89.66,11.88,3.24,17.37,2.41,5.13,7.23,7.23,12.12,5.24,3.31-1.35,5-4.21,6.13-7.44C407.88,57.8,407.85,51.52,407.8,44.3Z"/>\n </symbol>\n <symbol id="apple" class="icon" width="1em" height="1em" viewBox="0 0 384 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>\n </symbol>\n <symbol id="apple-music" class="icon" width="1em" height="1em" viewBox="0 0 384 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M381.9 388.2c-6.4 27.4-27.2 42.8-55.1 48-24.5 4.5-44.9 5.6-64.5-10.2-23.9-20.1-24.2-53.4-2.7-74.4 17-16.2 40.9-19.5 76.8-25.8 6-1.1 11.2-2.5 15.6-7.4 6.4-7.2 4.4-4.1 4.4-163.2 0-11.2-5.5-14.3-17-12.3-8.2 1.4-185.7 34.6-185.7 34.6-10.2 2.2-13.4 5.2-13.4 16.7 0 234.7 1.1 223.9-2.5 239.5-4.2 18.2-15.4 31.9-30.2 39.5-16.8 9.3-47.2 13.4-63.4 10.4-43.2-8.1-58.4-58-29.1-86.6 17-16.2 40.9-19.5 76.8-25.8 6-1.1 11.2-2.5 15.6-7.4 10.1-11.5 1.8-256.6 5.2-270.2 .8-5.2 3-9.6 7.1-12.9 4.2-3.5 11.8-5.5 13.4-5.5 204-38.2 228.9-43.1 232.4-43.1 11.5-.8 18.1 6 18.1 17.6 .2 344.5 1.1 326-1.8 338.5z"/>\n </symbol>\n <symbol id="backstage" class="icon" width="1em" height="1em" viewBox="0 0 403 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M361.79,198.41A96.56,96.56,0,0,0,377.85,186c.95-.92,1.85-1.83,2.75-2.75a99.36,99.36,0,0,0,9.47-11.21,75.39,75.39,0,0,0,7.54-12.87,58,58,0,0,0,5.2-19.59c1.78-23.17-11.94-46.21-42.53-64.79L237.09,0,93.49,137.68,0,227.32l129.67,78.76a133.1,133.1,0,0,0,69,19.6c29.76,0,58.27-10.51,79.31-30.69,22.88-21.94,30.47-50.33,16.36-73.93a59.26,59.26,0,0,0-8.12-10.6A105.93,105.93,0,0,0,309.26,213h.17a101.45,101.45,0,0,0,37-6.92A95.67,95.67,0,0,0,361.79,198.41ZM241.73,269.87c-23.07,22.12-60.18,25.37-90.39,7.05l-89.72-54.5,80.54-77.23,91.24,55.42C266.27,220.55,264.47,248.07,241.73,269.87Zm10.67-98.24L168,120.38l76.9-73.78,82.83,50.3c31,18.79,35,44.21,12.6,65.72A72.41,72.41,0,0,1,252.4,171.63Zm35.65,227c-23.37,22.4-55.13,34.75-89.41,34.75a147.65,147.65,0,0,1-76.54-21.74L0,337.57v29.48L129.67,445.8a133.12,133.12,0,0,0,69,19.62c29.76,0,58.27-10.52,79.31-30.69,15.38-14.75,23.88-32.42,23.5-49.58V383a104.51,104.51,0,0,1-13.4,15.69Zm0-46.6c-23.37,22.4-55.13,34.74-89.41,34.74a147.74,147.74,0,0,1-76.54-21.73L0,291v29.48l129.67,78.76a133.21,133.21,0,0,0,69,19.62c29.76,0,58.27-10.53,79.31-30.7,15.38-14.74,23.88-32.41,23.5-49.58v-2.13a105,105,0,0,1-13.4,15.69Zm0-46.6c-23.37,22.41-55.13,34.75-89.41,34.75a147.74,147.74,0,0,1-76.54-21.73L0,244.41V273.9l129.67,78.75a133.2,133.2,0,0,0,69,19.61c29.76,0,58.27-10.51,79.31-30.68,15.38-14.76,23.88-32.42,23.5-49.59v-2.18a103.18,103.18,0,0,1-13.4,15.73ZM388,336.21a112.41,112.41,0,0,1-71.88,30.9h0v32a97.46,97.46,0,0,0,61.78-26.73c16.72-16,25.24-33.59,25.07-50.95v-2.62a113.09,113.09,0,0,1-15,17.5Zm-99.94,109C264.68,467.61,232.92,480,198.64,480a147.65,147.65,0,0,1-76.54-21.74L0,384.15v29.49l129.67,78.74a133.21,133.21,0,0,0,69,19.62c29.76,0,58.27-10.51,79.31-30.7,15.38-14.74,23.88-32.41,23.5-49.57v-2.14a103.36,103.36,0,0,1-13.4,15.69Zm102.4-251.09c-.81.82-1.61,1.64-2.45,2.46a112.31,112.31,0,0,1-12.7,10.33,109.62,109.62,0,0,1-13.85,8.37,113,113,0,0,1-31.33,10.4,115.89,115.89,0,0,1-16.91,1.88c.59,1.92,1.07,3.88,1.49,5.86a63.88,63.88,0,0,1,1.36,14.33v11.55h.06a100.85,100.85,0,0,0,30.27-6.64,96.69,96.69,0,0,0,31.51-20.09c1-.92,1.79-1.87,2.7-2.8a97.46,97.46,0,0,0,9.47-11.21,76.09,76.09,0,0,0,7.54-12.83,57.86,57.86,0,0,0,5.16-19.66c.11-1.47.24-2.95.23-4.42v-2.41q-1.29,1.85-2.69,3.69A116.37,116.37,0,0,1,390.45,194.11Zm0,93.1c-.82.84-1.56,1.68-2.39,2.51a112.46,112.46,0,0,1-71.88,30.9h0v31.87h0A97.46,97.46,0,0,0,378,325.76a87.62,87.62,0,0,0,19.65-26.89,58,58,0,0,0,5.16-19.64c.11-1.48.24-3,.23-4.43v-2.62c-.88,1.28-1.74,2.57-2.71,3.83A112.63,112.63,0,0,1,390.45,287.21Zm0-46.6c-.82.84-1.56,1.68-2.39,2.51a115.7,115.7,0,0,1-26.58,18.7A114,114,0,0,1,316.18,274h0v31.91h0A97.51,97.51,0,0,0,378,279.16c1-.92,1.79-1.87,2.7-2.8a97.46,97.46,0,0,0,9.47-11.21,76,76,0,0,0,7.48-12.85,58.09,58.09,0,0,0,5.16-19.65c.11-1.48.24-3,.23-4.43v-2.63c-.88,1.29-1.74,2.58-2.71,3.85a113.65,113.65,0,0,1-9.84,11.19Z"/>\n </symbol>\n <symbol id="bands-town" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M136.52,102.39h102.4v136.54h-102.4V102.39ZM273.06,102.39h102.4v136.54h-102.4V102.39ZM409.6,0h102.4v238.92h-102.4V0ZM136.52,273.06v102.4h273.08v34.13H102.39V0H0v511.98h511.98v-238.92H136.52Z"/>\n </symbol>\n <symbol id="deezer" class="icon" width="1em" height="1em" viewBox="0 0 576 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M451.46,244.71H576V172H451.46Zm0-173.89v72.67H576V70.82Zm0,275.06H576V273.2H451.46ZM0,447.09H124.54V374.42H0Zm150.47,0H275V374.42H150.47Zm150.52,0H425.53V374.42H301Zm150.47,0H576V374.42H451.46ZM301,345.88H425.53V273.2H301Zm-150.52,0H275V273.2H150.47Zm0-101.17H275V172H150.47Z"/>\n </symbol>\n <symbol id="discord" class="icon" width="1em" height="1em" viewBox="0 0 640 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109
3888-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/>\n </symbol>\n <symbol id="instagram" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>\n </symbol>\n <symbol id="facebook" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/>\n </symbol>\n <symbol id="facebook-like" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M288.8 81.7c3.5-12.8 16.7-20.3 29.5-16.8s20.3 16.7 16.8 29.5l-4.5 16.4c-5.5 20.2-13.9 39.3-24.7 56.9c-3.1 4.9-3.2 11.1-.4 16.2s8.2 8.2 14 8.2H448c17.7 0 32 14.3 32 32c0 11.3-5.9 21.3-14.8 27c-7.2 4.6-9.5 13.9-5.3 21.3c2.6 4.6 4.1 10 4.1 15.7c0 12.4-7 23.1-17.3 28.5c-4.2 2.2-7.3 6.1-8.3 10.8s.1 9.5 3 13.2c4.2 5.4 6.7 12.2 6.7 19.5c0 14.2-9.2 26.3-22.1 30.4c-7.8 2.6-12.4 10.6-10.7 18.6c.5 2.2 .7 4.5 .7 6.9c0 17.7-14.3 32-32 32H294.5c-15.8 0-31.2-4.7-44.4-13.4l-38.5-25.7c-9-6-16.6-13.7-22.4-22.6c-4.9-7.4-14.8-9.4-22.2-4.6s-9.4 14.8-4.6 22.2c8.1 12.3 18.7 23.1 31.4 31.6l38.5 25.7c18.4 12.3 40 18.8 62.1 18.8H384c35.3 0 64-28.7 64-64l0-.6c19.1-11.1 32-31.7 32-55.4c0-8.7-1.8-17.1-4.9-24.7C487.9 323.6 496 306.8 496 288c0-6.5-1-12.8-2.8-18.7C504.8 257.7 512 241.7 512 224c0-35.3-28.7-64-64-64H346.4c6.2-13.1 11.3-26.7 15.1-40.9l4.5-16.4c8.1-29.8-9.5-60.6-39.3-68.8s-60.6 9.5-68.8 39.3l-4.5 16.4c-8.9 32.6-29.6 60.8-58.2 79l-3.1 2c-11.8 7.5-21.7 17.1-29.5 28.2c-5.1 7.2-3.3 17.2 4 22.3s17.2 3.3 22.3-4c5.4-7.7 12.2-14.4 20.4-19.5l3.1-2c35.3-22.4 60.9-57.2 71.9-97.5l4.5-16.4zM32 224H96V448H32V224zM0 224V448
3888c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32z"/>\n </symbol>\n <symbol id="facebook-like-solid" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2H464c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48H294.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V320 272 247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192H96c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z"/>\n </symbol>\n <symbol id="facebook-messenger" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M256.55 8C116.52 8 8 110.34 8 248.57c0 72.3 29.71 134.78 78.07 177.94 8.35 7.51 6.63 11.86 8.05 58.23A19.92 19.92 0 0 0 122 502.31c52.91-23.3 53.59-25.14 62.56-22.7C337.85 521.8 504 423.7 504 248.57 504 110.34 396.59 8 256.55 8zm149.24 185.13l-73 115.57a37.37 37.37 0 0 1-53.91 9.93l-58.08-43.47a15 15 0 0 0-18 0l-78.37 59.44c-10.46 7.93-24.16-4.6-17.11-15.67l73-115.57a37.36 37.36 0 0 1 53.91-9.93l58.06 43.46a15 15 0 0 0 18 0l78.41-59.38c10.44-7.98 24.14 4.54 17.09 15.62z"/>\n </symbol>\n <symbol id="giphy" class="icon" width="1em" height="1em" viewBox="0 0 398 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M0,0V512H398V184.87l-56.88,56.92V455.13H56.88V56.92h99.48L213.2,0ZM227.44,0V170.67H398V113.79H341.12V56.92H284.28V0"/>\n </symbol>\n <symbol id="globe" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/>\n </symbol>\n <symbol id="google-plus" class="icon" width="1em" height="1em" viewBox="0 0 640 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z"/>\n </symbol>\n <symbol id="mix-cloud" class="icon" width="1em" height="1em" viewBox="0 0 640 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M212.98 346.566H179.789V195.114L185.973 173.47H175.262L137.127 346.566H76.1069L37.7323 173.47H27.276L33.1913 195.114V346.566H0V165H65.6506L102.248 338.096H110.747L147.329 165H212.98L212.98 346.566ZM544.459 283.589L458.434 345.655V307.534L531.329 255.776L458.434 204.017V165.896L544.459 228.231H553.721L640 165.896V204.017L566.866 255.7
388876L640 307.549V345.655L553.721 283.589H544.459ZM430.157 272.311H248.113V239.255H430.157V272.311Z"/>\n </symbol>\n <symbol id="magic" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path fill="#6851ff" d="M224,0a632.54,632.54,0,0,0,77,75.31,585.47,585.47,0,0,0,0,361.38A632.54,632.54,0,0,0,224,512a632.54,632.54,0,0,0-77-75.31A582.93,582.93,0,0,0,175.54,256,582.93,582.93,0,0,0,147,75.31,632.54,632.54,0,0,0,224,0ZM93.67,397.2A653.77,653.77,0,0,0,0,345.49,291.55,291.55,0,0,0,14,256,291.55,291.55,0,0,0,0,166.51,653.77,653.77,0,0,0,93.67,114.8,583.43,583.43,0,0,1,110.93,256,583.43,583.43,0,0,1,93.67,397.2ZM337.07,256a583.43,583.43,0,0,0,17.26,141.2A653.77,653.77,0,0,1,448,345.49a292.82,292.82,0,0,1,0-179,653.77,653.77,0,0,1-93.67-51.71A583.43,583.43,0,0,0,337.07,256Z"/>\n </symbol>\n <symbol id="musically" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M256,0C114.62,0,0,114.61,0,256S114.61,512,256,512,512,397.39,512,256,397.38,0,256,0ZM398.21,303l-1.48.64v.72H340a34,34,0,0,1-33.93-33.93v-38a8,8,0,0,0-8-8h0a8,8,0,0,0-8,8v93a33.93,33.93,0,0,1-67.86,0V186.58a8,8,0,0,0-16.06,0v83.88a34,34,0,0,1-33.93,33.88h-57l-1.44-1.4v-23l1.44-1.41H172a8,8,0,0,0,8-8h0V186.58a33.93,33.93,0,1,1,67.85,0V325.46a8,8,0,0,0,16.06,0h0V232.39a33.93,33.93,0,0,1,67.86,0v38.07a8,8,0,0,0,8,8h56.69v.64l1.48.72Z"/>\n </symbol>\n <symbol id="pinterest" class="icon" width="1em" height="1em" viewBox="0 0 496 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/>\n </symbol>\n <symbol id="snapchat" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M496.926,366.6c-3.373-9.176-9.8-14.086-17.112-18.153-1.376-.806-2.641-1.451-3.72-1.947-2.182-1.128-4.414-2.22-6.634-3.373-22.8-12.09-40.609-27.341-52.959-45.42a102.889,102.889,0,0,1-9.089-16.12c-1.054-3.013-1-4.724-.248-6.287a10.221,10.221,0,0,1,2.914-3.038c3.918-2.591,7.96-5.22,10.7-6.993,4.885-3.162,8.754-5.667,11.246-7.44,9.362-6.547,15.909-13.5,20-21.278a42.371,42.371,0,0,0,2.1-35.191c-6.2-16.318-21.613-26.449-40.287-26.449a55.543,55.543,0,0,0-11.718,1.24c-1.029.224-2.059.459-3.063.72.174-11.16-.074-22.94-1.066-34.534-3.522-40.758-17.794-62.123-32.674-79.16A130.167,130.167,0,0,0,332.1,36.443C309.515,23.547,283.91,17,256,17S202.6,23.547,180,36.443a129.735,129.735,0,0,0-33.281,26.783c-14.88,17.038-29.152,38.44-32.673,79.161-.992,11.594-1.24,23.435-1.079,34.533-1-.26-2.021-.5-3.051-.719a55.461,55.461,0,0,0-11.717-1.24c-18.687,0-34.125,10.131-40.3,26.449a42.423,42.423,0,0,0,2.046,35.228c4.105,7.774,10.652,14.731,20.014,21.278,2.48,1.736,6.361,4.24,11.246,7.44,2.641,1.711,6.5,4.216,10.28,6.72a11.054,11.054,0,0,1,3.3,3.311c.794,1.624.818,3.373-.36,6.6a102.02,102.02,0,0,1-8.94,15.785c-12.077,17.669-29.363,32.648-51.434,44.639C32.355,348.608,20.2,352.75,15.069,366.7c-3.868,10.528-1.339,22.506,8.494,32.6a49.137,49.137,0,0,0,12.4,9.387,134.337,134.337,0,0,0,30.342,12.139,20.024,20.024,0,0,1,6.126,2.741c3.583,3.137,3.075,7.861,7.849,14.78a34.468,34.468,0,0,0,8.977,9.127c10.019,6.919,21.278,7.353,33.207,7.811,10.776.41,22.989.881,36.939,5.481,5.778,1.91,11.78,5.605,18.736,9.92C194.842,480.951,217.707,495,255.973,495s61.292-14.123,78.118-24.428c6.907-4.24,12.872-7.9,18.489-9.758,13.949-4.613,26.163-5.072,36.939-5.481,11.928-.459,23.187-.893,33.206-7.812a34.584,34.584,0,0,0,10.218-11.16c3.434-5.84,3.348-9.919,6.572-12.771a18.971,18.971,0,0,1,5.753-2.629A134.893,134.893,0,0,0,476.02,408.71a48.344,48.344,0,0,0,13.019-10.193l.124-.149C498.389,388.5,500.708,376.867,496.926,366.6Zm-34.013,18.277c-20.745,11.458-34.533,10.23-45.259,17.137-9.114,5.865-3.72,18.513-10.342,23.076-8.134,5.617-32.177-.4-63.239,9.858-25.618,8.469-41.961,32.822-88.038,32.822s-62.036-24.3-88.076-32.884c-31-10.255-55.092-4.241-63.239-9.858-6.609-4.563-1.24-17.211-10.341-23.076-10.739-6.907-24.527-5.679-45.26-17.075-13.206-7.291-5.716-11.8-1.314-13.937,75.143-36.381,87.133-92.552,87.666-96.719.645-5.046,1.364-9.014-4.191-14.148-5.369-4.96-29.189-19.7-35.8-24.316-10.937-7.638-15.748-15.264-12.2-24.638,2.48-6.485,8.531-8.928,14.879-8.928a27.643,27.643,0,0,1,5.965.67c12,2.6,23.659,8.617,30.392,10.242a10.749,10.749,0,0,0,2.48.335c3.6,0,4.86-1.811,4.612-5.927-.768-13.132-2.628-38.725-.558-62.644,2.84-32.909,13.442-49.215,26.04-63.636,6.051-6.932,34.484-36.976,88.857-36.976s82.88,29.92,88.931,36.827c12.611,14.421,23.225,30.727,26.04,63.636,2.071,23.919.285,49.525-.558,62.644-.285,4.327,1.017,5.927,4.613,5.927a10.648,10.648,0,0,0,2.48-.335c6.745-1.624,18.4-7.638,30.4-10.242a27.641,27.641,0,0,1,5.964-.67c6.386,0,12.4,2.48,14.88,8.928,3.546,9.374-1.24,17-12.189,24.639-6.609,4.612-30.429,19.343-35.8,24.315-5.568,5.134-4.836,9.1-4.191,14.149.533,4.228,12.511,60.4,87.666,96.718C468.629,373.011,476.119,377.524,462.913,384.877Z"/>\n </symbol>\n <symbol id="soundcloud" class="icon" width="1em" height="1em" viewBox="0 0 640 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M111.4 256.3l5.8 65-5.8 68.3c-.3 2.5-2.2 4.4-4.4 4.4s-4.2-1.9-4.2-4.4l-5.6-68.3 5.6-65c0-2.2 1.9-4.2 4.2-4.2 2.2 0 4.1 2 4.4 4.2zm21.4-45.6c-2.8 0-4.7 2.2-5 5l-5 105.6 5 68.3c.3 2.8 2.2 5 5 5 2.5 0 4.7-2.2 4.7-5l5.8-68.3-5.8-105.6c0-2.8-2.2-5-4.7-5zm25.5-24.1c-3.1 0-5.3 2.2-5.6 5.3l-4.4 130 4.4 67.8c.3 3.1 2.5 5.3 5.6 5.3 2.8 0 5.3-2.2 5.3-5.3l5.3-67.8-5.3-130c0-3.1-2.5-5.3-5.3-5.3zM7.2 283.2c-1.4 0-2.2 1.1-2.5 2.5L0 321.3l4.7 35c.3 1.4 1.1 2.5 2.5 2.5s2.2-1.1 2.5-2.5l5.6-35-5.6-35.6c-.3-1.4-1.1-2.5-2.5-2.5zm23.6-21.9c-1.4 0-2.5 1.1-2.5 2.5l-6.4 57.5 6.4 56.1c0 1.7 1.1 2.8 2.5 2.8s2.5-1.1 2.8-2.5l7.2-56.4-7.2-57.5c-.3-1.4-1.4-2.5-2.8-2.5zm25.3-11.4c-1.7 0-3.1 1.4-3.3 3.3L47 321.3l5.8 65.8c.3 1.7 1.7 3.1 3.3 3.1 1.7 0 3.1-1.4 3.1-3.1l6.9-65.8-6.9-68.1c0-1.9-1.4-3.3-3.1-3.3zm25.3-2.2c-1.9 0-3.6 1.4-3.6 3.6l-5.8 70 5.8 67.8c0 2.2 1.7 3.6 3.6 3.6s3.6-1.4 3.9-3.6l6.4-67.8-6.4-70c-.3-2.2-2-3.6-3.9-3.6zm241.4-110.9c-1.1-.8-2.8-1.4-4.2-1.4-2.2 0-4.2.8-5.6 1.9-1.9 1.7-3.1 4.2-3.3 6.7v.8l-3.3 176.7 1.7 32.5 1.7 31.7c.3 4.7 4.2 8.6 8.9 8.6s8.6-3.9 8.6-8.6l3.9-64.2-3.9-177.5c-.4-3-2-5.8-4.5-7.2zm-26.7 15.3c-1.4-.8-2.8-1.4-4.4-1.4s-3.1.6-4.4 1.4c-2.2 1.4-3.6 3.9-3.6 6.7l-.3 1.7-2.8 160.8s0 .3 3.1 65.6v.3c0 1.7.6 3.3 1.7 4.7 1.7 1.9 3.9 3.1 6.4 3.1 2.2 0 4.2-1.1 5.6-2.5 1.7-1.4 2.5-3.3 2.5-5.6l.3-6.7 3.1-58.6-3.3-162.8c-.3-2.8-1.7-5.3-3.9-6.7zm-111.4 22.5c-3.1 0-5.8 2.8-5.8 6.1l-4.4 140.6 4.4 67.2c.3 3.3 2.8 5.8 5.8 5.8 3.3 0 5.8-2.5 6.1-5.8l5-67.2-5-140.6c-.2-3.3-2.7-6.1-6.1-6.1zm376.7 62.8c-10.8 0-21.1 2.2-30.6 6.1-6.4-70.8-65.8-126.4-138.3-126.4-17.8 0-35 3.3-50.3 9.4-6.1 2.2-7.8 4.4-7.8 9.2v249.7c0 5 3.9 8.6 8.6 9.2h218.3c43.3 0 78.6-35 78.6-78.3.1-43.6-35.2-78.9-78.5-78.9zm-296.7-60.3c-4.2 0-7.5 3.3-7.8 7.8l-3.3 136.7 3.3 65.6c.3 4.2 3.6 7.5 7.8 7.5 4.2 0 7.5-3.3 7.5-7.5l3.9-65.6-3.9-136.7c-.3-4.5-3.3-7.8-7.5-7.8zm-53.6-7.8c-3.3 0-6.4 3.1-6.4 6.7l-3.9 145.3 3.9 66.9c.3 3.6 3.1 6.4 6.4 6.4 3.6 0 6.4-2.8 6.7-6.4l4.4-66.9-4.4-145.3c-.3-3.6-3.1-6.7-6.7-6.7zm26.7 3.4c-3.9 0-6.9 3.1-6.9 6.9L227 321.3l3.9 66.4c.3 3.9 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9l4.2-66.4-4.2-141.7c0-3.9-3-6.9-6.9-6.9z"/>\n </symbol>\n <symbol id="spotify" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/>\n </symbol>\n <symbol id="tiktok" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/>\n </symbol>\n <symbol id="twitch" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">
3888\n <path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"/>\n </symbol>\n <symbol id="youtube" class="icon" width="1em" height="1em" viewBox="0 0 576 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/>\n </symbol>\n <symbol id="youtube-music" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M256,0C397.38,0,512,114.62,512,256S397.38,512,256,512,0,397.38,0,256,114.62,0,256,0Zm0,133.82c67.2,0,122.18,54.69,122.18,122.18a122.18,122.18,0,0,1-244.36,0c0-67.49,55-122.18,122.18-122.18m0-11.64A133.82,133.82,0,1,0,389.82,256,133.84,133.84,0,0,0,256,122.18ZM209.45,322.91l113.46-69.82-113.46-64Z"/>\n </symbol>\n <symbol id="vimeo" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"/>\n </symbol>\n <symbol id="tidal" class="icon" width="1em" height="1em" viewBox="0 0 640 428" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M320.32,0,213.55,107,106.77,0,0,107,106.77,214,213.55,107,320.32,214,213.55,321,320.32,428,427.09,321,320.32,214,427.09,107ZM427.79,107,533.89.67,640,107,533.89,213.33Z"/>\n </symbol>\n <symbol id="threads" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"/>\n </symbol>\n <symbol id="tumblr" class="icon" width="1em" height="1em" viewBox="0 0 320 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"/>\n </symbol>\n <symbol id="vevo" class="icon" width="1em" height="1em" viewBox="0 0 640 161" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M559.38,0A80.5,80.5,0,1,0,640,80.5h0A80.56,80.56,0,0,0,559.38,0Zm0,118.07c-20.16,0-34.94-16.1-34.94-37.57s14.79-37.57,34.94-37.57S594.31,59,594.31,80.5,579.53,118.07,559.38,118.07ZM322.88,80.5C322.88,36,288,0,244.94,0S167,36,167,80.5,201.94,161,246.29,161c35.42,0,63.2-21.38,72.44-51H271.82c-6.51,9.61-16.08,12.07-25.53,12.07-18.13,0-29.69-12.46-33.31-29.51H322a82.8,82.8,0,0,0,.88-12.08ZM244.94,37.57c15.55,0,27.61,10.69,31.3,26.83H213.58C217.77,47.63,228.9,37.57,244.94,37.57ZM89.07,159.66,0,4.7H52.44L89.07,75.13,125.7,4.7h52.44Zm311.75,0L311.74,4.7h52.45l36.63,70.43L437.45,4.7h52.44Z"/>\n </symbol>\n <symbol id="vk" class="icon" width="1em" height="1em" viewBox="0 0 448 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M31.4907 63.4907C0 94.9813 0 145.671 0 247.04V264.96C0 366.329 0 417.019 31.4907 448.509C62.9813 480 113.671 480 215.04 480H232.96C334.329 480 385.019 480 416.509 448.509C448 417.019 448 366.329 448 264.96V247.04C448 145.671 448 94.9813 416.509 63.4907C385.019 32 334.329 32 232.96 32H215.04C113.671 32 62.9813 32 31.4907 63.4907ZM75.6 168.267H126.747C128.427 253.76 166.133 289.973 196 297.44V168.267H244.16V242C273.653 238.827 304.64 205.227 315.093 168.267H363.253C359.313 187.435 351.46 205.583 340.186 221.579C328.913 237.574 314.461 251.071 297.733 261.227C316.41 270.499 332.907 283.63 346.132 299.751C359.357 315.873 369.01 334.618 374.453 354.747H321.44C316.555 337.262 306.614 321.61 292.865 309.754C279.117 297.899 262.173 290.368 244.16 288.107V354.747H238.373C136.267 354.747 78.0267 284.747 75.6 168.267Z"/>\n </symbol>\n <symbol id="weibo" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M407 177.6c7.6-24-13.4-46.8-37.4-41.7-22 4.8-28.8-28.1-7.1-32.8 50.1-10.9 92.3 37.1 76.5 84.8-6.8 21.2-38.8 10.8-32-10.3zM214.8 446.7C108.5 446.7 0 395.3 0 310.4c0-44.3 28-95.4 76.3-143.7C176 67 279.5 65.8 249.9 161c-4 13.1 12.3 5.7 12.3 6 79.5-33.6 140.5-16.8 114 51.4-3.7 9.4 1.1 10.9 8.3 13.1 135.7 42.3 34.8 215.2-169.7 215.2zm143.7-146.3c-5.4-55.7-78.5-94-163.4-85.7-84.8 8.6-148.8 60.3-143.4 116s78.5 94 163.4 85.7c84.8-8.6 148.8-60.3 143.4-116zM347.9 35.1c-25.9 5.6-16.8 43.7 8.3 38.3 72.3-15.2
3888134.8 52.8 111.7 124-7.4 24.2 29.1 37 37.4 12 31.9-99.8-55.1-195.9-157.4-174.3zm-78.5 311c-17.1 38.8-66.8 60-109.1 46.3-40.8-13.1-58-53.4-40.3-89.7 17.7-35.4 63.1-55.4 103.4-45.1 42 10.8 63.1 50.2 46 88.5zm-86.3-30c-12.9-5.4-30 .3-38 12.9-8.3 12.9-4.3 28 8.6 34 13.1 6 30.8.3 39.1-12.9 8-13.1 3.7-28.3-9.7-34zm32.6-13.4c-5.1-1.7-11.4.6-14.3 5.4-2.9 5.1-1.4 10.6 3.7 12.9 5.1 2 11.7-.3 14.6-5.4 2.8-5.2 1.1-10.9-4-12.9z"/>\n </symbol>\n <symbol id="x-twitter" class="icon" width="1em" height="1em" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">\n <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>\n </symbol>\n</svg>\n')}dataURItoBlobUrl(t){const e=new Blob([t],{type:"image/svg+xml"});return URL.createObjectURL(e)}svgStyles(){let t={};return this.size&&(t={...t,"--umg-font-size":(0,c.R)(this.size)}),t}iconClasses(){const t={};return"spinner"===this.icon&&(t.spinner=!0),t}icontemplate(){return r.JW` 3889 <svg part="icon-svg icon-image" height="1em" width="1em"> 3890 <use href="${this._blobUrl}#${this.icon}"></use> 3891 </svg> 3892 `}render(){return r.qy` 3893 <span part="icon-container" class="icon${(0,l.H)(this.iconClasses())}" style="${(0,n.W)(this.svgStyles())}"> 3894 ${this.icontemplate()} 3895 </span> 3896 `}};p.styles=(0,m.Z)([d.S,r.AH` 3897 .icon { 3898 display: flex; 3899 align-items: center; 3900 justify-content: center; 3901 font-size: var(--umg-font-size); 3902 height: fit-content; 3903 width: fit-content; 3904 color: var(--umg-color-icon-text, var(--umg-color-base-text, rgb(0,0,0))); 3905 } 3906 @supports (color: rgb(from white r g b)) { 3907 .icon { 3908 color: rgb(from var(--umg-color-icon-text, var(--umg-color-base-text, rgb(0,0,0))) r g b / alpha); 3909 } 3910 3911 } 3912 .icon { 3913 color: rgb(var(--umg-color-icon-text, var(--umg-color-base-text, 0,0,0))); 3914 } 3915 .spinner svg { 3916 animation-name: spin; 3917 animation-duration: 500ms; 3918 animation-timing-function: cubic-bezier(0, 0, 1, 1); 3919 animation-iteration-count: infinite; 3920 animation-direction: both; 3921 } 3922 @keyframes spin {to{transform: rotate(1turn)}}; 3923 `]),(0,o.C)([(0,a.MZ)()],p.prototype,"icon",void 0),(0,o.C)([(0,a.MZ)()],p.prototype,"size",void 0),(0,o.C)([(0,a.MZ)({state:!0})],p.prototype,"_blobUrl",void 0),p=(0,o.C)([(0,s.E)(`${h}-icon`)],p)},9846(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(31),l=i(3720),d=i(9924),c=i(4379),u=i(8698),m=i(2609);const{prefix:h}=u.W;let p=class extends r.WF{constructor(){super(...arguments),this.imgAlt="",this.width=100,this.height=100,this.fit="contain",this.load="lazy"}dispatchEvents(){const t=this.width/this.height,e=new CustomEvent("media-details",{detail:{mediaAspectRatio:t,mobileMediaAspectRatio:t},bubbles:!0,composed:!0});this.dispatchEvent(e)}containerClasses(){const t={};return t["image-fit--"+this.fit]=!("none"===this.fit||!this.fit),t}imageClasses(){const t={};return t["image-fit"]=!("none"===this.fit||!this.fit),t["image-fit--"+this.fit]=!("none"===this.fit||!this.fit),t}image(){return this.src?r.qy` 3924 <img 3925 part="image" 3926 class="image ${(0,l.H)(this.imageClasses())}" 3927 width="${this.width}" 3928 height="${this.height}" 3929 src="${(0,n.J)(this.src)}" 3930 srcset="${(0,n.J)(this.srcSet)}" 3931 sizes="${(0,n.J)(this.sizes)}" 3932 alt="${this.imgAlt}" 3933 loading="${this.load}" 3934 fetchPriority=${(0,n.J)(this.prefetch)} 3935 > 3936 `:r.qy` 3937 <div 3938 class="placeholder image image--desktop${(0,l.H)(this.imageClasses())}" 3939 style="aspect-ratio: ${this.width/this.height}" 3940 > 3941 <div part="placeholder-inner" class="placeholder-inner"> 3942 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" fill="currentcolor"> 3943 <path d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"/> 3944 </svg> 3945 </div> 3946 </div> 3947 `}render(){return this.dispatchEvents(),r.qy` 3948 <div 3949 class="image-container${(0,l.H)(this.imageClasses())}" 3950 part="image-container" 3951 > 3952 ${this.image()} 3953 </div> 3954 `}};p.styles=(0,m.Z)([d.S,c.o,r.AH` 3955 :host { 3956 display: block; 3957 height: 100%; 3958 } 3959 .image-container { 3960 display: flex; 3961 justify-content: center; 3962 align-items: center; 3963 height: 100%; 3964 } 3965 .image-container.image-fit--cover, 3966 .image-container.image-fit--contain { 3967 width: 100%; 3968 } 3969 .image { 3970 display: block; 3971 height: auto; 3972 max-width: 100%; 3973 } 3974 .placeholder { 3975 overflow: hidden; 3976 height: 100%; 3977 width: 100%; 3978 min-width: var(--umg-size-image-placeholder, 7rem); 3979 } 3980 3981 /* Image fit */ 3982 .image.image-fit { 3983 height: 100%; 3984 width: 100%; 3985 max-width: initial; 3986 } 3987 .image.image-fit--cover { 3988 object-fit: cover; 3989 } 3990 .image.image-fit--contain { 3991 object-fit: contain; 3992 } 3993 `]),(0,o.C)([(0,a.M)()],p.prototype,"imgAlt",void 0),(0,o.C)([(0,a.M)()],p.prototype,"src",void 0),(0,o.C)([(0,a.M)()],p.prototype,"srcSet",void 0),(0,o.C)([(0,a.M)()],p.prototype,"sizes",void 0),(0,o.C)([(0,a.M)({type:Number})],p.prototype,"width",void 0),(0,o.C)([(0,a.M)({type:Number})],p.prototype,"height",void 0),(0,o.C)([(0,a.M)()],p.prototype,"fit",void 0),(0,o.C)([(0,a.M)({type:String})],p.prototype,"load",void 0),(0,o.C)([(0,a.M)()],p.prototype,"prefetch",void 0),p=(0,o.C)([(0,s.E)(`${h}-image`)],p)},4792(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(3720),l=i(9924),d=i(328),c=i(8698),u=i(2609);const{prefix:m}=c.W;let h=class extends r.WF{constructor(){super(...arguments),this.spacing="normal",this.justify="start",this.noWrap=!1,this.stack=!1,this.mobileStack=!1}groupClasses(){const t={};return t["group-spacing--"+this.spacing]=!0,t["group--no-wrap"]=this.noWrap,t["group--stack"]=this.stack,t["group--mobile-stack"]=this.mobileStack,this.stack?t["group-align--"+this.justify]=!0:t["group-justify--"+this.justify]=!0,this.mobileStack?t["group-mobile-align--"+this.mobileJustify]=!0:this.mobileJustify?t["group-mobile-justify--"+this.mobileJustify]=!0:t["group-mobile-justify--"+this.justify]=!0,t}render(){return r.qy` 3994 <div 3995 part="link-group" 3996 class="link-group${(0,n.H)(this.groupClasses())}" 3997 > 3998 <slot></slot> 3999 </div> 4000 `}};h.styles=(0,u.Z)([l.S,d.Xv,d.Oh,d.rw,d.yw,d.jt,r.AH` 4001 4002 :host([noWrap]) { 4003 display: block; 4004 width: 100%; 4005 } 4006 .link-group { 4007 display: flex; 4008 flex-wrap: wrap; 4009 width: 100%; 4010 } 4011 4012 /** Prevent link wrapping */ 4013 .group--no-wrap { 4014 flex-wrap: nowrap; 4015 overflow-y: auto; 4016 max-width: 100%; 4017 scrollbar-color: rgb(var(--umg-color-base-text, 0,0,0), 0.1) rgb(var(--umg-color-base-text, 0,0,0), 0.05);; 4018 scrollbar-width: thin; 4019 padding: var(--umg-space-8) 0; 4020 } 4021 4022 /** Force vertical stacking */ 4023 @media screen and (max-width: 48rem) { 4024 .group--mobile-stack:not(.group--no-wrap) { 4025 flex-direction: column; 4026 } 4027 } 4028 @media screen and (min-width: 48.06rem) { 4029 .group--stack:not(.group--no-wrap) { 4030 flex-direction: column; 4031 } 4032 } 4033 `]),(0,o.C)([(0,a.M)()],h.prototype,"spacing",void 0),(0,o.C)([(0,a.M)()],h.prototype,"justify",void 0),(0,o.C)([(0,a.M)()],h.prototype,"mobileJustify",void 0),(0,o.C)([(0,a.M)({type:Boolean})],h.prototype,"noWrap",void 0),(0,o.C)([(0,a.M)({type:Boolean})],h.prototype,"stack",void 0),(0,o.C)([(0,a.M)({type:Boolean})],h.prototype,"mobileStack",void 0),h=(0,o.C)([(0,s.E)(`${m}-link-group`)],h)},2648(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(31),l=i(3720),d=i(9924),c=i(8698),u=i(2609);const{prefix:m}=c.W;let h=class extends r.WF{constructor(){super(...arguments),this.url=void 0,this.target="_self",this.underline=!1}linkClasses(){return{"link--underline":this.underline}}render(){return r.qy` 4034 <a part="link" 4035 href="${(0,n.J)(this.url)}" 4036 class="link${(0,l.H)(this.linkClasses())}" 4037 target="${this.target}" 4038 > 4039 <slot part="label"></slot> 4040 <slot name="label" part="label"></slot> 4041 </a> 4042 `}};h.shadowRootOptions={...r.WF.shadowRootOptions,delegatesFocus:!0},h.styles=(0,u.Z)([d.S,r.AH` 4043 :host { 4044 display: inline-block; 4045 } 4046 .link { 4047 color: inherit; 4048 text-underline-offset: 0.3rem; 4049 display: inline-flex; 4050 align-items: center; 4051 gap: 0.5rem; 4052 flex-wrap: nowrap; 4053 white-space: nowrap; 4054 } 4055 .link ::slotted(umg-icon) { 4056 padding-top: 2px; 4057 } 4058 .link:not(.link--underline) { 4059 text-decoration: none; 4060 } 4061 .link:not(.link--underline):hover { 4062 text-decoration: underline; 4063 } 4064 /* Underline */ 4065 .link--underline { 4066 text-decoration: underline; 4067 } 4068 .link--underline:hover { 4069 text-decoration: none; 4070 } 4071 `]),(0,o.C)([(0,a.M)()],h.prototype,"url",void 0),(0,o.C)([(0,a.M)()],h.prototype,"target",void 0),(0,o.C)([(0,a.M)({type:Boolean})],h.prototype,"underline",void 0),h=(0,o.C)([(0,s.E)(`${m}-link`)],h)},2010(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(31),l=i(3720),d=i(1145),c=i(9924),u=i(8698),m=i(2609);i(9846);const{prefix:h}=u.W;let p=class extends r.WF{constructor(){super(...arguments),this.url="/",this.height=80,this.title="Logo Title",this.alt="",this.showTitle=!1,this.imgWidth=80,this.imgHeight=80}logoStyles(){let t={};return t={...t,"--umg-size-logo-height":this.height/16+"rem"},t}logoClasses(){return{"logo--show-title":this.showTitle}}titleClasses(){return{"visually-hidden":!this.showTitle}}image(){return this.imgSrc?r.qy` 4072 <umg-image 4073 part="logo-image" 4074 exportparts="image" 4075 class="logo__image" 4076 imgAlt=${this.alt} 4077 src="${(0,n.J)(this.imgSrc)}" 4078 width=${this.imgWidth} 4079 height=${this.imgHeight} 4080 srcSet="${(0,n.J)(this.imgSrcSet)}" 4081 sizes="${(0,n.J)(this.imgSizes)}" 4082 lazy="lazy" 4083 > 4084 </umg-image> 4085 `:r.qy` 4086 <svg class="logo__image placeholder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor"> 4087 <path d="M469.33,512H42.67A42.79,42.79,0,0,1,0,469.33V42.67A42.79,42.79,0,0,1,42.67,0H469.33A42.79,42.79,0,0,1,512,42.67V469.33A42.79,42.79,0,0,1,469.33,512Z"/> 4088 </svg> 4089 `}render(){return r.qy` 4090 <h1 4091 part="logo" 4092 class="logo${(0,l.H)(this.logoClasses())}" 4093 style=${(0,d.W)(this.logoStyles())} 4094 > 4095 <a href="${this.url}"> 4096 ${this.image()}
4097 <span part="logo-title" class="logo-title ${(0,l.H)(this.titleClasses())}"> 4098 ${this.title} 4099 </span> 4100 </a> 4101 </h1> 4102 `}};p.styles=(0,m.Z)([c.S,r.AH` 4103 :host { 4104 display: block; 4105 } 4106 .placeholder { 4107 display: block; 4108 height: 100%; 4109 width: 100%; 4110 color: var(--umg-color-skeleton-background, 230, 230, 230); 4111 4112 } 4113 @supports (color: rgb(from white r g b)) { 4114 .placeholder { 4115 color: rgb(from var(--umg-color-skeleton-background, rgb(230, 230, 230)) r g b / alpha); 4116 } 4117 } 4118 .logo { 4119 display: flex; 4120 align-items: center; 4121 color: inherit; 4122 margin: 0; 4123 height: var(--umg-size-logo-height); 4124 line-height: 1; 4125 } 4126 .logo a { 4127 display: block; 4128 color: inherit; 4129 text-decoration: none; 4130 height: 100%; 4131 } 4132 .logo-title:not(.visually-hidden) { 4133 display: inline-block; 4134 font-family: var(--umg-font-logo-family, var(--umg-font-heading-family, 'Roboto Serif', Times, 'Times New Roman', Georgia, serif)); 4135 font-size: var(--umg-font-logo-size, 1.75rem); 4136 } 4137 4138 @media only screen and (max-width: 48rem) { 4139 .logo { 4140 height: var(--umg-size-mobile-logo-height, calc(var(--umg-size-logo-height, 5rem) / 1.25)); 4141 } 4142 } 4143 4144 /* Hide image for title */ 4145 .logo--show-title { 4146 line-height: inherit; 4147 } 4148 .logo--show-title .logo__image { 4149 display: none; 4150 } 4151 .logo--show-title a { 4152 height: auto; 4153 } 4154 `]),(0,o.C)([(0,a.M)()],p.prototype,"url",void 0),(0,o.C)([(0,a.M)({type:Number})],p.prototype,"height",void 0),(0,o.C)([(0,a.M)()],p.prototype,"title",void 0),(0,o.C)([(0,a.M)()],p.prototype,"alt",void 0),(0,o.C)([(0,a.M)({type:Boolean})],p.prototype,"showTitle",void 0),(0,o.C)([(0,a.M)({type:String})],p.prototype,"imgSrc",void 0),(0,o.C)([(0,a.M)({type:String})],p.prototype,"imgSrcSet",void 0),(0,o.C)([(0,a.M)({type:String})],p.prototype,"imgSizes",void 0),(0,o.C)([(0,a.M)({type:Number})],p.prototype,"imgWidth",void 0),(0,o.C)([(0,a.M)({type:Number})],p.prototype,"imgHeight",void 0),p=(0,o.C)([(0,s.E)(`${h}-logo`)],p)},5448(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(31),l=i(3720),d=(i(3919),i(1682),i(9924));const c=r.AH` 4155 4156 @media screen and (min-width: 48.06rem ) { 4157 .media-text__grid { 4158 display: grid; 4159 grid-template-columns: repeat(12, [start] 1fr); 4160 } 4161 4162 /* Media size by height */ 4163 .media-text__grid.media-height { 4164 display: flex; 4165 } 4166 .media-text__grid.media-height .media-text__media { 4167 flex: 1 1 40%; 4168 } 4169 .media-text__grid.media-height .media-text__content { 4170 flex: 1 1 60%; 4171 } 4172 .media-text__grid.media-height--xsmall { 4173 height: 15rem; 4174 } 4175 .media-text__grid.media-height--small { 4176 height: 20rem; 4177 } 4178 .media-text__grid.media-height--medium { 4179 height: 25rem; 4180 } 4181 .media-text__grid.media-height--large { 4182 height: 30rem; 4183 } 4184 .media-text__grid.media-height--xlarge { 4185 height: 37rem; 4186 } 4187 4188 /* Media width sizing */ 4189 .media-text__grid--2xlarge .media-text__media { 4190 grid-column: start / span 8; 4191 } 4192 .media-text__grid--xlarge .media-text__media { 4193 grid-column: start / span 7; 4194 } 4195 .media-text__grid--large .media-text__media { 4196 grid-column: start / span 6; 4197 } 4198 .media-text__grid--medium .media-text__media { 4199 grid-column: start / span 5; 4200 } 4201 .media-text__grid--small .media-text__media { 4202 grid-column: start / span 4; 4203 } 4204 .media-text__grid--xsmall .media-text__media { 4205 grid-column: start / span 3; 4206 } 4207 .media-text__grid--2xlarge.media-right .media-text__media { 4208 grid-column: span 7; 4209 } 4210 .media-text__grid--xlarge.media-right .media-text__media { 4211 grid-column: span 7; 4212 } 4213 .media-text__grid--large.media-right .media-text__media { 4214 grid-column: span 6; 4215 } 4216 .media-text__grid--medium.media-right .media-text__media { 4217 grid-column: span 5; 4218 } 4219 .media-text__grid--small.media-right .media-text__media { 4220 grid-column: span 4; 4221 } 4222 .media-text__grid--xsmall.media-right .media-text__media { 4223 grid-column: span 3; 4224 } 4225 4226 /* Text content width sizing */ 4227 .media-text__grid--2xlarge .media-text__content { 4228 grid-column: span 4; 4229 } 4230 .media-text__grid--xlarge .media-text__content { 4231 grid-column: span 5; 4232 } 4233 .media-text__grid--large .media-text__content { 4234 grid-column: span 6; 4235 } 4236 .media-text__grid--medium .media-text__content { 4237 grid-column: span 7; 4238 } 4239 .media-text__grid--small .media-text__content { 4240 grid-column: span 8; 4241 } 4242 .media-text__grid--xsmall .media-text__content { 4243 grid-column: span 9; 4244 } 4245 .media-text__grid--2xlarge.media-right .media-text__content { 4246 grid-column: start / span 4; 4247 } 4248 .media-text__grid--xlarge.media-right .media-text__content { 4249 grid-column: start / span 5; 4250 } 4251 .media-text__grid--large.media-right .media-text__content { 4252 grid-column: start / span 6; 4253 } 4254 .media-text__grid--medium.media-right .media-text__content { 4255 grid-column: start / span 7; 4256 } 4257 .media-text__grid--small.media-right .media-text__content { 4258 grid-column: start / span 8; 4259 } 4260 .media-text__grid--xsmall.media-right .media-text__content { 4261 grid-column: start / span 9; 4262 } 4263 } 4264 4265`;var u=i(8698),m=i(2609);const{prefix:h}=u.W;let p=class extends r.WF{constructor(){super(...arguments),this.setSizeBy="width",this.mediaHeight="adapt",this.mediaWidth="medium",this.mediaOnRight=!1,this.blendMedia=!1,this.alignContent="center",this.mobileAlignContent="center",this.justifyContent="center",this.mobileJustifyContent="center",this.spacing="8",this.adaptivePadding=!1}gridClasses(){const t={};return t["media-text__grid--"+this.mediaWidth]="width"===this.setSizeBy,t["media-height--"+this.mediaHeight]="height"===this.setSizeBy,t["media-height"]="height"===this.setSizeBy,t["media-right"]=this.mediaOnRight,t["media-blend"]=this.blendMedia,t}contentStackClasses(){const t={};return t["align--"+this.alignContent]=!0,t["justify--"+this.justifyContent]=!0,t["mobile-justify--"+this.mobileJustifyContent]=!0,t["mobile-align--"+this.mobileAlignContent]=!0,t}mobileGap(){if(this.spacing)return.75*Number(this.spacing)}render(){return r.qy` 4266 <div 4267 part="media-text" 4268 class="media-text" 4269 > 4270 <div 4271 part="media-text-grid" 4272 class="media-text__grid${(0,l.H)(this.gridClasses())}" 4273 > 4274 <div 4275 part="media-content" 4276 class="media-text__media" 4277 > 4278 <slot name="media"></slot> 4279 </div> 4280 <div 4281 part="text-content" 4282 class="media-text__content" 4283 > 4284 <umg-box 4285 part="media-text-inner" 4286 exportparts="box,box-content" 4287 class="media-text__content-inner" 4288 padding="${(0,n.J)(this.padding)}" 4289 mobilePadding="${(0,n.J)(this.mobilePadding)}" 4290 paddingTop="${(0,n.J)(this.paddingTop)}" 4291 paddingLeft="${(0,n.J)(this.paddingLeft)}" 4292 paddingRight="${(0,n.J)(this.paddingRight)}" 4293 paddingBottom="${(0,n.J)(this.paddingBottom)}" 4294 ?adaptivePadding=${this.adaptivePadding} 4295 width="fill" 4296 > 4297 <umg-vertical-stack 4298 part="media-text-stack" 4299 exportparts="vertical-stack" 4300 class="media-text__content-stack${(0,l.H)(this.contentStackClasses())}" 4301 spacing=${this.spacing} 4302 mobileSpacing=${(0,n.J)(this.mobileGap())} 4303 justify="${this.alignContent}" 4304 align="${this.justifyContent}" 4305 mobileJustify="${this.mobileAlignContent}" 4306 mobileAlign="${this.mobileJustifyContent}" 4307 > 4308 <slot name="content"></slot> 4309 </umg-vertical-stack> 4310 </umg-box> 4311 </div> 4312 </div> 4313 </div> 4314 `}};p.styles=(0,m.Z)([d.S,c,r.AH` 4315 :host { 4316 display: block; 4317 width: 100%; 4318 } 4319 4320 /* Height set by value */ 4321 .media-text__grid.media-height { 4322 overflow: hidden; 4323 } 4324 4325 /** Prevent extended clicks outside the container */ 4326 .media-text, 4327 .media-text__media { 4328 position: relative 4329 } 4330 4331 /* Content position */ 4332 .media-text__grid.media-right div:first-child { 4333 order: 1; 4334 } 4335 .media-text__grid.media-right div:last-child { 4336 order: 2; 4337 } 4338 4339 @media screen and (min-width: 48.06rem) { 4340 .media-text__grid.media-right div:first-child { 4341 order: 2; 4342 } 4343 .media-text__grid.media-right div:last-child { 4344 order: 1; 4345 } 4346 } 4347
4348 /* Background colour */ 4349 .media-text__media { 4350 background-color: var(--umg-color-media-text-background); 4351 } 4352 @supports (color: rgb(from white r g b)) { 4353 .media-text__media { 4354 background-color: rgb(from var(--umg-color-media-text-background) r g b / alpha); 4355 } 4356 } 4357 .media-text__content { 4358 --umg-color-base-background: var(--umg-color-media-text-background); 4359 } 4360 @supports (color: rgb(from white r g b)) { 4361 .media-text__content { 4362 --umg-color-base-background: rgb(from var(--umg-color-media-text-background) r g b / alpha); 4363 } 4364 } 4365 4366 /* Blend content color with media */ 4367 .media-text__grid.media-blend .media-text__media { 4368 background-color: var(--umg-color-media-text-background, var(--umg-color-base-background)); 4369 } 4370 @supports (color: rgb(from white r g b)) { 4371 .media-text__grid.media-blend .media-text__media { 4372 background-color: rgb(from var(--umg-color-media-text-background, var(--umg-color-base-background)) r g b / alpha); 4373 } 4374 } 4375 4376 @media only screen and (min-width: 48.06rem) { 4377 .media-text__grid.media-blend .media-text__media ::slotted(*) { 4378 mask-image: linear-gradient(to right, rgb(0,0,0) 0 70%, transparent 100%); 4379 } 4380 .media-text__grid.media-blend.media-right .media-text__media ::slotted(*) { 4381 mask-image: linear-gradient(to left, rgb(0,0,0) 0 70%, transparent 100%); 4382 } 4383 } 4384 @media only screen and (max-width: 48rem) { 4385 .media-text__grid.media-blend .media-text__media ::slotted(*) { 4386 mask-image: linear-gradient(to bottom, rgb(0,0,0) 0 70%, transparent 100%); 4387 } 4388 } 4389 4390 /* Content */ 4391 .media-text__content { 4392 display: flex; 4393 width: auto; 4394 } 4395 4396 /* Text content alignment */ 4397 @media screen and (min-width: 48.06rem) { 4398 .justify--start { 4399 text-align: left; 4400 } 4401 .justify--center { 4402 text-align: center; 4403 } 4404 .justify--end { 4405 text-align: right; 4406 } 4407 } 4408 @media screen and (max-width: 48rem) { 4409 .mobile-align--start { 4410 text-align: left; 4411 } 4412 .mobile-align--center { 4413 text-align: center; 4414 } 4415 .mobile-align--end { 4416 text-align: right; 4417 } 4418 } 4419 4420 /* Normalise heights in grid layouts */ 4421 @media screen and (max-width: 48.06rem) { 4422 .media-text, 4423 .media-text__grid { 4424 height: 100%; 4425 } 4426 .media-text__grid { 4427 display: flex; 4428 flex-direction: column; 4429 justify-content: stretch; 4430 } 4431 .media-text__grid > div:last-child { 4432 display: flex;flex: 1 0 auto; 4433 } 4434 } 4435 4436 /* Desktop */ 4437 @media screen and (min-width: 48.06rem) { 4438 /* Media left/right position */ 4439 .media-right .media-text__container { 4440 flex-direction: row-reverse; 4441 } 4442 } 4443 `]),(0,o.C)([(0,a.M)()],p.prototype,"setSizeBy",void 0),(0,o.C)([(0,a.M)()],p.prototype,"mediaHeight",void 0),(0,o.C)([(0,a.M)()],p.prototype,"mediaWidth",void 0),(0,o.C)([(0,a.M)({type:Boolean})],p.prototype,"mediaOnRight",void 0),(0,o.C)([(0,a.M)({type:Boolean})],p.prototype,"blendMedia",void 0),(0,o.C)([(0,a.M)()],p.prototype,"alignContent",void 0),(0,o.C)([(0,a.M)()],p.prototype,"mobileAlignContent",void 0),(0,o.C)([(0,a.M)()],p.prototype,"justifyContent",void 0),(0,o.C)([(0,a.M)()],p.prototype,"mobileJustifyContent",void 0),(0,o.C)([(0,a.M)()],p.prototype,"spacing",void 0),(0,o.C)([(0,a.M)({type:Boolean})],p.prototype,"adaptivePadding",void 0),(0,o.C)([(0,a.M)()],p.prototype,"padding",void 0),(0,o.C)([(0,a.M)()],p.prototype,"mobilePadding",void 0),(0,o.C)([(0,a.M)()],p.prototype,"paddingTop",void 0),(0,o.C)([(0,a.M)()],p.prototype,"paddingRight",void 0),(0,o.C)([(0,a.M)()],p.prototype,"paddingBottom",void 0),(0,o.C)([(0,a.M)()],p.prototype,"paddingLeft",void 0),p=(0,o.C)([(0,s.E)(`${h}-media-text`)],p)},4322(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(3720),l=i(31),d=(i(3919),i(4792),i(9924)),c=i(8698),u=i(2609);const{prefix:m}=c.W;let h=class extends r.WF{constructor(){super(...arguments),this.sticky=!1,this.spacing="normal",this.justify="start",this.mobileJustify="start"}menuClasses(){const t={};return t.sticky=this.sticky,t}render(){return r.qy` 4444 <nav part="menu-bar" class="menu-bar${(0,n.H)(this.menuClasses())}"> 4445 <umg-box 4446 part="menu-bar-container" 4447 exportparts="box,box-content" 4448 class="menu-bar__inner" 4449 padding="${(0,l.J)(this.padding)}" 4450 > 4451 <umg-link-group 4452 part="menu-bar-list" 4453 exportparts="link-group" 4454 spacing="${this.spacing}" 4455 justify="${this.justify}" 4456 mobileJustify="${this.mobileJustify}" 4457 noWrap 4458 > 4459 <slot name="link"></slot> 4460 </umg-link-group> 4461 </umg-box> 4462 </nav> 4463 `}};h.styles=(0,u.Z)([d.S,r.AH` 4464 :host([sticky]) { 4465 position: sticky; 4466 top: 0; 4467 z-index: 499; 4468 } 4469 :host([border]) { 4470 border-bottom-width: 0.0625rem; 4471 border-bottom-style: solid; 4472 border-bottom-color: rgb(var(--umg-color-base-text, rgb(255,255,255))); 4473 } 4474 @supports (color: rgb(from white r g b)) { 4475 :host { 4476 border-bottom-color: rgb(from var(--umg-color-base-text, rgb(255,255,255) r g b)) 4477 } 4478 } 4479 :host { 4480 display: block; 4481 margin: auto; 4482 width: 100%; 4483 color: var(--umg-color-box-text); 4484 background-color: var(--umg-color-box-background); 4485 } 4486 @supports (color: rgb(from white r g b)) { 4487 :host { 4488 color: rgb(from var(--umg-color-box-text) r g b); 4489 background-color: rgb(from var(--umg-color-box-background) r g b / alpha); 4490 } 4491 } 4492 4493 .menu-bar { 4494 display: flex; 4495 justify-content: center; 4496 position: sticky; 4497 top:0; 4498 margin: 0 auto; 4499 max-width: var(--umg-size-screen-max-width, 75rem); 4500 width: 100%; 4501 } 4502 4503 .menu-bar__inner { 4504 max-width: var(--umg-size-content-max-width); 4505 } 4506 4507 ::slotted(*) { 4508 letter-spacing: 0.07rem; 4509 } 4510 4511 ::slotted(umg-link:last-child) { 4512 margin-right: var(--umg-space-8, 0.5rem); 4513 } 4514 `]),(0,o.C)([(0,a.M)({type:Boolean})],h.prototype,"sticky",void 0),(0,o.C)([(0,a.M)()],h.prototype,"spacing",void 0),(0,o.C)([(0,a.M)()],h.prototype,"justify",void 0),(0,o.C)([(0,a.M)()],h.prototype,"mobileJustify",void 0),(0,o.C)([(0,a.M)()],h.prototype,"padding",void 0),h=(0,o.C)([(0,s.E)(`${m}-menu-bar`)],h)},8218(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(7621),l=i(1145),d=i(3720),c=i(9924),u=i(8698),m=i(2609);i(5840);const{prefix:h}=u.W;let p=class extends r.WF{constructor(){super(),this.src="",this.layout="extended",this.vertical=!1,this.hideMenuTitle=!1,this.submenuWidth="page-width",this._handleOverlayEvents=()=>{this.groupId&&this._updateOverlayState()},this._outsideClick=t=>{t.composedPath().includes(this)||this._closeDisclosures()},this.addEventListener("umg-disclosure:opened",this._handleMenuEvents),this.addEventListener("umg-disclosure:closed",this._handleMenuEvents)}disconnectedCallback(){this.groupId||window.removeEventListener("click",this._outsideClick),this._menus&&this._menus.length&&this._menus.forEac
4514h(t=>{t.removeEventListener("umg-disclosure:opened",this._handleOverlayEvents),t.removeEventListener("umg-disclosure:closed",this._handleOverlayEvents)}),super.disconnectedCallback()}async firstUpdated(){void 0===this.data&&this.src&&await this.fetchData()}updated(t){super.updated(t),(t.has("groupId")||t.has("data"))&&(this._menus&&this._menus.length&&this._menus.forEach(t=>{t.removeEventListener("umg-disclosure:opened",this._handleOverlayEvents),t.removeEventListener("umg-disclosure:closed",this._handleOverlayEvents)}),this.groupId&&this._menus&&this._menus.length&&(this._menus.forEach(t=>{t.addEventListener("umg-disclosure:opened",this._handleOverlayEvents),t.addEventListener("umg-disclosure:closed",this._handleOverlayEvents)}),this._updateOverlayState()))}async fetchData(){this.data=await fetch(this.src).then(t=>t.json()),this.requestUpdate()}_handleMenuEvents(t){if(this.groupId)return;const e=t.detail.target;"umg-disclosure:opened"===t.type&&this._menus&&this._menus.length&&this._menus.forEach(t=>{t!==e&&t.disclosureClose()}),"umg-disclosure:opened"!==t.type&&"umg-disclosure:closed"!==t.type||this._updateOverlayState()}_updateOverlayState(){let t=!1;this._menus&&this._menus.length&&this._menus.forEach(e=>{e.getDisclosureOpenState()&&(t=!0)}),t?(this.dispatchEvent(new CustomEvent("umg-overlay:opened",{bubbles:!0,composed:!0})),this.groupId||window.addEventListener("click",this._outsideClick)):(this.dispatchEvent(new CustomEvent("umg-overlay:closed",{bubbles:!0,composed:!0})),this.groupId||window.removeEventListener("click",this._outsideClick))}_closeDisclosures(){this._menus&&this._menus.length&&this._menus.forEach(t=>{t.disclosureClose()}),this.dispatchEvent(new CustomEvent("umg-overlay:closed",{bubbles:!0,composed:!0})),window.removeEventListener("click",this._outsideClick)}menuStyles(){let t={};return"full-width"===this.submenuWidth&&(t={...t,"--umg-size-content-max-width":"100%"}),t}menuClasses(){const t={};return"compact"===this.layout&&(t["menu--compact"]=!0),t}menuListClasses(){const t={};return this.vertical&&"compact"!==this.layout&&(t["menu-list--vertical"]=!0),"extended"===this.layout&&(t["menu-list--extended"]=!0),"compact"===this.layout&&(t["menu-list--compact"]=!0),t}menuTitle(t){return"extended"!==this.layout||this.hideMenuTitle?r.s6:r.qy` 4515 <li part="menu-title" class="menu__title"> 4516 <span part="menu-title-text"> 4517 ${t} 4518 </span> 4519 </li> 4520 `}menuItemClasses(t){if(Array.isArray(t)&&t.length)return t.join(" ")}menuList(){if(this.data)return r.qy` 4521 <nav> 4522 <ul 4523 part="menu" 4524 class="menu${(0,d.H)(this.menuClasses())}" 4525 style="${(0,l.W)(this.menuStyles())}" 4526 > 4527 ${this.data.map(t=>r.qy` 4528 <li part="main-menu-item"> 4529 ${t.subItems?r.qy` 4530 <umg-disclosure 4531 part="menu-disclosure" 4532 class="menu-disclosure" 4533 detailsWidth=${"extended"===this.layout?"fill":"fit-content"} 4534 overlay 4535 groupId=${this.groupId||r.s6} 4536 > 4537 <span part="main-menu-item-title ${this.activeUrl===t.linkUrl?"menu-active":""}" class="summary menu__main-title ${this.activeUrl===t.linkUrl?"active":""}" slot="summary"> 4538 ${t.linkText} 4539 </span> 4540 <span part="main-menu-item-icon" class="summary-icon" slot="icon"> 4541 <umg-icon 4542 part="icon" 4543 exportparts="icon-svg" 4544 icon="chevron-down" 4545 size="xsmall" 4546 > 4547 </umg-icon> 4548 </span> 4549 <div 4550 part="menu-panel" 4551 class="menu__container${(0,d.H)(this.menuListClasses())}" 4552 slot="content" 4553 > 4554 <ul part="menu-list" class="menu__list"> 4555 ${this.menuTitle(t.linkText)} 4556 ${t.subItems.map(t=>r.qy` 4557 <li part="menu-item" slot="items"> 4558 ${t.subItems?r.qy` 4559 <div part="submenu" class="submenu">
4560 <span part="submenu-title" class="submenu__title"> 4561 ${t.linkText} 4562 </span> 4563 <ul part="submenu-list" class="submenu__list"> 4564 ${t.subItems.map(t=>r.qy` 4565 <li part="submenu-item" slot="items"> 4566 <a part="submenu-link" class="submenu__link" href="${t.linkUrl}"> 4567 ${t.linkText} 4568 </a> 4569 </li> 4570 `)} 4571 </ul> 4572 </div> 4573 `:r.qy` 4574 <a part="submenu-link" class="menu__link" href="${t.linkUrl}"> 4575 ${t.linkText} 4576 </a> 4577 `} 4578 </li> 4579 `)} 4580 </ul> 4581 </div> 4582 </umg-disclosure> 4583 `:r.qy` 4584 <a part="menu-link ${this.activeUrl===t.linkUrl?"menu-active":""}" class="menu__link ${this.activeUrl===t.linkUrl?"active":""} ${this.menuItemClasses(t.linkClasses)}" href="${t.linkUrl}"> 4585 ${t.linkText} 4586 </a> 4587 `} 4588 </li> 4589 `)} 4590 </ul> 4591 </nav> 4592 `}render(){return r.qy` 4593 ${this.menuList()} 4594 `}};p.styles=(0,m.Z)([c.S,r.AH` 4595 .menu { 4596 display: flex; 4597 gap: var(--umg-space-8, 0.5rem); 4598 align-items: center; 4599 font-family: var(--umg-font-menu-family, inherit); 4600 font-size: var(--umg-font-menu-size, inherit); 4601 letter-spacing: 0.05rem; 4602 list-style: none; 4603 margin: 0; 4604 padding: 0; 4605 color: var(--umg-color-base-text, rgb(0,0,0)); 4606 --umg-space-summary-padding: 0; 4607 --umg-space-details-padding: 0; 4608 } 4609 @supports (color: rgb(from white r g b)) { 4610 .menu { 4611 color: rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b); 4612 } 4613 } 4614 4615 .menu__main-title { 4616 font-size: var(--umg-font-body-size-sm, 0.75rem); 4617 } 4618 4619 .menu__title { 4620 font-weight: var(--umg-font-menu-weight, 700); 4621 text-transform: uppercase; 4622 width: 100%; 4623 border-bottom-width: 0.0625rem; 4624 border-bottom-style: solid; 4625 border-bottom-color: var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0,0.8))); 4626 padding-bottom: var(--umg-space-12, 0.75rem); 4627 } 4628 @supports (color: rgb(from white r g b)) { 4629 .menu__title { 4630 border-bottom-color: rgb(from var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0,0.8))) r g b / calc(alpha * var(--umg-opacity-border, 0.8))); 4631 } 4632 } 4633 4634 .menu > li > * { 4635 display: inline-block; 4636 padding: var(--umg-space-8, 0.5rem) var(--umg-space-12, 0.75rem); 4637 } 4638 .menu__link { 4639 color: inherit; 4640 text-decoration: none; 4641 transition: all var(--umg-animation-duration-04, 0.4s) ease; 4642 font-size: var(--umg-font-body-size-sm, 0.75rem); 4643 } 4644 .menu__link:hover, 4645 .menu__link.active, 4646 .summary.active { 4647 text-decoration: underline; 4648 text-underline-offset: 0.3rem; 4649 } 4650 .menu__link.active, 4651 .summary.active 4652 { 4653 text-decoration-thickness: 0.125rem; 4654 } 4655 4656 /* Menu disclosure */ 4657 .menu-disclosure { 4658 position: initial; 4659 --umg-color-base-border: transparent; 4660 } 4661 4662 .menu-disclosure::part(disclosure-drawer) { 4663 top: var(--umg-size-header-inner-height, 0); 4664 } 4665 4666 /* Menus */ 4667 .menu__container.menu-list--vertical .submenu__list { 4668 flex-direction: column; 4669 gap: var(--umg-space-4, 0.25rem); 4670 } 4671 .menu__list { 4672 font-family: var(--umg-font-menu-family, inherit); 4673 font-size: var(--umg-font-menu-size, inherit); 4674 list-style: none; 4675 padding: var(--umg-space-32, 2rem) var(--umg-space-48, 3rem); 4676 } 4677 4678 /* Extended */ 4679 .menu-list--extended .menu__list { 4680 display: flex; 4681 flex-wrap: wrap; 4682 column-gap: var(--umg-space-32, 2rem); 4683 row-gap: var(--umg-space-20, 1.25rem); 4684 margin: 0 auto; 4685 max-width: var(--umg-size-content-max-width, 75rem); 4686 width: 100%; 4687 } 4688 4689 /* Compact */ 4690 .menu.menu--compact .menu-disclosure::part(disclosure-drawer) { 4691 top: 4.5rem; 4692 left: unset; 4693 right: unset; 4694 border-radius: var(--umg-border-radius-20); 4695 } 4696 .menu.menu--compact .menu-disclosure::part(disclosure-content) { 4697 border-width: 0.0625rem; 4698 border-style: solid; 4699 border-color: var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0,0.8))); 4700 border-radius: var(--umg-border-radius-20); 4701 } 4702 @supports (color: rgb(from white r g b)) { 4703 .menu.menu--compact .menu-disclosure::part(disclosure-content) { 4704 border-color: rgb(from var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0,0.8))) r g b / calc(alpha * var(--umg-opacity-border, 0.8))); 4705 } 4706 } 4707 4708 .menu-list--compact .menu__list { 4709 padding: var(--umg-space-24, 1.5rem); 4710 } 4711 .menu-list--compact .menu__list > *:not(:last-child) { 4712 margin-bottom: var(--umg-space-24, 1.5rem); 4713 } 4714 .menu-list--compact .submenu__list { 4715 flex-direction: column; 4716 gap: var(--umg-space-4, 0.25rem); 4717 } 4718 .menu-list--compact .submenu__link { 4719 padding: var(--umg-space-4, 0.25rem) 0; 4720 } 4721 4722 /* Submenus */ 4723 .submenu { 4724 display: flex; 4725 flex-direction: column; 4726 gap: var(--umg-space-12, 0.75rem); 4727 font-family: var(--umg-font-submenu-family, inherit); 4728 font-size: var(--umg-font-body-size-sm, 0.75rem); 4729 } 4730 .submenu__title { 4731 font-size: var(--umg-font-body-size-xs, 0.75rem); 4732 font-weight: var(--umg-font-base-weight-light, 300); 4733 padding-right: var(--umg-space-8, 0.5rem); 4734 text-transform: uppercase; 4735 } 4736 .submenu__list { 4737 display: flex; 4738 gap: var(--umg-space-12, 0.75rem); 4739 list-style: none; 4740 padding: 0; 4741 } 4742 .submenu__link { 4743 display: block; 4744 color: inherit; 4745 padding: var(--umg-space-4, 0.25rem) var(--umg-space-8, 0.5rem); 4746 padding-left: 0; 4747 text-decoration: none; 4748 transition: all var(--umg-animation-duration-04, 0.4s) ease; 4749 } 4750 .submenu__link:hover { 4751 text-decoration: underline; 4752 text-underline-offset: 0.3rem; 4753 } 4754 `]),(0,o.C)([(0,a.M)()],p.prototype,"src",void 0),(0,o.C)([(0,a.M)({type:Object})],p.prototype,"data",void 0),(0,o.C)([(0,a.M)()],p.prototype,"activeUrl",void 0),(0,o.C)([(0,a.M)()],p.prototype,"layout",void 0),(0,o.C)([(0,a.M)({type:Boolean})],p.prototype,"vertical",void 0),(0,o.C)([(0,a.M)({type:Boolean})],p.prototype,"hideMenuTitle",void 0),(0,o.C)([(0,a.M)()],p.prototype,"submenuWidth",void 0),(0,o.C)([(0,a.M)()],p.prototype,"groupId",void 0),(0,o.C)([(0,n.YG)("umg-disclosure")],p.prototype,"_menus",void 0),p=(0,o.C)([(0,s.E)(`${h}-menu`)],p)},1312(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(3720),l=i(1895),d=i(31),c=i(6093),u=i(9924),m=i(8698),h=i(2609);i(8766);const{prefix:p}=m.W;let g=class extends r.WF{constructor(){super(...arguments),this.hideLabel=!1,this.spinnerType="arrows",this.placeholder=void 0,this.disabled=!1,this.required=!1,this.id="",this.error=!1,this.name="",this.value=1,this.step=1}updated(t){super.updated(t),t.has("value")&&this._input&&this._input.value!==this.value.toString()&&(this._input.value=this.value.toString())}changeEvent(){this.dispatchEvent(new CustomEvent("change",{detail:{name:this.name,id:this.id,fieldId:this.id,fieldName:this.name,value:this.value},bubbles:!0,composed:!0}))}stepValue(t){this._input&&("plus"===t?(this._input.stepUp(),this.value=parseInt(this._input.value),this.disabled=!1):"minus"===t&&"0"!==this._input.value?(this._input.stepDown(),this.value=parseInt(this._input.value),this.disabled=!1):(this.value=parseInt(this._input.value),this.disabled=!1))}setSpinnerValue(t){this.disabled=!0;const e=this.value;if(this._input&&(Number.isInteger(parseInt(this._input.value))&&this.min&&this.max&&parseInt(this._input.value)>=this.min&&parseInt(this._input.value)<=this.max||""===this._input.value||"0"===this._input.value?this.stepValue(t):Number.isInteger(parseInt(this._input.value))&&this.min&&!this.max?(this.value<this.min&&(this.value=this.min),this.stepValue(t)):Number.isInteger(parseInt(this._input.value))&&this.max&&!this.min&&parseInt(this._input.value)<=this.max?this.stepValue(t):!Number.isInteger(parseInt(this._input.value))||this.min||this.max?(this.disabled=!1,this.max&&(this._input.value=this.max.toString())):this.stepValue(t)),e!==this.value){(0,c.s)(()=>{this.changeEvent()},500)()}}validateOnFocusOut(){this._input&&(""===this._input.value&&this.min?(this._input.value=this.min.toString(),this.value=this.min):""===this._input.value||parseInt(this._input.value)<0?this.value=0:Number.isInteger(parseInt(this._input.value))||(this.min?this.value=this.min:this.value=0))}isMaxValue(){return Number(this.value)===this.max}isMinValue(){return!!(this.min&&this.value<=this.min)}containerClasses(){return{border:"symbols"===this.spinnerType}}fieldClasses(){return{"label-hidden":this.hideLabel,"field--required":this.required,"field--symbols":"symbols"===this.spinnerType,"field--arrows":"arrows"===this.spinnerType,"field--min":this.min&&this.value===this.min,"field--max":this.max&&this.value>=this.max}}inputClasses(){return{"input--error":this.error,border:"arrows"===this.spinnerType}}labelClasses(){return{"visually-hidden":this.hideLabel}}renderLabel(){return r.qy` 4755 <label class="field__label${(0,n.H)(this.labelClasses())}" for="${this.id}"> 4756 <slot name="label"> 4757 <umg-text as="span" variant="bodySm">Label:</umg-text> 4758 </slot> 4759 </label> 4760 `}renderButtons(){return"symbols"===this.spinnerType?r.qy` 4761 <umg-button-icon 4762 part="increase" 4763 exportparts="button-icon,icon-container,icon-svg,icon-image" 4764 class="spinner increase" 4765 icon="plus" 4766 size="small" 4767 @click="${()=>this.setSpinnerValue("plus")}" 4768 ?disabled=${this.isMaxValue()} 4769 > 4770 </umg-button-icon> 4771 <umg-button-icon 4772 part="decrease" 4773 exportparts="button-icon,icon-container,icon-svg,icon-image" 4774 class="spinner decrease" 4775 icon="minus" 4776 size="small" 4777 @click="${()=>this.setSpinnerValue("minus")}" 4778 ?disabled=${this.isMinValue()} 4779 > 4780 </umg-button-icon> 4781 `:r.qy` 4782 <umg-button-icon 4783 part="increase" 4784 exportparts="button-icon,icon-container,icon-svg,icon-image" 4785 class="spinner increase" 4786 icon="chevron-up" 4787 size="xsmall" 4788 @click="${()=>this.setSpinnerValue("plus")}" 4789 ?disabled=${this.isMaxValue()} 4790 > 4791 </umg-button-icon> 4792 <umg-button-icon 4793 part="decrease" 4794 exportparts="button-icon,icon-container,icon-svg,icon-image" 4795 class="spinner decrease" 4796 icon="chevron-down" 4797 size="xsmall" 4798 @click="${()=>this.setSpinnerValue("minus")}" 4799 ?disabled=${this.isMinValue()} 4800 > 4801 </umg-button-icon> 4802 `}renderNumber(){return r.qy` 4803 <div class="input-container ${(0,n.H)(this.containerClasses())}"> 4804 ${this.renderButtons()} 4805 <input 4806 part="text-field" 4807 class="input${(0,n.H)(this.inputClasses())}" 4808 id="${this.id}" 4809 name="${this.name}" 4810 step="${this.step}" 4811 min="${(0,d.J)(this.min)}" 4812 max="${(0,d.J)(this.max)}" 4813 type="number" 4814 value="${this.value}" 4815 ?disabled="${this.disabled}" 4816 ?required="${this.required}" 4817 placeholder="${(0,d.J)(this.placeholder)}" 4818 @keyup="${()=>this.setSpinnerValue("value")}" 4819 @focusout="${()=>this.validateOnFocusOut()}" 4820 > 4821 </div> 4822 `}renderErrorMessage(){if(this.error)return r.qy`
4823 <span class="error-text"> 4824 <slot name="error-message"></slot> 4825 </span> 4826 `}render(){return r.qy` 4827 <div class="field${(0,n.H)(this.fieldClasses())}"> 4828 <div class="field__inner"> 4829 ${this.renderLabel()} 4830 ${this.renderNumber()} 4831 ${this.renderErrorMessage()} 4832 </div> 4833 </div> 4834 `}};g.styles=(0,h.Z)([u.S,r.AH` 4835 :host([disabled]) { 4836 opacity: 0.4; 4837 pointer-events: none; 4838 } 4839 4840 :host([disabled]) .spinner:hover { 4841 background-color: transparent; 4842 } 4843 4844 /** Field container */ 4845 .field { 4846 display: flex; 4847 flex-direction: column; 4848 position: relative; 4849 font-size: var(--umg-font-body-size-sm, 0.875rem); 4850 } 4851 4852 .field:not(.label-hidden) .field__inner { 4853 display: flex; 4854 flex-direction: column; 4855 align-items: flex-start; 4856 } 4857 4858 /** Property styles */ 4859 .field--inline .field__inner { 4860 flex-direction: row; 4861 } 4862 .field--required .input-container::before { 4863 content: ''; 4864 position: absolute; 4865 top: 0; 4866 left: 0; 4867 bottom: 0; 4868 display: block; 4869 width: 0; 4870 height: 100%; 4871 z-index: 1; 4872 border-right: 0.25rem solid var(--umg-color-base-text-warning, rgb(200,0,0,0.7)); 4873 } 4874 @supports (color: rgb(from white r g b)) { 4875 .field--required .input-container::before { 4876 border-right-color: rgb(from var(--umg-color-base-text-warning, rgb(200,0,0,0.7)) r g b / 0.7); 4877 } 4878 } 4879 4880 /* Field label */ 4881 .field__label { 4882 color: inherit; 4883 font-size: inherit; 4884 margin-bottom: var(--umg-space-4, 0.25rem); 4885 } 4886 4887 /* Input container */ 4888 .input-container { 4889 position: relative; 4890 -moz-appearance: textfield; 4891 } 4892 4893 /* Base input */ 4894 input { 4895 border: none; 4896 background-color: inherit; 4897 color: inherit; 4898 font-family: var(--umg-font-body-family, Roboto, Arial, Helvetica, sans-serif); 4899 font-size: inherit; 4900 padding: 0; 4901 height: var(--umg-space-40); 4902 width: fit-content; 4903 -moz-appearance: textfield; 4904 } 4905 4906 /* Border */ 4907 .border { 4908 padding: 0.25rem; 4909 border-radius: var(--umg-border-input-corner-radius, 0); 4910 border: solid var(--umg-border-input-width, 0.0625rem) var(--umg-color-input-border, var(--umg-color-base-text, rgb(0,0,0,0.2))); 4911 } 4912 @supports (color: rgb(from white r g b)) { 4913 .border { 4914 border-color: rgb(from var(--umg-color-input-border, var(--umg-color-base-text, rgb(0,0,0,0.2))) r g b / alpha); 4915 } 4916 } 4917 4918 input::-webkit-outer-spin-button { 4919 appearance: none; 4920 } 4921 input::-webkit-inner-spin-button { 4922 appearance: none; 4923 } 4924 4925 /** Input states */ 4926 .input--error { 4927 border: 0.0625rem solid var(--umg-color-base-text-warning, rgb(245,0,0)); 4928 } 4929 @supports (color: rgb(from white r g b)) { 4930 .input--error { 4931 border-color: rgb(from var(--umg-color-base-text-warning, rgb(245,0,0)) r g b); 4932 } 4933 } 4934 4935 /** Spinner buttons */ 4936 :host(:not([disabled])) .field--min .spinner.decrease::part(button-icon) { 4937 cursor: default; 4938 pointer-events: none; 4939 } 4940 :host(:not([disabled])) .field--max .spinner.increase::part(button-icon) { 4941 pointer-events: none; 4942 cursor: default; 4943 } 4944 .spinner { 4945 position: absolute; 4946 height: 1.25rem; 4947 --umg-space-icon-padding: 0; 4948 4949 } 4950 .spinner::part(button-icon) { 4951 padding: 0.125rem; 4952 } 4953 4954 /** Arrows input buttons */ 4955 .field--arrows .spinner.increase { 4956 --umg-border-icon-corner-radius: 0 var(--umg-border-input-corner-radius, 0) 0 0; 4957 top: 0.0625rem; 4958 right: 0.25rem; 4959 } 4960 .field--arrows .spinner.decrease { 4961 --umg-border-icon-corner-radius: 0 0 var(--umg-border-input-corner-radius, 0) 0; 4962 bottom: 0.0625rem; 4963 right: 0.25rem; 4964 } 4965 .field--arrows input { 4966 padding-left: var(--umg-space-12, 0.75rem); 4967 padding-right: var(--umg-space-24, 1.5rem); 4968 } 4969 4970 /** Symbol input buttons */ 4971 .field--symbols .input-container { 4972 display: flex; 4973 align-items: stretch; 4974 } 4975 .field--symbols input { 4976 order: 2; 4977 text-align: center; 4978 height: 1.75rem; 4979 width: 2rem; 4980 } 4981 .field--symbols .spinner { 4982 border: none; 4983 position: relative; 4984 height: 1.75rem; 4985 } 4986 .field--symbols .spinner::part(button-icon) { 4987 padding: 0.45rem; 4988 } 4989 .field--symbols .spinner.increase { 4990 border-left: none; 4991 order: 3; 4992 } 4993 .field--symbols .spinner.decrease {
4994 border-right: none; 4995 order: 1; 4996 } 4997 4998 /** Error text */ 4999 .error-text { 5000 color: var(--umg-color-base-text-warning, rgb(245,0,0)); 5001 font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-sm, 0.875rem)); 5002 padding-top: var(--umg-space-4, 0.25rem); 5003 } 5004 @supports (color: rgb(from white r g b)) { 5005 .error-text { 5006 color: rgb(from var(--umg-color-base-text-warning, rgb(245,0,0)) r g b); 5007 } 5008 } 5009 `]),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"hideLabel",void 0),(0,o.C)([(0,a.M)()],g.prototype,"spinnerType",void 0),(0,o.C)([(0,a.M)()],g.prototype,"placeholder",void 0),(0,o.C)([(0,a.M)({type:Boolean,reflect:!0})],g.prototype,"disabled",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"required",void 0),(0,o.C)([(0,a.M)()],g.prototype,"id",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"error",void 0),(0,o.C)([(0,a.M)()],g.prototype,"name",void 0),(0,o.C)([(0,a.M)({type:Number,reflect:!0})],g.prototype,"value",void 0),(0,o.C)([(0,a.M)({type:Number})],g.prototype,"step",void 0),(0,o.C)([(0,a.M)({type:Number})],g.prototype,"min",void 0),(0,o.C)([(0,a.M)({type:Number})],g.prototype,"max",void 0),(0,o.C)([(0,l.P)("input")],g.prototype,"_input",void 0),g=(0,o.C)([(0,s.E)(`${p}-number-field`)],g)},7538(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(3720),l=i(1145),d=i(9924),c=i(8698),u=i(2609);const{prefix:m}=c.W;let h=class extends r.WF{constructor(){super(...arguments),this.divider=!1}pageClasses(){return{"page--divider":this.divider}}pageStyles(){let t={};return this.spacing&&(t={...t,"--umg-space-section-bottom-margin":this.spacing/16+"rem"}),t}render(){return r.qy` 5010 <main 5011 part="page" 5012 id="page" 5013 class="page${(0,n.H)(this.pageClasses())}" 5014 style="${(0,l.W)(this.pageStyles())}" 5015 > 5016 <div part="page-inner" class="page__inner"> 5017 <slot></slot> 5018 </div> 5019 </main> 5020 `}};h.styles=(0,u.Z)([d.S,r.AH` 5021 :host { 5022 display: block; 5023 position: relative; 5024 width: 100%; 5025 } 5026 5027 .page { 5028 color: var(--umg-color-base-text); 5029 background-color: var(--umg-color-base-background); 5030 } 5031 @supports (color: rgb(from white r g b)) { 5032 .page { 5033 color: rgb(from var(--umg-color-base-text) r g b / alpha); 5034 background-color: rgb(from var(--umg-color-base-background) r g b / alpha); 5035 } 5036 } 5037 5038 /* Divider */ 5039 .page--divider { 5040 border-bottom: 0.065rem solid rgba(var(--umg-color-base-border),1); 5041 border-top: 0.065rem solid rgba(var(--umg-color-base-border),1); 5042 } 5043 `]),(0,o.C)([(0,a.M)({type:Number})],h.prototype,"spacing",void 0),(0,o.C)([(0,a.M)({type:Boolean})],h.prototype,"divider",void 0),h=(0,o.C)([(0,s.E)(`${m}-page`)],h)},2610(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(3720),n=i(9563),l=i(7509),d=i(9924),c=i(8698),u=i(2609);i(8766);const{prefix:m}=c.W;let h=class extends r.WF{constructor(){super(),this.icon="ellipsis-vertical",this.openDirection="down",this.disabled=!1,this._open=!1,this.addEventListener("focusout",this._focusOut)}_focusOut(t){t.relatedTarget&&this.contains(t.relatedTarget)||(this._open=!1)}_togglePopover(){this._open=!this._open}popoverClasses(){return{"popover--open":this._open}}popoverContentClasses(){const t={};return t["popover-open-direction--"+this.openDirection]=!0,t}popovertemplate(){return this._open?r.qy`
5044 <div part="popover-content" class="popover__content${(0,a.H)(this.popoverContentClasses())}"> 5045 <umg-button-icon 5046 part="popover-close-button" 5047 exportparts="button-icon,icon-container,icon-svg,icon-image" 5048 class="popover__close-button" 5049 icon="close" 5050 size="large" 5051 @click=${this._togglePopover} 5052 > 5053 </umg-button-icon> 5054 <div part="popover-content-inner" class="popover__content-inner"> 5055 <slot></slot> 5056 </div> 5057 </div> 5058 `:r.s6}render(){return r.qy` 5059 <div part="popover" class="popover${(0,a.H)(this.popoverClasses())}"> 5060 <umg-button-icon 5061 part="popover-open-button" 5062 exportparts="button-icon,icon-container,icon-svg,icon-image" 5063 class="popover__open-button" 5064 icon="${this.icon}" 5065 size="large" 5066 @click=${this._togglePopover} 5067 ?disabled="${this.disabled}" 5068 > 5069 </umg-button-icon> 5070 ${this.popovertemplate()} 5071 </div> 5072 `}};h.styles=(0,u.Z)([d.S,r.AH` 5073 .popover { 5074 position: relative; 5075 } 5076 .popover__content { 5077 position: fixed; 5078 bottom: 0; 5079 left: 0; 5080 right: 0; 5081 bottom: 0; 5082 width: 100%; 5083 z-index: 499; // under overlay z-index 5084 color: var(--umg-color-popover-text, var(--umg-color-base-text, rgb(255,255,255))); 5085 background-color: var(--umg-color-popover-background, var(--umg-color-base-background, rgb(255,255,255))); 5086 padding: 3rem 1.5rem; 5087 } 5088 @supports (color: rgb(from white r g b)) { 5089 .popover__content { 5090 color: rgb(from var(--umg-color-popover-text, var(--umg-color-base-text, rgb(255,255,255))) r g b); 5091 background-color: rgb(from var(--umg-color-popover-background, var(--umg-color-base-background, rgb(255,255,255))) r g b / alpha); 5092 } 5093 } 5094 5095 .popover__content-inner { 5096 display: flex; 5097 flex-direction: column; 5098 justify-content: start; 5099 align-items: center; 5100 text-align: center; 5101 gap: var(--umg-space-20, var(--umg-space-vertical-gap, 1.25rem)); 5102 } 5103 5104 @media screen and (min-width: 48.06rem) { 5105 .popover__content { 5106 position: absolute; 5107 left: initial; 5108 bottom: initial; 5109 top: -0.25rem; 5110 right: -0.25rem; 5111 border-radius: var(--umg-border-base-corner-radius, 0.5rem); 5112 box-shadow: -0.1875rem 0.1875rem 0.5rem 0 rgb(0,0,0,0.3); 5113 padding: 2.5rem 1rem 1.5rem; 5114 width: max-content; 5115 5116 --umg-font-body-scale: 0.8; 5117 } 5118 5119 .popover__content.popover-open-direction--down { 5120 bottom: initial; 5121 top: -0.25rem; 5122 } 5123 5124 .popover__content.popover-open-direction--up { 5125 bottom: 0; 5126 top: initial; 5127 } 5128 5129 .popover__content-inner { 5130 gap: var(--umg-space-16, var(--umg-space-vertical-gap, 1rem)); 5131 width: fit-content; 5132 } 5133 } 5134 5135 .popover__close-button { 5136 position: absolute; 5137 top: 0.5rem; 5138 right: 0.5rem; 5139 --umg-color-base-text: var(--umg-color-popover-text); 5140 --umg-color-base-background: transparent; 5141 } 5142 @media screen and (min-width: 48.06rem) { 5143 .popover__close-button { 5144 top: 0; 5145 right: 0; 5146 } 5147 } 5148 5149 /* Mobile overlay */ 5150 @media screen and (max-width: 48rem) { 5151 .popover--open::after { 5152 content: ''; 5153 position: fixed; 5154 inset: 0; 5155 background-color: rgb(0,0,0,0.5); 5156 backdrop-filter: blur(2px); 5157 z-index: 498; 5158 } 5159 } 5160 `]),(0,o.C)([(0,n.M)()],h.prototype,"icon",void 0),(0,o.C)([(0,n.M)()],h.prototype,"openDirection",void 0),(0,o.C)([(0,n.M)({type:Boolean})],h.prototype,"disabled",void 0),(0,o.C)([(0,l.w)()],h.prototype,"_open",void 0),h=(0,o.C)([(0,s.E)(`${m}-popover`)],h)},4565(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(3720),l=i(1145),d=i(9924);const c=r.AH` 5161 5162 /* Colour */ 5163 .section-block { 5164 color: var(--umg-color-section-text, var(--umg-color-base-text)); 5165 background-color: var(--umg-color-section-background, var(--umg-color-base-background)); 5166 } 5167 @supports (color: rgb(from white r g b)) { 5168 .section-block { 5169 color: rgb(from var(--umg-color-section-text, var(--umg-color-base-text)) r g b / alpha); 5170 background-color: rgb(from var(--umg-color-section-background, var(--umg-color-base-background)) r g b / alpha); 5171 } 5172 } 5173`,u=r.AH` 5174 5175 .section-content { 5176 margin-top: 0; 5177 margin-right: auto; 5178 margin-bottom: 0; 5179 margin-left: auto; 5180 max-width: var(--umg-size-content-max-width, 75rem); 5181 } 5182 5183 /* Content width */ 5184 .section-content--page-width { 5185 max-width: var(--umg-size-content-max-width, 75rem); 5186 } 5187 .section-content--full-width, 5188 .section-content--side-bleed:not(.section-content--page-width), 5189 .section-content--full-bleed:not(.section-content--page-width) { 5190 max-width: var(--umg-size-screen-max-width, 100%); 5191 } 5192 5193 /* Content spacing */ 5194 .section-content { 5195 display: flex; 5196 flex-direction: column; 5197 gap: var(--umg-space-grid-vertical-desktop); 5198 } 5199 @media screen and (max-width: 48rem) { 5200 .section-content { 5201 gap: var(--umg-space-grid-vertical-mobile); 5202 } 5203 } 5204 5205 @media only screen and (min-width: 48.06rem) { 5206 .section-content--padded { 5207 padding-top: var(--umg-space-block-top-padding, 0); 5208 padding-bottom: var(--umg-space-block-bottom-padding, 2rem); 5209 padding-left: var(--umg-space-base-side-padding, 1.5rem); 5210 padding-right: var(--umg-space-base-side-padding, 1.5rem); 5211 } 5212 .section-content--side-bleed { 5213 padding-top: var(--umg-space-block-top-padding, 0); 5214 padding-bottom: var(--umg-space-block-bottom-padding, 2rem); 5215 padding-left: 0; 5216 padding-right: 0; 5217 } 5218 .section-content.section-content--full-bleed { 5219 padding: 0; 5220 } 5221 5222 .section-content--center { 5223 display: flex; 5224 justify-content: center; 5225 text-align: center; 5226 } 5227 } 5228 5229 @media only screen and (max-width: 48rem) { 5230 .section-content--mobile-padded { 5231 padding-top: var(--umg-space-block-top-padding-mobile, 0); 5232 padding-bottom: var(--umg-space-block-bottom-padding-mobile, 1.5rem); 5233 padding-left: var(--umg-space-base-side-padding-mobile, 1.5rem); 5234 padding-right: var(--umg-space-base-side-padding-mobile, 1.5rem); 5235 } 5236 .section-content--mobile-side-bleed { 5237 padding-top: var(--umg-space-block-top-padding-mobile, 0); 5238 padding-bottom: var(--umg-space-block-bottom-padding-mobile, 1.5rem); 5239 padding-left: 0; 5240 padding-right: 0; 5241 } 5242 .section-content.section-content--mobile-full-bleed { 5243 padding: 0; 5244 } 5245 5246 .section-content--mobile-center { 5247 display: flex; 5248 justify-content: center; 5249 text-align: center; 5250 } 5251 } 5252`;var m=i(8698);const{prefix:h}=m.W;let p=class extends r.WF{constructor(){super(...arguments),this.width="page-width",this.centerContent=!1,this.mobileCenterContent=!1,this.paddingType="padded",this.mobilePaddingType="padded",this.isNumeric=t=>("number"==typeof t||"string"==typeof t&&""!==t.trim())&&!isNaN(t)}sectionBlockStyles(){let t={};return this.paddingTop&&(t={...t,"--umg-space-block-top-padding":Number(this.paddingTop)/16+"rem"}),this.paddingBottom&&(t={...t,"--umg-space-block-bottom-padding":Number(this.paddingBottom)/16+"rem"}),this.mobilePaddingTop?t={...t,"--umg-space-block-top-padding-mobile":Number(this.mobilePaddingTop)/16+"rem"}:this.paddingTop&&(t={...t,"--umg-space-block-top-padding-mobile":Number(this.paddingTop)/16+"rem"}),this.mobilePaddingBottom?t={...t,"--umg-space-block-bottom-padding-mobile":Number(this.mobilePaddingBottom)/16+"rem"}:this.paddingBottom&&(t={...t,"--umg-space-block-bottom-padding-mobile":Number(this.paddingBottom)/16+"rem"}),this.spacing&&(t={...t,"--umg-space-grid-vertical-desktop":Number(this.spacing)/16+"rem"}),this.mobileSpacing?t={...t,"--umg-space-grid-vertical-mobile":Number(this.mobileSpacing)/16+"rem"}:this.spacing&&(t={...t,"--umg-space-grid-vertical-mobile":Number(this.spacing)/16+"rem"}),t}sectionContentClasses(){const t={};return t["section-content--"+this.paddingType]=!0,t["section-content--mobile-"+this.mobilePaddingType]=!0,this.width&&!this.isNumeric(this.width)&&(t["section-content--"+this.width]=!0),this.centerContent&&(t["section-content--center"]=!0),this.mobileCenterContent&&(t["section-content--mobile-center"]=!0),t}sectionContentStyles(){let t={};return this.width&&this.isNumeric(this.width)&&(t={...t,"--umg-size-content-max-width":Number(this.width)/16+"rem"}),t}render(){return r.qy` 5253 <div 5254 part="section-block" 5255 class="section-block" 5256 style="${(0,l.W)(this.sectionBlockStyles())}" 5257 > 5258 <div 5259 part="section-content" 5260 class="section-content${(0,n.H)(this.sectionContentClasses())}" 5261 style="${(0,l.W)(this.sectionContentStyles())}" 5262 > 5263 <slot></slot> 5264 <slot name="content"></slot> 5265 </div> 5266 </div> 5267 `}};p.styles=[d.S,c,u,r.AH``],(0,o.C)([(0,a.M)()],p.prototype,"width",void 0),(0,o.C)([(0,a.M)({type:Boolean})],p.prototype,"centerContent",void 0),(0,o.C)([(0,a.M)({type:Boolean})],p.prototype,"mobileCenterContent",void 0),(0,o.C)([(0,a.M)()],p.prototype,"paddingType",void 0),(0,o.C)([(0,a.M)()],p.prototype,"mobilePaddingType",void 0),(0,o.C)([(0,a.M)()],p.prototype,"paddingTop",void 0),(0,o.C)([(0,a.M)()],p.prototype,"paddingBottom",void 0),(0,o.C)([(0,a.M)()],p.prototype,"mobilePaddingTop",void 0),(0,o.C)([(0,a.M)()],p.prototype,"mobilePaddingBottom",void 0),(0,o.C)([(0,a.M)()],p.prototype,"spacing",void 0),(0,o.C)([(0,a.M)()],p.prototype,"mobileSpacing",void 0),p=(0,o.C)([(0,s.E)(`${h}-section-block`)],p)},5421(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(1145),l=i(9924);const d=r.AH` 5268 .section { 5269 padding-top: var(--umg-space-section-top-padding, 0); 5270 padding-bottom: var(--umg-space-section-bottom-padding, 0); 5271 margin-top: var(--umg-space-section-top-margin, 0); 5272 margin-bottom: var(--umg-space-section-bottom-margin, 0); 5273 } 5274 5275 @media only screen and (max-width: 48rem) { 5276 .section { 5277 padding-top: var(--umg-space-section-top-padding-mobile, 0); 5278 padding-bottom: var(--umg-space-section-bottom-padding-mobile, 0); 5279 margin-top: var(--umg-space-section-top-margin-mobile, 0); 5280 margin-bottom: var(--umg-space-section-bottom-margin-mobile, 0); 5281 } 5282 } 5283`;i(4565);var c=i(8698),u=i(2609);const{prefix:m}=c.W;let h=class extends r.WF{constructor(){super(...arguments),this.as="section"}sectionStyles(){let t={};return this.spacing&&(t={...t,"--umg-space-grid-vertical-desktop":this.spacing}),this.mobileSpacing&&(t={...t,"--umg-space-grid-vertical-mobile":this.mobileSpacing}),t}sectionAs(){return"section"===this.as?r.qy` 5284 <section 5285 part="section" 5286 class="section" 5287 style="${(0,n.W)(this.sectionStyles())}" 5288 > 5289 <slot></slot> 5290 <slot name="content"></slot> 5291 </section> 5292 `:"header"===this.as?r.qy` 5293 <header 5294 part="header" 5295 class="section" 5296 style="${(0,n.W)(this.sectionStyles())}" 5297 > 5298 <slot></slot> 5299 <slot name="content"></slot> 5300 </header> 5301 `:"footer"===this.as?r.qy` 5302 <footer 5303 part="footer" 5304 class="section" 5305 style="${(0,n.W)(this.sectionStyles())}" 5306 > 5307 <slot></slot> 5308 <slot name="content"></slot> 5309 </footer> 5310 `:r.qy` 5311 <div 5312 part="section" 5313 class="section" 5314 style="${(0,n.W)(this.sectionStyles())}" 5315 > 5316 <slot></slot> 5317 <slot name="content"></slot> 5318 </div> 5319 `}render(){return r.qy` 5320 ${this.sectionAs()} 5321 `}};h.styles=(0,u.Z)([l.S,d,r.AH` 5322 :host { 5323 display: block; 5324 width: 100%; 5325 } 5326 `]),(0,o.C)([(0,a.M)()],h.prototype,"as",void 0),(0,o.C)([(0,a.M)()],h.prototype,"spacing",void 0),(0,o.C)([(0,a.M)()],h.prototype,"mobileSpacing",void 0),h=(0,o.C)([(0,s.E)(`${m}-section`)],h)},5916(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(7621),l=i(3720),d=i(1145),c=i(1088),u=i(9924),m=i(8698),h=i(2609);i(5840),i(4630);const{prefix:p}=m.W;let g=class extends r.WF{constructor(){super(...arguments),this.type="custom",this.id="",this.options=[],this.label="Select box",this.labelSize="xs",this.name="",this.value="",this.selectedItem=0,this.defaultLabel=!1,this.justify="start",this.mobileJustify="start",this.direction="down",this.border=!1,this.disabled=!1,this.align="left",this._caratPosition="",this._currentLabel="",this._isKeyboardEvent=!1,this.resizeObserver=new ResizeObserver(()=>this.nativeCaratPosition()),this.windowEventManager=new c.E(window),this.eventManager=new c.E(this),this.getOptionValue=()=>this.value,this.setOptionValue=t=>{t&&(this.selectedItem=t)},this._handleCustomKeyboardChange=t=>{t.stopPropagation(),"Enter"===t.key&&(this._optionChange(t),this._closeCustomSelect())},this._handleCustomOutsideClick=t=>{"click"!==t.type||t.composedPath().includes(this)||this._closeCustomSelect()}}connectedCallback(){super.connectedCallback(),this.windowEventManager.addEventListener("click",this._handleCustomOutsideClick)}disconnectedCallback(){this.windowEventManager.removeEventListener("click",this._handleCustomOutsideClick),this._select&&this.resizeObserver.unobserve(this._select),super.disconnectedCallback()}firstUpdated(){this.options&&this.options.length>this.selectedItem&&(this.value=this.options[this.selectedItem].value),"native"===this.type&&this._select&&this.resizeObserver.observe(this)}updated(t){if(t.has("defaultLabel"))if(this.defaultLabel){if(this.options&&this.options.length>this.selectedItem){const t=this.options[this.selectedItem];this._currentLabel=t?t.label:""}}
5326else this._currentLabel=""}_eventsDispatcher(t){const e={bubbles:!0,composed:!0};if("custom"===this.type){const i={fieldName:this.name,fieldId:this.id,name:this.name,id:this.id,value:t.target.value};this.eventManager.dispatchCustomEvent("change",i,e)}else{const t=new Event("change",e);this.dispatchEvent(t)}}_handleCustomKeyboardEvent(){this._isKeyboardEvent=!0,setTimeout(()=>{this._isKeyboardEvent=!1},0)}_handleCustomOptionChange(t){this._isKeyboardEvent||(this._optionChange(t),this._closeCustomSelect())}_optionChange(t){const e=t.target.value;if("custom"===this.type){const e=t.target.dataset.label;e&&(this._currentLabel=e)}e&&(this.value=e,this._eventsDispatcher(t))}_closeCustomSelect(){this._disclosure&&this._disclosure.disclosureClose()}nativeSelectStyles(){let t={};return"native"===this.type&&this._caratPosition&&(t={...t,"--umg-position-carat":this._caratPosition,"--umg-font-label-size":"var(--umg-font-body-size-"+this.labelSize+")"}),t}selectStyles(){let t={};return t={...t,"--umg-font-label-size":"var(--umg-font-body-size-"+this.labelSize+")"},"native"===this.type&&this._caratPosition&&(t={...t,"--umg-position-carat":this._caratPosition}),t}selectClasses(){return{"select--disabled":this.disabled,"select--border":this.border,"select--native":"native"===this.type}}nativeCaratPosition(){if(this._select){const t=getComputedStyle(this._select);this._caratPosition=parseInt(t.getPropertyValue("padding-left"),10)/16+"rem"}}nativeOptions(){if(Array.isArray(this.options)&&this.options.length)return this.options.map((t,e)=>r.qy` 5327 <option 5328 value="${t.value}" 5329 ?selected="${this.selectedItem===e||this.value===t.value}" 5330 > 5331 ${t.label} 5332 </option> 5333 `)}customOptions(){if(Array.isArray(this.options)&&this.options.length)return r.qy` 5334 <fieldset> 5335 <legend class="visually-hidden">${this.label}</legend> 5336 <ul 5337 class="select-list" 5338 role="listbox" 5339 @click="${this._handleCustomKeyboardChange}" 5340 @keydown="${this._handleCustomKeyboardChange}" 5341 > 5342 ${this.options.map((t,e)=>r.qy` 5343 <li role="option"> 5344 <input 5345 class="visually-hidden" 5346 type="radio" 5347 id="${t.id}" 5348 name="${t.name}" 5349 value="${t.value}" 5350 data-label="${t.label}" 5351 ?checked="${this.selectedItem===e||t.value===this.value}" 5352 @click=${this._handleCustomOptionChange} 5353 @keydown=${this._handleCustomKeyboardEvent} 5354 /> 5355 <label for="${t.id}"> 5356 <umg-icon icon="check" size="xsmall"></umg-icon> 5357 ${t.label} 5358 </label> 5359 </li> 5360 `)} 5361 </ul> 5362 </fieldset> 5363 `}currentCustomSelectedLabel(){if(this._currentLabel)return r.qy` 5364 <span class="select__current"> 5365 ${this._currentLabel} 5366 </span> 5367 `}selectType(){return"native"===this.type?r.qy` 5368 <label class="label" for="${this.name}-select">${this.label}</label> 5369 <div class="wrapper"> 5370 <select 5371 id="${this.name}-select" 5372 part="select" 5373 class="select" 5374 name="${this.name}" 5375 @change="${this._optionChange}" 5376 > 5377 ${this.nativeOptions()} 5378 </select> 5379 <umg-icon 5380 slot="icon" 5381 part="carat" 5382 class="carat" 5383 icon="chevron-down" 5384 size="xsmall" 5385 > 5386 </umg-icon> 5387 </div> 5388 `:r.qy` 5389 <umg-disclosure 5390 overlay 5391 direction="${this.direction}" 5392 mobileDirectionInverse 5393 justify="${this.justify}" 5394 mobileJustify="${this.mobileJustify}" 5395 align="${this.align}" 5396 > 5397 <div 5398 class="select__label" 5399 part="select-box" 5400 slot="summary" 5401 >
5402 <span class="label"> 5403 ${this.label} 5404 </span> 5405 ${this.currentCustomSelectedLabel()} 5406 </div> 5407 <umg-icon 5408 slot="icon" 5409 part="carat" 5410 class="carat" 5411 icon="chevron-down" 5412 size="xsmall" 5413 > 5414 </umg-icon> 5415 <div slot="content" class="select__close-button" @click=${this._closeCustomSelect}> 5416 <umg-icon icon="close" size="xlarge"></umg-icon> 5417 </div> 5418 <div slot="content" class="select__content"> 5419 ${this.customOptions()} 5420 </div> 5421 </umg-disclosure> 5422 `}render(){return r.qy` 5423 <div 5424 part="select" 5425 class="select ${(0,l.H)(this.selectClasses())}" 5426 style="${(0,d.W)(this.selectStyles())}" 5427 > 5428 ${this.selectType()} 5429 </div> 5430 `}};g.styles=(0,h.Z)([u.S,r.AH` 5431 :host { 5432 display: block; 5433 width: fit-content; 5434 --umg-color-icon-text: var(--umg-color-summary-text); 5435 --umg-border-base-corner-radius: var(--umg-border-input-corner-radius); 5436 } 5437 5438 /* Native select */ 5439 .select--native { 5440 display: flex; 5441 align-items: center; 5442 gap: var(--umg-space-12); 5443 } 5444 .select--native .wrapper { 5445 position: relative; 5446 } 5447 .select--native select { 5448 display: block; 5449 appearance: none; 5450 height: auto; 5451 padding: var(--umg-space-summary-padding, 0.5rem); 5452 padding-right: max(2rem, calc(var(--umg-position-carat) * 2)); 5453 border: 0.0625rem solid var(--umg-color-summary-border, rgb(0,0,0,0)); 5454 border-radius: var(--umg-border-base-corner-radius, 0); 5455 color: var(--umg-color-summary-text, var(--umg-color-base-text, rgb(0,0,0))); 5456 background-color: var(--umg-color-summary-background, rgb(255, 255, 255)); 5457 font-size: var(--umg-font-label-size, 0.875rem); 5458 } 5459 @supports (color: rgb(from white r g b)) { 5460 .select--native select { 5461 border-color: rgb(from var(--umg-color-summary-border, rgb(0,0,0,0)) r g b / alpha); 5462 color: rgb(from var(--umg-color-summary-text, var(--umg-color-base-text, rgb(0,0,0))) r g b); 5463 background-color: rgb(from var(--umg-color-summary-background, var(--umg-color-base-background, rgb(255, 255, 255))) r g b); 5464 } 5465 } 5466 .select--native select:focus-visible { 5467 outline: 0.125rem solid var(--umg-color-base-background, rgb(0,0,0)), 0.5; 5468 outline-offset: 0.1875rem; 5469 box-shadow: 5470 0 0 0 0.1875rem var(--umg-color-base-text, rgb(255,255,255)), 5471 0 0 0 0.3125rem 0.25rem var(--umg-color-base-background, rgb(0,0,0)), 0.3; 5472 } 5473 @supports (color: rgb(from white r g b)) { 5474 .select--native select:focus-visible { 5475 outline: 0.125rem solid rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b / 0.5); 5476 outline-offset: 0.1875rem; 5477 box-shadow: 5478 0 0 0 0.1875rem rgb(from var(--umg-color-base-background, rgb(255,255,255)) r g b / 1), 5479 0 0 0 0.3125rem 0.25rem rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b / 0.3); 5480 } 5481 } 5482 .select--native .label { 5483 font-size: var(--umg-font-label-size, 0.875rem); 5484 } 5485 .select--native .carat { 5486 position: absolute; 5487 transform: translateY(-50%); 5488 right: calc((var(--umg-position-carat) / 2) + 6px); /* 50% of padding + 50% icon width */ 5489 top: 50%; 5490 z-index: 5; 5491 pointer-events: none; 5492 } 5493 5494 /* Custom select */ 5495 .select { 5496 width: fit-content; 5497 position: relative; 5498 } 5499 .select.select--disabled { 5500 opacity: 0.4; 5501 pointer-events: none; 5502 cursor: default; 5503 } 5504 .select__content { 5505 max-height: 13rem; 5506 } 5507 .select__label { 5508 font-size: var(--umg-font-label-size, 0.875rem); 5509 } 5510 .select__close-button { 5511 display: none; 5512 } 5513 .select__current { 5514 font-size: var(--umg-font-label-size, 0.875rem); 5515 padding-left: var(--umg-space-4, 0.25rem); 5516 opacity: 0.7; 5517 } 5518 5519 /* Option inputs */ 5520 fieldset { 5521 border: none; 5522 padding: 0; 5523 margin: 0; 5524 } 5525 5526 /* Select box list/group */ 5527 .select-list { 5528 list-style: none; 5529 margin: 0; 5530 padding: 0; 5531 min-width: 10rem; 5532 overflow-y: auto; 5533 } 5534 5535 umg-disclosure::part(disclosure-content) { 5536 padding: var(--umg-space-details-padding, 1rem 0); 5537 } 5538 5539 /* Select box scrollbar */ 5540 .select-list::-webkit-scrollbar {
5541 width: 0.25rem; 5542 } 5543 .select-list::-webkit-scrollbar-track { 5544 background: var(--umg-color-base-text, rgb(0,0,0,0.05)); 5545 border-radius: var(--umg-border-radius-30); 5546 } 5547 .select-list::-webkit-scrollbar-thumb { 5548 background: var(--umg-color-base-text, rgb(0,0,0,0.1)); 5549 border-radius: var(--umg-border-radius-30); 5550 } 5551 @supports (color: rgb(from white r g b)) { 5552 .select-list::-webkit-scrollbar-track { 5553 background: rgb(from var(--umg-color-base-text, rgb(0,0,0,0.05)) r g b / 0.05); 5554 } 5555 .select-list::-webkit-scrollbar-thumb { 5556 background: rgb(from var(--umg-color-base-text, rgb(0,0,0,0.1)) r g b / 0.1); 5557 } 5558 } 5559 5560 /* Inputs */ 5561 .select-list input[type=radio] ~ label umg-icon { 5562 visibility: hidden; 5563 } 5564 .select-list input[type=radio]:checked ~ label umg-icon { 5565 visibility: visible; 5566 } 5567 .select-list input[type=radio]:focus-visible ~ label { 5568 text-decoration: underline; 5569 text-decoration-thickness: 0.125rem; 5570 text-underline-offset: 0.3rem; 5571 } 5572 5573 /* Input labels */ 5574 .select-list li, 5575 .select-list label { 5576 cursor: pointer; 5577 } 5578 .select-list label { 5579 display: flex; 5580 align-items: center; 5581 font-size: var(--umg-font-body-size-sm, 0.875rem); 5582 gap: var(--umg-space-8, 0.5rem); 5583 padding: 0.375rem var(--umg-space-20, 1.25rem) 0.375rem var(--umg-space-16, 1rem); 5584 width: 100%; 5585 } 5586 .select-list li:first-child label { 5587 margin-top: var(--umg-space-16, 1rem); 5588 } 5589 .select-list li:last-child label { 5590 margin-bottom: var(--umg-space-16, 1rem); 5591 } 5592 .select-list label:hover { 5593 background-color: var(--umg-color-base-text, rgb(0,0,0,0.05)); 5594 } 5595 @supports (color: rgb(from white r g b)) { 5596 .select-list label:hover { 5597 background-color: rgb(from var(--umg-color-base-text, rgb(0,0,0,0.05)) r g b / 0.05); 5598 } 5599 } 5600 5601 /** Mobile styles */ 5602 @media screen and (max-width: 48rem) { 5603 :host { 5604 --umg-border-base-corner-radius: 0; 5605 --umg-color-base-border: transparent; 5606 } 5607 .select { 5608 padding: 0; 5609 } 5610 .select-list { 5611 max-width: 86vw; 5612 } 5613 .select-list label { 5614 font-size: var(--umg-font-label-size); 5615 gap: var(--umg-space-16, 1rem); 5616 padding: var(--umg-space-12, 0.75rem) var(--umg-space-24, 1.5rem); 5617 } 5618 .select__close-button { 5619 position: absolute; 5620 top: var(--umg-space-20, 1.25rem); 5621 right: var(--umg-space-16, 1rem); 5622 left: 0; 5623 display: flex; 5624 justify-content: flex-end; 5625 } 5626 umg-disclosure::part(disclosure-drawer) { 5627 position: fixed; 5628 inset: 0; 5629 display: flex; 5630 flex-direction: column; 5631 justify-content: flex-end; 5632 visibility: visible; 5633 backdrop-filter: blur(2px); 5634 width: 100%; 5635 background-color: rgb(0,0,0,0.5); 5636 } 5637 } 5638 `]),(0,o.C)([(0,a.M)()],g.prototype,"type",void 0),(0,o.C)([(0,a.M)()],g.prototype,"id",void 0),(0,o.C)([(0,a.M)({type:Array})],g.prototype,"options",void 0),(0,o.C)([(0,a.M)()],g.prototype,"label",void 0),(0,o.C)([(0,a.M)()],g.prototype,"labelSize",void 0),(0,o.C)([(0,a.M)()],g.prototype,"name",void 0),(0,o.C)([(0,a.M)()],g.prototype,"value",void 0),(0,o.C)([(0,a.M)({type:Number})],g.prototype,"selectedItem",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"defaultLabel",void 0),(0,o.C)([(0,a.M)()],g.prototype,"justify",void 0),(0,o.C)([(0,a.M)()],g.prototype,"mobileJustify",void 0),(0,o.C)([(0,a.M)()],g.prototype,"direction",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"border",void 0),(0,o.C)([(0,a.M)({type:Boolean,reflect:!0})],g.prototype,"disabled",void 0),(0,o.C)([(0,a.M)({type:String,reflect:!0})],g.prototype,"align",void 0),(0,o.C)([(0,n.wk)()],g.prototype,"_caratPosition",void 0),(0,o.C)([(0,n.wk)()],g.prototype,"_currentLabel",void 0),(0,o.C)([(0,n.wk)()],g.prototype,"_isKeyboardEvent",void 0),(0,o.C)([(0,n.P)("umg-disclosure")],g.prototype,"_disclosure",void 0),(0,o.C)([(0,n.P)("select")],g.prototype,"_select",void 0),g=(0,o.C)([(0,s.E)(`${p}-select`)],g)},7838(t,e,i){i.d(e,{q:()=>m});var o=i(8472),r=i(2618),s=i(9563),a=i(6505),n=i(7621),l=i(9924),d=i(8698),c=i(2609);const{prefix:u}=d.W;let m=class extends r.WF{constructor(){super(...arguments),this.contentType="slider",this.active=!1,this.get
5638SlideContent=()=>this._slideContents}content(){return"slider"===this.contentType?r.qy` 5639 <li 5640 part="slide" 5641 class="slide grid__item slide grid__item--fill-height"> 5642 <slot></slot> 5643 <slot name="content"></slot> 5644 </li> 5645 `:r.qy` 5646 <div 5647 part="slide" 5648 class="slide grid__item" 5649 role="group" 5650 aria-roledescription="slide" 5651 aria-hidden="false" 5652 > 5653 <slot></slot> 5654 <slot name="content"></slot> 5655 </div> 5656 `}render(){return r.qy` 5657 ${this.content()} 5658 `}};m.styles=(0,c.Z)([l.S,r.AH` 5659 :host { 5660 display: block; 5661 } 5662 .slide { 5663 height: 100%; 5664 } 5665 .grid__item--fill-height ::slotted(*) { 5666 height: 100%; 5667 } 5668 `]),(0,o.C)([(0,s.M)()],m.prototype,"contentType",void 0),(0,o.C)([(0,s.M)({type:Boolean})],m.prototype,"active",void 0),(0,o.C)([(0,n.KN)({slot:"content"})],m.prototype,"_slideContents",void 0),m=(0,o.C)([(0,a.E)(`${u}-slide`)],m)},2115(t,e,i){i.d(e,{A:()=>M});var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(7621),l=i(3720),d=i(1145),c=i(1895),u=i(1124);if(!("onscrollend"in window)){const S=new Event("scrollend"),A=new Set;document.addEventListener("touchstart",t=>{for(let e of t.changedTouches)A.add(e.identifier)},{passive:!0}),document.addEventListener("touchend",t=>{for(let e of t.changedTouches)A.delete(e.identifier)},{passive:!0});let z=new WeakMap;function H(t,e,i){let o=t[e];t[e]=function(){let t=Array.prototype.slice.apply(arguments,[0]);o.apply(this,t),t.unshift(o),i.apply(this,t)}}function E(t,e){if("scroll"!=e&&"scrollend"!=e)return;let i=this,o=z.get(i);if(void 0===o){let e=0;o={scrollListener:t=>{clearTimeout(e),e=setTimeout(()=>{A.size?setTimeout(o.scrollListener,100):(i.dispatchEvent(S),e=0)},100)},listeners:0},t.apply(i,["scroll",o.scrollListener]),z.set(i,o)}o.listeners++}function P(t,e,i){if("scroll"!=e&&"scrollend"!=e)return;let o=this,r=z.get(o);void 0!==r&&(r[e]--,--r.listeners>0||(t.apply(o,["scroll",r.scrollListener]),z.delete(o)))}H(Element.prototype,"addEventListener",E),H(window,"addEventListener",E),H(document,"addEventListener",E),H(Element.prototype,"removeEventListener",P),H(window,"removeEventListener",P),H(document,"removeEventListener",P)}var m=i(6093),h=i(9924);const p=r.AH` 5669 5670 /* Slider component */ 5671 5672 /* Flex columns for slider controls*/ 5673 .slider-component { 5674 display: flex; 5675 flex-direction: column; 5676 position: relative; 5677 margin: 0 auto; 5678 } 5679 5680 /* Slider dynamic height */ 5681 .slider { 5682 transition: height 0.3s; 5683 } 5684 5685 /* Slider scroll container */ 5686 .slider { 5687 scrollbar-color: var(--umg-color-base-text, rgb(0,0,0,0.04)); 5688 -ms-overflow-style: none; 5689 scrollbar-width: none; 5690 5691 @media (prefers-reduced-motion) { 5692 scroll-behavior: auto; 5693 } 5694 } 5695 @supports (color: rgb(from white r g b)) { 5696 .slider { 5697 scrollbar-color: rgb(from var(--umg-color-base-text, rgb(0,0,0,0.04)) r g b / 0.04); 5698 } 5699 } 5700 5701 .slider--selectable ::slotted(*) { 5702 cursor: pointer; 5703 } 5704 5705 .slider::-webkit-scrollbar {
5706 height: var(--space-4); 5707 width: var(--space-4); 5708 display: none; 5709 } 5710 5711 .slider::-webkit-scrollbar-thumb { 5712 background: var(--umg-color-base-text, rgb(0,0,0,0.05)); 5713 border-radius: var(--space-4); 5714 border: 0; 5715 } 5716 5717 .slider::-webkit-scrollbar-track { 5718 background: var(--umg-color-base-text, rgb(0,0,0,0.1)); 5719 border-radius: var(--space-4); 5720 } 5721 5722 @supports (color: rgb(from white r g b)) { 5723 .slider::-webkit-scrollbar-thumb { 5724 background: rgb(from var(--umg-color-base-text, 0,0,0,0.05) r g b / 0.05); 5725 } 5726 5727 .slider::-webkit-scrollbar-track { 5728 background: rgb(from var(--umg-color-base-text, 0,0,0,0.1) r g b / 0.1); 5729 } 5730 } 5731 5732 /* Mobie slider enabled */ 5733 @media screen and (max-width: 48rem) { 5734 .slider.slider--tablet { 5735 position: relative; 5736 flex-wrap: inherit; 5737 overflow-x: auto; 5738 overflow-y: hidden; 5739 scroll-snap-type: x mandatory; 5740 scroll-behavior: smooth; 5741 } 5742 } 5743 5744 /* Desktop slider enabled */ 5745 @media screen and (min-width: 48.06rem) { 5746 .slider.slider--desktop { 5747 position: relative; 5748 flex-wrap: inherit; 5749 overflow-x: auto; 5750 scroll-snap-type: x mandatory; 5751 scroll-behavior: smooth; 5752 } 5753 } 5754 5755 /* Slides layout */ 5756 .slider.grid.grid--gapless { 5757 gap: 0; 5758 } 5759 5760 /* Mobile classes */ 5761 @media screen and (max-width: 30rem) { 5762 /* Peek */ 5763 .slider.grid--peek.grid--1-col-tablet-down ::slotted(*) { 5764 width: calc(100% - var(--umg-space-grid-horizontal-mobile, 1rem) - 2rem) 5765 } 5766 .slider.grid--peek.grid--2-col-tablet-down ::slotted(*) { 5767 width: calc(50% - var(--umg-space-grid-horizontal-mobile, 1rem) - 1rem) 5768 } 5769 /* Gapless */ 5770 .slider.grid--gapless.grid--1-col-tablet-down ::slotted(*) { 5771 width: 100%; 5772 } 5773 .slider.grid--gapless.grid--2-col-tablet-down ::slotted(*) { 5774 width: 50%; 5775 } 5776 /* Gapless + Peek */ 5777 .slider.grid--peek.grid--gapless.grid--1-col-tablet-down ::slotted(*) { 5778 width: calc(100% - (var(--umg-space-grid-horizontal-mobile, 1rem) * 5 )) 5779 } 5780 .slider.grid--peek.grid--gapless.grid--2-col-tablet-down ::slotted(*) { 5781 width: calc(50% - (var(--umg-space-grid-horizontal-mobile, 1rem) * 3 )) 5782 } 5783 } 5784 5785 /* Tablet portrait classes */ 5786 @media screen and (min-width: 30.06rem) and (max-width: 48rem) { 5787 /* Peek */ 5788 .slider.grid--peek.grid--2-col-tablet ::slotted(*) { 5789 width: calc(50% - var(--umg-space-grid-horizontal-mobile, 1rem) - 2rem) 5790 } 5791 .slider.grid--peek.grid--3-col-tablet ::slotted(*) { 5792 width: calc(33.33% - var(--umg-space-grid-horizontal-mobile, 1rem) - 1rem) 5793 } 5794 /* Gapless */ 5795 .slider.grid.grid--gapless.grid--2-col-tablet ::slotted(*) { 5796 width: 50%; 5797 } 5798 .slider.grid.grid--gapless.grid--3-col-tablet ::slotted(*) { 5799 width: 33.33%; 5800 } 5801 /* Gapless + Peek */ 5802 .slider.grid.grid--gapless.grid--peek.grid--2-col-tablet ::slotted(*) { 5803 width: calc(50% - (var(--umg-space-grid-horizontal-mobile, 1rem) * 5 )) 5804 } 5805 .slider.grid.grid--gapless.grid--peek.grid--3-col-tablet ::slotted(*) { 5806 width: calc(33.33% - (var(--umg-space-grid-horizontal-mobile, 1rem) * 3 )) 5807 } 5808 } 5809 5810 /* Tablet landscape classes */ 5811 @media screen and (min-width: 48.06rem) and (max-width: 64rem) { 5812 /* Peek */ 5813 .slider.grid--peek.grid--2-col-tablet ::slotted(*) { 5814 width: calc(50% - var(--umg-space-grid-horizontal-desktop, 1rem) - 2rem) 5815 } 5816 .slider.grid--peek.grid--3-col-tablet ::slotted(*) { 5817 width: calc(33.33% - var(--umg-space-grid-horizontal-desktop, 1rem) - 1rem 5818 ) 5819 } 5820 /* Gapless */ 5821 .slider.grid.grid--gapless.grid--2-col-tablet ::slotted(*) { 5822 width: 50%; 5823 } 5824 .slider.grid.grid--gapless.grid--3-col-tablet ::slotted(*) { 5825 width: 33.33%; 5826 } 5827 /* Gapless + Peek */ 5828 .slider.grid.grid--gapless.grid--peek.grid--2-col-tablet ::slotted(*) { 5829 width: calc(50% - (var(--umg-space-grid-horizontal-desktop, 1rem) * 4 )) 5830 } 5831 .slider.grid.grid--gapless.grid--peek.grid--3-col-tablet ::slotted(*) { 5832 width: calc(33.33% - (var(--umg-space-grid-horizontal-desktop, 1rem) * 2 )) 5833 } 5834 } 5835 5836 /* Desktop variable */ 5837 @media screen and (min-width: 64.06rem) { 5838 .slider.grid--peek ::slotted(*) { 5839 width: calc(100% / var(--umg-grid-desktop-columns, 4) - var(--umg-space-grid-horizontal-desktop, 1rem) * var(--umg-grid-desktop-peek, 3)) 5840 } 5841 /* Gapless */ 5842 .slider.grid.grid--gapless ::slotted(*) { 5843 width: var(--umg-grid-desktop-columns-width, 25%); 5844 } 5845 /* Gapless + Peek */ 5846 .slider.grid.grid--gapless.grid--peek.grid--1-col-desktop ::slotted(*) { 5847 width: calc((100% / var(--umg-grid-desktop-columns, 4)) - 9rem); 5848 } 5849 .slider.grid.grid--gapless.grid--peek.grid--2-col-desktop ::slotted(*) { 5850 width: calc((100% / var(--umg-grid-desktop-columns, 4)) - 5rem); 5851 } 5852 .slider.grid.grid--gapless.grid--peek.grid--3-col-desktop ::slotted(*) { 5853 width: calc((100% / var(--umg-grid-desktop-columns, 4)) - 3rem); 5854 } 5855 .slider.grid.grid--gapless.grid--peek.grid--4-col-desktop ::slotted(*) { 5856 width: calc((100% / var(--umg-grid-desktop-columns, 4)) - 2rem); 5857 } 5858 .slider.grid.grid--gapless.grid--peek.grid--5-col-desktop ::slotted(*) { 5859 width: calc((100% / var(--umg-grid-desktop-columns, 4)) - 1rem); 5860 } 5861 .slider.grid.grid--gapless.grid--peek.grid--6-col-desktop ::slotted(*) { 5862 width: calc((100% / var(--umg-grid-desktop-columns, 4)) - 0.5rem); 5863 } 5864 } 5865 5866 /* Slides */ 5867 ::slotted(*) { 5868 scroll-snap-align: start; 5869 margin-bottom: 0; 5870 } 5871 5872 /* Slider controls */
5873 umg-slider-controls { 5874 display: none; 5875 } 5876 5877 @media screen and (min-width: 48.06rem) { 5878 .slider-component--desktop umg-slider-controls { 5879 display: block 5880 } 5881 } 5882 @media screen and (max-width: 48rem) { 5883 .slider-component--tablet umg-slider-controls { 5884 display: block 5885 } 5886 } 5887 5888 .slider-controls--top umg-slider-controls { 5889 order: 2; 5890 } 5891 5892`;var g=i(3023),b=i(8698),v=i(2609);i(7838);function*y(t,e){if(void 0!==t){let i=0;for(const o of t)yield e(o,i++)}}function*f(t,e,i=1){const o=void 0===e?0:t;e??=t;for(let t=o;i>0?t<e:e<t;t+=i)yield t}const _=r.AH` 5893 .slider-controls { 5894 display: flex; 5895 justify-content: center; 5896 align-items: center; 5897 padding: var(--umg-space-8, 0.5rem) 0; 5898 font-family: var(--umg-font-body-family, Roboto, Arial, Helvetica, sans-serif); 5899 } 5900 @media screen and (min-width: 48.06rem) { 5901 .slider-controls { 5902 margin-top: var(--umg-space-16); 5903 gap: 1rem 5904 } 5905 } 5906 .slider-counter { 5907 display: flex; 5908 align-items: center; 5909 justify-content: center; 5910 font-size: var(--umg-font-body-size-xs, 0.75rem); 5911 font-weight: var(--umg-font-base-weight-light, 300); 5912 } 5913 .slider-counter__link { 5914 font-weight: var(--umg-font-base-weight-light, 300); 5915 padding: var(--umg-space-12, 0.75rem) var(--umg-space-8, 0.5rem); 5916 } 5917 @media screen and (min-width: 48.06rem) { 5918 .slider-counter__link { 5919 font-weight: var(--umg-font-base-weight-light, 300); 5920 padding: var(--umg-space-12, 0.75rem); 5921 } 5922 } 5923 .slider-counter__link .dot { 5924 display: block; 5925 background-color: transparent; 5926 border-radius: 50%; 5927 padding: 0; 5928 width: var(--umg-space-8, 0.5rem); 5929 height: var(--umg-space-8, 0.5rem); 5930 border: 0.06rem solid rgb(from var(--umg-color-base-text, rgb(0,0,0,0.5)) r g b / alpha); 5931 } 5932 .slider-counter__link--active .dot { 5933 background-color: rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b / alpha); 5934 } 5935 5936 @supports (color: rgb(from white r g b)) { 5937 .slider-counter__link .dot { 5938 border: 0.06rem solid rgb(from var(--umg-color-base-text, rgb(0,0,0,0.5)) r g b / 0.5); 5939 } 5940 .slider-counter__link--active .dot { 5941 background-color: rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b / alpha); 5942 } 5943 } 5944 5945 /* Position */ 5946 .slider-controls--inside .slider-counter, 5947 .slider-controls--outside .slider-counter, 5948 .slider-controls--inside .autoplay-button, 5949 .slider-controls--outside .autoplay-button { 5950 display: none; 5951 } 5952 5953 .slider-controls--inside .previous-button, 5954 .slider-controls--inside .next-button, 5955 .slider-controls--outside .previous-button, 5956 .slider-controls--outside .next-button { 5957 position: absolute; 5958 z-index: 499; /* under overlay z-index */ 5959 } 5960 @media screen and (min-width: 30.06rem) { 5961 .slider-controls--inside .previous-button, 5962 .slider-controls--inside .next-button, 5963 .slider-controls--outside .previous-button, 5964 .slider-controls--outside .next-button { 5965 transform: translateY(-50%); 5966 } 5967 } 5968 5969 .slider-controls--inside .previous-button, 5970 .slider-controls--inside .next-button, 5971 .slider-controls--outside .previous-button, 5972 .slider-controls--outside .next-button { 5973 top: 50%; 5974 } 5975 .slider-controls--inside .previous-button { 5976 left: 0.5rem 5977 } 5978 .slider-controls--inside .next-button { 5979 right: 0.5rem 5980 } 5981 5982 .slider-controls--outside .previous-button { 5983 left: -5rem 5984 } 5985 .slider-controls--outside .next-button { 5986 right: -5rem 5987 } 5988 5989 /* Position styles */ 5990 .slider-controls--inside, 5991 .slider-controls--outside { 5992 height: 0.1px; /* required by outside button intersection observer */ 5993 margin: 0; 5994 padding: 0; 5995 } 5996 .slider-controls--under .previous-button, 5997 .slider-controls--under .next-button { 5998 --umg-color-icon-background: transparent; 5999 } 6000 6001 @media screen and (max-width: 30rem) {
6002 .slider-controls--inside .previous-button, 6003 .slider-controls--inside .next-button, 6004 .slider-controls--outside .previous-button, 6005 .slider-controls--outside .next-button { 6006 top: 0.0625rem; 6007 --umg-color-icon-background: transparent; 6008 --umg-border-base-width: 0; 6009 } 6010 .slider-controls--outside .previous-button, 6011 .slider-controls--inside .previous-button { 6012 left: 0.0625rem 6013 } 6014 .slider-controls--outside .next-button, 6015 .slider-controls--inside .next-button { 6016 right: 0.0625rem 6017 } 6018 .slider-controls--outside .previous-button[disabled]::part(button-icon), 6019 .slider-controls--inside .previous-button[disabled]::part(button-icon) { 6020 opacity: 0; 6021 } 6022 .slider-controls--outside .next-button[disabled]::part(button-icon), 6023 .slider-controls--inside .next-button[disabled]::part(button-icon) { 6024 opacity: 0; 6025 } 6026 } 6027`,w=r.AH` 6028 .link { 6029 cursor: pointer; 6030 display: inline-block; 6031 border: none; 6032 box-shadow: none; 6033 color: rgb(from var(--umg-color-link-text, var(--umg-color-base-text, 62,62,62)) r g b / 1); 6034 background-color: transparent; 6035 font-size: var(--umg-font-body-size-sm, 0.875rem); 6036 font-family: inherit; 6037 text-underline-offset: 0.25rem; 6038 } 6039 .link:hover { 6040 text-decoration: underline; 6041 } 6042 .link--plain { 6043 text-decoration: none; 6044 } 6045 .link--active { 6046 font-weight: var(--umg-font-base-weight-medium, 500); 6047 text-decoration: underline; 6048 } 6049`,{prefix:x}=b.W;let C=class extends r.WF{constructor(){super(...arguments),this.sliderId="",this.controlType="counter",this.controlPosition="under",this.numberOfSlides=1,this.slidesPerPage=1,this.currentPage=1,this.autoPlay=!1,this.loopSlides=!1,this.playing=!0,this._pauseHold=!1,this._positionInside=!1,this._positionControls=t=>{t.forEach(t=>{if(this===t.target){const e=!t.isIntersecting;this._positionInside=!!e}})}}updated(t){if(super.updated(t),"outside"===this.controlPosition){const t={root:document.querySelector("document"),rootMargin:"0px -112px 0px -112px",threshold:1};!this._overflowObserver&&this&&(this._overflowObserver=new IntersectionObserver(this._positionControls,t),this._overflowObserver.observe(this))}}_dispatchControlAction(t,e){const i=t.currentTarget;if(!(i&&i.getAttribute("disabled")||("onscrollend"in window==!1&&(i.style.setProperty("pointer-events","none"),setTimeout(()=>{i.style.setProperty("pointer-events","auto")},1100/this.slidesPerPage)),"pause-slider"!==e&&"play-slider"!==e||this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0})),"previous-slide"!==e&&"next-slide"!==e||this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0})),"pause-over"===e&&(this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0})),this.playing?this._pauseHold=!0:this._pauseHold=!1),"pause-out"===e&&this.playing&&(this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0})),this._pauseHold=!1),"slide-link"!==e))){const i=t.currentTarget,o=i?i.dataset.slide:null;this.dispatchEvent(new CustomEvent(e,{detail:{slideNumber:o},bubbles:!0,composed:!0}))}}controlClasses(){const t={};return"outside"!==this.controlPosition||this._positionInside?"outside"===this.controlPosition&&this._positionInside||"inside"===this.controlPosition?t["slider-controls--inside"]=!0:t["slider-controls--under"]=!0:t["slider-controls--outside"]=!0,t}counterClasses(){const t={};return t["slider-counter--"+this.controlType]=!0,t.caption="counter"===this.controlType||"numbers"===this.controlType,t}numberButtons(){return r.qy` 6050 ${y(f(1,this.numberOfSlides+1,1),t=>t===this.currentPage?r.qy` 6051 <button 6052 part="slider-counter-link slider-link-active" 6053 class="slider-counter__link slider-counter__link--numbers link--active link" 6054 @click="${t=>this._dispatchControlAction(t,"slide-link")}" 6055 data-slide=${t} 6056 > 6057 ${t} 6058 </button> 6059 `:r.qy` 6060 <button 6061 part="slider-counter-link" 6062 class="slider-counter__link slider-counter__link--numbers link" 6063 @click="${t=>
6063this._dispatchControlAction(t,"slide-link")}" 6064 data-slide=${t} 6065 > 6066 ${t} 6067 </button> 6068 `)} 6069 `}dotButtons(){return r.qy` 6070 ${y(f(1,this.numberOfSlides+1,1),t=>t===this.currentPage?r.qy` 6071 <button 6072 part="slider-counter-link slider-link-active" 6073 class="slider-counter__link slider-counter__link--dots slider-counter__link--active link" 6074 @click="${t=>this._dispatchControlAction(t,"slide-link")}" 6075 data-slide="${t}" 6076 > 6077 <span part="slider-counter-dot slider-link-dot-active" class="dot"></span> 6078 </button> 6079 `:r.qy` 6080 <button 6081 part="slider-counter-link" 6082 class="slider-counter__link slider-counter__link--dots link" 6083 @click="${t=>this._dispatchControlAction(t,"slide-link")}" 6084 data-slide="${t}" 6085 > 6086 <span part="slider-counter-dot" class="dot"></span> 6087 </button> 6088 `)} 6089 `}controlVisualType(){return"counter"===this.controlType?r.qy` 6090 <span 6091 part="slider-counter-current" 6092 class="slider-counter-current" 6093 > 6094 ${this.currentPage} 6095 </span> 6096 <span 6097 part="slider-counter-seperator" 6098 class="slider-counter-seperator" 6099 aria-hidden="true" 6100 > 6101 / 6102 </span> 6103 <span part="slider-counter-pre" class="slider-counter-pre visually-hidden"> 6104 of 6105 </span> 6106 <span 6107 part="slider-counter-total" 6108 class="slider-counter-total" 6109 > 6110 ${this.numberOfSlides} 6111 </span> 6112 `:"numbers"===this.controlType?r.qy` 6113 ${this.numberButtons()} 6114 `:r.qy` 6115 ${this.dotButtons()} 6116 `}autoPlayButtons(){return this.autoPlay&&this.playing?r.qy` 6117 <umg-button-icon 6118 part="autoplay-button" 6119 exportparts="button-icon,icon-container,icon-svg,icon-image" 6120 class="autoplay-button" 6121 for=${this.sliderId} 6122 label="Pause slides" 6123 icon=${!0===this._pauseHold?"play-pause":"pause"} 6124 size="small" 6125 @click="${t=>this._dispatchControlAction(t,"pause-slider")}" 6126 @mouseover="${t=>this._dispatchControlAction(t,"pause-over")}" 6127 @mouseout="${t=>this._dispatchControlAction(t,"pause-out")}" 6128 @focusin="${t=>this._dispatchControlAction(t,"pause-over")}" 6129 @focusout="${t=>this._dispatchControlAction(t,"pause-out")}" 6130 > 6131 </umg-button-icon> 6132 `:this.autoPlay&&!this.playing?r.qy` 6133 <umg-button-icon 6134 part="autoplay-button" 6135 exportparts="button-icon,icon-container,icon-svg,icon-image" 6136 class="autoplay-button" 6137 for=${this.sliderId} 6138 label="Autoplay slides" 6139 icon="play" 6140 size="small" 6141 @click="${t=>this._dispatchControlAction(t,"play-slider")}" 6142 > 6143 </umg-button-icon> 6144 `:r.s6}navigationButton(t){const e="next"===t?this.currentPage===this.numberOfSlides:1===this.currentPage,i="next"===t?"next-slide":"previous-slide";return"under"===this.controlPosition?r.qy` 6145 <umg-button-icon 6146 part="${t}-button" 6147 exportparts="button-icon,icon-container,icon-svg,icon-image" 6148 class="${t}-button" 6149 for=${this.sliderId} 6150 label="Next" 6151 icon="chevron-${"next"===t?"right":"left"}" 6152 size="small" 6153 ?disabled=${e} 6154 @click="${t=>
6154this._dispatchControlAction(t,i)}" 6155 > 6156 </umg-button-icon> 6157 `:r.qy` 6158 <umg-button-icon 6159 part="${t}-button" 6160 exportparts="button-icon,icon-container,icon-svg,icon-image" 6161 id="OuterButton" 6162 class="${t}-button" 6163 for=${this.sliderId} 6164 label="Next" 6165 icon="chevron-${"next"===t?"right":"left"}" 6166 size="large" 6167 padding="12" 6168 ?disabled=${e} 6169 border 6170 @click="${t=>this._dispatchControlAction(t,i)}" 6171 > 6172 </umg-button-icon> 6173 `}render(){if(this.numberOfSlides>1)return r.qy` 6174 <div part="slider-controls" class="slider-controls${(0,l.H)(this.controlClasses())}"> 6175 ${this.navigationButton("previous")} 6176 <div part="slider-counter" class="slider-counter${(0,l.H)(this.counterClasses())}"> 6177 ${this.controlVisualType()} 6178 </div> 6179 ${this.navigationButton("next")} 6180 ${this.autoPlayButtons()} 6181 </div> 6182 `}};C.styles=(0,v.Z)([h.S,_,w]),(0,o.C)([(0,a.M)()],C.prototype,"sliderId",void 0),(0,o.C)([(0,a.M)()],C.prototype,"controlType",void 0),(0,o.C)([(0,a.M)()],C.prototype,"controlPosition",void 0),(0,o.C)([(0,a.M)({type:Number})],C.prototype,"numberOfSlides",void 0),(0,o.C)([(0,a.M)({type:Number})],C.prototype,"slidesPerPage",void 0),(0,o.C)([(0,a.M)({type:Number})],C.prototype,"currentPage",void 0),(0,o.C)([(0,a.M)({type:Boolean})],C.prototype,"autoPlay",void 0),(0,o.C)([(0,a.M)({type:Boolean})],C.prototype,"loopSlides",void 0),(0,o.C)([(0,a.M)({type:Boolean})],C.prototype,"playing",void 0),(0,o.C)([(0,a.M)({state:!0,type:Boolean})],C.prototype,"_pauseHold",void 0),(0,o.C)([(0,n.wk)()],C.prototype,"_positionInside",void 0),(0,o.C)([(0,n.wk)()],C.prototype,"_overflowObserver",void 0),C=(0,o.C)([(0,s.E)(`${x}-slider-controls`)],C);var k;i(8766);const{prefix:$}=b.W;let M=k=class extends r.WF{constructor(){super(),this.accessibleName="Slider accessible name",this.accessibleDescription="",this.contentType="slider",this.controlType="counter",this.controlPosition="under",this.desktopSlider=!1,this.mobileSlider=!1,this.peek=!1,this.adapt=!1,this.autoPlay=!1,this.autoPlaySpeed=5,this.desktopColumns=4,this.mobileColumns="2",this.gaplessColumns=!1,this.fill=!1,this._totalPages=1,this._currentPage=1,this._playing=!1,this._sliderItemsToShow=[],this._firstSlide=null,this._secondSlide=null,this._sliderItemOffset=0,this._slidesPerPage=1,this._loopSlides=!1,this._scrolling=!1,this._isSlideVisible=t=>{t.forEach(t=>{if(t.isIntersecting){if(t.target.shadowRoot?.querySelector("div")?.setAttribute("aria-hidden","false"),t.target.querySelectorAll("a, button").forEach(t=>{t.removeAttribute("tabindex")}),this.adapt){const e=t.target.getSlideContent();let i=0;Array.from(e).forEach(t=>{const e=t.offsetHeight;e&&e>0&&(i=e+i)}),i&&(this._slider.style.height=`${i}px`)}}else t.target.shadowRoot?.querySelector("div")?.setAttribute("aria-hidden","true"),t.target.querySelectorAll("a, button").forEach(t=>{t.setAttribute("tabindex","-1")})})},this._sliderId=Math.floor(1e8*Math.random()).toString(),k.eventTypes.forEach(t=>{this.addEventListener(t,this._customEventsHandler)})}connectedCallback(){super.connectedCallback(),this.initialise()}disconnectedCallback(){super.disconnectedCallback(),void 0!==this._resizeObserver&&this._resizeObserver.disconnect(),void 0!==this._slideVisibleObserver&&this._slideVisibleObserver.disconnect(),this._resetAutoplay()}slidesChanged(){this.initialise()}updated(t){t.has("_sliderItemsToShow")&&this._sliderSetup()}async initialise(){try{await this.updateComplete}catch(t){console.log("Initialise error",t)}this._sliderItems.length>0&&(this._sliderItemsToShow=Array.from(this._sliderItems).filter(t=>t.clientWidth>0))}_sliderSetup(){if(!(this._sliderItemsToShow.length<2)&&(this._firstSlide=this._sliderItemsToShow[0],this._secondSlide=this._sliderItemsToShow[1],this._playing=!1,this._sliderItemOffset=this._secondSlide.offsetLeft-this._firstSlide.offsetLeft,this._slidesPerPage=this._sliderItemOffset>0?Math.round(this._slider.clientWidth/this._sliderItemOffset):0,this._totalPages=this._slidesPerPage>0?this._sliderItemsToShow.length-this._slidesPerPage+1:1,"slideshow"===this.contentType&&this._slideshowSetup(),void 0===this._resizeObserver)){const t=(0,m.s)(()=>this.initialise(),100);this._resizeObserver=new ResizeObserver(t),this._resizeObserver.observe(this)}}_slideshowSetup(){this.desktopSlider=!0,this.mobileSlider=!0,this.autoPlay&&(this._resetAutoplay(),this.play()),this._slideVisibleObserver=new IntersectionObserver(this._isSlideVisible,{root:this,rootMargin:"0px",threshold:1}
6182),this._sliderItems.forEach((t,e)=>{this._slideVisibleObserver?.observe(t);const i=t.shadowRoot?.querySelector("div");i?.setAttribute("aria-label",`${e+1} of ${this._sliderItems.length}`)})}_customEventsHandler(t){t.preventDefault(),"previous-slide"===t.type&&(this._nthSlideavigation(t.type),this.pause()),"next-slide"===t.type&&(this._nextButtonClick(),this.pause()),"slide-link"===t.type&&this._slideLink(parseInt(t.detail.slideNumber)),"play-slider"===t.type&&this.play(),"pause-slider"===t.type&&this.pause(),"pause-over"===t.type&&this.pausePlay(),"pause-out"===t.type&&this.play()}_updateCurrentPage(){this._currentPage=Math.round(this._slider.scrollLeft/this._sliderItemOffset)+1}_scrollEnd(){this._scrolling=!1,this._updateCurrentPage()}_resetAutoplay(){clearInterval(this._autoRotate)}_nthSlideavigation(t){this._resetAutoplay(),this._playing=!1,this._scrolling&&"onscrollend"in window||(this._scrolling=!0,"previous-slide"===t?this._previousButtonClick():this._nextButtonClick(),this._updateCurrentPage())}_previousButtonClick(){if(!this._secondSlide||!this._firstSlide)return;const t=this._secondSlide.offsetLeft-this._firstSlide.offsetLeft;if(this._loopSlides&&1===this._currentPage)return this._slider.scrollTo({left:t*this._sliderItemsToShow.length}),void(this._currentPage=this._totalPages);this._slider.scrollTo({left:this._slider.scrollLeft-t})}_nextButtonClick(){if(this._secondSlide&&this._firstSlide)return this._loopSlides&&this._currentPage===this._totalPages?(this._slider.scrollTo({left:0}),void(this._currentPage=1)):void this._slider.scrollTo({left:this._slider.scrollLeft+(this._secondSlide.offsetLeft-this._firstSlide.offsetLeft)})}_slideLink(t){if(!this._secondSlide||!this._firstSlide)return;this._resetAutoplay(),this._playing=!1;const e=t,i=(this._secondSlide.offsetLeft-this._firstSlide.offsetLeft)*(e-1);this._slider.scrollTo({left:i})}_autoRotateSlides(){if(!this._sliderItemsToShow.length||!this._firstSlide)return;const t=this._currentPage===this._totalPages?0:this._slider.scrollLeft+this._sliderItemsToShow[1].offsetLeft-this._firstSlide.offsetLeft;this._slider.scrollTo({left:t})}initSlider(){this.initialise()}moveToSlide(t){this._slideLink(t)}play(){this._resetAutoplay(),this.autoPlay&&(this._playing=!0,this._slider.setAttribute("aria-live","off"),this._autoRotate=setInterval(()=>this._autoRotateSlides(),1e3*this.autoPlaySpeed))}pause(){this._resetAutoplay(),this.autoPlay&&(this._slider.setAttribute("aria-live","polite"),this._playing=!1)}pausePlay(){this._resetAutoplay(),this._slider.setAttribute("aria-live","polite")}resumePlay(){this.autoPlay&&this._playing&&this.play()}sliderComponentClasses(){const t={};return t["slider-component--desktop"]=this.desktopSlider,t["slider-component--tablet"]=this.mobileSlider,t["slider-controls--top"]="slideshow"===this.contentType,t}gridClasses(){const t={};return t.slider=this.mobileSlider||this.desktopSlider,t["slider--slideshow"]="slideshow"===this.contentType,t["slider--desktop"]=this.desktopSlider,t["slider--tablet"]=this.mobileSlider,t["grid--gapless"]=this.gaplessColumns,t["grid--fill"]=this.fill,t["grid--peek"]=this.peek&&this._totalPages>1,t["grid--"+this.desktopColumns+"-col-tablet"]=this.desktopColumns<3,t["grid--3-col-tablet"]=this.desktopColumns>=3,t["grid--"+this.desktopColumns+"-col-desktop"]=!0,t["grid--"+this.mobileColumns+"-col-tablet-down"]=!0,t}gridStyles(){let t={};return 6===this.desktopColumns&&(t={...t,"--umg-grid-desktop-columns-width":"16.66%","--umg-grid-desktop-columns":"6","--umg-grid-desktop-gaps":"5","--umg-grid-desktop-peek":"1.5"}),5===this.desktopColumns&&(t={...t,"--umg-grid-desktop-columns-width":"20%","--umg-grid-desktop-columns":"5","--umg-grid-desktop-gaps":"4","--umg-grid-desktop-peek":"2"}),4===this.desktopColumns&&(t={...t,"--umg-grid-desktop-columns-width":"25%","--umg-grid-desktop-columns":"4","--umg-grid-desktop-gaps":"3","--umg-grid-desktop-peek":"2.5"}),3===this.desktopColumns&&(t={...t,"--umg-grid-desktop-columns-width":"33.33%","--umg-grid-desktop-columns":"3","--umg-grid-desktop-gaps":"2","--umg-grid-desktop-peek":"3"}),2===this.desktopColumns&&(t={...t,"--umg-grid-desktop-columns-width":"50%","--umg-grid-desktop-columns":"2","--umg-grid-desktop-gaps":"1","--umg-grid-desktop-peek":"4"}),1===this.desktopColumns&&(t={...t,"--umg-grid-desktop-columns-width":"100%","--umg-grid-desktop-columns":"1","--umg-grid-desktop-gaps":"0","--umg-grid-desktop-peek":"9"}),t}sliderContent(){return"slider"===this.contentType?r.qy` 6183 <ul 6184 part="slider-container" 6185 id=${"Slider-"+this._sliderId} 6186 class="slider-container grid${(0,l.H)(this.gridClasses())}" 6187 role="list" 6188 aria-label="${this.accessibleName}" 6189 @scrollend="${this._scrollEnd}" 6190 > 6191 <slot @slotchange=${this.slidesChanged}></slot> 6192 </ul> 6193 `:r.qy` 6194 <div 6195 part="slider-container" 6196 id=${"Slider-"+this._sliderId} 6197 class="slider-container grid${(0,l.H)(this.gridClasses())}" 6198 role="region"
6199 aria-live="polite" 6200 aria-atomic="true" 6201 aria-label="${this.accessibleName}" 6202 aria-description="${this.accessibleDescription}" 6203 @scrollend="${this._scrollEnd}" 6204 @mouseover="${this.pausePlay}" 6205 @mouseout="${this.resumePlay}" 6206 @focusin="${this.pausePlay}" 6207 @focusout="${this.resumePlay}" 6208 > 6209 <slot @slotchange=${this.slidesChanged}></slot> 6210 </div> 6211 `}sliderControls(){return this.desktopSlider||this.mobileSlider?r.qy` 6212 <umg-slider-controls 6213 export="slider-controls-container" 6214 exportparts=" 6215 slider-controls, 6216 slider-counter, 6217 slider-counter-link, 6218 slider-counter-dot, 6219 slider-counter-current, 6220 slider-counter-seperator, 6221 slider-counter-total, 6222 slider-link-active, 6223 slider-link-dot-active, 6224 autoplay-button, 6225 next-button, 6226 previous-button, 6227 button-icon, 6228 icon, 6229 icon-container, 6230 icon-svg, 6231 icon-image 6232 " 6233 sliderId=${"Slider-"+this._sliderId} 6234 controlType=${this.controlType} 6235 controlPosition=${this.controlPosition} 6236 slidesPerPage=${this._slidesPerPage} 6237 numberOfSlides=${this._totalPages} 6238 currentPage=${this._currentPage} 6239 ?playing=${this._playing} 6240 ?autoPlay=${this.autoPlay} 6241 ?loopSlides=${this._loopSlides} 6242 > 6243 </umg-slider-controls> 6244 `:r.s6}render(){return r.qy` 6245 <div 6246 part="slider" 6247 class="slider-component slider-mobile-gutter${(0,l.H)(this.sliderComponentClasses())}" 6248 style="${(0,d.W)(this.gridStyles())}" 6249 > 6250 ${this.sliderContent()} 6251 ${this.sliderControls()} 6252 </div> 6253 `}};M.eventTypes=["previous-slide","next-slide","slide-link","pause-slider","play-slider","pause-over","pause-out"],M.styles=(0,v.Z)([h.S,r.AH` 6254 :host { 6255 display: block; 6256 width: 100%; 6257 } 6258 `,g.V,p]),(0,o.C)([(0,a.M)()],M.prototype,"accessibleName",void 0),(0,o.C)([(0,a.M)()],M.prototype,"accessibleDescription",void 0),(0,o.C)([(0,a.M)()],M.prototype,"contentType",void 0),(0,o.C)([(0,a.M)()],M.prototype,"controlType",void 0),(0,o.C)([(0,a.M)()],M.prototype,"controlPosition",void 0),(0,o.C)([(0,a.M)({type:Boolean})],M.prototype,"desktopSlider",void 0),(0,o.C)([(0,a.M)({type:Boolean})],M.prototype,"mobileSlider",void 0),(0,o.C)([(0,a.M)({type:Boolean})],M.prototype,"peek",void 0),(0,o.C)([(0,a.M)({type:Boolean})],M.prototype,"adapt",void 0),(0,o.C)([(0,a.M)({type:Boolean})],M.prototype,"autoPlay",void 0),(0,o.C)([(0,a.M)({type:Number})],M.prototype,"autoPlaySpeed",void 0),(0,o.C)([(0,a.M)({type:Number})],M.prototype,"desktopColumns",void 0),(0,o.C)([(0,a.M)()],M.prototype,"mobileColumns",void 0),(0,o.C)([(0,a.M)({type:Boolean})],M.prototype,"gaplessColumns",void 0),(0,o.C)([(0,a.M)({type:Boolean})],M.prototype,"fill",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_sliderId",void 0),(0,o.C)([(0,a.M)({type:Number})],M.prototype,"_totalPages",void 0),(0,o.C)([(0,u.K)()],M.prototype,"_sliderItems",void 0),(0,o.C)([(0,c.P)('[id^="Slider-"]')],M.prototype,"_slider",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_currentPage",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_playing",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_sliderItemsToShow",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_firstSlide",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_secondSlide",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_sliderItemOffset",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_slidesPerPage",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_loopSlides",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_scrolling",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_autoRotate",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_slideVisibleObserver",void 0),(0,o.C)([(0,n.wk)()],M.prototype,"_resizeObserver",void 0),M=k=(0,o.C)([(0,s.E)(`${$}-slider`)],M)},478(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(31),l=i(9924),d=i(8698),c=i(2609);i(4792),i(8766);const{prefix:u}=d.W;let m=class extends r.WF{constructor(){super(...arguments),this.target="_self",this.size="large",this.spacing="normal",this.justify="start",this.mobileJustify="center",this.border=!1,this.padding="0"}socialLinks(){return this.data?this.data.map(t=>t.url?r.qy` 6259 <umg-button-icon 6260 part="social-icon" 6261 exportparts="button-icon,icon-container,icon-svg,icon-image" 6262 as="link" 6263 url="${(0,n.J)(t.url)}" 6264 target="${this.target}" 6265 icon="${t.icon}" 6266 size="${this.size}" 6267 label="${t.name}" 6268 padding=${this.padding} 6269 ?border="${this.border}" 6270 > 6271 </umg-button-icon> 6272 `:r.s6):r.s6}render(){return r.qy` 6273 <umg-link-group 6274 part="social-links" 6275 exportparts="link-group" 6276 spacing="${this.spacing}" 6277 justify="${this.justify}" 6278 mobileJustify="${this.mobileJustify}" 6279 > 6280 ${this.socialLinks()} 6281 </umg-link-group> 6282 `}};m.styles=(0,c.Z)([l.S]),(0,o.C)([(0,a.M)()],m.prototype,"target",void 0),(0,o.C)([(0,a.M)()],m.prototype,"size",void 0),(0,o.C)([(0,a.M)()],m.prototype,"spacing",void 0),(0,o.C)([(0,a.M)()],m.prototype,"justify",void 0),(0,o.C)([(0,a.M)()],m.prototype,"mobileJustify",void 0),(0,o.C)([(0,a.M)({type:Boolean})],m.prototype,"border",void 0),(0,o.C)([(0,a.M)()],m.prototype,"padding",void 0),(0,o.C)([(0,a.M)({type:Object})],m.prototype,"data",void 0),m=(0,o.C)([(0,s.E)(`${u}-socials`)],m)},7326(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(3720),l=i(9924),d=i(8698),c=i(2609);i(9343);const{prefix:u}=d.W;let m=class extends r.WF{constructor(){super(...arguments),this.columnLabels=[],this.rowData=[],this.title="",this.hideTitle=!1}descriptionClasses(){const t={};return t["visually-hidden"]=this.hideTitle,t}tableHeader(){return Array.isArray(this.columnLabels)?r.qy` 6283 <div 6284 part="table-header" 6285 class="table-header row" 6286 role="rowgroup" 6287 > 6288 ${this.columnLabels.map(t=>r.qy` 6289 <div 6290 part="table-header-cell" 6291 class="table-cell" 6292 role="columnheader" 6293 > 6294 <umg-text 6295 part="table-header-text" 6296 as="span" 6297 alignment="start" 6298 fontWeight="bold" 6299 > 6300 ${t} 6301 </umg-text> 6302 </div> 6303 `)}
6304 </div> 6305 `:r.s6}tableRows(){return this.rowData&&Array.isArray(this.rowData)?r.qy` ${this.rowData.map(t=>{if(Array.isArray(t))return r.qy` 6306 <div 6307 part="table-row" 6308 class="table-row row" 6309 role="rowgroup" 6310 > 6311 ${t.map(t=>r.qy` 6312 <div 6313 part="table-cell" 6314 class="table-cell" 6315 role="cell" 6316 > 6317 <umg-text 6318 part="table-cell-text" 6319 exportparts="heading,paragrapoh,span" 6320 as="span" 6321 variant="bodySm" 6322 alignment="start" 6323 > 6324 ${t} 6325 </umg-text> 6326 </div> 6327 `)} 6328 </div> 6329 `})}`:r.s6}render(){return r.qy` 6330 <div 6331 part = "table" 6332 class="table" 6333 role = "table" 6334 aria-label="${this.title}" 6335 aria-describedby="TableDescription" 6336 > 6337 <div 6338 part = "table-description" 6339 id="TableDescription" 6340 class="table-description ${(0,n.H)(this.descriptionClasses())}" 6341 > 6342 <umg-text 6343 part="table-description-text" 6344 exportparts="heading,paragrapoh,span" 6345 slot="description" 6346 as="h2" 6347 variant="headingLg" 6348 fontWeight="bold" 6349 > 6350 ${this.title} 6351 </umg-text> 6352 </div> 6353 <div part="table-body" class="table-body"> 6354 ${this.tableHeader()} 6355 ${this.tableRows()} 6356 </div> 6357 </div> 6358 `}};m.styles=(0,c.Z)([l.S,r.AH` 6359 :host { 6360 display: block; 6361 } 6362 6363 .row { 6364 display: flex; 6365 justify-content: start; 6366 gap: var(--umg-space-16); 6367 padding: var(--umg-space-4, 0.25rem) 0; 6368 } 6369 .row > * { 6370 width: 10%; 6371 } 6372 .row > *:first-child { 6373 flex-grow: 1; 6374 width: 50%; 6375 } 6376 `]),(0,o.C)([(0,a.M)({type:Array})],m.prototype,"columnLabels",void 0),(0,o.C)([(0,a.M)({type:Array})],m.prototype,"rowData",void 0),(0,o.C)([(0,a.M)()],m.prototype,"title",void 0),(0,o.C)([(0,a.M)({type:Boolean})],m.prototype,"hideTitle",void 0),m=(0,o.C)([(0,s.E)(`${u}-table`)],m)},9343(t,e,i){var o=i(8472),r=i(2618),s=i(3720),a=i(1145),n=i(6505),l=i(9563),d=i(9924);const c=r.AH` 6377 .txt--headingXs, 6378 .txt--headingSm, 6379 .txt--headingMd, 6380 .txt--headingLg, 6381 .txt--headingXl, 6382 .txt--heading2xl, 6383 .txt--heading3xl, 6384 .txt--heading4xl, 6385 .txt--heading5xl, 6386 .txt--heading { 6387 font-family: var(--umg-font-heading-family, var(--umg-font-heading-family-default, inherit)); 6388 } 6389 .txt--bodyXs, 6390 .txt--bodySm, 6391 .txt--bodyMd, 6392 .txt--bodyLg, 6393 .txt--bodyXl, 6394 .txt--body2xl, 6395 .txt--body3xl, 6396 .txt--body4xl, 6397 .txt--body5xl, 6398 .txt--body { 6399 font-family: var(--umg-font-body-family, var(--umg-font-body-family-default, inherit)); 6400 } 6401`,u=r.AH` 6402 .txt--heading-custom { 6403 font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-base-size, 1.5)); 6404 line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1))); 6405 } 6406 .txt--heading { 6407 font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size, 1.5)); 6408 line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1))); 6409 } 6410 .txt--headingXs { 6411 font-size: var(--umg-font-heading-size-xs, 0.75rem); 6412 line-height: calc(1 + 0.2 / max(1, var(--umg-font-heading-scale, 1))); 6413 } 6414 .txt--headingSm { 6415 font-size: var(--umg-font-heading-size-sm, 0.875rem); 6416 line-height: calc(1 + 0.2 / max(1, var(--umg-font-heading-scale, 1))); 6417 } 6418 .txt--headingMd { 6419 font-size: var(--umg-font-heading-size-md, 1rem); 6420 line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1))); 6421 } 6422 .txt--headingLg { 6423 font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-lg, 1.25rem)); 6424 line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1))); 6425 } 6426 .txt--headingXl { 6427 font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-xl, 1.5rem)); 6428 line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1))); 6429 } 6430 .txt--heading2xl { 6431 font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-2xl, 1.75rem)); 6432 line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1))); 6433 } 6434 .txt--heading3xl { 6435 font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-3xl, 2rem)); 6436 line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1))); 6437 } 6438 .txt--heading4xl { 6439 font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-4xl, 3rem)); 6440 line-height: calc(1 + 0 / max(1, var(--umg-font-heading-scale, 1))); 6441 } 6442 .txt--heading5xl { 6443 font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-5xl, 4rem)); 6444 line-height: calc(1 + 0 / max(1, var(--umg-font-heading-scale, 1))); 6445 } 6446 .txt--body-custom { 6447 font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-base-size, 1)); 6448 line-height: calc(1 + 0.3 / max(1, var(--umg-font-body-scale, 1))); 6449 } 6450 .txt--body { 6451 font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size, 1)); 6452 line-height: calc(1 + 0.3 / max(1, var(--umg-font-body-scale, 1))); 6453 } 6454 .txt--bodyXs { 6455 font-size: var(--umg-font-body-size-xs, 0.75rem); 6456 line-height: calc(1 + 0.2 / max(1, var(--umg-font-body-scale, 1))); 6457 } 6458 .txt--bodySm { 6459 font-size: var(--umg-font-body-size-sm, 0.875rem); 6460 line-height: calc(1 + 0.2 / max(1, var(--umg-font-body-scale, 1))); 6461 } 6462 .txt--bodyMd { 6463 font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-md, 1rem)); 6464 line-height: calc(1 + 0.3 / max(1, var(--umg-font-body-scale, 1))); 6465 } 6466 .txt--bodyLg { 6467 font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-lg, 1.25rem)); 6468 line-height: calc(1 + 0.25 / max(1, var(--umg-font-body-scale, 1))); 6469 } 6470 .txt--bodyXl { 6471 font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-xl, 1.5rem)); 6472 line-height: calc(1 + 0.25 / max(1, var(--umg-font-body-scale, 1))); 6473 } 6474 .txt--body2xl { 6475 font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-2xl, 1.75rem)); 6476 line-height: calc(1 + 0.15 / max(1, var(--umg-font-body-scale, 1))); 6477 } 6478 .txt--body3xl { 6479 font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-3xl, 2rem)); 6480 line-height: calc(1 + 0.15 / max(1, var(--umg-font-body-scale, 1))); 6481 } 6482 .txt--body4xl { 6483 font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-4xl, 3rem)); 6484 line-height: calc(1 + 0 / max(1, var(--umg-font-body-scale, 1))); 6485 } 6486 .txt--body5xl { 6487 font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-5xl, 4rem)); 6488 line-height: calc(1 + 0 / max(1, var(--umg-font-body-scale, 1))); 6489 } 6490`,m=r.AH` 6491 .txt--color-default { 6492 color: rgb(var(--umg-color-base-text)); 6493 } 6494 .txt--color-subdued { 6495 color: rgb(var(--umg-color-base-text-subdued)); 6496 } 6497 .txt--color-warning { 6498 color: rgb(var(--umg-color-base-text-warning)); 6499 } 6500 .txt--color-inverse { 6501 color: rgb(var(--umg-color-base-text-inverse)); 6502 } 6503 @supports (color: rgb(from white r g b)) { 6504 .txt--color-default { 6505 color: rgb(from var(--umg-color-base-text) r g b); 6506 } 6507 .txt--color-subdued { 6508 color: rgb(from var(--umg-color-base-text-subdued) r g b); 6509 } 6510 .txt--color-warning { 6511 color: rgb(from var(--umg-color-base-text-warning) r g b); 6512 } 6513 .txt--color-inverse { 6514 color: rgb(from var(--umg-color-base-text-inverse) r g b); 6515 } 6516 } 6517`,h=r.AH` 6518 .txt--inherit { 6519 font-weight: var(--umg-font-base-weight, 400); 6520 } 6521 .txt--light { 6522 font-weight: var(--umg-font-base-weight-light, 300); 6523 } 6524 .txt--regular { 6525 font-weight: var(--umg-font-base-weight-regular, 400); 6526 } 6527 .txt--medium { 6528 font-weight: var(--umg-font-base-weight-medium, 500); 6529 } 6530 .txt--semibold { 6531 font-weight: var(--umg-font-base-weight-semibold, 600); 6532 } 6533 .txt--bold { 6534 font-weight: var(--umg-font-base-weight-bold, 700); 6535 } 6536 .txt--extrabold { 6537 font-weight: var(--umg-font-base-weight-extrabold, 800); 6538 } 6539 .txt--black { 6540 font-weight: var(--umg-font-base-weight-black, 900); 6541 } 6542`,p=r.AH` 6543 .txt--headingXs { 6544 margin-bottom: var(--umg-space-4, 0.25rem); 6545 } 6546 .txt--headingSm { 6547 margin-bottom: var(--umg-space-8, 0.5rem); 6548 } 6549 .txt--headingMd { 6550 margin-bottom: var(--umg-space-12, 0.75rem); 6551 } 6552 .txt--headingLg { 6553 margin-bottom: var(--umg-space-12, 0.75rem); 6554 } 6555 .txt--headingXl { 6556 margin-bottom: var(--umg-space-16, 1rem); 6557 } 6558 .txt--heading2xl { 6559 margin-bottom: var(--umg-space-16, 1rem); 6560 } 6561 .txt--heading3xl { 6562 margin-bottom: var(--umg-space-16, 1rem); 6563 } 6564 .txt--heading4xl { 6565 margin-bottom: var(--umg-space-20, 1.25rem); 6566 } 6567 .txt--heading5xl { 6568 margin-bottom: var(--umg-space-24, 1.5rem); 6569 } 6570 .txt--bodyXs { 6571 margin-bottom: var(--umg-space-4, 0.25rem); 6572 } 6573 .txt--bodySm { 6574 margin-bottom: var(--umg-space-8, 0.5rem); 6575 } 6576 .txt--bodyMd, 6577 .txt--bodyLg, 6578 .txt--bodyXl, 6579 .txt--body2xl, 6580 .txt--body3xl, 6581 .txt--body4xl, 6582 .txt--body5xl { 6583 margin-bottom: var(--umg-space-12, 0.75rem); 6584 } 6585`,g=r.AH` 6586 .txt--italic { 6587 font-style: italic; 6588 } 6589 .txt--oblique { 6590 font-style: oblique; 6591 } 6592 .txt--normal { 6593 font-style: normal; 6594 } 6595`;var b=i(8698),v=i(2609);const{prefix:y}=b.W;let f=class extends r.WF{constructor(){super(...arguments),this.as="p",this.variant="bodyMd",this.color="default",this.fontWeight="inherit",this.fontStyle="normal",this.withoutMargin=!1,this.transform="none",this.truncate=!1,this.breakWord=!1,this.hidden=!1}textClasses(){const t={text:!0,"txt--truncate":this.truncate,"txt--breakword":this.breakWord,"txt--hidden":this.hidden};return this.color&&(t["txt--color-"+this.color]=!0),this.variant&&(t["txt--"+this.variant]=!0),this.lineHeight&&(t["txt--line-height-"+this.lineHeight]=!0),this.spacing&&(t["txt--spacing-"+this.spacing]=!0),this.fontWeight&&(t["txt--"+this.fontWeight]=!0),this.fontStyle&&(t["txt--"+this.fontStyle]=!0),this.alignment&&(t["txt--align-"+this.alignment]=this.alignment),this.mobileAlignment?t["txt--mobile-align-"+this.mobileAlignment]=!0:t["txt--mobile-align-"+this.alignment]=this.alignment,this.withoutMargin&&"span"!==this.as&&(t["text--without-margin"]=!0),"none"!==this.transform&&(t["txt-transform--"+this.transform]=!0),t}textStyles(){let t={};return!this.fontSize||"body-custom"!==this.variant&&"heading-custom"!==this.variant||(t={...t,"--umg-font-base-size":this.fontSize/16+"rem"}),t}textAs(t){switch(this.as){case"p":return r.qy`<p part="p-text paragraph" class="paragraph${(0,s.H)(t)}" style="${(0,a.W)(this.textStyles())}"><slot></slot></p>`;case"h1":return r.qy`<h1 part="h1-text heading" class="heading${(0,s.H)(t)}" style="${(0,a.W)(this.textStyles())}"><slot></slot></h1>`;case"h2":return r.qy`<h2 part="h2-text heading" class="heading${(0,s.H)(t)}" style="${(0,a.W)(this.textStyles())}"><slot></slot></h2>`;case"h3":return r.qy`<h3 part="h3-text heading" class="heading${(0,s.H)(t)}" style="${(0,a.W)(this.textStyles())}"><slot></slot></h3>`;case"h4":return r.qy`<h4 part="h4-text heading" class="heading${(0,s.H)(t)}" style="${(0,a.W)(this.textStyles())}"><slot></slot></h4>`;case"h5":return r.qy`<h5 part="h5-text heading" class="heading${(0,s.H)(t)}" style="${(0,a.W)(this.textStyles())}"><slot></slot></h5>`;case"skeleton":return r.qy`<div class="skeleton${(0,s.H)(t)}"></div>`;default:return r.qy`
6596 <span part="span-text span" class="span${(0,s.H)(t)}"><slot></slot></span>`}}render(){return r.qy`${this.textAs(this.textClasses())}`}};f.styles=(0,v.Z)([d.S,c,u,m,h,g,p,r.AH` 6597 .skeleton { 6598 display: flex; 6599 background-color: var(--umg-color-skeleton-background, rgb(0,0,0,0.2)); 6600 height: 0.5rem; 6601 border-radius: 0.5rem; 6602 min-width: 5rem; 6603 } 6604 @supports (color: rgb(from white r g b)) { 6605 .skeleton { 6606 background-color: rgb(from var(--umg-color-base-text) r g b / 0.2); 6607 } 6608 } 6609 6610 span.span.text { 6611 margin-bottom: 0; 6612 } 6613 .heading, 6614 .paragraph { 6615 margin-top: 0; 6616 text-align: inherit; 6617 } 6618 6619 .heading.text--without-margin, 6620 .paragraph.text--without-margin, 6621 .skeleton.text--without-margin { 6622 margin-bottom: 0; 6623 } 6624 6625 .txt-transform--uppercase { 6626 text-transform: uppercase; 6627 } 6628 .txt-transform--capitalize { 6629 text-transform: capitalize 6630 } 6631 .txt-transform--lowercase { 6632 text-transform: lowercase; 6633 } 6634 .txt--truncate { 6635 overflow: hidden; 6636 white-space: nowrap; 6637 text-overflow: ellipsis; 6638 } 6639 .txt--breakword { 6640 overflow-wrap: anywhere; 6641 word-break: normal; 6642 } 6643 .txt--hidden { 6644 position: absolute !important; 6645 overflow: hidden; 6646 width: 1px; 6647 height: 1px; 6648 margin: -1px; 6649 padding: 0; 6650 border: 0; 6651 clip: rect(0 0 0 0); 6652 word-wrap: normal !important; 6653 } 6654 6655 /* Text line-height */ 6656 .txt--line-height-extra-loose.heading, 6657 .txt--line-height-extra-loose.paragraph { 6658 line-height: calc(1 + 1 / max(1, var( --umg-font-body-scale, 1))); 6659 } 6660 .txt--line-height-loose.heading, 6661 .txt--line-height-loose.paragraph { 6662 line-height: calc(1 + 0.8 / max(1, var( --umg-font-body-scale, 1))); 6663 } 6664 .txt--line-height-normal.heading, 6665 .txt--line-height-normal.paragraph { 6666 line-height: calc(1 + 0.5 / max(1, var( --umg-font-body-scale, 1))); 6667 } 6668 .txt--line-height-compact.heading, 6669 .txt--line-height-compact.paragraph { 6670 line-height: calc(1 + 0.3 / max(1, var( --umg-font-body-scale, 1))); 6671 } 6672 6673 /* Text kerning */ 6674 .txt--spacing-extra-loose.heading, 6675 .txt--spacing-extra-loose.paragraph, 6676 .txt--spacing-extra-loose.span { 6677 letter-spacing: 0.1rem; 6678 } 6679 .txt--spacing-loose.heading, 6680 .txt--spacing-loose.paragraph, 6681 .txt--spacing-loose.span { 6682 letter-spacing: 0.05rem; 6683 } 6684 .txt--spacing-normal.heading, 6685 .txt--spacing-normal.paragraph, 6686 .txt--spacing-normal.span { 6687 letter-spacing: inherit; 6688 } 6689 6690 /* Text justification */ 6691 @media screen and (max-width: 48rem) { 6692 .txt--mobile-align-start { 6693 text-align: left; 6694 } 6695 .txt--mobile-align-center { 6696 text-align: center; 6697 } 6698 .txt--mobile-align-end { 6699 text-align: right; 6700 } 6701 .txt--mobile-align-justify { 6702 text-align: justify; 6703 } 6704 } 6705 @media screen and (min-width: 48.06rem) { 6706 .txt--margin { 6707 margin-bottom: var(--umg-space-16, 1rem); 6708 } 6709 .txt--align-start { 6710 text-align: left; 6711 } 6712 .txt--align-center { 6713 text-align: center; 6714 }
6715 .txt--align-end { 6716 text-align: right; 6717 } 6718 .txt--align-justify { 6719 text-align: justify; 6720 } 6721 } 6722 `]),(0,o.C)([(0,l.M)({type:String})],f.prototype,"as",void 0),(0,o.C)([(0,l.M)({type:String})],f.prototype,"variant",void 0),(0,o.C)([(0,l.M)({type:String})],f.prototype,"color",void 0),(0,o.C)([(0,l.M)({type:Number})],f.prototype,"fontSize",void 0),(0,o.C)([(0,l.M)({type:String})],f.prototype,"fontWeight",void 0),(0,o.C)([(0,l.M)({type:String})],f.prototype,"fontStyle",void 0),(0,o.C)([(0,l.M)({type:String})],f.prototype,"lineHeight",void 0),(0,o.C)([(0,l.M)({type:String})],f.prototype,"spacing",void 0),(0,o.C)([(0,l.M)({type:String})],f.prototype,"alignment",void 0),(0,o.C)([(0,l.M)({type:String})],f.prototype,"mobileAlignment",void 0),(0,o.C)([(0,l.M)({type:Boolean})],f.prototype,"withoutMargin",void 0),(0,o.C)([(0,l.M)()],f.prototype,"transform",void 0),(0,o.C)([(0,l.M)({type:Boolean})],f.prototype,"truncate",void 0),(0,o.C)([(0,l.M)({type:Boolean})],f.prototype,"breakWord",void 0),(0,o.C)([(0,l.M)({type:Boolean})],f.prototype,"hidden",void 0),f=(0,o.C)([(0,n.E)(`${y}-text`)],f)},7018(t,e,i){var o=i(8472),r=i(6505),s=i(9563),a=i(2115),n=i(2618),l=i(7838),d=i(8698);const{prefix:c}=d.W;let u=class extends l.q{constructor(){super(...arguments),this.mediaId=""}};u.styles=[l.q.styles,n.AH` 6723 :host { 6724 padding: var(--umg-space-4, 0.25rem); 6725 } 6726 :host([active]) { 6727 padding: 0; 6728 position: relative; 6729 } 6730 :host([active])::after { 6731 content: ''; 6732 display: block; 6733 position: absolute; 6734 inset: 0; 6735 background-color: rgb(255,255,255,0.2); 6736 cursor: default; 6737 } 6738 li { 6739 border: 0.0625rem solid rgb(0,0,0,0.1); 6740 } 6741 `],(0,o.C)([(0,s.M)()],u.prototype,"mediaId",void 0),u=(0,o.C)([(0,r.E)(`${c}-thumbnail-slide`)],u);var m=i(1088);const{prefix:h}=d.W;let p=class extends a.A{constructor(){super(),this.currentMediaId="",this.contentType="slider",this.desktopSlider=!0,this.mobileSlider=!0,this.slideEventManager=new m.E(this);const t=[...this.constructor.eventTypes];t.push("active-slide"),t.forEach(t=>{this.addEventListener(t,this._customEventsHandler)}),this._initialiseSlides()}async _initialiseSlides(){await this.updateComplete,this._updateActiveSlide(this.currentMediaId),this._sliderItems.forEach(t=>{t.addEventListener("click",()=>{const e={mediaId:t.getAttribute("mediaId")};this._eventsDispatcher("active-slide",e)})})}slidesChanged(){super.slidesChanged(),this._initialiseSlides()}_updateActiveSlide(t){t&&this._sliderItems.forEach((e,i)=>{e.hasAttribute("active")&&e.removeAttribute("active");const o=e.getAttribute("mediaId");if(t===o){e.setAttribute("active",""),this._updateActiveMedia(o);const t={slideNumber:i+1};this._eventsDispatcher("slide-link",t)}})}_updateActiveMedia(t){this.slideEventManager.dispatchCustomEvent("active-media",{mediaId:t},{bubbles:!0,composed:!0})}_eventsDispatcher(t,e){if(!t)throw new Error("Missing custom event type");const i={bubbles:!0,composed:!0};"active-slide"==t&&this.slideEventManager.dispatchCustomEvent(t,e,i),"slide-link"==t&&this.slideEventManager.dispatchCustomEvent(t,e,i)}_customEventsHandler(t){super._customEventsHandler(t),"active-slide"===t.type&&this._updateActiveSlide(t.detail.mediaId)}updated(t){super.updated(t),t.has("currentMediaId")&&t.get("currentMediaId")&&this._updateActiveSlide(this.currentMediaId)}gridClasses(){const t=super.gridClasses();return t["slider--selectable"]=!0,t}};(0,o.C)([(0,s.M)({reflect:!0})],p.prototype,"currentMediaId",void 0),(0,o.C)([(0,s.M)({state:!0})],p.prototype,"contentType",void 0),(0,o.C)([(0,s.M)({state:!0,type:Boolean})],p.prototype,"desktopSlider",void 0),(0,o.C)([(0,s.M)({state:!0,type:Boolean})],p.prototype,"mobileSlider",void 0),p=(0,o.C)([(0,r.E)(`${h}-thumbnail-slider`)],p)},1682(t,e,i){var o=i(8472),r=i(2618),s=i(1145),a=i(3720),n=i(6505),l=i(9563),d=i(8698),c=i(9924),u=i(328),m=i(2609);const{prefix:h}=d.W;let p=class extends r.WF{constructor(){super(...arguments),this.align="stretch",this.justify="start"}stackStyles(){let t={};return void 0!==this.spacing&&(t={...t,"--umg-space-grid-vertical-desktop":Number(this.spacing)/16+"rem"}),void 0!==this.mobileSpacing?t={...t,"--umg-space-grid-vertical-mobile":Number(this.mobileSpacing)/16+"rem"}:void 0!==this.spacing&&(t={...t,"--umg-space-grid-vertical-mobile":Number(this.spacing)/16+"rem"}),t}stackClasses(){const t={};return t["group-justify--"+this.justify]=!0,t["group-align--"+this.align]=!0,this.mobileJustify?t["group-mobile-justify--"+this.mobileJustify]=!0:t["group-mobile-justify--"+this.justify]=!0,this.mobileAlign?t["group-mobile-align--"+this.mobileAlign]=!0:t["group-mobile-align--"+this.align]=!0,t}render(){return r.qy` 6742 <div 6743 part="vertical-stack" 6744 class="vertical-stack${(0,a.H)(this.stackClasses())}" 6745 style="${(0,s.W)(this.stackStyles())}" 6746 > 6747 <slot></slot> 6748 </div> 6749 `}};p.styles=(0,m.Z)([c.S,r.AH` 6750 :host, 6751 :host([height=fill]) { 6752 display: block; 6753 height: 100%; 6754 } 6755 :host([height=fit-content]) { 6756 height: fit-content; 6757 } 6758 :host([height=auto]) { 6759 height: auto; 6760 } 6761 :host { 6762 width: 100%; 6763 } 6764 ::slotted(*) { 6765 flex-shrink: 1; 6766 height: auto; 6767 } 6768 6769 .vertical-stack { 6770 display: flex; 6771 flex-direction: column; 6772 height: 100%; 6773 } 6774 @media screen and (min-width: 48.06rem) { 6775 .vertical-stack { 6776 gap: var(--umg-space-grid-vertical-desktop, 1rem); 6777 } 6778 } 6779 @media screen and (max-width: 48rem) { 6780 .vertical-stack { 6781 gap: var(--umg-space-grid-vertical-mobile, 1rem); 6782 } 6783 } 6784 6785 .vertical-stack.group-justify--stretch ::slotted(*) { 6786 flex-grow: 1; 6787 flex-shrink: 0; 6788 } 6789 6790 .vertical-stack.group-align--stretch ::slotted(*) { 6791 display: block; 6792 width: 100%; 6793 } 6794 `,u.rw,u.Oh,u.jt,u.yw]),(0,o.C)([(0,l.M)()],p.prototype,"spacing",void 0),(0,o.C)([(0,l.M)()],p.prototype,"mobileSpacing",void 0),(0,o.C)([(0,l.M)()],p.prototype,"align",void 0),(0,o.C)([(0,l.M)()],p.prototype,"justify",void 0),(0,o.C)([(0,l.M)()],p.prototype,"mobileAlign",void 0),(0,o.C)([(0,l.M)()],p.prototype,"mobileJustify",void 0),p=(0,o.C)([(0,n.E)(`${h}-vertical-stack`)],p)},306(t,e,i){var o=i(8472),r=i(2618),s=i(6505),a=i(9563),n=i(7621),l=i(3720),d=i(31),c=i(9924),u=i(4379),m=i(8698),h=i(2609);const{prefix:p}=m.W;let g=class extends r.WF{constructor(){super(),this.sources=[],this.posterSource=void 0,this.width=100,this.height=100,this.fit="adapt",this.inBackgroun
6794d=!1,this.autoplay=!0,this.muted=!0,this.loop=!1,this.controls=!1,this._hasPlayed=!1,this.initialise()}containerClasses(){const t={};return t["image-fit--"+this.fit]=!0,t}async initialise(){await this.updateComplete,this._hasPlayed||(this._videoElement?.play(),this._hasPlayed=!0)}handleFirstPlay(){this._hasPlayed||(this._hasPlayed=!0)}videoType(){return this.inBackground?r.qy` 6795 <video 6796 width="${this.width}" 6797 height="${this.height}" 6798 playsinline 6799 autoplay 6800 loop 6801 muted 6802 @play=${this.handleFirstPlay} 6803 > 6804 ${this.sources.map(t=>r.qy` 6805 <source 6806 .src="${t.src}" 6807 .type="video/${t.type}" 6808 width="${this.width}" 6809 height="${this.height}" 6810 > 6811 </source> 6812 `)} 6813 </video> 6814 `:r.qy` 6815 <video 6816 part="video" 6817 width="${this.width}" 6818 height="${this.height}" 6819 poster="${(0,d.J)(this.posterSource)}" 6820 ?controls="${this.controls}" 6821 ?autoplay="${this.autoplay}" 6822 ?loop="${this.loop}" 6823 ?muted="${this.muted}" 6824 @play=${this.handleFirstPlay} 6825 > 6826 ${this.sources.map(t=>r.qy` 6827 <source 6828 .src="${t.src}" 6829 .type="video/${t.type}" 6830 width="${this.width}" 6831 height="${this.height}" 6832 > 6833 </source> 6834 `)} 6835 </video> 6836 `}video(){return Array.isArray(this.sources)&&this.sources.length?r.qy` 6837 ${this.videoType()} 6838 `:r.qy` 6839 <div class="placeholder image image--desktop${(0,l.H)(this.containerClasses())}" style="aspect-ratio: ${this.width/this.height}"> 6840 <div class="placeholder-inner"> 6841 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512" fill="currentcolor"> 6842 <path d="M70.5 138.1C31 172.2 16 219.1 16 272c0 52 18.4 91.6 46.9 118.3C91.6 417.2 131.5 432 176 432h8.4c18.2 0 34.8-10.3 42.9-26.5l23.2-46.3C257.6 345 272.1 336 288 336s30.4 9 37.5 23.2l23.2 46.3c8.1 16.3 24.8 26.5 42.9 26.5H400c44.5 0 84.4-14.8 113.1-41.7C541.6 363.6 560 324 560 272c0-52.9-15-99.8-54.5-133.9C465.6 103.6 398.1 80 288 80s-177.6 23.6-217.5 58.1zM0 272C0 160 64 64 288 64s288 96 288 208s-80 176-176 176h-8.4c-24.2 0-46.4-13.7-57.2-35.4l-23.2-46.3c-4.4-8.8-13.3-14.3-23.2-14.3s-18.8 5.5-23.2 14.3l-23.2 46.3c-10.8 21.7-33 35.4-57.2 35.4H176C80 448 0 384 0 272zm160 32a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm0-112a64 64 0 1 1 0 128 64 64 0 1 1 0-128zm304 64a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm-112 0a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/> 6843 </svg> 6844 </div> 6845 </div> 6846 `}render(){return r.qy` 6847 <div 6848 part="video-container" 6849 class="video-container${(0,l.H)(this.containerClasses())}" 6850 > 6851 ${this.video()} 6852 </div> 6853 `}};g.styles=(0,h.Z)([c.S,u.o,r.AH` 6854 :host { 6855 display: block; 6856 } 6857 :host([fit=cover]), 6858 :host([fit=contain]) { 6859 height: 100%; 6860 } 6861 6862 .video-container.image-fit--cover, 6863 .video-container.image-fit--contain { 6864 height: 100%; 6865 position: relative; 6866 } 6867 6868 .image-fit--cover video, 6869 .image-fit--contain video { 6870 position: absolute; 6871 height: 100%; 6872 width: 100%; 6873 } 6874 6875 video, .image { 6876 display: block; 6877 height: auto; 6878 width: 100%; 6879 } 6880 6881 /* Image fit */ 6882 .image-fit--cover video { 6883 object-fit: cover; 6884 } 6885 .image-fit--contain video { 6886 object-fit: contain; 6887 } 6888 `]),(0,o.C)([(0,a.M)({type:Array})],g.prototype,"sources",void 0),(0,o.C)([(0,a.M)()],g.prototype,"posterSource",void 0),(0,o.C)([(0,a.M)({type:Number})],g.prototype,"width",void 0),(0,o.C)([(0,a.M)({type:Number})],g.prototype,"height",void 0),(0,o.C)([(0,a.M)({type:String})],g.prototype,"fit",void 0),(0,o.C)([(0,a.M)({type:Boolean}
6888)],g.prototype,"inBackground",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"autoplay",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"muted",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"loop",void 0),(0,o.C)([(0,a.M)({type:Boolean})],g.prototype,"controls",void 0),(0,o.C)([(0,n.wk)()],g.prototype,"_hasPlayed",void 0),(0,o.C)([(0,n.P)("video")],g.prototype,"_videoElement",void 0),g=(0,o.C)([(0,s.E)(`${p}-video`)],g)},8472(t,e,i){function o(t,e,i,o){var r,s=arguments.length,a=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var n=t.length-1;n>=0;n--)(r=t[n])&&(a=(s<3?r(a):s>3?r(e,i,a):r(e,i))||a);return s>3&&a&&Object.defineProperty(e,i,a),a}i.d(e,{C:()=>o}),"function"==typeof SuppressedError&&SuppressedError},2609(t,e,i){i.d(e,{Z:()=>r});var o=i(8698);function r(t){const e=function(){const t=o.W.globalConstructedStyleSheet;if(void 0!==window.constructibleStyleSheets&&void 0!==window.constructibleStyleSheets[t])return window.constructibleStyleSheets[t]}(),i=Array.isArray(t)?t:[t];return e&&i.push(e),i}},8698(t,e,i){i.d(e,["W",0,{prefix:"umg",globalConstructedStyleSheet:"umgtheme"}])},6093(t,e,i){function o(t,e){let i=0;return function(...o){clearTimeout(i),i=setTimeout(()=>t.apply(this,o),e)}}i.d(e,{s:()=>o})},9061(t,e,i){function o(t,e){return!!t.target&&(Array.isArray(e)&&e.length>1?e.some(e=>t.target.getAttribute("name")===e):!!e&&t.target.getAttribute("name")===e)}i.d(e,{Y:()=>o})},9924(t,e,i){const o=i(2618).AH` 6889 6890 /* Box sizing */ 6891 *, *:before, *:after { 6892 box-sizing: border-box; 6893 } 6894 6895 /* Font family type groups */ 6896 h1,h2,h3,h4,h5,h6 { 6897 font-family: var(--umg-font-heading-family, 'Roboto Serif', Times, 'Times New Roman', Georgia, serif); 6898 } 6899 6900 p { 6901 font-family: var(--umg-font-body-family, Roboto, Arial, Helvetica, sans-serif); 6902 } 6903 6904 /* Hidden elements */ 6905 *[hidden="true" i] { display: none } 6906 6907 .visually-hidden { 6908 position: absolute !important; 6909 overflow: hidden; 6910 width: 1px; 6911 height: 1px; 6912 margin: -1px; 6913 padding: 0; 6914 border: 0; 6915 clip: rect(0 0 0 0); 6916 word-wrap: normal !important; 6917 } 6918 6919 /* Browser native features */ 6920 summary { 6921 -webkit-tap-highlight-color: transparent; 6922 } 6923 6924 /* Accessibilty states */ 6925 *:focus-visible:not(umg-button-icon), .focus-visible { 6926 outline: 0.125rem solid rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b / 0.5); 6927 outline-offset: 0.1875rem; 6928 box-shadow: 6929 0 0 0 0.1875rem rgb(from var(--umg-color-base-background, rgb(255,255,255)) r g b / 1), 6930 0 0 0 0.3125rem 0.25rem rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b / 0.3); 6931 } 6932`;i.d(e,["S",0,o])},3023(t,e,i){const o=i(2618).AH` 6933 6934 /* Grid layout */ 6935 .grid { 6936 display: flex; 6937 flex-wrap: wrap; 6938 row-gap: var(--umg-space-grid-vertical-mobile, 1rem); 6939 column-gap: var(--umg-space-grid-horizontal-mobile, 1rem); 6940 list-style: none; 6941 margin: 0; 6942 padding: 0; 6943 } 6944 @media screen and (min-width: 48.06rem) { 6945 .grid { 6946 row-gap: var(--umg-space-grid-vertical-desktop, 1.5rem); 6947 column-gap: var(--umg-space-grid-horizontal-desktop, 1.5rem); 6948 } 6949 } 6950 6951 /* Grid */ 6952 /* Default */ 6953 /* grid..grid--columns class for grids with non-slotted grid items */ 6954 .grid:not(.grid--columns) ::slotted(*), 6955 .grid > * { 6956 width: calc(25% - var(--umg-space-grid-horizontal-mobile, 1rem) * 3 / 4); 6957 flex-grow: 0; 6958 flex-shrink: 0; 6959 } 6960 6961 .grid.grid--gapless { 6962 gap: 0; 6963 } 6964
6965 .grid:not(.grid--columns).grid--fill ::slotted(*), 6966 .grid.grid--fill > * { 6967 flex-grow: 1; 6968 } 6969 6970 /* Mobile by class */ 6971 @media screen and (max-width: 30rem) { 6972 .grid--1-col-tablet-down:not(.grid--columns) ::slotted(*), 6973 .grid--1-col-tablet-down > * { 6974 width: 100%; 6975 } 6976 .grid--2-col-tablet-down:not(.grid--columns) ::slotted(*), 6977 .grid--2-col-tablet-down > * { 6978 width: calc( 50% - var(--umg-space-grid-horizontal-mobile, 1rem) / 2 ); 6979 } 6980 } 6981 6982 /* Tablet portrait by class */ 6983 @media screen and (min-width: 30.06rem) and (max-width: 48rem) { 6984 .grid--4-col-tablet:not(.grid--columns) ::slotted(*), 6985 .grid--4-col-tablet > * { 6986 width: calc(25% - var(--umg-space-grid-horizontal-mobile, 1rem) * 3 / 4); 6987 } 6988 .grid--3-col-tablet:not(.grid--columns) ::slotted(*), 6989 .grid--3-col-tablet > * { 6990 width: calc(33.33% - var(--umg-space-grid-horizontal-mobile, 1rem) * 2 / 3); 6991 } 6992 .grid--2-col-tablet:not(.grid--columns) ::slotted(*), 6993 .grid--2-col-tablet > * { 6994 width: calc(50% - var(--umg-space-grid-horizontal-mobile, 1rem) / 2); 6995 } 6996 .grid--1-col-tablet:not(.grid--columns) ::slotted(*), 6997 .grid--1-col-tablet > * { 6998 width: 100%; 6999 } 7000 } 7001 7002 /* Tablet landscape by class */ 7003 @media screen and (min-width: 48.06rem) and (max-width: 64rem) { 7004 .grid--4-col-tablet:not(.grid--columns) ::slotted(*), 7005 .grid--4-col-tablet > * { 7006 width: calc(25% - var(--umg-space-grid-horizontal-desktop, 1.5rem) * 3 / 4); 7007 } 7008 .grid--3-col-tablet:not(.grid--columns) ::slotted(*), 7009 .grid--3-col-tablet > * { 7010 width: calc(33.33% - var(--umg-space-grid-horizontal-desktop, 1.5rem) * 2 / 3); 7011 } 7012 .grid--2-col-tablet:not(.grid--columns) ::slotted(*), 7013 .grid--2-col-tablet > * { 7014 width: calc(50% - var(--umg-space-grid-horizontal-desktop, 1.5rem) / 2); 7015 } 7016 .grid--1-col-tablet:not(.grid--columns) ::slotted(*), 7017 .grid--1-col-tablet > * { 7018 width: 100%; 7019 } 7020 } 7021 7022 /* Desktop by variables or class */ 7023 @media screen and (min-width: 64.06rem) {
7024 .grid:not(.grid--columns) ::slotted(*), 7025 .grid > * { 7026 width: calc( 7027 var(--umg-grid-desktop-columns-width, 25%) 7028 - var(--umg-space-grid-horizontal-desktop, 1.5rem) 7029 * var(--umg-grid-desktop-gaps, 3) 7030 / var(--umg-grid-desktop-columns, 4) 7031 ); 7032 } 7033 .grid--2-col-desktop:not(.grid--columns) ::slotted(*), 7034 .grid--2-col-desktop > * { 7035 width: calc(50% - var(--umg-space-grid-horizontal-desktop, 1.5rem) / 2); 7036 } 7037 } 7038`;i.d(e,["V",0,o])},328(t,e,i){var o=i(2618);const r=o.AH` 7039 .group-spacing--none { 7040 gap: var(--umg-space-group, var(--umg-space-gap-none, var(--umg-space-0, 0rem))); 7041 } 7042 .group-spacing--compact { 7043 gap: var(--umg-space-group, var(--umg-space-gap-compact, var(--umg-space-8, 0.5rem))); 7044 } 7045 .group-spacing--normal { 7046 gap: var(--umg-space-group, var(--umg-space-gap-normal, var(--umg-space-16, 1rem))); 7047 } 7048 .group-spacing--loose { 7049 gap: var(--umg-space-group, var(--umg-space-gap-loose, var(--umg-space-24, 1.5rem))); 7050 } 7051 .group-spacing--spread { 7052 justify-content: space-between; 7053 } 7054 .group-spacing--wrap { 7055 flex-direction: column; 7056 } 7057 7058 @media only screen and (max-width: 48rem) { 7059 .group--wrap-mobile-only { 7060 flex-direction: column; 7061 } 7062 } 7063`,s=o.AH` 7064 @media screen and (min-width: 48.06rem) { 7065 .group-justify--start { 7066 justify-content: start; 7067 } 7068 .group-justify--center { 7069 justify-content: center; 7070 } 7071 .group-justify--end { 7072 justify-content: end; 7073 } 7074 .group-justify--space-evenly { 7075 justify-content: space-evenly; 7076 } 7077 .group-justify--space-between { 7078 justify-content: space-between; 7079 } 7080 .group-justify--space-around { 7081 justify-content: space-around; 7082 } 7083 .group-justify--stretch { 7084 justify-content: stretch; 7085 } 7086 } 7087`,a=o.AH` 7088 @media screen and (max-width: 48rem) { 7089 .group-mobile-justify--start { 7090 justify-content: start; 7091 } 7092 .group-mobile-justify--center { 7093 justify-content: center; 7094 } 7095 .group-mobile-justify--end { 7096 justify-content: end; 7097 } 7098 .group-mobile-justify--space-evenly { 7099 justify-content: space-evenly; 7100 } 7101 .group-mobile-justify--space-between { 7102 justify-content: space-between; 7103 } 7104 .group-mobile-justify--space-around { 7105 justify-content: space-around; 7106 } 7107 .group-mobile-justify--stretch { 7108 justify-content: stretch; 7109 } 7110 } 7111`,n=o.AH` 7112 @media screen and (min-width: 48.06rem) { 7113 .group-align--start { 7114 align-items: start; 7115 } 7116 .group-align--center { 7117 align-items: center; 7118 } 7119 .group-align--end { 7120 align-items: end; 7121 } 7122 .group-align--baseline { 7123 align-items: baseline; 7124 } 7125 .group-align--stretch { 7126 align-items: stretch; 7127 } 7128 } 7129`,l=o.AH` 7130 @media screen and (max-width: 48rem) { 7131 .group-mobile-align--start { 7132 align-items: start; 7133 } 7134 .group-mobile-align--center { 7135 align-items: center; 7136 } 7137 .group-mobile-align--end { 7138 align-items: end; 7139 } 7140 .group-mobile-align--baseline { 7141 align-items: baseline; 7142 } 7143 .group-mobile-align--stretch { 7144 align-items: stretch; 7145 } 7146 } 7147`;i.d(e,["Oh",0,a,"Xv",0,r,"jt",0,n,"rw",0,l,"yw",0,s])},5846(t,e,i){function o(t){return"xsmall"===t?"var(--umg-font-body-size-xs, 0.5rem)":"small"===t?"var(--umg-font-body-size-sm, 0.875rem)":"medium"===t?"var(--umg-font-body-size-md, 1rem)":"large"===t?"var(--umg-font-body-size-lg, 1.25rem)":"xlarge"===t?"var(--umg-font-body-size-xl, 1.5rem)":"2xlarge"===t?"var(--umg-font-body-size-2xl, 1.75rem)":"3xlarge"===t?"var(--umg-font-body-size-3xl, 2rem)":"4xlarge"===t?"var(--umg-font-body-size-4xl, 3rem)":"5xlarge"===t?"var(--umg-font-body-size-5xl, 4rem)":void 0}i.d(e,{R:()=>o})},4379(t,e,i){const o=i(2618).AH` 7148 .placeholder { 7149 height: 100%; 7150 width: 100%; 7151 } 7152 .placeholder-inner { 7153 display: flex; 7154 justify-content: center; 7155 align-items: center; 7156 background-color: var(--umg-color-skeleton-background, rgb(230, 230, 230)); 7157 height: 100%; 7158 width: 100%; 7159 } 7160 .placeholder .icon { 7161 display: block; 7162 height: 40%; 7163 width: 40%; 7164 color: var(--umg-color-skeleton-text, var(--umg-color-base-text, rgb(180,180,180,))); 7165 } 7166 7167 @supports (color: rgb(from white r g b)) { 7168 .placeholder-inner { 7169 background-color: rgb(from var(--umg-color-skeleton-background, rgb(230, 230, 230)) r g b / alpha); 7170 } 7171 .placeholder .icon { 7172 color: rgb(from var(--umg-color-skeleton-text, var(--umg-color-base-text, rgb(180,180,180))) r g b / alpha); 7173 } 7174 } 7175`;i.d(e,["o",0,o])},7804(t,e,i){i.d(e,{WL:()=>o});class o{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)}}i.d(e,["OA",0,{ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},"u$",0,t=>(...e)=>({_$litDirective$:t,values:e})])},6752(t,e,i){const o=globalThis,r=t=>t,s=o.trustedTypes,a=s?s.createPolicy("lit-html",{createHTML:t=>t}):void 0,n="$lit$",l=`lit$${Math.random().toFixed(9).slice(2)}$`,d="?"+l,c=`<${d}>`,u=document,m=()=>u.createComment(""),h=t=>null===t||"object"!=typeof t&&"function"!=typeof t,p=Array.isArray,g=t=>p(t)||"function"==typeof t?.[Symbol.iterator],b="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,y=/--!?>/g,f=/>/g,_=RegExp(`>|${b}(?:([^\\s"'>=/]+)(${b}*=${b}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),w=/'/g,x=/"/g,C=/^(?:script|style|textarea|title)$/i,k=t=>(e,...i)=>({_$litType$:t,strings:e,values:i}
vendor: 7,263 bytes, line 7175
7175),$=k(1),M=k(2),S=(k(3),Symbol.for("lit-noChange")),A=Symbol.for("lit-nothing"),z=new WeakMap,H=u.createTreeWalker(u,129);function E(t,e){if(!p(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==a?a.createHTML(e):e}const P=(t,e)=>{const i=t.length-1,o=[];let r,s=2===e?"<svg>":3===e?"<math>":"",a=v;for(let e=0;e<i;e++){const i=t[e];let d,u,m=-1,h=0;for(;h<i.length&&(a.lastIndex=h,u=a.exec(i),null!==u);)h=a.lastIndex,a===v?"!--"===u[1]?a=y:void 0!==u[1]?a=f:void 0!==u[2]?(C.test(u[2])&&(r=RegExp("</"+u[2],"g")),a=_):void 0!==u[3]&&(a=_):a===_?">"===u[0]?(a=r??v,m=-1):void 0===u[1]?m=-2:(m=a.lastIndex-u[2].length,d=u[1],a=void 0===u[3]?_:'"'===u[3]?x:w):a===x||a===w?a=_:a===y||a===f?a=v:(a=_,r=void 0);const p=a===_&&t[e+1].startsWith("/>")?" ":"";s+=a===v?i+c:m>=0?(o.push(d),i.slice(0,m)+n+i.slice(m)+l+p):i+l+(-2===m?e:p)}return[E(t,s+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),o]};class L{constructor({strings:t,_$litType$:e},i){let o;this.parts=[];let r=0,a=0;const c=t.length-1,u=this.parts,[h,p]=P(t,e);if(this.el=L.createElement(h,i),H.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(o=H.nextNode())&&u.length<c;){if(1===o.nodeType){if(o.hasAttributes())for(const t of o.getAttributeNames())if(t.endsWith(n)){const e=p[a++],i=o.getAttribute(t).split(l),s=/([.?@])?(.*)/.exec(e);u.push({type:1,index:r,name:s[2],strings:i,ctor:"."===s[1]?W:"?"===s[1]?O:"@"===s[1]?j:T}),o.removeAttribute(t)}else t.startsWith(l)&&(u.push({type:6,index:r}),o.removeAttribute(t));if(C.test(o.tagName)){const t=o.textContent.split(l),e=t.length-1;if(e>0){o.textContent=s?s.emptyScript:"";for(let i=0;i<e;i++)o.append(t[i],m()),H.nextNode(),u.push({type:2,index:++r});o.append(t[e],m())}}}else if(8===o.nodeType)if(o.data===d)u.push({type:2,index:r});else{let t=-1;for(;-1!==(t=o.data.indexOf(l,t+1));)u.push({type:7,index:r}),t+=l.length-1}r++}}static createElement(t,e){const i=u.createElement("template");return i.innerHTML=t,i}}function B(t,e,i=t,o){if(e===S)return e;let r=void 0!==o?i._$Co?.[o]:i._$Cl;const s=h(e)?void 0:e._$litDirective$;return r?.constructor!==s&&(r?._$AO?.(!1),void 0===s?r=void 0:(r=new s(t),r._$AT(t,i,o)),void 0!==o?(i._$Co??=[])[o]=r:i._$Cl=r),void 0!==r&&(e=B(t,r._$AS(t,e.values),r,o)),e}class I{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:i}=this._$AD,o=(t?.creationScope??u).importNode(e,!0);H.currentNode=o;let r=H.nextNode(),s=0,a=0,n=i[0];for(;void 0!==n;){if(s===n.index){let e;2===n.type?e=new q(r,r.nextSibling,this,t):1===n.type?e=new n.ctor(r,n.name,n.strings,this,t):6===n.type&&(e=new V(r,this,t)),this._$AV.push(e),n=i[++a]}s!==n?.index&&(r=H.nextNode(),s++)}return H.currentNode=u,o}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class q{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,o){this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=B(this,t,e),h(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==S&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):g(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!==A&&h(this._$AH)?this._$AA.nextSibling.data=t:this.T(u.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,o="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=L.createElement(E(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===o)this._$AH.p(e);else{const t=new I(o,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=z.get(t.strings);return void 0===e&&z.set(t.strings,e=new L(t)),e}k(t){p(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,o=0;for(const r of t)o===e.length?e.push(i=new q(this.O(m()),this.O(m()),this,this.options)):i=e[o],i._$AI(r),o++;o<e.length&&(this._$AR(i&&i._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=r(t).nextSibling;r(t).remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class T{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,o,r){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=r,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=A}_$AI(t,e=this,i,o){const r=this.strings;let s=!1;if(void 0===r)t=B(this,t,e,0),s=!h(t)||t!==this._$AH&&t!==S,s&&(this._$AH=t);else{const o=t;let a,n;for(t=r[0],a=0;a<r.length-1;a++)n=B(this,o[i+a],e,a),n===S&&(n=this._$AH[a]),s||=!h(n)||n!==this._$AH[a],n===A?t=A:t!==A&&(t+=(n??"")+r[a+1]),this._$AH[a]=n}s&&!o&&this.j(t)}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class W extends T{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===A?void 0:t}}class O extends T{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A)}}class j extends T{constructor(t,e,i,o,r){super(t,e,i,o,r),this.type=5}_$AI(t,e=this){if((t=B(this,t,e,0)??A)===S)return;const i=this._$AH,o=t===A&&i!==A||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,r=t!==A&&(i===A||o);o&&this.element.removeEventListener(this.name,this,i),r&&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)}}class V{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){B(this,t)}}const N={M:n,P:l,A:d,C:1,L:P,R:I,D:g,V:B,I:q,H:T,N:O,U:j,B:W,F:V},D=o.litHtmlPolyfillSupport;D?.(L,q),(o.litHtmlVersions??=[]).push("3.3.3");i.d(e,["JW",0,M,"XX",0,(t,e,i)=>{const o=i?.renderBefore??e;let r=o._$litPart$;if(void 0===r){const t=i?.renderBefore??null;o._$litPart$=r=new q(e.insertBefore(m(),t),t,void 0,i??{})}return r._$AI(t),r},"c0",0,S,"ge",0,N,"qy",0,$,"s6",0,A])},7621(t,e,i){i.d(e,{MZ:()=>o.M,P:()=>s.P,YG:()=>l,KN:()=>d.K,wk:()=>r.w});var o=i(5694),r=i(4290),s=i(1895),a=i(1762);let n;function l(t){return(e,i)=>(0,a.i)(e,i,{get(){return(this.renderRoot??(n??=document.createDocumentFragment())).querySelectorAll(t)}})}var d=i(1124)},9563(t,e,i){i.d(e,{M:()=>o.M});var o=i(5694)},7509(t,e,i){i.d(e,{w:()=>o.w});var o=i(4290)},3720(t,e,i){i.d(e,{H:()=>s});var o=i(6752),r=i(7804);const s=(0,r.u$)(class extends r.WL{constructor(t){if(super(t),t.type!==r.OA.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter(e=>t[e]).join(" ")+" "}
7175update(t,[e]){if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in e)e[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(e)}const i=t.element.classList;for(const t of this.st)t in e||(i.remove(t),this.st.delete(t));for(const t in e){const o=!!e[t];o===this.st.has(t)||this.nt?.has(t)||(o?(i.add(t),this.st.add(t)):(i.remove(t),this.st.delete(t)))}return o.c0}})},31(t,e,i){i.d(e,{J:()=>r});var o=i(6752);const r=t=>t??o.s6},1145(t,e,i){i.d(e,{W:()=>n});var o=i(6752),r=i(7804);const s="important",a=" !"+s,n=(0,r.u$)(class extends r.WL{constructor(t){if(super(t),t.type!==r.OA.ATTRIBUTE||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,i)=>{const o=t[i];return null==o?e:e+`${i=i.includes("-")?i:i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${o};`},"")}update(t,[e]){const{style:i}=t.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(e)),this.render(e);for(const t of this.ft)null==e[t]&&(this.ft.delete(t),t.includes("-")?i.removeProperty(t):i[t]=null);for(const t in e){const o=e[t];if(null!=o){this.ft.add(t);const e="string"==typeof o&&o.endsWith(a);t.includes("-")||e?i.setProperty(t,e?o.slice(0,-11):o,e?s:""):i[t]=o}}return o.c0}})},2618(t,e,i){i.d(e,{WF:()=>a,AH:()=>o.AH,qy:()=>r.qy,s6:()=>r.s6,JW:()=>r.JW});var o=i(842),r=i(6752);const s=globalThis;class a extends o.mN{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 e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=(0,r.XX)(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return r.c0}}a._$litElement$=!0,a.finalized=!0,s.litElementHydrateSupport?.({LitElement:a});const n=s.litElementPolyfillSupport;n?.({LitElement:a});(s.litElementVersions??=[]).push("4.2.2")}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.